@layer fonts, colors, reset, spacing, form, hero, buttons, benefitsSection, contactSection, faq, finalCTA;

@layer reset {
  *, *::before, *::after {
  box-sizing: border-box;
  }

  * {
    line-height: calc(1em + 0.5rem);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
      scroll-behavior: smooth;
    }
  }

  body {
    margin: 0;
  }

  img {
    max-width: 100%;
    display: block;
  }

  h1, h2, h3 {
    margin: 0;
    font-family: 'Cormorant_Garamond', serif;
    font-weight: 200;
  }

  a {
    text-decoration: none;
  }

  ul {
    margin: 0;
    padding: 0;

    li {
        list-style-type: none;
    }
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  .skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    gap: 0.5rem;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    padding: 1rem;
  }

  .skip-links:focus-within {
    transform: translateY(0);
  }

  .skip-link {
    background-color: var(--primary);
    color: var(--primary-ultra-light);
    padding: 0.5rem 1rem;
    text-decoration: none;
  }

  a:focus-visible, button:focus-visible {
    outline: 0.27rem solid var(--accent);
    outline-offset: 0.37rem;
  }

}

@layer colors {
  :root {
    --primary: hsl(228, 55%, 38%);
    --primary-light: hsl(214, 55%, 70%);
    --primary-ultra-light: hsl(214, 55%, 95%);
    --primary-dark: hsl(228, 55%, 17%);
    --accent: hsl(23, 100%, 65%);
    --success: hsl(120, 100%, 35%);
    --error: hsl(0, 100%, 50%);
    --warning: rgb(255, 242, 103);
  }
}

@layer fonts {
  /* Cormorant_Garamond Light Italic */
  @font-face {
    font-family: 'Cormorant_Garamond';
    font-display: swap;
    font-style: italic;
    font-weight: 200;
    src: url('./assets/fonts/CormorantGaramond-LightItalic.ttf') format('ttf');
  }

  /* Inter Normal 400 */
  @font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('./assets/fonts/Inter_18pt-Regular.ttf') format('ttf');
  }

  :root {
    --text-xs: clamp(1.3rem, calc(0.0956022945vw + 1.2694072658rem), 1.4rem);
    --text-s: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem);
    --text-m: clamp(1.7rem, calc(0.1912045889vw + 1.6388145315rem), 1.9rem);
    --text-l: clamp(2.04rem, calc(0.4710325048vw + 1.8892695985rem), 2.5327rem);
    --text-xl: clamp(2.448rem, calc(0.8872744742vw + 2.1640721683rem), 3.3760891rem);
    --text-xxl: clamp(2.9376rem, calc(1.4940026485vw + 2.4595191525rem), 4.5003267703rem);
    --h6: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem);
    --h5: clamp(1.6rem, calc(0.1912045889vw + 1.5388145315rem), 1.8rem);
    --h4: clamp(1.7rem, calc(0.0956022945vw + 1.6694072658rem), 1.8rem);
    --h3: clamp(2.04rem, calc(0.6309751434vw + 1.8380879541rem), 2.7rem);
    --h2: clamp(2.448rem, calc(1.5315487572vw + 1.9579043977rem), 4.05rem);
    --h1: clamp(2.9376rem, calc(2.9994263862vw + 1.9777835564rem), 6.075rem);
  }

  h1, h2, h3, h4, h5, h6 {
    background: -webkit-linear-gradient(45deg, var(--primary-dark), var(--primary), var(--primary), var(--primary), var(--primary-light));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
    text-transform: capitalize;
  }

  h1 {
    font-size: var(--h1);
  }

  h2 {
    font-size: var(--h2);
  }

  h3 {
    font-size: var(--h3);
  }

  p, a, button, span {
    font-size: var(--text-s);
    color: var(--primary-dark);
    font-family: 'Inter', sans-serif;
  }

  .angle-underline{
    background: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    --paint:#ff914d;
    --thickness:.17em;
    --angle:-2deg;
    --overhang:.17em;
    --baseline-gap: -0.0077em;

  position:relative;
  display:inline-block;
  isolation:isolate;   /* creates a new stacking context */
}

.angle-underline::after{
  content:"";
  position:absolute;
  left:calc(-1 * var(--overhang));
  right:calc(-1 * var(--overhang));
  bottom:var(--baseline-gap);
  height:var(--thickness);
  background:var(--paint);
  border-radius:999px;
  transform:rotate(var(--angle));
  transform-origin:50% 100%;
  z-index:-1; /* now safely sits behind the text within the span */
}



.circle-handdrawn-open {
  --ring-color: #ff914d;  /* ring color */
  --tilt: -5deg;          /* tilt angle */
  --pad-x: 0.4em;        /* space left/right */
  --pad-y: 0.03em;        /* space top/bottom */

  position: relative;
  display: inline-block;
  isolation: isolate;  /* ensures it shows with gradient text */
  padding: var(--pad-y) var(--pad-x);
  font-size: inherit;
  font-weight: inherit;
  background: inherit;
  font-family: inherit;
}

.circle-handdrawn-open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: rotate(var(--tilt));
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="17 10 187 79" preserveAspectRatio="none"><path d="M18 50 C30 18 74 8 110 10 S188 22 202 50 C188 80 148 92 110 90 S32 78 18 50" fill="none" stroke="%23ff914d" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="430 15" stroke-dashoffset="8"/></svg>') center / 100% 100% no-repeat;
}


.copyright--text {
    font-size: calc(var(--text-xs) * 0.77);
    color: grey;
}

#currentYear {
  font: inherit;
  color: inherit;
}



}

@layer spacing {
  :root {
    --space-xs: clamp(1.1818408466rem, calc(0.0173605673vw + 1.176285465rem), 1.2rem);
    --space-s: clamp(1.5753938485rem, calc(0.2147286344vw + 1.5066806855rem), 1.8rem);
    --space-m: clamp(2.1rem, calc(0.5736137667vw + 1.9164435946rem), 2.7rem);
    --space-l: clamp(2.7993rem, calc(1.1956978967vw + 2.416676673rem), 4.05rem);
    --space-xl: clamp(3.7314669rem, calc(2.2404714149vw + 3.0145160472rem), 6.075rem);
    --space-xxl: clamp(4.9740453777rem, calc(3.9564575739vw + 3.7079789541rem), 9.1125rem);
    --section-space-xs: clamp(2.3636816931rem, calc(1.1819486681vw + 1.9854581193rem), 3.6rem);
    --section-space-s: clamp(3.1507876969rem, calc(2.1502985689vw + 2.4626921549rem), 5.4rem);
    --section-space-m: clamp(4.2rem, calc(3.7284894837vw + 3.0068833652rem), 8.1rem);
    --section-space-l: clamp(5.5986rem, calc(6.2632887189vw + 3.5943476099rem), 12.15rem);
    --section-space-xl: clamp(7.4629338rem, calc(10.288782218vw + 4.1705234902rem), 18.225rem);
    --section-space-xxl: clamp(9.9480907554rem, calc(16.62467423vw + 4.6281950018rem), 27.3375rem);
    --section-padding-x: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
    --gutter: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
    --radius: 2rem;
    --content-gap: var(--space-l);
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));

  }

  section {
    width: 100%;
    padding-inline: var(--gutter);
    padding-block: var(--space-xxl);
  }

  .container {
    width: 100%;
    max-width: 1366px;
    margin-inline: auto;
  }
}

@layer form {
  input, textarea, button, select, span {
    font: inherit;
  }

  label, legend {
    font-size: var(--text-s);
  }

  ::placeholder {
    padding: 0.5rem;
  }

  input {
    accent-color: var(--primary);
  }

  input:not([type="radio"]) {
    width: 100%;
    border-color: var(--primary-dark);
    border-radius: 0.37rem;
  }

  input:not(:placeholder-shown):valid {
    outline-color: var(--success);
  }

  input:not(:placeholder-shown):invalid {
    outline-color: var(--error);
  }

  input:focus:invalid {
    outline-color: var(--warning);
  }

  label.required, legend.required {
    position: relative;
  }

  label.required::after, legend.required::after {
    content: ' *';
    color: var(--error);
  }

  fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }

  form {
    display: grid;
    gap: var(--space-xs);
  }

  .form-group {
    display: grid;
    gap: calc(var(--space-xs) / 10);
  }

  .contact__form {
    display: grid;
    gap: var(--space-xs);
    background-color: white;
    padding: var(--space-s);
    border-radius: var(--radius);
  }

  .contact__heading {
    font-size: var(--h3);
  }

  .form-two-column {
    grid-template-columns: var(--grid-2);
    display: inherit;
    gap: inherit;
  }

  .formMessage {
    padding-inline: 3rem;
    padding-block: 2rem;
    text-transform: capitalize;
    border-radius: 1rem;
    display: none;
  }

  .formSuccessMessage {
    color: green;
    background-color: rgba(0, 255, 0, 0.167);
    text-transform: capitalize;
  }

  .formErrorMessage {
    color: red;
    background-color: rgba(255, 0, 0, 0.147);
  }
}

@layer hero {
  .hero {
    background-color: var(--primary-ultra-light);
  }

  .hero .container {
    display: grid;
    gap: var(--content-gap);

    @media (min-width: 49em) {
      grid-template-columns: var(--grid-2);
      align-items: center;

    }

    .hero__media-wrapper {
      border-radius: var(--radius);
      transform: rotateZ(3deg);
      border: 0.5rem solid white;
      position: relative;
      transition: transform 1s ease;
      box-shadow: 0 0 2rem var(--primary-light);
    }

    .hero__media-wrapper:hover {
      transform: rotateZ(2deg);
    }
    
    .hero__media-wrapper::before {
      content: '';
      width: calc(5rem + 1.97vw);
      height: calc(0.7rem + 0.27vw);
      background: linear-gradient(70deg, var(--primary), var(--primary), var(--primary-dark));
      position: absolute;
      bottom: 1rem;
      left: -1.7rem;
      border-radius: var(--radius);
      transform: rotateZ(27deg);
      opacity: 0.77;
    }

    .hero__media-wrapper::after {
      content: '';
      position: absolute;
      border: calc(0.3rem + 0.3vw) solid var(--accent);
      top: calc(4rem + 2vw);
      right: -2.7vw;
      width: calc(5rem + 2vw);
      height: calc(5rem + 2vw);
      border-radius: 50%;
      z-index: -1;
    }

    .hero__media-wrapper picture::before {
      content: url("data:image/svg+xml,%3Csvg fill='%23ff914d' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M159.88,175.82h64v64a16,16,0,0,0,16,16h64a16,16,0,0,0,16-16v-64h64a16,16,0,0,0,16-16v-64a16,16,0,0,0-16-16h-64v-64a16,16,0,0,0-16-16h-64a16,16,0,0,0-16,16v64h-64a16,16,0,0,0-16,16v64A16,16,0,0,0,159.88,175.82ZM568.07,336.13a39.91,39.91,0,0,0-55.93-8.47L392.47,415.84H271.86a16,16,0,0,1,0-32H350.1c16,0,30.75-10.87,33.37-26.61a32.06,32.06,0,0,0-31.62-37.38h-160a117.7,117.7,0,0,0-74.12,26.25l-46.5,37.74H15.87a16.11,16.11,0,0,0-16,16v96a16.11,16.11,0,0,0,16,16h347a104.8,104.8,0,0,0,61.7-20.27L559.6,392A40,40,0,0,0,568.07,336.13Z'/%3E%3C/svg%3E");
      position: absolute;
      fill: var(--primary);
      top: -1em;
      left: -1em;
      width: calc(3rem + 2vw);
      height: auto;
    }

    .hero__media-wrapper picture img {
      border-radius: var(--radius);
      transition: transform 1s ease;

      @media (min-width: 49em) {
        aspect-ratio: 1 / 1;
        width: 100%;
        object-fit: cover;
        object-position: 40% center;
        background-repeat: no-repeat;
      }

    }



    .hero__media-wrapper picture::after {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%232c4196'%3E%3Cpath d='M320 64C324.6 64 329.2 65 333.4 66.9L521.8 146.8C543.8 156.1 560.2 177.8 560.1 204C559.6 303.2 518.8 484.7 346.5 567.2C329.8 575.2 310.4 575.2 293.7 567.2C121.3 484.7 80.6 303.2 80.1 204C80 177.8 96.4 156.1 118.4 146.8L306.7 66.9C310.9 65 315.4 64 320 64zM320 130.8L320 508.9C458 442.1 495.1 294.1 496 205.5L320 130.9L320 130.9z'/%3E%3C/svg%3E");
      position: absolute;
      bottom: -2vw;
      right: -1.5svw;
      width: calc(3rem + 1vw);
      height: auto;
    }


  }
}

@layer buttons {

  .cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    @media (min-width: 1366px) {
      flex-direction: row;
    }
  }

  button, .button {
    display: block;
    text-align: center;
    padding-block: 0.75em;
    padding-inline: 1.5em;
    text-decoration: none;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;

    @media (min-width: 49em) {
      min-width: 21rem;
      flex-wrap: wrap;
    }
  }

  .btn--primary {
    background-color: var(--primary);
    color: var(--primary-ultra-light);
    transition: background-color 0.7s ease, border-color 0.5s ease, box-shadow 1s ease;
  }


  .btn--primary:hover, .btn--primary:active, .btn--primary--outline:hover, .btn--primary--outline:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--primary-ultra-light);
    box-shadow: 2px 5px 20px var(--accent);
  }


  .btn--primary--outline {
    background-color: none;
    color: var(--primary);
    transition: background-color 0.7s ease, border-color 0.5s ease, box-shadow 1s ease;
  }

  .button--text {
    font-size: calc(var(--text-xs) / 1.5);
    color: var(--accent);
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 0.37em; 
    transition: color 370ms ease;
  }

  .button--text:hover {
    color: var(--primary);
  }

}

@layer benefitsSection {
  .intro--alpha {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    @media (min-width: 49em) {
      align-items: center;
      text-align: center;
    }
  }

  .heading--accent {
    text-transform: uppercase;
    color: var(--accent);
    font-size: var(--text-xxs);
  }

  .heading--accent-icon {
    display: flex;
    gap: 1ch;
    align-content: center;
    order: -1;
  }

  .benefits .container {
    display: grid;
    gap: var(--content-gap);
  }

  .benefits__container {
    display: inherit;
    gap: var(--content-gap);

    @media (min-width: 49em) {
      grid-template-columns: var(--grid-2);
    }

    @media (min-width: 75em) {
      grid-template-columns: var(--grid-3);
    }
  }

  .benefits__list-item {
    display: inherit;
    background-color: var(--primary-ultra-light);
    border-radius: var(--radius);
    overflow: clip;
    box-shadow: 0 0 0.77rem var(--primary-light);
  }

  .benefits__media-wrapper {
    order: -1;
  }

  .benefits__content-wrapper {
    padding: var(--space-s);
  }

}


@layer contactSection {
  section.contact {
    position: relative;
    padding-block: var(--space-xxl);
  }

  .contact .container {
    display: grid;
    gap: var(--content-gap);
    
    @media (min-width: 62em) {
      grid-template-rows: var(--grid-2);
      grid-template-columns: var(--grid-12);
      min-height: 70svh;
    }  
  }

  .contact__form { 
    @media (min-width: 62em) {
      grid-column: 7 / -1;
    }
  }

  .background-image__wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
  }

  .background-image__wrapper picture img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: top;
  }

  .overlay--primary-dark {
    background-color: var(--primary-dark);
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 30%;
  }
}

@layer faq {
  .faq .container {
    display: grid;
    gap: var(--content-gap);
  }

  .faq__wrapper {
    display: grid;
    gap: var(--space-s);
  }

  .faq__question-plus-icon {
    display: flex;
    gap: 2ch;
    align-items: center;
  }

  .faq__question-icon {
    border: 2px solid var(--primary-ultra-light);
    padding: 7px;
    border-radius: 7px;
    order: -1;
  }

  .faq__question-heading {
    font-size: var(--h4);
    text-transform: none;
  }

  details.faq { 
    border: 2px solid var(--primary-ultra-light); 
    border-radius: var(--radius); 
    background: white; 
  }

  details.faq[open] { 
    background: var(--primary-ultra-light); 
  }

  .faq__question { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:var(--space-s); 
    cursor:pointer; 
    list-style:none; 
  }

  .faq__question::-webkit-details-marker { 
    display:none; 
  }

  .faq__answer { 
    padding: var(--space-s); 
    padding-top: 0; 
  }

  details.faq .faq__accordion-icon { 
    transition: transform 0.3s ease; 
  }

  details.faq[open] .faq__accordion-icon { 
    transform: rotate(180deg); 
  }

}

@layer finalCTA {
  section.final-cta {
    background-image: url('./assets/images/HISICTA-banner-background-png.webp');
    background-size: cover;
  }

  .final-cta h2 {
    background: var(--primary-ultra-light);
    background-clip: text;
    -webkit-text-fill-color: none;
  }

  .final-cta p {
    color: var(--primary-ultra-light);
  }

  .btn--primary-color-background {
    background-color: var(--primary-ultra-light);
    color: var(--primary);
  }

  .btn--primary-color-background:hover, .btn--primary-color-background:active {
    background-color: var(--accent);
    color: var(--primary-ultra-light);
  }

  .btn--primary-color-outline {
    color: var(--primary-ultra-light);
    border-color: var(--primary-ultra-light);
  }

  .btn--primary-color-outline:hover {
    border-color: var(--accent);
  }
}