@layer reset,global,components,page,utilities;

@import "reset.css" layer(reset);

/* ADDITIONAL RESET STYLES */
@layer reset {
  button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
  }
}

@layer global {

  /** GLOBAL CSS PROPERTIES **/

  :root {
    --color-white: hsl(0, 0%, 100%);
    --color-black: hsl(0, 0%, 0%);
    --color-gray: hsl(0, 0%, 63%);
    --color-gray-semi-dark: hsl(0, 0%, 30%);
    --color-gray-dark: hsl(0, 0%, 20%);
    --color-gray-light: hsl(0, 0%, 96%);
    --color-gray-lighter: hsl(0, 0%, 98%);
    --color-blue: hsl(205, 100%, 36%);
    --color-blue-light: hsl(205, 100%, 53%);
    --color-blue-lighter: hsl(205, 100%, 80%);
    --color-yellow: hsl(58, 100%, 50%);
    --color-green: hsl(137, 62%, 32%);
    --color-red: hsl(0, 73%, 50%);
    --color-red-light: hsl(0, 73%, 85%);

    --color-canvas: var(--color-white);
    --color-ink: var(--color-black);
    --color-primary: var(--color-blue);
    --color-primary-light: var(--color-blue-light);
    --color-accent: var(--color-yellow);
    --color-neutral: var(--color-gray);
    --color-neutral-light: var(--color-gray-light);
    --color-neutral-semi-dark: var(--color-gray-semi-dark);
    --color-neutral-lighter: var(--color-gray-lighter);
    --color-neutral-dark: var(--color-gray-dark);
    --color-positive: var(--color-green);
    --color-negative: var(--color-red);
    --color-negative-light: var(--color-red-light);


    --font-family-display: var(--wp--preset--font-family--castoro-titling), serif;
    --font-family-body: var(--wp--preset--font-family--inter), sans-serif;
    --font-family-ui: var(--wp--preset--font-family--inter), sans-serif;
    
    --measure: 66ch;
    --section-padding: 3.5rem;

    /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);

    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
  }

 /** GLOBAL LAYOUT GRID **/

    /* https://layout-breakouts-builder.vercel.app/ */

    .page-layout > *,
    .full-width > *,
    .term-description > * {
      grid-column: content;
    }
    .page-layout,
    .full-width,
    .term-description {
      --minimum-content-padding: clamp(1rem, 0.6522rem + 1.7391vw, 2rem);

      /** TRACK WIDTHS **/
      --full-max-width: 1fr;
      --content-max-width: 76rem;

      /** TRACK SIZES **/
      --full: minmax(var(--minimum-content-padding), 1fr);
      --content: min(
        var(--content-max-width),
        100% - var(--minimum-content-padding) * 2
      );

      display: grid;
      grid-template-columns:
        [full-start]
        var(--full)
        [content-start]
        var(--content)
        [content-end]
        var(--full)
        [full-end];
    }

    /** CLASSES **/
    .full {
      grid-column: full;
    }
    .full-start {
      grid-column-start: full-start;
    }
    .full-end {
      grid-column-end: full-end;
    }

    .content {
      grid-column: content;
    }
    .content-start {
      grid-column-start: content-start;
    }
    .content-end {
      grid-column-end: content-end;
    }

    .full-width {
      grid-column: full;
    }
    .full-content,
    .full-content-nopad {
      grid-column: full;
    }
    .full-content {
      padding-inline: var(--minimum-content-padding);
    }

/** ANCHOR GLOBAL COMPONENTS **/

  body {
    font-family: var(--font-family-body);
    font-size: var(--step--1);
    background-color: var(--color-canvas);
    color: var(--color-ink);
  }

  #page-title {
    --font-size: var(--step-5);
    font-family: var(--font-family-display);
    font-size: var(--font-size);
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
    text-wrap: balance;

    &:has(.banner__subtitle) {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }

  .title {
    font-size: var(--step-1);
    font-weight: 300;
    line-height: 1.2;
    text-wrap: balance;
  }

  .eyebrow {
    font-size: var(--step--2);
    letter-spacing: 0.075em;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
  }

  .title-group:has(svg) {
    gap: 1.3125rem;
    text-align: center; 
    line-height: 1.5;
    font-weight: 400;
    color: #000000CC;
  }
  

  .title-group {
    display: grid;
    justify-items: center;
    gap: 1rem;
    
    #page-title {
      width: fit-content;
      max-width: min(min(25ch, 45rem), 100cqi);
    }
  }

  .link-styled {
    color: inherit !important;
    text-decoration: underline;
    text-underline-offset: -0.1em;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 0.2em;
    text-decoration-color: var(--color-blue-lighter);
  }

  .btn {
    padding-inline: 1.2em;
    padding-block: 0.95em;
    font-size: var(--step--2);
    font-family: var(--font-family-ui);
    display: inline-block;
    width: fit-content;
    appearance: none;
    line-height: 1;
    text-decoration: none;
    border: none;
    font-weight: 500;
    border: 0.075rem solid var(--color-primary);
  }

  .btn--default {
    background-color: var(--color-blue);
    color: var(--color-white);
  }

  .btn--yellow {
    background-color: var(--color-yellow);
    color: var(--color-black);
  }

  .btn--accent {
    background-color: var(--color-yellow);
    color: var(--color-black);
  }

  .btn--lg {
    font-size: var(--step--1);
    padding-block: 1em;
    padding-inline: 1.25em;
    font-weight: 500;
  }

  .btn--float {
    position: fixed;
    padding-block: 1.25em;
    border-radius: 2.5em;
    filter: drop-shadow(0 0.25rem 1rem rgba(0, 0, 0, 0.10));
    z-index: 10;
    inset-inline-start: 50%;
    inset-block-end: calc(env(safe-area-inset-bottom, 1.4rem) + 1.4rem);
    transform: translateX(-50%);
  }

  .banner {
    --overlay-opacity: 0.15;
    display: grid;
    color: var(--color-white);
    overflow: hidden;
    position: relative;
    background-color: var(--color-blue);
    &::before {
      --opacity: var(--overlay-opacity);
      content: "";
      grid-column: full;
      grid-row: 1;
      background-color: var(--color-black);
      height: 100%;
      mix-blend-mode: multiply;
      opacity: var(--opacity);
      position: relative;
      z-index: 1;
    }

    .banner__content {
      --padding-block: var(--space-xl);
      aspect-ratio: 16/8;
      container-type: inline-size;
      padding-block: var(--padding-block);
      gap: var(--space-xs);
      grid-row: 1;
      z-index: 2;
      display: grid;
      place-content: center;
      justify-items: center;
      text-align: center;
      position: relative;
      @media (orientation: portrait) {
        aspect-ratio: 1/0.75;
      }
      @media (orientation: portrait) and (aspect-ratio <= 1/1.5) {
        aspect-ratio: 1/1.5;
      }
    }

    .title-group {
      --text-overlay-blur: 1.5rem;
      position: relative;
      overflow: visible;
      &:has(#page-title) {
        --text-overlay-blur: 4.5rem;
      }
      &::before {
        --opacity: 0.4;
        filter: blur(var(--text-overlay-blur));
        opacity: var(--opacity);
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-black);
        mix-blend-mode: multiply;
        z-index: -1;
      }
    }

    .banner__subtitle {
      font-size: var(--step-0);
      text-transform: capitalize;
      font-weight: 300;
      line-height: 1.2;
      display: block;
    }

    img {
      position: absolute;
      inset: 0;
      block-size: 100%;
      inline-size: 100%;
      grid-row: 1;
      z-index: 0;
      object-fit: cover;
      object-position: var(--focus-x, 50%) var(--focus-y, 50%);
    }

    &.banner--contain {
      --image-max-width: 90rem;
      --mask-color: var(--color-blue-light);
      img {
        width: min(100%, var(--image-max-width));
        inset-inline-start: 50%;
        transform: translateX(-50%);
      }
      &::after {
        content: "";
        grid-column: full;
        grid-row: 1;
        background-color: var(--mask-color);
        opacity: 1;
        position: relative;
        z-index: 1;
        mask-image: radial-gradient(
          circle calc(var(--image-max-width) / 2),
          transparent 0%,
          transparent 80%,
          black 100%
        );
      }
    }

  }

  .text-section {
    padding-block: var(--section-padding);
    display: grid;
    gap: var(--space-s);
    text-align: center;
    justify-items: center;
  }

  .text-section__main {
    max-width: var(--measure);
  }

  .footer-banner {
    background: radial-gradient(50% 50% at 50% 50%, #3d649d 0%, #283b58 100%), #283B59;
    padding-bottom: var(--space-xl-2xl);
  
    .banner__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
    
      img {
        max-width: 130%;
        object-fit: contain;
      }
  
      .title-group {
        color: #FFF;
      }
  
      .title.banner__subtitle {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-s);
        letter-spacing: .02rem;
        text-align: center;
      }
    }
  }
  
  @media( width <= 730px) {
    .footer-banner {
      --minimum-content-padding: 0;
    }
  }

  .woocommerce-breadcrumb span:not(.breadcrumb-delimiter),
  .woocommerce-breadcrumb a {
    align-items: center;
    font-size: .875rem;
    font-weight: 400;
    gap: .33rem;
    background-color: var(--color-gray-light);
    width: fit-content;
    border-radius: 3.125rem;
    padding: .125rem .375rem;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    line-height: .9625;
    letter-spacing: 0.05em;
  }

  .woocommerce-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    row-gap: .5rem;
  }
  
  .breadcrumb-delimiter {
    margin: 0 .5rem;
  }

  nav {
    /* Menu item with link="https://wa.me/message/CEXEFWCR4PDEO1" class="whatsapp" and link text='<span>Whatsapp</span>' */
    .whatsapp a {
      display: flex;
      align-items: center;
      gap: 0.5em;
      width: fit-content;
      border-radius: 50%;

      :where(#main-nav) & {
        justify-content: end;
        margin-inline-start: auto;
      }
      @media( width < 1024px) {
        background-color: #5BC74F;
        width: 2.5em;
        aspect-ratio: 1;
        justify-content: center;
      }
    }
    .whatsapp span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .whatsapp a::before {
      content: '';
      display: inline-block;
      width: 1.5em;
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      background-image: url('/app/themes/tours/assets/images/whatsapp.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      @media (width < 1024px) {
        filter: invert();
      }

   
    }
  }

  .more-btn-wrap {
    padding-block-end: var(--section-padding); 
    display: grid;
    justify-items: center;
  }
  .woocommerce-error {
    list-style-type: none;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    
    li {
      background-color: var(--color-negative-light);
      padding: var(--space-xs);
      border-inline-start: 0.2rem solid var(--color-negative);
    }
  }

} /** ANCHOR END GLOBAL COMPONENTS **/


/** UTILITIES **/

@layer utilities {
  .text-center {
    text-align: center;
  }

  .bg-gray-light {
    background-color: var(--color-gray-light);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

#sb_instagram .sbi_follow_btn a:focus, #sb_instagram .sbi_follow_btn a:hover {
  box-shadow: none !important;
}