/* ═══════════════════════════════════════════════════════════
   Artizen Construction — shared site styles
   Loaded LAST on every page, so these rules are the single
   source of truth for the navigation. Page-level <style> blocks
   still hold page-specific layout.
═══════════════════════════════════════════════════════════ */

/* ═══ Brand accent ═══
   Warm stone — passes WCAG AA on every dark surface (7.4:1 on ink). */
:root {
  --gold:    #ABA398;
  --gold-lt: #C2BBB0;
}

/* ═══ Desktop dropdowns (needed by pages that don't load styles.css) ═══ */
.nav-dropdown { position:relative; }
.nav-dropdown > a { display:inline-flex; align-items:center; gap:0.4em; }
.nav-dropdown > a::before {
  content:''; display:inline-block; width:0.4em; height:0.4em;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-0.15em); margin-left:0.15em;
  transition:transform 0.3s; opacity:0.7; order:2;
}
.nav-dropdown:hover > a::before { transform:rotate(225deg) translateY(0); }
.nav-dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:280px; padding:0.6rem 0;
  background:rgba(21,19,16,0.98); backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  border:1px solid rgba(120,120,120,0.18); border-radius:3px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,0.7);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1), visibility 0.3s;
  list-style:none; z-index:210;
}
/* hover bridge so the menu doesn't close in the gap */
.nav-dropdown::after { content:''; position:absolute; top:100%; left:0; right:0; height:14px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu li { display:block; }
.nav-dropdown-menu a {
  display:block; padding:0.7rem 1.6rem; width:100%;
  font-family:'Raleway', sans-serif; font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:#CCCCCC; text-decoration:none;
  white-space:nowrap; transition:color 0.25s, background 0.25s;
}
.nav-dropdown-menu a::after { display:none; }
.nav-dropdown-menu a:hover { color:#FEFCF9; background:rgba(120,120,120,0.1); }
.nav-links a[aria-current="page"] { color:#FEFCF9; }

/* ═══ Hamburger ═══ */
.hamburger {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:11px; min-width:44px; min-height:44px;
  background:none; border:none; cursor:pointer;
}
.hamburger span { display:block; width:22px; height:1px; background:#CCCCCC; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1024px) {
  .nav-links, .nav-phone, .nav-right .btn { display:none; }
  .hamburger { display:flex; }
}

/* ═══ Mobile menu drawer ═══
   Top-aligned and scrollable, so every link is reachable on short
   screens. Services / Process / Gallery collapse into groups. */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:199;
  flex-direction:column; align-items:center; justify-content:flex-start;
  gap:0.2rem;
  padding:7.5rem 1.5rem calc(3rem + env(safe-area-inset-bottom));
  background:rgba(21,19,16,0.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  opacity:1; pointer-events:auto;
}
.mobile-nav.open { display:flex; }
.mobile-nav a,
.mobile-group-toggle {
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; padding:0.6rem 1rem;
  font-family:'Raleway', sans-serif; font-size:0.95rem; font-weight:400;
  letter-spacing:0.24em; text-transform:uppercase;
  color:#CCCCCC; text-decoration:none; transition:color 0.3s;
}
.mobile-nav a:hover, .mobile-group-toggle:hover { color:#FEFCF9; }
.mobile-nav a[aria-current="page"] { color:#FEFCF9; }

.mobile-group { width:100%; max-width:340px; flex-shrink:0; }
.mobile-group-toggle {
  width:100%; gap:0.6em; background:none; border:none; cursor:pointer;
}
.mobile-group-toggle::after {
  content:''; width:0.45em; height:0.45em; flex-shrink:0;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-0.15em); transition:transform 0.3s;
}
.mobile-group.open .mobile-group-toggle { color:#FEFCF9; }
.mobile-group.open .mobile-group-toggle::after { transform:rotate(225deg) translateY(-0.05em); }
.mobile-group-list {
  display:none; flex-direction:column;
  margin:0.2rem 0 0.6rem; padding:0.4rem 0;
  border-top:1px solid rgba(120,120,120,0.18);
  border-bottom:1px solid rgba(120,120,120,0.18);
}
.mobile-group.open .mobile-group-list { display:flex; }
.mobile-nav .mobile-group-list a {
  min-height:40px; padding:0.5rem 1rem;
  font-size:0.78rem; letter-spacing:0.16em; color:#AAAAAA;
}
.mobile-nav .mobile-group-list a:hover,
.mobile-nav .mobile-group-list a[aria-current="page"] { color:#FEFCF9; }

.mobile-nav .mobile-nav-phone { margin-top:1.2rem; letter-spacing:0.12em; color:#AAAAAA; }
.mobile-nav a.btn {
  margin-top:0.6rem; flex-shrink:0; padding:1rem 2.6rem;
  font-size:0.72rem; font-weight:500; letter-spacing:0.28em;
  color:#151310; background:var(--gold);
}
.mobile-nav a.btn:hover { background:var(--gold-lt); color:#151310; }

/* ═══ Accessible contrast (WCAG AA, 4.5:1 for body-size text) ═══
   The accent (--gold) is tuned for dark surfaces; on light surfaces
   accent text uses a deeper stone instead. */
.fg label, .az-fg label, .form-note, .az-form-note { color:#5E5A55; }          /* quote form on light grey */
.contact-left .lead, .az-contact-left .az-lead { color:#B9AD9F; }              /* contact intro on dark */
.aoc-section--cream .eyebrow--gold,
.pg-section--cream .eyebrow--gold { color:#6B6660; }                           /* accent eyebrows on cream */
.pg-section--cream .pg-pkg-col .sub { color:#5E5A55; }
.dc-art-credit { color:#6B6660; opacity:1; }
.pg-capstrip-label { color:#6B6660; }
.md-type-n { color:#A09A92; }                                                  /* small numerals on dark */
.bb-tag { color:#E0DAD0; }
.terms-wrap, .policy-wrap { --stone:#6B6660; }                                  /* legal pages: light reading area */
.download-strip, .policy-contact-block { --stone:#A09A92; }                      /* dark panels inside them */

/* ═══ Image dimensions ═══
   width/height attributes let the browser reserve space before images load
   (no layout jump). Zero-specificity so any page rule still wins. */
:where(img[width][height]) { height:auto; }

/* ═══ Anchor links ═══
   Fixed header is ~104px once scrolled; land every #section just below it. */
html { scroll-padding-top:112px; }