/* ============================================================
   Opt-Me-In DesignV2 — Mobile polish layer
   Loaded after the main stylesheets on every page, so anything
   here overrides base styles below 768px.
   ============================================================ */

/* ---------- 1. Hamburger navigation drawer ----------

   The base stylesheets (s3.css, style.css) no longer ship mobile navbar
   rules — everything lives here so there's one clear source of truth and
   no !important chains.

   Pattern:
   - .navbar-links is a flex row on desktop (from base)
   - At or below 1024px it becomes a right-side drawer positioned off-screen
     via transform: translateX(100%). Adding .active slides it in.
   - Hamburger animates into an X via .active on .nav-toggle.
   - A .nav-backdrop element is injected by JS for tap-outside-to-close.
   - body.nav-open locks page scroll when the drawer is open.

   Why 1024 and not 768: with 6 menu items (Your Rights / Your Data /
   Example Emails / Advertiser Brands / Contact Us / Sign Up), the desktop
   row cramps + wraps to two lines per label from ~820-1020px (iPad portrait
   through iPad landscape). 1024 keeps the drawer on for every tablet size.
*/

@media (max-width: 1024px) {

  /* --- Navbar bar itself ---
     Lift the navbar above the backdrop (z: 1040) so the drawer (a child of
     .navbar) is rendered ABOVE the backdrop in the root stacking context.
     Without this, the backdrop's blur is painted over the drawer text. */
  .navbar { z-index: 1060; }
  .navbar .container-wide { height: 64px; padding: 0 20px; }
  .navbar-logo img { height: 30px; }

  /* --- Hamburger button --- */
  .nav-toggle {
    display: flex;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1100; /* above drawer for tap */
  }
  .nav-toggle span {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background: #111213;
    border-radius: 2px;
    transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
  }
  .nav-toggle span:nth-child(1) { top: 15px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 27px; }
  .nav-toggle.active span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

  /* --- Backdrop (injected by main.js).
         Using display: none when closed so Playwright / screen readers /
         accidental taps never interact with an invisible full-screen layer. */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 100, 120, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1040;
  }
  .nav-backdrop.is-open {
    display: block;
    opacity: 1;
  }

  /* --- Drawer wrapper (.navbar-links).
         Slides off-screen via translateX(100%); .active slides it back in.
         The wrapper is just the panel chrome — the menu <ul> inside is the
         real flex column that lays out the items. */
  .navbar-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(84vw, 340px);
    background: #fff;
    padding: 88px 24px 32px;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1050;
    overflow-y: auto;
  }
  .navbar-links.active { transform: translateX(0); }

  /* --- Menu list inside the drawer.
         Override desktop row layout — flex column with the <li>s as items.
         order values on .btn-* items (below) push Contact + Sign Up to the
         bottom regardless of their authoring order in the menu. */
  .navbar-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .navbar-menu > li { display: block; width: 100%; }

  /* --- Drawer links.
         Every non-button link gets the same divider; buttons override. */
  .navbar-menu > li > a {
    display: block;
    padding: 15px 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111213;
    text-decoration: none;
    border-bottom: 1px solid rgba(17, 18, 19, 0.12);
    transition: color 0.15s;
  }
  .navbar-menu > li > a:hover,
  .navbar-menu > li > a:focus-visible { color: #0c6478; outline: none; }

  /* --- Drawer buttons (Contact + Sign Up).
         btn-* classes live on the <a> (not the <li>) so the global .btn
         rule doesn't double-wrap the button. :has() targets the <li> by
         looking for a button anchor inside it — works for both admin-
         created menus and the fallback identically. */
  .navbar-menu > li:has(> a.btn.btn-outline-dark) { order: 10; margin-top: 24px; }
  .navbar-menu > li:has(> a.btn.btn-green)        { order: 11; }

  .navbar-menu > li > a.btn {
    border-bottom: 0;
    margin: 0 0 12px;
    padding: 14px 22px;
    min-height: 48px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbar-menu > li > a.btn.btn-outline-dark {
    background: #fff;
    color: #111213;
    border: 1.5px solid rgba(17, 18, 19, 0.2);
  }
  .navbar-menu > li > a.btn.btn-outline-dark:hover { border-color: #0c6478; color: #0c6478; }
  .navbar-menu > li > a.btn.btn-green {
    background: #8dbb44;
    color: #fff;
    border: 0;
    box-shadow: 0 6px 16px rgba(141, 187, 68, 0.3);
  }
  .navbar-menu > li > a.btn.btn-green:hover { background: #7da737; }

  /* --- Body scroll lock --- */
  body.nav-open { overflow: hidden; }
}


/* ---------- 2. Typography + spacing ---------- */

@media (max-width: 768px) {
  /* Heroes / page headers */
  .hero-card h1,
  .page-header h1 {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
    line-height: 1.18 !important;
  }
  .page-header { padding: 116px 0 48px !important; }
  .page-header p { font-size: 0.95rem; line-height: 1.55; max-width: 100%; }

  /* Section headings */
  section h2 { font-size: clamp(1.5rem, 5.5vw, 1.85rem); line-height: 1.22; }
  section h3 { font-size: 1.15rem; }

  /* Body paragraphs — min font-size 15px for readability */
  main p, section p, .split-content p, .form-card p { font-size: 0.95rem; line-height: 1.6; }

  /* Horizontal padding for content containers */
  .container, .container-wide { padding-left: 20px; padding-right: 20px; }

  /* The .page-header::after pseudo draws the teal curve below the header.
     Custom SVG with straight left/right sides down to y=30, then a smooth
     quadratic curve dipping through the center. This keeps the bubble
     *edge-to-edge* at the viewport boundaries while preserving a smooth
     arc in the middle. */
  .page-header::after {
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    height: 80px;
    clip-path: none;
    -webkit-clip-path: none;
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 Q720,180 0,30 Z' fill='%230c6478'/%3E%3C/svg%3E")
        no-repeat center top / 100% 100%,
      linear-gradient(to bottom, var(--teal) 0, var(--teal) 6px, transparent 6px) no-repeat;
  }

  /* Every first content section sitting below the page-header curve needs
     room for the 70px curve + generous breathing space before the heading. */
  .page-header-curve + section,
  .page-header-curve + article,
  .page-header-curve + div,
  .page-header + .curve-divider + section,
  .page-header + .curve-divider + article {
    padding-top: 110px;
  }
}


/* ---------- 3. Forms ---------- */

/* 16px font prevents iOS auto-zoom on focus; 48px min-height is the comfortable
   tap target size. Applies across signup, unsubscribe, subject-access, etc. */
@media (max-width: 768px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 48px;
  }
  .form-row { grid-template-columns: 1fr !important; gap: 12px; }
  .form-group { margin-bottom: 14px; }
  .checkbox-group { display: flex; align-items: center; gap: 10px; min-height: 36px; }
  .checkbox-group input[type="checkbox"],
  .checkbox-group input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; }
  .checkbox-group label { font-size: 0.95rem; line-height: 1.4; }

  /* Submit buttons full-width on mobile */
  form .btn,
  form button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1rem !important;
  }
}


/* ---------- 4. Buttons (touch targets) ---------- */

@media (max-width: 768px) {
  .btn {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;            /* don't wrap button labels */
    text-align: center;
  }
}

/* Paired CTA rows — stack full-width on mobile so labels don't wrap */
@media (max-width: 560px) {
  .hero-buttons,
  .brands-strip-buttons,
  .about-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-buttons .btn,
  .brands-strip-buttons .btn,
  .about-buttons .btn {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Center any single-button CTA wrapper on mobile, so no CTA looks offset */
@media (max-width: 768px) {
  .hero-buttons,
  .brands-strip-buttons,
  .about-buttons,
  .signup-intro-cta,
  .data-cta,
  .rights-cta,
  .hiw-cta,
  .rights-hub-cta,
  .learn-more-cta {
    justify-content: center;
    text-align: center;
  }
  /* Split-content block: when the content column holds only text + a lone
     button, centre-align the button so it matches other mobile CTAs. */
  .split-content > .btn,
  .split-content .signup-intro-cta,
  .split-content .data-cta {
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
  }
}


/* ---------- 5. Conveyor carousels (mailing + brands-strip) ---------- */

@media (max-width: 768px) {
  .mailing-track { gap: 40px !important; }
  .mailing-track img { height: 52px !important; width: auto !important; max-height: 52px; }

  .brands-track { gap: 32px !important; }
  .brands-track img { height: 48px !important; }
}


/* ---------- 6. Footer stacking ---------- */

/* The main stylesheets collapse footer-cols to 2 columns at 768px; below
   480px a single column reads better. */
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-cols { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-col { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 16px; }
  .footer-col:first-child { border-top: 0; padding-top: 0; }
  .footer-bottom { flex-direction: column !important; gap: 10px; text-align: center; }
  .footer-legal { justify-content: center; flex-wrap: wrap; }
}


/* ---------- 7. Cards / grids ---------- */

@media (max-width: 768px) {
  .split-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .split-image img { min-height: 0 !important; height: auto; max-height: 360px; width: 100%; object-fit: cover; }

  /* Rights cards — 2 per row down to 375px, then 1-col */
  .rc-grid, .rights-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rc, .rights-card { padding: 18px; }

  /* KYR cards (your-data) — 2 per row on tablet/mobile */
  .kyr-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kyr-card { padding: 20px 16px; }

  /* Offer cards */
  .offer-card { grid-template-columns: 80px 1fr; gap: 14px; padding: 14px; }
}
@media (max-width: 420px) {
  .rc-grid, .rights-grid, .kyr-grid { grid-template-columns: 1fr !important; }
}


/* ---------- 8. Images ---------- */

@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }
  .split-image { min-height: 0 !important; }
}


/* ---------- 9. Back-to-top button ---------- */

@media (max-width: 768px) {
  #back-to-top {
    right: 16px !important;
    bottom: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
}


/* ---------- 10. Miscellaneous polish ---------- */

/* Prevent accidental horizontal scroll */
html, body { overflow-x: hidden; }

/* Avoid text selection under tap highlights being ugly */
.btn, .nav-toggle, .v-dropdown-btn { -webkit-tap-highlight-color: rgba(141,187,68,0.18); }