/* =====================================================
   CASEY ADDASON PHOTOGRAPHY — SHARED NAV
   One file, all pages. Three states: desktop, tablet, phone.
   ===================================================== */

/* ── Announce bar ── */
.announce, .site-announce { display: none; }

/* ── Header ── */
header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(253,252,250,0.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  height: 80px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px,4vw,60px);
}

/* ── Nav links ── */
.nav-group { display: flex; align-items: center; gap: clamp(16px,2.5vw,32px); }
.nav-group:last-of-type { justify-content: flex-end; }
.nav-link {
  font-size: 14px; font-weight: 500; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--warm-gray, #7A7670);
  text-decoration: none; transition: color .3s; position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--bronze, #B8864E); transition: width .3s;
}
.nav-link:hover { color: var(--charcoal, #1D1D1D); }
.nav-link:hover::after { width: 100%; }

/* ── Logo ── */
.logo { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.logo img { height: clamp(52px, 5.76vw, 72px); width: auto; display: block; }

/* ── CTA button ── */
.nav-cta {
  display: inline-block; background: var(--charcoal, #1D1D1D);
  color: var(--cream, #F5F1EB); padding: 10px 26px;
  font-size: 16px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; text-decoration: none; transition: background .3s;
}
.nav-cta:hover { background: var(--bronze, #B8864E); }

/* ── Hamburger ── */
.hamburger {
  display: none; cursor: pointer;
  width: 28px; height: 20px; position: relative; z-index: 1100;
}
.hamburger span {
  display: block; width: 100%; height: 1.5px;
  background: var(--charcoal, #1D1D1D);
  position: absolute; left: 0; transition: all .3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ── Mobile menu overlay ── */
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: var(--warm-white, #FDFCFA); z-index: 1050;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 32px; font-weight: 300; color: var(--charcoal, #1D1D1D);
  text-decoration: none; letter-spacing: 2px;
}

/* ── Dropdown (desktop only) ── */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-link { display: flex; align-items: center; gap: 4px; }
.dd-arrow { font-size: 10px; transition: transform .3s; line-height: 1; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--warm-white, #FDFCFA); border: 1px solid var(--sand, #E8E2D8);
  box-shadow: 0 12px 40px rgba(0,0,0,.08); padding: 12px 0; min-width: 200px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 1100;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown:hover .dd-arrow { transform: rotate(180deg); }
.nav-dropdown-menu a {
  display: block; padding: 10px 24px; font-size: 13px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--warm-gray, #7A7670);
  text-decoration: none; transition: color .2s, background .2s; white-space: nowrap;
}
.nav-dropdown-menu a:hover { color: var(--charcoal, #1D1D1D); background: var(--sand, #E8E2D8); }

/* ── Mobile services dropdown ── */
.mobile-services-group { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mobile-services-toggle {
  font-family: var(--heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 32px; font-weight: 300; color: var(--charcoal, #1D1D1D);
  text-decoration: none; letter-spacing: 2px;
  display: flex; align-items: center; gap: 8px;
}
.mobile-services-list {
  display: none; flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 0 8px;
}
.mobile-services-group.open .mobile-services-list { display: flex; }
.mobile-services-group.open .dd-arrow { transform: rotate(180deg); }
.mobile-services-list a {
  font-family: var(--body, 'DM Sans', sans-serif);
  font-size: 16px; color: var(--warm-gray, #7A7670);
  text-decoration: none; letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   HERO NAV — homepage transparent overlay
   Add data-nav="hero" to <header> for this behavior
   ═══════════════════════════════════════════ */
header[data-nav="hero"] {
  position: fixed !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  transition: background .4s, backdrop-filter .4s, padding .3s;
}
header[data-nav="hero"].scrolled {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
header[data-nav="hero"].scrolled {
  background: rgba(11,10,8,0.98) !important;
}
header[data-nav="hero"] .nav-link {
  color: rgba(255,255,255,0.75) !important;
}
header[data-nav="hero"] .nav-link:hover {
  color: #fff !important;
}
header[data-nav="hero"].scrolled .nav-link {
  color: rgba(255,255,255,0.6) !important;
}
header[data-nav="hero"].scrolled .nav-link:hover {
  color: #fff !important;
}
header[data-nav="hero"] .nav-cta {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}
header[data-nav="hero"] .nav-cta:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.7) !important;
}
header[data-nav="hero"].scrolled .nav-cta {
  background: #fff !important;
  color: var(--bronze, #B8864E) !important;
  border-color: #fff !important;
}
header[data-nav="hero"].scrolled .nav-cta:hover {
  background: var(--bronze, #B8864E) !important;
  color: #fff !important;
}
header[data-nav="hero"] .hamburger span {
  background: #fff !important;
}
header[data-nav="hero"] .dd-arrow {
  color: rgba(255,255,255,0.75);
}

/* ═══════════════════════════════════════════
   TABLET (≤1200px) — hamburger replaces nav links
   Covers all iPads (1024-1180px landscape) + narrow laptops
   ═══════════════════════════════════════════ */
@media (max-width: 1200px) {
  html .nav-group:first-of-type { display: none !important; }
  html .nav-group .nav-cta { display: none !important; }
  html .hamburger { display: block !important; }
  html .nav-dropdown-menu { display: none !important; }
  html header {
    height: 64px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  html header:not([data-nav="hero"]) {
    position: sticky !important;
  }
  html .logo img { height: 44px !important; }
  html .nav-group:last-of-type { display: flex !important; }
  /* Hero nav on tablet: keep fixed, center logo */
  html header[data-nav="hero"] {
    padding: 16px 20px !important;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  }
  html header[data-nav="hero"] .logo {
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  html header[data-nav="hero"] .nav-group:last-of-type {
    position: absolute; right: 20px;
  }
}

/* ═══════════════════════════════════════════
   PHONE (≤600px) — tighter spacing
   ═══════════════════════════════════════════ */
@media (max-width: 600px) {
  html header { padding: 0 16px !important; }
  html .logo img { height: 40px !important; }
}