/* ==========================================================================
   Link Bio Meds — shared styles
   Used together with the Tailwind CDN. Layer order matches Tailwind v4,
   so utility classes in markup always win over the component classes below.
   ========================================================================== */
@layer theme, base, components, utilities;

/* ---------- Design tokens ---------- */
:root {
  /* Brand: navy */
  --navy-950: #011844;
  --navy-900: #02225a;
  --navy-800: #03317c;
  --navy-700: #0b4182;
  --navy-600: #1d5b9e;

  /* Brand: teal */
  --teal-700: #0a7f8c;
  --teal-600: #0799a3;
  --teal-500: #14a6b2;
  --teal-400: #4cc0c6;
  --teal-100: #dff4f5;

  /* Neutrals */
  --ink: #14264b;
  --muted: #56667f;
  --line: #e1e8f2;
  --surface: #f2f7fd;

  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --page-max: 1320px;
  --gutter: 1rem;
  --header-h: 72px;
}

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 1280px) {
  :root { --gutter: 2rem; --header-h: 84px; }
}

/* ---------- Base ---------- */
@layer base {
  html {
    scroll-padding-top: var(--header-h);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-body);
    color: var(--ink);
    background: #fff;
  }
}

/* ---------- Components ---------- */
@layer components {
  .container-page {
    width: 100%;
    max-width: calc(var(--page-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-700);
  }

  .section-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--navy-950);
  }
  @media (min-width: 640px) {
    .section-title { font-size: 2rem; }
  }

  /* "VIEW ALL PEPTIDES →": the teal bar grows on hover */
  .link-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--navy-800);
  }
  .link-more::after {
    content: "";
    position: absolute;
    right: 1.625rem;
    bottom: 0;
    width: 4.5rem;
    max-width: calc(100% - 1.625rem);
    height: 2px;
    border-radius: 2px;
    background: var(--teal-500);
    transition: width 0.25s;
  }
  .link-more:hover::after {
    width: calc(100% - 1.625rem);
  }
  .link-more svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.2s;
  }
  .link-more:hover svg {
    transform: translateX(3px);
  }

  .text-gradient {
    background: linear-gradient(90deg, var(--navy-700) 0%, var(--teal-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 1.75rem;
    border: 1.5px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .btn:focus-visible {
    outline: 2px solid var(--teal-500);
    outline-offset: 2px;
  }
  .btn svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .btn:hover svg {
    transform: translateX(3px);
  }

  /* Uppercase CTA variant: "I'M A PRACTITIONER →" */
  .btn-caps {
    min-height: 3.25rem;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .btn-primary {
    background: var(--navy-800);
    color: #fff;
  }
  .btn-primary:hover {
    background: var(--navy-950);
  }

  .btn-teal {
    background: var(--teal-600);
    color: #fff;
  }
  .btn-teal:hover {
    background: var(--teal-700);
  }

  .btn-white {
    background: #fff;
    color: var(--navy-800);
  }
  .btn-white:hover {
    background: var(--surface);
  }

  .btn-outline {
    background: #fff;
    border-color: var(--teal-500);
    color: var(--navy-800);
  }
  .btn-outline:hover {
    background: var(--teal-100);
  }

  .btn-secondary {
    background: #fff;
    border-color: rgb(3 49 124 / 0.35);
    color: var(--navy-800);
  }
  .btn-secondary:hover {
    border-color: var(--navy-800);
    background: var(--surface);
  }

  /* Larger sentence-case buttons (practitioners page) */
  .btn-lg {
    min-height: 3.25rem;
    padding-inline: 2rem;
    font-size: 1rem;
  }

  /* Header navigation */
  .nav-link {
    --nav-px: 0.75rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem var(--nav-px);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy-900);
    white-space: nowrap;
    transition: color 0.2s;
  }
  .nav-link:hover,
  .nav-item:focus-within > .nav-link {
    color: var(--teal-600);
  }
  /* aria-current="page" — this page, aria-current="true" — a page inside this section */
  .nav-link[aria-current] {
    color: var(--teal-600);
  }
  .nav-link[aria-current]::after {
    content: "";
    position: absolute;
    left: var(--nav-px);
    right: var(--nav-px);
    bottom: -0.375rem;
    height: 2px;
    border-radius: 2px;
    background: var(--teal-500);
  }
  /* 1024–1099px: the six top-level items only fit with slightly tighter padding */
  @media (min-width: 1024px) and (max-width: 1099.98px) {
    .nav-link { --nav-px: 0.375rem; }
  }
  .nav-link svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s;
  }

  .nav-item {
    position: relative;
  }
  .nav-item:hover > .nav-link svg,
  .nav-item:focus-within > .nav-link svg {
    transform: rotate(180deg);
  }

  /* padding-top bridges the gap so the menu stays open while the pointer moves down */
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 15rem;
    padding-top: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  }
  .nav-item:hover > .nav-dropdown,
  .nav-item:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-dropdown-panel {
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgb(1 24 68 / 0.25);
  }
  .nav-dropdown-panel a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    transition: background-color 0.15s, color 0.15s;
  }
  .nav-dropdown-panel a:hover,
  .nav-dropdown-panel a:focus-visible {
    background: var(--surface);
    color: var(--teal-700);
    outline: none;
  }

  /* Forms */
  .form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy-950);
  }
  .form-label .req {
    color: #e5484d;
  }
  .form-input {
    width: 100%;
    height: 2.75rem;
    padding-inline: 0.875rem;
    border: 1px solid #cdd8e6;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.9375rem;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .form-input::placeholder {
    color: #8e9bb0;
  }
  .form-input:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px rgb(20 166 178 / 0.18);
  }
  textarea.form-input {
    height: auto;
    padding-block: 0.625rem;
  }
  select.form-input {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302225a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
  }
  .form-check {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    accent-color: var(--teal-600);
  }
  .form-input[aria-invalid="true"] {
    border-color: #b42318;
  }
  .form-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgb(180 35 24 / 0.15);
  }
  .form-check[aria-invalid="true"] {
    outline: 2px solid #b42318;
    outline-offset: 1px;
  }
  .form-error {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #b42318;
  }
  .form-hint {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted);
  }
  .form-optional {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
  }

  /* Practitioner application: step markers (data-state = upcoming | current | complete) */
  .step-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-inline: auto;
    border: 1px solid rgb(29 91 158 / 0.4);
    border-radius: 9999px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy-700);
  }
  .step-marker[data-state="current"],
  .step-marker[data-state="complete"] {
    border-color: var(--teal-600);
    background: var(--teal-600);
    font-weight: 700;
    color: #fff;
  }
  .step-marker[data-state="current"] {
    box-shadow: 0 0 0 4px var(--teal-100);
  }
  .step-label {
    display: block;
    margin-top: 0.5rem;
    color: var(--navy-700);
  }
  .step-label[data-state="current"] {
    font-weight: 600;
    color: var(--teal-600);
  }

  /* Registration page photo: fades out on the left, right and bottom */
  .register-photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
    mask-composite: intersect;
  }

  /* Footer link columns */
  .footer-title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--navy-950);
  }
  .footer-links {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    color: var(--navy-700);
  }
  .footer-links a {
    transition: color 0.15s;
  }
  .footer-links a:hover {
    color: var(--teal-600);
  }

  /* "Choose Your Path" cards: --card-to is also the colour the photo fades into.
     Mobile: photo sits under the copy (vertical gradient); sm+: photo on the right. */
  .path-card {
    --card-from: var(--navy-950);
    --card-to: #0d3b80;
    background: linear-gradient(180deg, var(--card-from) 0%, var(--card-to) 60%);
  }
  .path-card--teal {
    --card-from: #0597a7;
    --card-to: #07708f;
  }
  .path-card-fade {
    background: linear-gradient(180deg, var(--card-to) 0%, transparent 28%);
  }
  @media (min-width: 640px) {
    .path-card {
      background: linear-gradient(90deg, var(--card-from) 0%, var(--card-to) 52%);
    }
    .path-card-fade {
      background: linear-gradient(90deg, var(--card-to) 0%, transparent 55%);
    }
  }

  /* Quality band: photo tint (mobile) / fade from the left (desktop) */
  .quality-fade {
    background: rgb(2 34 90 / 0.85);
  }
  @media (min-width: 1024px) {
    .quality-fade {
      background: linear-gradient(90deg, var(--navy-900) 0%, rgb(2 34 90 / 0.55) 30%, rgb(2 34 90 / 0) 65%);
    }
  }

  /* Decorative table rows on the COA sheets (three columns of grey bars) */
  .coa-rows {
    background: linear-gradient(90deg,
      var(--line) 0 34%, transparent 0 40%,
      var(--line) 0 62%, transparent 0 68%,
      var(--line) 0 88%, transparent 0);
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 4px, transparent 0 13px);
    mask: repeating-linear-gradient(180deg, #000 0 4px, transparent 0 13px);
  }

  /* Hero: fades the photo into the background behind the copy */
  .hero-fade {
    background: linear-gradient(
      90deg,
      var(--surface) 0%,
      var(--surface) 28%,
      rgb(242 247 253 / 0.85) 42%,
      rgb(242 247 253 / 0) 60%
    );
  }
}