/* ============================================================
   Sunrise Custom Fence East - header.css
   The ONLY place logo size and shrink-on-scroll are defined.
   Loaded last on all 26 pages. !important is used deliberately:
   several legacy stylesheets still carry higher-specificity logo
   rules, and this file must win regardless of page structure.

   To resize, change these four numbers only.
   ============================================================ */
:root{
  --logo-max:315px;         /* resting - desktop and tablet */
  --logo-max-sm:190px;      /* after scrolling - desktop */
  --logo-max-mobile:210px;  /* resting - phones */
  --logo-max-sm-mobile:118px; /* after scrolling - phones */
}

.site-logo{
  width:auto!important;
  height:auto!important;
  max-width:var(--logo-max)!important;
  max-height:none!important;
  object-fit:contain;
  transition:max-width .28s ease;
}

/* Header sizes around the logo instead of forcing a height.
   Nothing anywhere may set a fixed height on these: a fixed height
   that is smaller than the logo clips it, and a fixed height that is
   larger than the resting header makes the header GROW on scroll.
   That was the iPhone bug. Let the logo drive the height. */
.site-header__top,.nav-top{height:auto}

/* Scrolled state. Keyed off the header, the body, and the homepage's
   own .nav-scrolled class - whichever is present, the result is the same. */
body.is-scrolled .site-logo,
.is-scrolled .site-logo,
.nav-scrolled .site-logo{
  max-width:var(--logo-max-sm)!important;
}
body.is-scrolled .site-header__top,
.is-scrolled .site-header__top,
.is-scrolled .nav-top,
.nav-scrolled .nav-top{
  padding-top:8px;
  padding-bottom:8px;
  min-height:0;
}

/* Tablet has no lock. An earlier version pinned the iPad logo to its
   resting size so it never shrank on scroll; Rob likes the resting size
   but wants the shrink back, so tablet now behaves like desktop -
   315px at rest, 190px once scrolled. Deleted rather than overridden.
*/

@media (max-width:680px){
  .site-logo{max-width:var(--logo-max-mobile)!important}
  body.is-scrolled .site-logo,
  .is-scrolled .site-logo,
  .nav-scrolled .site-logo{max-width:var(--logo-max-sm-mobile)!important}
}

@media (prefers-reduced-motion:reduce){
  .site-logo{transition:none}
}


/* ============================================================
   QUOTE BUTTON RESET
   The nav CTA is a <button> so it can open the quote form. Buttons
   carry a default UA border and background; anchors do not. Without
   this reset the gold button shows a pale outline on any page that
   does not already declare border:none.
   ============================================================ */
.btn-quote,
.quote-btn,
button.open-modal-btn,
.sticky-call button{
  border:none!important;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  font-family:inherit;
}
.btn-quote:focus-visible,
.quote-btn:focus-visible,
button.open-modal-btn:focus-visible{
  outline:3px solid #0a1628;
  outline-offset:2px;
}


/* ============================================================
   MODAL STACKING
   .site-header is z-index 5000; the quote overlay was 2000, so the
   header rendered over the form on every interior page. The overlay
   must sit above all page chrome.

   header.css loads last on all 26 pages, so this is the one place
   the stacking order is decided.
   ============================================================ */
.modal-overlay{z-index:100000!important}
.modal-overlay .modal-box{z-index:100001;position:relative}

/* Inline mode is in the document flow and must NOT be lifted. */
.modal-overlay.is-inline{z-index:auto!important}
.modal-overlay.is-inline .modal-box{z-index:auto!important}

/* ── STICKY MOBILE QUOTE BAR ───────────────────────────────────────
   Phones only (<=680px). Appears after the header scrolls away.
   Carries the QUOTE CTA: the header carries tap-to-call, so the two
   slots hold different actions instead of competing for the same tap.
   The quote form captures leads when Rob is on a job site and cannot
   answer the phone, so it gets the larger thumb target.
   z-index 90000 sits BELOW the quote modal (100000) and the
   lightbox (100000) so it can never cover their controls.
   Breakpoint matches the header's 680px so there is never a gap where
   neither the header quote button nor this bar is present. */
.sticky-call{
  position:fixed;left:0;right:0;bottom:0;z-index:90000;
  display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#071426;
  border-top:1px solid rgba(196,163,90,0.5);
  box-shadow:0 -6px 22px rgba(0,0,0,0.32);
  transform:translateY(100%);
  transition:transform .28s ease;
}
.sticky-call.is-visible{transform:translateY(0);}
.sticky-call a,
.sticky-call button{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;width:100%;
  background:linear-gradient(180deg,#d4b46a,#c4a35a);
  color:#071426;font-family:'Source Sans 3',system-ui,sans-serif;
  font-size:1.02rem;font-weight:800;letter-spacing:0.02em;
  text-decoration:none;border-radius:4px;
}
.sticky-call a:active,
.sticky-call button:active{filter:brightness(0.94);}
.sticky-call a:focus-visible,
.sticky-call button:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.sticky-call svg{width:19px;height:19px;flex:0 0 auto;}

@media(max-width:680px){
  .sticky-call{display:block;}
  /* keep the last content clear of the bar */
  body{padding-bottom:74px;}
  /* Lift NiceJob's bubble above the bar.
     This used to carry a broad attribute net - [class^="nj-"] and friends -
     which applied bottom:82px to EVERY NiceJob element at every nesting
     depth, including absolutely-positioned children inside their popup.
     That is what made the review notification render as an empty box with
     its own text escaping onto the page. Deleted rather than overridden:
     header.js tags only the real bottom-anchored container, and this is
     the one rule that acts on that tag. */
  [data-sunrise-lifted="1"]{bottom:82px!important;}
}
@media(prefers-reduced-motion:reduce){
  .sticky-call{transition:none;}
}

/* ── HEADER SIZING ON PHONES ──────────────────────────────────────
   On phones the header CTA IS the phone number - one tap dials.
   The quote CTA lives in the sticky bar at the bottom, which is the
   bigger target. The header quote button is hidden here so the two
   are never competing for the same tap on a 390px screen. */
.qb-short{display:none;}

/* Tablet: the phone number is back in the header (it used to be hidden
   below 980px). With the logo held at its full 315px, the long button
   label "Request a Preliminary Quote" overflows an iPad in portrait.
   Short label from here down; full wording stays on desktop. */
@media(max-width:1024px){
  .qb-full{display:none;}
  .qb-short{display:inline;}
  .header-actions{gap:12px;}
  .nav-right{gap:12px;}
}

@media(max-width:680px){
  :root{--logo-max-mobile:142px;}

  .header-actions{gap:10px!important;}
  .nav-right{gap:10px!important;}
  .site-header__top{min-height:82px!important;padding:8px 14px!important;gap:10px!important;}

  /* Quote button moves to the sticky bar on phones. */
  .header-actions .quote-btn,
  .header-actions .btn-quote,
  .nav-right .quote-btn,
  .nav-right .btn-quote,
  header .quote-btn,
  header .btn-quote{display:none!important;}

  /* Tap-to-call becomes the header CTA. */
  .header-actions .phone,
  .nav-right .nav-phone{
    display:inline-flex!important;
    align-items:center;justify-content:center;
    min-height:46px!important;
    padding:11px 15px!important;
    border-radius:4px;
    background:linear-gradient(180deg,#d4b46a,#c4a35a);
    color:#071426!important;
    font-size:1.02rem!important;
    font-weight:800!important;
    letter-spacing:0.01em!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    text-decoration:none!important;
  }
  .header-actions .phone:active,
  .nav-right .nav-phone:active{filter:brightness(0.94);}
  .header-actions .phone:focus-visible,
  .nav-right .nav-phone:focus-visible{outline:3px solid #fff;outline-offset:2px;}

  .mobile-toggle,
  .nav-mobile-toggle{
    font-size:0.92rem!important;
    padding:12px 14px!important;
    min-height:46px!important;
    font-weight:700!important;
    letter-spacing:0.05em!important;
    text-transform:uppercase!important;
  }
}
/* All standard iPhones sit at 390-430px wide, and the header carries
   logo + phone number + MENU on a single row. Once the type scale went
   up in v1.8 that row no longer fit at 390px, so this tier starts at
   430px rather than the old 380px - otherwise every common iPhone fell
   through to the roomier 680px values and overflowed. Space is bought
   back from the logo; the controls stay legible. */
@media(max-width:430px){
  :root{--logo-max-mobile:112px;
         --logo-max-sm-mobile:92px;}   /* MUST stay below --logo-max-mobile
                                          or the logo grows on scroll */
  .header-actions{gap:8px!important;}
  .nav-right{gap:8px!important;}
  .site-header__top{padding:8px 10px!important;gap:8px!important;}
  .header-actions .phone,
  .nav-right .nav-phone{font-size:0.95rem!important;padding:11px 10px!important;}
  .mobile-toggle,
  .nav-mobile-toggle{font-size:0.9rem!important;padding:11px 10px!important;}
}
/* oldest/narrowest phones (iPhone SE 1st gen, 320px) */
@media(max-width:340px){
  :root{--logo-max-mobile:96px;
         --logo-max-sm-mobile:80px;}
  .site-header__top{padding:8px 10px!important;gap:8px!important;}
  .header-actions{gap:8px!important;}
  .nav-right{gap:8px!important;}
  .header-actions .phone,
  .nav-right .nav-phone{font-size:0.9rem!important;padding:11px 8px!important;}
  .mobile-toggle,
  .nav-mobile-toggle{font-size:0.88rem!important;padding:11px 7px!important;}
}


/* ============================================================
   MOBILE TYPE SCALE  (phones only, <=680px)

   The site chrome was drawn at desktop sizes and never re-scaled
   for phones: top-level menu items are font:700 .76rem uppercase
   with .11em letter-spacing (~12px), footer links .85rem,
   eyebrows and card labels down at .66-.72rem. Readable on a
   27-inch monitor, not on an iPhone held at arm's length - and
   uppercase with wide tracking is the hardest case of all.

   This is one deliberate last-word layer rather than edits
   scattered through site.css and brand.css, because the two nav
   systems are separate: interior pages use .nav-link/.nav-toggle
   /.dropdown from site.css, index.html uses .nav-links/
   .nav-dropbtn/.nav-dropdown-menu from its own inline styles.
   Both are covered here so they can never drift apart again.

   !important is required: index.html's inline style blocks load
   AFTER this file's <link>, and .nav-dropdown-menu a already
   carries !important of its own.

   NOT touched: the header quote button and MENU toggle. At 390px
   the header already carries logo + phone + MENU on one row, and
   enlarging those overflows it. They were tuned separately.
   ============================================================ */
@media (max-width:680px){

  /* --- top-level menu items --- */
  .nav-link,.nav-toggle,                      /* interior pages */
  .nav-links a,.nav-dropbtn{                  /* homepage */
    font-size:1rem!important;
    letter-spacing:0.06em!important;
    line-height:1.35!important;
  }
  .nav-toggle:after{font-size:1rem!important;}

  /* --- items inside an open dropdown --- */
  .dropdown a,
  .nav-dropdown-menu a{
    font-size:1rem!important;
    line-height:1.45!important;
    padding-top:13px!important;
    padding-bottom:13px!important;
  }

  /* --- breadcrumbs --- */
  .breadcrumb-inner{font-size:0.98rem!important;}

  /* --- footer --- */
  .footer-col a{font-size:0.95rem!important;line-height:1.6!important;}
  .footer-col h4{font-size:0.98rem!important;}
  .footer-brand-tag{font-size:0.9rem!important;}
  .footer-bottom{font-size:0.92rem!important;}
  .footer-bottom-text,.footer-lic{font-size:0.9rem!important;}
  .footer-quote-link{font-size:0.95rem!important;}

  /* --- eyebrows, labels and small print --- */
  .eyebrow,.pj-eyebrow{font-size:0.98rem!important;}
  .pj-stage-label{font-size:0.95rem!important;}
  .pj-card-town{font-size:0.95rem!important;}
  .pj-dl dt{font-size:0.95rem!important;}
  .pj-btn{font-size:0.92rem!important;}
  .investment{font-size:0.98rem!important;}
  .small-note{font-size:0.95rem!important;}
  .compare-card .facts span{font-size:0.98rem!important;}
  .trust-item span{font-size:0.95rem!important;}
  .rating-count{font-size:0.98rem!important;}
  .rating-platforms dt{font-size:0.95rem!important;}
  .rating-platforms small{font-size:0.98rem!important;}
  .image-lightbox__hint{font-size:0.9rem!important;}
}


/* ============================================================
   NAV OVERFLOW  (tablet landscape and small laptops)

   Eight items, one of them 22 characters, on a single row. The
   row was already wider than an iPad in landscape BEFORE the
   v1.8 type scale - roughly 1146px against 1024px of screen -
   and raising the type pushed it to about 1313px, which is what
   made the clipping obvious at both ends.

   Two changes, together:
     1. site.css now sets .06em tracking and 13px padding instead
        of .11em and 17px, so the full row fits its own 1240px
        container on a real desktop.
     2. below 1200px the nav collapses to the MENU button. An
        iPad in landscape is 1024px - there is no honest way to
        fit 89 characters of legible uppercase nav across it, and
        cramming it to 14px with hairline tracking would fight
        the whole point of the type scale.

   flex-wrap is the backstop: if a future menu item pushes the row
   over again it drops to a second line instead of clipping.
   ============================================================ */
/* REJECTED APPROACH, kept as a warning: collapsing 981-1200px to the
   MENU button. It revealed .nav-mobile-toggle at 1024px, but that
   button's visual styling lives inside @media(max-width:900px), so on
   an iPad in landscape it rendered as a bare unstyled pill next to a
   315px logo. Worse than the overflow it was meant to fix. Do not
   re-introduce without moving the toggle's styling out of the 900px
   block first.

   Instead: tighten the row just enough to fit an iPad in landscape,
   and let flex-wrap catch anything that still does not. */
@media (min-width:981px) and (max-width:1200px){
  .nav-link,.nav-toggle,
  .nav-links a,.nav-dropbtn{
    font-size:0.88rem!important;     /* 14.1px - at the legibility floor */
    letter-spacing:0.02em!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  .nav-inner,.nav-links-inner{padding-left:12px!important;padding-right:12px!important;}
}

/* Backstop at every width above the phone breakpoint: if a future menu
   item pushes the row over, it drops to a second line instead of being
   clipped at both ends. */
@media (min-width:981px){
  .nav-inner{flex-wrap:wrap;}
  .nav-links-inner{flex-wrap:wrap;overflow-x:visible!important;}
}


/* ── HOMEPAGE NAV ALIGNMENT ────────────────────────────────────────
   The two nav systems disagreed: interior pages' .nav-inner carries
   justify-content:center, but the homepage's .nav-links-inner never
   declared it at all, so it fell back to flex-start and sat hard left
   while every other page was centred. Centre matches the rest of the
   site. Harmless when the row collapses to display:block on phones -
   justify-content has no effect on a block container.
   ------------------------------------------------------------------ */
.nav-links-inner{
  justify-content:center;
  max-width:1240px;          /* was 1200px - interior pages use 1240px */
}

/* Match the interior nav item metrics exactly. The homepage was running
   0.95rem with 0.1em tracking inside a 1200px container while interior
   pages ran 0.92rem with 0.06em inside 1240px - bigger text, far wider
   letter-spacing, less room. On a 1366px laptop that pushed ABOUT onto a
   second line on the homepage while every other page fit on one.
   No !important here on purpose: the phone (<=680px) and tablet
   (981-1200px) blocks above both use !important and must still win. */
.nav-links a,
.nav-dropbtn{
  font-size:0.92rem;
  letter-spacing:.06em;
  padding-left:13px;
  padding-right:13px;
}