/* ============================================================
   SITE-WIDE MOBILE / TABLET RESPONSIVE FIXES
   Loaded last on every page (except the booking pages, which are
   already responsive). Tightens the header, contains overflow,
   wraps flag bars, fits the footer, and trims clutter on small
   screens so the purpose + the path to booking stay clear.
   Breakpoints: <=1024 (tablet), <=640 (phone), <=400 (narrow).
   ============================================================ */

/* ---- Global overflow guard: nothing should force horizontal scroll ---- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, svg, video { max-width: 100%; height: auto; }

/* ============================================================
   HEADER — brand must never push the menu/CTA off-screen.
   Applies to both the home header (.hd3) and interior pages (.hd).
   ============================================================ */
@media (max-width: 1024px) {
  .hd3-brand, .hd-brand {
    font-size: clamp(15px, 4.4vw, 21px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;       /* allow wrap instead of cutoff */
    max-width: calc(100vw - 110px);       /* always leave room for the burger/CTA */
  }
}
@media (max-width: 640px) {
  .hd3-inner, .hd-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 12px !important;
  }
  .hd3-brand, .hd-brand { font-size: clamp(14px, 4.2vw, 18px) !important; }
}
@media (max-width: 400px) {
  .hd3-inner, .hd-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .hd3-brand, .hd-brand { font-size: 14.5px !important; max-width: calc(100vw - 80px); }
  .hd3-burger { width: 38px !important; height: 38px !important; }
}

/* ============================================================
   FLAG / EYEBROW BARS — the "Practice areas · Oregon-licensed ·
   By appointment · Confidential" style strips overflow on phones.
   Let them wrap instead of running off the right edge.
   ============================================================ */
@media (max-width: 640px) {
  .mast-flag, .svc-flag, [class*="-flag"] {
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    row-gap: 6px !important;
  }
  .mast-flag .pipe, [class*="-flag"] .pipe { display: none !important; }
  .mast-flag > *, [class*="-flag"] > * { white-space: normal !important; }
}

/* ============================================================
   FOOTER — fit the email + sign-up form within the screen.
   ============================================================ */
@media (max-width: 640px) {
  .ft-inner { padding-left: 22px !important; padding-right: 22px !important; }
  .ft-contact-row a,
  .ft-contact-row span,
  .ft-contact a {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
  }
  /* Break the single-pill input+button into two stacked, full-width
     fields on phones so they don't overlap inside the rounded border. */
  .ft-news-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
  .ft-news-form input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--ft-hairline, rgba(251,248,240,.18)) !important;
    border-radius: 999px !important;
    background: rgba(251,248,240,.04) !important;
    padding: 13px 18px !important;
  }
  .ft-news-form button {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 999px !important;
    padding: 13px 22px !important;
    text-align: center !important;
  }
}
@media (max-width: 400px) {
  .ft-contact-row a, .ft-contact-row span, .ft-contact a { font-size: 13px !important; }
}

/* ============================================================
   HERO — trim the large top gap before the headline on phones so
   the value proposition is visible without a long scroll.
   ============================================================ */
@media (max-width: 640px) {
  .mast { padding-top: 28px !important; padding-bottom: 48px !important; }
  /* Interior page heroes sit under a FIXED header (~70px tall), so they
     must keep enough top padding to clear it. Trim the oversized desktop
     top padding to a comfortable, header-clearing value. */
  .svc-hero, .hero, [class*="-hero"] {
    padding-top: 90px !important;
    padding-bottom: 48px !important;
  }
}
@media (max-width: 400px) {
  .svc-hero, .hero, [class*="-hero"] { padding-top: 84px !important; }
}

/* ============================================================
   CTA BUTTONS — keep label centered and never overflow.
   ============================================================ */
@media (max-width: 640px) {
  a.dyk-cta, .dyk-cta, [class*="-cta"]:not(.hd-cta):not(.hd3-cta) {
    text-align: center !important;
    justify-content: center !important;
  }
  .dyk-cta, [class*="dyk"] [class*="cta"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
}

/* ============================================================
   BADGE / FLOATING LABEL OVERLAP — e.g. the "Oregon notary"
   badge overlapping a service card on phones. Make such absolute
   badges flow inline below their card image on small screens.
   ============================================================ */
@media (max-width: 640px) {
  .svc-card [class*="badge"],
  .svc-badge,
  [class*="card"] [class*="badge"][style*="absolute"],
  [class*="notary"] {
    position: static !important;
    transform: none !important;
    margin-top: 8px !important;
    display: inline-block !important;
  }
}

/* ============================================================
   GENERIC GRID COLLAPSE — multi-column blocks that don't already
   collapse should stack on phones to avoid squished/overflow.
   ============================================================ */
@media (max-width: 640px) {
  .ft-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ============================================================
   MOBILE NAV DRAWER — injected by _owt-mobile-nav.js for both
   interior (.hd) pages and Tailwind pages (terms, privacy, etc.).
   Drawer + open/close state are driven by the drawer's own class
   so it does not depend on the header type. The .hd burger shows
   <=880px; the cloned Tailwind burger already shows via lg:hidden.
   The DRAWER itself is allowed to render up to 1024px to match the
   Tailwind lg breakpoint.
   ============================================================ */
.owt-mnav-burger { display: none; }
.owt-mnav-drawer { display: none; }

/* The drawer panel — available up to the tablet breakpoint. */
@media (max-width: 1024px) {
  .owt-mnav-drawer {
    display: block;
    position: fixed; inset: 0; z-index: 1000;
    background: linear-gradient(135deg,#1E3517 0%,#3C4D35 55%,#4A5D3F 100%);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 84px 28px 40px;
  }
  .owt-mnav-drawer.owt-mnav-is-open { transform: translateX(0); }
  .owt-mnav-list { display: flex; flex-direction: column; }
  .owt-mnav-link {
    display: block; padding: 18px 0; min-height: 44px;
    color: #FBF8F0; text-decoration: none; font-size: 20px;
    font-family: var(--serif, "Palatino Linotype", serif);
    border-bottom: 1px solid rgba(251,248,240,.14);
  }
  .owt-mnav-link.owt-mnav-active, .owt-mnav-link:hover { color: #C9A961; }
  .owt-mnav-book {
    display: block; margin-top: 28px; padding: 16px 24px;
    border: 1px solid #C9A961; border-radius: 999px; text-align: center;
    color: #FBF8F0; text-decoration: none; font-size: 14px;
    letter-spacing: .12em; text-transform: uppercase;
  }
  .owt-mnav-book:hover { background: #C9A961; color: #1E3517; }
}

/* The injected burger on interior .hd pages (the Tailwind burger is a
   clone of the page's own button, already styled + shown by Tailwind). */
@media (max-width: 880px) {
  .owt-mnav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(201,169,97,.45);
    background: transparent; color: #fff; cursor: pointer;
    padding: 0; position: relative; z-index: 60; flex: 0 0 auto;
  }
  .owt-mnav-burger svg { width: 20px; height: 20px; }
  .owt-mnav-burger .owt-mnav-close { display: none; }

  /* Interior header stays a 2-col row on mobile (brand | burger);
     the desktop pill CTA is hidden in favor of the drawer's button. */
  .hd .hd-inner { grid-template-columns: auto auto !important; justify-content: space-between !important; }
  .hd .hd-cta { display: none !important; }
}
/* open/close icon swap — works regardless of header type */
.owt-mnav-is-open .owt-mnav-burger .owt-mnav-open,
.hd.owt-mnav-is-open .owt-mnav-burger .owt-mnav-open { display: none; }
.owt-mnav-is-open .owt-mnav-burger .owt-mnav-close,
.hd.owt-mnav-is-open .owt-mnav-burger .owt-mnav-close { display: block; }

/* ============================================================
   CONTACT / generic office-info values — long emails & links
   must wrap instead of overflowing the card on phones.
   ============================================================ */
@media (max-width: 640px) {
  .info-row .val,
  .info-row .val a,
  .val a,
  .mast-q .val,
  .mast-q .val a {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  .info-row { min-width: 0 !important; }
  .info-row .body { min-width: 0 !important; max-width: 100% !important; }
}

/* ============================================================
   SERVICES hero meta strip ("08 · Practice areas | Oregon-
   licensed · By appointment · Confidential") — wrap so nothing
   (esp. "Confidential") is cut off on phones/tablets.
   ============================================================ */
@media (max-width: 768px) {
  .svc-hero-meta {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    row-gap: 8px !important;
  }
  .svc-hero-meta .right {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    justify-content: flex-start !important;
  }
  .svc-hero-meta > * { white-space: normal !important; }
}

/* ============================================================
   SERVICE CARD TAG ("Oregon Notary" etc.) — absolutely
   positioned top-right on desktop; on phones it overlaps the
   card eyebrow/title. Flow it inline so it never collides.
   ============================================================ */
@media (max-width: 640px) {
  .svc-card-tag {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block !important;
    margin: 0 0 10px 0 !important;
  }
  /* give the card header room and let the eyebrow + tag wrap */
  .svc-card-head, .svc-card-top { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ============================================================
   MOBILE CLUTTER TRIM (<=560px) — on small phones, hide the most
   decorative/secondary metadata so the value proposition and the
   path to booking stay front-and-center. No core content (services,
   process steps, pricing, contact, CTAs) is hidden.
   ============================================================ */
@media (max-width: 560px) {
  /* decorative numbered meta strips (e.g. "08 · Practice areas |
     Oregon-licensed · By appointment · Confidential", "03 STAGES …")
     these are flourish, not information the user needs on a phone */
  .svc-hero-meta,
  .hero-meta,
  .mast-flag {
    display: none !important;
  }
  /* breadcrumb trails are redundant on mobile (the menu covers nav) */
  .crumb, .svc-crumb, [class*="breadcrumb"] {
    margin-bottom: 18px !important;
    font-size: 10px !important;
  }
}

/* ============================================================
   TAILWIND PAGE HEADER NORMALIZE (terms, sms-terms, privacy-
   policy, 404, understanding-oregons-estate-tax) — make their
   header read consistently with the rest of the site on mobile:
   white brand (not gold), comparable size, and a bordered-circle
   hamburger matching the interior pages.
   ============================================================ */
@media (max-width: 1024px) {
  /* brand: white + consistent sizing (override the gold hover-colored link) */
  header[class*="fixed top-0"] a.font-playfair,
  header[class*="fixed top-0"] > div > a:first-child {
    color: #fff !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.15 !important;
  }
  /* the cloned hamburger: give it the same bordered-circle look as .hd burger */
  .owt-mnav-burger-radix {
    width: 40px !important; height: 40px !important;
    border: 1px solid rgba(201,169,97,.45) !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important; padding: 0 !important; flex: 0 0 auto !important;
  }
  .owt-mnav-burger-radix svg { width: 20px !important; height: 20px !important; }
}