/* =============================== */
/* 🎨 CSS LAYERS ORDERING */
/* =============================== */
@layer base, components, utilities;

/* =============================== */
/* 🧱 BASE STYLES */
/* =============================== */
@layer base {
  /* 🔄 Reset & Normalize Styles */
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  *::selection {
    color: #fff;
    background-color: var(--c-primary);
  }                  

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--ff-primary);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    --_container-full: 120rem;                      /* 1920px */
    --_fs-xl-add: calc(var(--fs-xl) * 1.25);        /* 40px */
    --_fs-lg-add: calc(var(--fs-lg) * 1.25);        /* 30px */
    --_fs-lg-alt: calc(var(--fs-lg) * 1.0835);      /* 26px */
    --_fs-md-add: calc(var(--fs-md, 20px) * 1.1);   /* 22px */
    --_c-gradient: linear-gradient(150deg, hsl(219, 100%, 33%) 0%, hsl(191, 100%, 45%) 50%);
    --_c-gradient-lgt: linear-gradient(150deg, hsl(207, 100%, 33%) 0%, hsl(191, 100%, 37%) 30%, hsl(191, 100%, 45%) 100%);
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--c-dark);
    margin: 0;
  }

  h1 {
    line-height: var(--lh-2xl);
  }

  h2 {
    line-height: var(--lh-xl);
  }

  h1 > *, h2 > * {
    color: var(--c-primary);
    font-weight: 600;
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
    line-height: var(--lh-base);
  }

  p {
    color: var(--c-text);
    line-height: var(--lh-base);
    margin: 0;
  }

  a {
    color: var(--c-dark);
    text-decoration: none;
    display: inline-block;
  }

  p a {
    display: inline;
    font-weight: 500;
    color: var(--c-primary);
  }

  p a:hover {
    text-decoration: underline;
  }

  button {
    font-family: var(--ff-primary);
    background-color: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
  }

  img, picture {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    font-size: var(--fs-xs);
  }

  picture {
    display: block;
  }

  svg {
    vertical-align: middle;
  }

  hr {
    width: 100%;
    border-color: var(--c-border);
    opacity: 40%;
  }

  input, textarea, select {
    width: 100%;
    font-family: var(--ff-primary);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: var(--lh-sm);
    background-color: #fff;
    color: var(--c-dark);
    padding: 0.375rem 0.625rem;
    border: none;
    border-radius: var(--br-sm);
    outline-color: #000;
    transition: height var(--trans-3),
                font-size var(--trans-3), 
                padding var(--trans-3),
                border-radius var(--trans-3);
  }

  input[type="number"] {
    background: no-repeat calc(100% - 0.625rem) center/0.375rem url(../images/icons/up-down-arrow.png);
    background-color: #fff;
  }

  select {
    appearance: none;
    background: no-repeat calc(100% - 0.625rem) center/0.375rem url(../images/icons/down-caret.png);
    background-color: #fff;
    color: var(--c-text);
    transition: background-position var(--trans-3);
  }

  @media screen and (min-width: 30rem) {
    input, textarea, select {
      padding: 0.5rem 1rem;
      border-radius: var(--br-base);
    }

    input[type="number"] {
      background-position-x: calc(100% - 1rem);
      background-size: 0.5rem;
    }

    select {
      background-position-x: calc(100% - 1rem);
      background-size: 0.5rem;
    }
  }

  select option {
    color: var(--c-dark);
  }
  
  input::placeholder,
  textarea::placeholder {
    color: var(--c-text);
  }

  input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
  }

  textarea {
    resize: none;
  }

  table {
    font-size: var(--fs-base);
  }
  
  th, td {
    line-height: var(--lh-base);
  }

  /* 🧬 CSS Variables */
  :root {
    --container-max: 100%;
    --container-padding: 1.25rem;   /* 20px */

    /* 🖋 Font Families */
    --ff-primary: 'Montserrat', system-ui, sans-serif;

    /* 🔡 Font Sizes */
    --fs-3xl: clamp(1.625rem, 0.3207rem + 4.3478vw, 4.125rem);  /* 26px - 66px / 480px - 1400px */
    --fs-2xl: clamp(1.625rem, 1.2946rem + 2.0238vw, 2.8125rem); /* 26px - 45px / 480px - 1200px */
    --fs-xl: clamp(1.375rem, 0.9583rem + 1.3889vw, 2rem);       /* 22px - 32px / 480px - 1200px */
    --fs-lg: clamp(1.25rem, 1.1076rem + 0.6329vw, 1.5rem);      /* 20px - 24px / 480px - 992px */
    --fs-md: clamp(1.125rem, 1.0538rem + 0.3165vw, 1.25rem);    /* 18px - 20px / 480px - 992px*/
    --fs-sm: clamp(1rem, 0.9288rem + 0.3165vw, 1.125rem);       /* 16px - 18px / 480px - 992px*/
    --fs-base: clamp(0.875rem, 0.8038rem + 0.3165vw, 1rem);     /* 14px - 16px / 480px - 992px*/
    --fs-xs: clamp(0.75rem, 0.6788rem + 0.3165vw, 0.875rem);    /* 12px - 14px / 480px - 992px*/
    --fs-2xs: 0.75rem;                                          /* 12px */

    /* 📏 Line Heights */
    --lh-3xl: 2.125rem;     /* 34px */
    --lh-2xl: 2rem;         /* 32px */
    --lh-xl: 1.75rem;       /* 28px */
    --lh-lg: 1.625rem;      /* 26px */
    --lh-md: 1.25rem;       /* 20px */
    --lh-base: 1.125rem;    /* 18px */
    --lh-sm: 0.875rem;      /* 14px */
    --lh-tight: 1;

    /* 🎨 Colors */
    --c-primary: hsla(181, 100%, 16%, 1);
    --c-secondary: hsla(34, 100%, 77%, 1);
    --c-secondary-subtle: hsla(27, 100%, 98%, 1);
    --c-dark: hsl(166 100% 4.3%);
    --c-text: hsl(0, 0%, 33%);
    --c-border: hsla(0, 0%, 33%, 15%);

    /* ⚡ Transitions */
    --trans-3: 0.3s ease;
    --trans-5: 0.5s ease; 

    /* 🟦 Border Radius */
    --br-sm: 2px;
    --br-base: 5px;
    --br-lg: 10px;
    --br-pill: 33px;
    --br-circle: 50%;

    /* 🌑 Shadows */
    --shdw-primary: 0 1px 3px 0 hsla(181, 100%, 16%, 0.32);
    --shdw-primary-drk: 0 1px 10px 0 hsla(181, 100%, 16%, 0.32);
    --shdw-drk: 0 1px 3px 0 hsla(0 0% 0% / 0.32);

    /* 🧪 Filters */
    --fltr-primary: brightness(0) saturate(100%) invert(21%) sepia(86%) saturate(771%) hue-rotate(140deg) brightness(93%) contrast(102%);
    --fltr-secondary: brightness(0) saturate(100%) invert(82%) sepia(26%) saturate(769%) hue-rotate(332deg) brightness(103%) contrast(101%);
    --fltr-white: brightness(0) invert(1);
    --fltr-black: brightness(50) invert(1);
  }

  /* 📱 Responsive Variable Adjustments */
  /* ===== MOBILE (Potrait) - Small: 384px ===== */
  @media screen and (min-width: 24rem) {
    :root {
      --lh-2xl: 2.5rem;     /* 40px */
      --lh-xl: 2rem;        /* 32px */
    }
  }

  /* ===== MOBILE (Potrait) : 480px ===== */
  @media screen and (min-width: 30rem) {
    :root {
        --lh-2xl: 2.75rem;  /* 44px */
        --lh-lg: 1.75rem;   /* 28px */
        --lh-md: 1.375rem;  /* 22px */
        --lh-base: 1.25rem; /* 20px */
        --lh-sm: 1rem;      /* 16px */
    }
  }

  /* ===== MOBILE (Landscape) : 608px ===== */
  @media screen and (min-width: 38rem) {
    :root {
      --lh-2xl: 3rem;       /* 48px */
      --lh-xl: 2.25rem;    /* 36px */
    }
  }

  /* ===== TABLET : 768px ===== */
  @media screen and (min-width: 48rem) {
    :root {
        --container-max: 56.25rem;  /* 900px */
        --lh-3xl: 3.75rem;          /* 60px */
        --lh-2xl: 3.25rem;          /* 52px */
        --lh-lg: 2rem;              /* 32px */
        --lh-md: 1.625rem;          /* 26px */
        --lh-base: 1.5rem;          /* 24px */
        --lh-sm: 1.125rem;          /* 18px */
    }
  }

  /* ===== LAPTOP : 992px ===== */
  @media screen and (min-width: 62rem) {
    :root {
        --container-max: 67.5rem;   /* 1080px */
        --lh-3xl: 4.25rem;          /* 68px */
        --lh-2xl: 3.5rem;           /* 56px */
        --lh-xl: 2.5rem;            /* 40px */
        --lh-lg: 2.813rem;          /* 45px */
        --lh-md: 2rem;              /* 32px */
        --lh-base: 1.625rem;        /* 26px */
        --lh-sm: 1.375rem;          /* 22px */
    }
  }

  /* ===== DESKTOP : 1200px ===== */
  @media screen and (min-width: 75rem) {
    :root {
      --container-max: 75.625rem;   /* 1210px */
      --lh-3xl: 5rem;               /* 80px */
    }
  }
}

/* =============================== */
/* 🧩 COMPONENT STYLES */
/* =============================== */
@layer components {
  /* Private Varibles */
  header {
    --_shdw-primary-lght: 0 1px 3px 0 hsla(203, 100%, 26%, 0.32);
  }

  .container {
    max-width: var(--container-max);
    padding-inline: var(--container-padding);
    margin-inline: auto;
    transition: var(--trans-3);
  }

  .btn {
    width: 100%;
    max-width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    line-height: calc(var(--lh-sm) * 1.1);
    text-align: center;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--c-primary);
    border-radius: var(--br-sm);
    transition: max-width var(--trans-3), 
                gap var(--trans-3),
                background-color var(--trans-3),
                color var(--trans-3),
                padding var(--trans-3), 
                border-color var(--trans-3),
                margin var(--trans-3);
  }

  @media screen and (min-width: 30rem) {
    .btn {
      padding-block: 0.625rem;
      border-radius: var(--br-base);
    }
  }

  .btn.primary {
    background-color: var(--c-primary);
    color: #fff;
  }

  .btn.primary:hover {
    background-color: transparent;
    color: var(--c-primary);
  }

  .btn.primary::selection,
  .btn.primary *::selection {
    background-color: #fff;
    color: var(--c-primary);
  }

  .btn.primary:hover::selection,
  .btn.primary:hover *::selection {
    background-color: var(--c-primary);
    color: #fff;
  }

  .btn.white {
    background-color: #fff;
    color: var(--c-primary);
    border-color: #fff;
  }

  .btn.white:hover {
    background-color: var(--c-dark);
    color: #fff;
    border-color: var(--c-dark);
  }

  .btn.transparent {
    background-color: transparent;
  }

  .btn.transparent:hover {
    background-color: var(--c-dark);
    color: #fff;
  }

  .btn.transparent.primary {
    color: var(--c-primary);
  }

  .btn.transparent.primary:hover {
    background-color: var(--c-dark);
    color: #fff;
    border-color: var(--c-dark);
  }

  .btn.transparent.light {
    color: #fff;
    border-color: #fff;
  }

  .btn.transparent.light:hover {
    color: var(--c-primary);
    background-color: #fff;
  }

  .btn.transparent.dark {
    color: var(--c-dark);
    border-color: var(--c-dark);
  }

  .btn.transparent.dark:hover {
    color: #fff;
    background-color: var(--c-dark);
  }

  .btn.gradient {
    background: var(--_c-gradient);
  }

  .btn.gradient:hover {
    background: var(--_c-gradient-drk);
  }

  .btn.pill {
    border-color: var(--c-primary);
    border-radius: var(--br-pill);
    padding: 0.5rem 0.75rem;
  }

  .btn.white.pill:hover {
    background-color: var(--c-dark);
    color: #fff;
    border-color: var(--c-dark);
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
  }

  .pagination li > * {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--br-sm);
  }

  .pagination li > a {
    transition: background-color var(--trans-3),
                color var(--trans-3);
  }

  .pagination li > a:hover {
    background-color: var(--c-dark);
    color: #fff;
  }

  .pagination li > * img {
    width: auto;
    height: 0.875rem;
  }

  .pagination li > *:hover img {
    filter: brightness(50);
  }

  .pagination *.active {
    background-color: var(--c-primary);
    color: #fff;
  }

  .pagination *.active::selection {
    background-color: #fff;
    color: var(--c-primary);
  }

  @media screen and (min-width: 38rem) {
    .pagination {
      margin-top: 1.875rem;
    }

    .pagination li > * {
      width: 2rem;
      height: 2rem;
    }
  }

  @media screen and (min-width: 62rem) {
    .pagination {
      margin-top: 2.5rem;
    }

    .pagination li > * {
      width: 2.5rem;
      height: 2.5rem;
      font-size: var(--fs-sm);
    }
  }

  .intro {
    text-align: center;
    background-color: var(--c-primary);
    padding-block: 1.5rem;
    transition: padding-block var(--trans-3);
  }

  .intro .main {
    max-width: 38rem;
    margin-inline: auto;
  }

  .intro .main *:not(.btn) {
    color: #fff;
  }

  .intro .main *::selection {
    background-color: #fff;
    color: var(--c-primary);
  }

  .intro .breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
  }

  .intro .breadcrumbs li * {
    position: relative;
    font-weight: 500;
    padding-inline: 0.5rem;
  }

  .intro .breadcrumbs li a:hover {
    text-decoration: underline;
  }
  
  .intro .breadcrumbs li:not(:last-of-type) a::before {
    content: '>';
    position: absolute;
    inset: 0 -0.25rem 0 auto;
    margin-block: auto;
  }

  .intro .breadcrumbs li:last-of-type * {
    padding-right: 1.25rem;
  }

  .intro .breadcrumbs li:last-of-type *::before {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    background-color: #fff;
    border-radius: var(--br-sm);
    margin-block: auto;
    transform: rotate(45deg);
  }

  .intro .title * {
    font-size: var(--fs-lg, 1.25rem);
    line-height: var(--lh-lg);
  }

  .intro .btn {
    margin: 0.75rem auto 0;
  }

  @media screen and (min-width: 30rem) {
    .intro {
      padding-block: 2rem;
    }

    .intro .breadcrumbs li * {
      padding-inline: 0.75rem;
    }
  }

  @media screen and (min-width: 38rem) {
    .intro {
      padding-block: 2.5rem;
    }

    .intro .breadcrumbs li * {
      font-size: var(--fs-sm, 1rem);
    }

    .intro .title * {
      font-size: var(--fs-xl, 1.5rem);
    }

    .intro .btn {
      margin-top: 1.25rem;
    }
  }

  @media screen and (min-width: 48rem) {
    .intro {
      padding-block: 3rem;
    }
  }

  @media screen and (min-width: 62rem) {
    .intro {
      padding-block: 4rem;
    }
  }

  @media screen and (min-width: 75rem) {
    .intro {
      padding-block: 5rem;
    }
  }
}

/* =============================== */
/* 🛠️ UTILITIES */
/* =============================== */
@layer utilities {
  img[loading="lazy"] {
    max-width: 100%;
    height: auto;
    display: block;
    background: linear-gradient(120deg, #eee 25%, #ddd 37%, #eee 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1s linear infinite;
    border-radius: var(--br-base);
  }

  img[loading="lazy"].loaded {
    background: none;
    animation: none;
  }

  @keyframes skeleton-loading {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  .hovered {
    position: relative;
  }

  .hovered::before {
    content: '';
    position: absolute;
    inset: auto 0 -0.375rem;
    width: 0;
    height: 0.125rem;
    background-color: var(--c-primary);
    border-radius: 1rem;
    margin-inline: auto;
    transition: var(--trans-5);
  }

  .hovered:hover::before {
    width: 75%;
  }

  :where(.scroll, .scroll__p > p) {
    overflow: auto;
    padding-right: 0.5rem;
    scrollbar-gutter: stable;
  }

  @media (min-width: 30rem) {
    :is(.scroll, .scroll__p > p) {
      padding-right: 0.75rem;
    }
  }

  @supports (scrollbar-width: auto) {
    :where(.scroll, .scroll__p > p) {
      scrollbar-width: auto;
      scrollbar-color: transparent transparent;
    }

    :is(.scroll, .scroll__p > p):hover {
      scrollbar-color: var(--c-primary) transparent;
    }
  }

  @supports selector(::-webkit-scrollbar) {
    :is(.scroll, .scroll__p > p)::-webkit-scrollbar {
      width: 0.5rem;
    }

    :is(.scroll, .scroll__p > p)::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: var(--br-pill);
    }

    :is(.scroll, .scroll__p > p)::-webkit-scrollbar-track {
      background: transparent;
      border-radius: var(--br-pill);
    }

    :is(.scroll, .scroll__p > p):hover::-webkit-scrollbar-thumb {
      background: var(--c-primary);
    }

    :is(.scroll, .scroll__p > p):hover::-webkit-scrollbar-track {
      background: var(--c-secondary-subtle);
    }
  }

  .illustration {
    display: none;
  }
  
  @media screen and (min-width: 88rem) {
    *:has(.illustration) {
      position: relative;
      overflow-x: hidden;
      z-index: 2;
    }

    *:has(.illustration.no-index) {
      z-index: unset;
      overflow-x: unset;
    }

    .illustration {
      position: absolute;
      inset: 0;
      width: fit-content;
      height: fit-content;
      display: block;
      z-index: -1;
    }

    .illustration.no-index {
      z-index: 1;
    }

    .illustration.after {
      margin-left: auto;
    }

    .illustration.center-block {
      margin-block: auto;
    }
    
    .illustration.left-mirror {
      transform: scaleX(-1);
    }

    .illustration.bottom-mirror {
      transform: scale(-1);
    }

    .illustration.top-even {
      top: 20%;
      bottom: auto;
    }

    .illustration.bottom-even {
      top: auto;
      bottom: 20%;
    }

    .illustration.after.crop-half {
      right: -6%;
    }
  }

  .custom-tooltip {
    position: absolute; 
    font-size: var(--fs-xs, 0.75rem); 
    background-color: #bb2135; 
    color: #fff; 
    padding: 6px 10px; 
    border: 1px solid #bb2135; 
    border-radius: 4px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    z-index: 10;
  }

  input.error {
    border-color: red;
  }

  .error-message {
    order: 3;
  }

  .parent-validator {
    position: relative;
    width: 100%;
  }

  .invalid-tooltip {
    position: absolute;
    inset: calc(100% + 3px) 0 0 auto;
    width: fit-content;
    height: fit-content;
    text-wrap: nowrap;
    font-size: .875rem;
    background-color: rgba(220, 53, 69, .9);
    color: #fff;
    border-radius: .25rem;
    padding: 0.25rem 0.5rem;
    z-index: 5;
  }
}