/*
 * Love Is Clean House -- shared site styles.
 *
 * Every rule here appeared, byte-identical, in the <style> block of ALL
 * fifteen pages. Nothing was rewritten, merged or renamed -- only moved.
 * Because all fifteen already carried each rule, linking this file cannot
 * change which page a rule applies to.
 *
 * A rule identical on only SOME pages is deliberately NOT here: this file
 * is loaded by every page, so hoisting a partially-shared rule would start
 * applying it to pages that never had it. Those stay page-local.
 *
 * url() note: this file lives in assets/, so a relative url() resolves
 * against assets/ rather than the page. The 'assets/' prefix is therefore
 * dropped from moved declarations so they resolve to the same file -- the
 * only edit made to any moved declaration, and it matches how AST's
 * assets/site.css references its images.
 *
 * Load order: link this AFTER any other stylesheet a page links and BEFORE
 * that page's inline <style>, which is where these rules used to sit.
 */

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1600px,calc(100% - 48px));margin:0 auto}
/* ---------- header ---------- */
.site-header{width:100%;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(17,17,17,.06);position:relative;z-index:100;box-shadow:0 4px 12px rgba(17,17,17,.06);backdrop-filter:blur(8px)}
.header-inner{width:min(1800px,calc(100% - 16px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;min-height:115px;gap:80px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.01em;color:var(--black);font-size:1.1rem}
.brand img{width:180px;height:180px;object-fit:contain}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.phone-link{display:inline-flex;align-items:center;gap:8px;color:var(--black);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.phone-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#f1f1f1;color:var(--black);font-size:.9rem}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--black);color:#fff;border-radius:999px;font-size:.9rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:none;cursor:pointer}
/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:flex-start;gap:28px;flex:1;flex-wrap:wrap;height:52px}
.nav-item{position:relative;display:inline-flex;align-items:center;height:52px}
.nav > a,.nav .dropdown{position:relative;font-size:.95rem;color:#767676;font-weight:600;padding:6px 0;line-height:1.2;letter-spacing:.02em;transition:color .15s ease}
.nav a.active{color:var(--black)}
.nav > a:hover,.nav > a:focus-visible,.nav > a:active{color:var(--black)}
.nav > a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--black);opacity:0;transition:opacity .15s ease}
.nav > a.active::after,.nav > a:hover::after,.nav-item:hover > .dropdown::before,.nav-item:focus-within > .dropdown::before{opacity:1}
.nav .dropdown{position:relative;display:inline-flex;align-items:center;gap:6px;padding-right:.9rem;transition:color .15s ease}
.nav-item > .dropdown::before{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--black);opacity:0;transition:opacity .15s ease}
.nav .dropdown::after{content:"▾";position:absolute;right:0;top:50%;left:auto;bottom:auto;height:auto;background:none;opacity:1;transform:translateY(-50%);font-size:.8rem;color:var(--muted);transition:transform .18s ease,color .15s ease}
.nav-item:hover > .dropdown,.nav-item:focus-within > .dropdown,.nav-item:hover > .dropdown::after,.nav-item:focus-within > .dropdown::after{color:var(--black)}
.nav-item:hover > .dropdown::after,.nav-item:focus-within > .dropdown::after{transform:translateY(-50%) rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);min-width:200px;max-width:calc(100vw - 32px);padding:10px 0;background:rgba(255,255,255,.98);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;z-index:50;transition:opacity .18s ease,visibility .18s ease}
.nav-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{opacity:1;visibility:visible;pointer-events:auto}
.nav-menu a{display:block;padding:10px 16px;font-size:.9rem;white-space:nowrap;transition:background .15s ease,color .15s ease}
.nav-menu a:hover{background:var(--black);color:#fff}
.nav-menu a::after,.nav-menu a::before{display:none;content:none}

/* ---------- mobile header: hamburger + off-canvas drawer ----------
   Below 980px the bar collapses to logo + hamburger and the nav, phone and
   CTA move into a drawer. 980px is LICH's own breakpoint: the rule below
   already restructured .header-inner there, and the header grows from 180px
   to 340px tall at that width, which is most of a phone screen.

   All of it is inert above the breakpoint -- .nav-toggle is display:none and
   the min-width:981px rule takes the drawer out entirely. Behaviour lives in
   assets/site-nav.js. Colours are LICH's own: white panel, --black ink,
   #767676 for the resting row (the same grey .nav > a uses), --border rules. */
.nav-toggle{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin-left:auto;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--black);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .15s ease}
.nav-toggle:hover,.nav-toggle:focus-visible{background:#f1f1f1}
.nav-toggle svg{width:20px;height:20px;fill:currentColor;display:block}
/* The two icons swap on .is-open. Both selectors are scoped to .nav-toggle so
   they are at least as specific as `.nav-toggle svg` above (0,1,1) -- an
   unscoped `.nav-toggle-close{display:none}` (0,1,0) loses to it and the bars
   and the X render stacked on top of each other. */
.nav-toggle .nav-toggle-close{display:none}
.nav-toggle.is-open .nav-toggle-open{display:none}
.nav-toggle.is-open .nav-toggle-close{display:block}

/* 300/301 clears .site-header (100) and .nav-menu (50); the highest z-index
   anywhere else in this project is 200. */
.nav-backdrop{position:fixed;inset:0;z-index:300;background:rgba(17,17,17,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.nav-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease,visibility 0s linear 0s}

/* visibility is delayed on the way OUT (so the panel stays visible while it
   slides away) but flips instantly on the way IN -- hence 0s with a delay
   rather than a plain transition. Transitioning visibility itself leaves it
   computed `hidden` for the first frames after opening, and a hidden element
   cannot take focus, so the script could not move focus into the drawer. */
.nav-drawer{position:fixed;top:0;right:0;bottom:0;z-index:301;width:min(330px,86vw);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--border);box-shadow:-18px 0 46px rgba(17,17,17,.22);transform:translateX(100%);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;transition:transform .26s ease,visibility 0s linear .26s}
.nav-drawer.is-open{transform:translateX(0);visibility:visible;transition:transform .26s ease,visibility 0s linear 0s}

.drawer-nav{display:flex;flex-direction:column;padding:10px 0 6px}
/* full-width rows, 48px+ of touch target each */
.drawer-nav a,.drawer-sub-toggle{display:flex;align-items:center;width:100%;min-height:48px;padding:12px 22px;background:transparent;border:none;font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:.02em;text-align:left;text-decoration:none;color:#767676;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.drawer-nav a:hover,.drawer-nav a:focus-visible,.drawer-sub-toggle:hover,.drawer-sub-toggle:focus-visible{background:#f1f1f1;color:var(--black)}
/* the desktop nav marks the current page by going from #767676 to --black;
   the drawer does the same and adds a rule down the left so it reads at a
   glance in a vertical list */
.drawer-nav a.active,.drawer-sub-toggle.active{color:var(--black);box-shadow:inset 3px 0 0 var(--black)}

/* the hover dropdowns become expand/collapse rows -- there is no hover on
   touch. Caret matches .nav .dropdown::after. */
.drawer-sub-toggle{justify-content:space-between}
.drawer-sub-toggle::after{content:"\25BE";margin-left:12px;font-size:.8rem;color:var(--muted);transition:transform .18s ease}
.drawer-sub-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.drawer-sub{display:flex;flex-direction:column;background:rgba(17,17,17,.03)}
/* has to beat the display:flex above, since the script toggles [hidden] */
.drawer-sub[hidden]{display:none}
.drawer-sub a{padding-left:38px;font-size:.95rem;font-weight:400}

/* margin-top:auto pins this to the bottom however short the list is */
.drawer-foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px 22px 24px;border-top:1px solid var(--border)}
/* .phone-link is a shared rule; only the drawer's layout of it changes */
.drawer-foot .phone-link{justify-content:center;min-height:44px;font-size:1.02rem}
/* LICH's .btn-primary is already black-on-white and pill-shaped, which reads
   correctly on this white panel -- unlike AST's, it needs no inversion. */
.drawer-foot .btn-primary{width:100%;text-align:center}

/* the page behind must not scroll while the drawer is up. Deliberately NOT
   body.modal-open, which already exists in this project for a page dialog --
   sharing the class would let one control untoggle the other. */
body.nav-open{overflow:hidden}

/* ---------- footer ---------- */
.site-footer{width:100%;background:#ffffff;box-shadow:0 -4px 12px rgba(17,17,17,.06);border-top:1px solid rgba(17,17,17,.06)}
.footer-wrap{padding:48px 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;align-items:start}
.footer-column h3{margin:0 0 14px;font-size:1.4rem;font-weight:700;color:#0f2942;line-height:1.2}
.footer-brand{width:220px;height:auto;display:block;margin:0 0 14px}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;color:#0f2942}
.footer-contact-item svg{width:16px;height:16px;min-width:16px;fill:#0f2942;margin-top:3px}
.footer-contact-item a{color:#0f2942;text-decoration:underline;text-underline-offset:2px;line-height:1.5}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:#767676;font-size:1rem;line-height:1.4;letter-spacing:.05em;transition:color .15s ease}
.footer-links a:hover{color:#d13983}
.footer-links .static-link,.footer-links .static-link:hover,.footer-links .static-link:focus,.footer-links .static-link:active{color:#767676;cursor:default;text-decoration:none;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- social bar ---------- */
.social-bar{width:100%;background:#000;min-height:25px;display:flex;align-items:center;justify-content:center;padding:10px 0}
.social-links{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}
.social-link{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease;text-decoration:none}
.social-link:hover,.social-link:focus-visible{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.social-link.facebook{background:#3b5998}
.social-link.youtube{background:#cd201f}
.social-link.instagram{background:#FF008E}
.social-link.linkedin{background:#0077b5}
.social-link.pinterest{background:#bd081c}
.social-link.x-twitter{background:rgba(255,255,255,.12)}
.social-link svg{width:15px;height:15px;display:block;fill:#fff}

@media (max-width:980px){
  /* logo + hamburger only; the nav, phone and CTA live in .nav-drawer.
     flex-wrap goes back to nowrap: with only two children there is nothing
     to wrap, and wrapping would put the hamburger on its own row. */
  .header-inner{flex-wrap:nowrap;justify-content:space-between;gap:16px;padding:10px 0;min-height:0}
  .nav,.header-actions{display:none}
  .nav-toggle{display:inline-flex}
  /* 180px of logo is most of a phone's width */
  .brand img{width:clamp(96px,26vw,132px);height:auto}
}
/* Above the breakpoint the drawer must be unreachable even if an is-open
   class survives a resize. site-nav.js also closes it on the breakpoint
   change; this is the belt to that braces. */
@media (min-width:981px){
  .nav-drawer,.nav-backdrop{display:none}
}

@media (max-width:780px){
  /* already a full single column, not a partial reduction -- so this is where
     the columns start reading as a stack, and where centring belongs */
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-column{text-align:center}
  .footer-brand{margin-left:auto;margin-right:auto}
  .footer-contact{align-items:center}
  /* these are flex rows (icon + text), so centring needs the main axis */
  .footer-contact-item{justify-content:center}
  .footer-links{align-items:center}
}

@media (max-width:640px){
  .nav{gap:16px 18px}
  .brand{font-size:1rem}
  /* stacked footer on a phone: step the type and spacing down together */
  .footer-wrap{padding:36px 0}
  .footer-grid{gap:24px}
  .footer-column h3{font-size:1.2rem;margin-bottom:10px}
  .footer-brand{width:clamp(150px,48vw,200px)}
  .footer-contact-item,.footer-links a{font-size:.94rem}
  .footer-links{gap:6px}
  /* the social row is the last thing on the page; give the taps some room */
  .social-bar{padding:14px 0}
  .social-links{gap:12px}
}

/* the drawer slide is decorative -- honour a reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  .nav-drawer,.nav-backdrop{transition:none}
}