/* /assets/layout.css */
:root{
  --bg:#FAFAF8;
  --paper:#fff;
  --ink:#3e3e3a;
  --muted:#7a766e;
  --accent:#A88A5A;
  --line:#e9e6df;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --gap:clamp(16px,3vw,32px);
  --maxw:1200px;

  /* “Galleries” dropdown knobs */
  --submenu-offset: 1px;
  --submenu-gap:    8px;

  /* Mobile knobs */
  --mobile-icon: 54px;
  --drawer-w: clamp(145px, 28vw, 145px);

  /* Drawer polish knobs */
  --drawer-bg:#fff;
  --drawer-hover:rgba(168,138,90,.10);
  --drawer-rule:rgba(0,0,0,.06);

  --drawer-pad-x: 10px;
  --drawer-bottom-gap: 24px;
}

*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--ink); line-height:1.65 }
a{ color:inherit; text-decoration:none; transition:color .15s ease }
img{ max-width:100%; height:auto; display:block }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gap) }

[data-include="/partials/topnav.html"]{ display:block; min-height:64px }
[data-include="/partials/footer.html"]{ display:block; min-height:68px }

/* ================= TOP NAV ================= */
.topbar{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:16px var(--gap); z-index:10; background:transparent;
}
.brand{ display:none }

nav.primary ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0 }
nav.primary li{ position:relative }
nav.primary a{
  font-family:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500; font-size:clamp(16px,1.8vw,20px);
  letter-spacing:.02em; padding:4px 2px; border:0;
}
nav.primary a:hover, nav.primary a:focus-visible{ color:var(--accent); outline:none }
.has-sub:hover > a, .has-sub:focus-within > a{ color:var(--accent) }

.has-sub{ position:relative }
.has-sub::after{ content:""; position:absolute; left:-8px; right:-8px; top:100%; height:12px; background:transparent }

nav.primary .has-sub > .dropdown{
  position:absolute; top:calc(100% + var(--submenu-offset)); left:50%; transform:translateX(-50%);
  background:transparent; border:0; box-shadow:none;
  display:flex; flex-direction:column; align-items:center; gap:var(--submenu-gap);
  margin:0; padding:0; list-style:none; min-width:unset;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; z-index:999;
}
.has-sub:hover > .dropdown, .has-sub:focus-within > .dropdown, nav.primary .dropdown:hover{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 2px);
}
nav.primary .dropdown li{ list-style:none; margin:0; padding:0 }
nav.primary .dropdown a{
  display:block; font-family:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:700; font-size:clamp(14px,1.35vw,16px); line-height:1.02; letter-spacing:.005em;
  padding:0; margin:0; border:0; background:transparent; white-space:nowrap;
}
nav.primary li.has-sub:hover > ul.dropdown{
  display:flex !important; opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important; transform:translate(-50%, 2px) !important;
}

/* Footer (unchanged) */
footer{ border-top:1px solid var(--line); padding:28px 0; color:#7f7f7f; margin-top:32px }
.footer-social{ display:flex; align-items:center; gap:10px }
.footer-social .social-ico{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.7); border:1px solid rgba(63,58,51,.6); color:#3f3a33;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.06);
  -webkit-backdrop-filter:saturate(1.05) blur(2px); backdrop-filter:saturate(1.05) blur(2px);
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.footer-social .social-ico:hover, .footer-social .social-ico:focus-visible{
  color:var(--accent); border-color:var(--accent); box-shadow:0 10px 22px rgba(0,0,0,.08);
  transform:translateY(-1px); outline:none;
}
.footer-social .social-ico svg{ width:18px; height:18px; display:block }
@media (max-width:720px){
  footer .container{ justify-content:center !important; text-align:center }
  .footer-social{ justify-content:center }
}

/* ===== site-header (non-hero pages) ===== */
.site-header .topnav, .site-header .topnav ul{ list-style:none; margin:0; padding:0 }
.site-header .topnav{ display:flex; gap:28px; justify-content:center; padding:18px 0 }
.site-header .topnav .has-sub{ position:relative }
.site-header .topnav .has-sub > .dropdown{
  position:absolute; top:calc(100% + var(--submenu-offset)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:var(--submenu-gap);
  opacity:0; visibility:hidden; pointer-events:none; background:transparent; border:0; box-shadow:none; min-width:unset; z-index:1000;
}
.site-header .topnav .has-sub:hover > .dropdown, .site-header .topnav .has-sub:focus-within > .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
}
.site-header .topnav .dropdown a{
  font-family:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:700; font-size:clamp(13px,1.65vw,15px); line-height:1.05; padding:0; border:0; background:transparent; white-space:nowrap;
}

/* ===== Sidebar Galleries spacing ===== */
.side-galleries{ --gap:14px }
.side-galleries h3{ margin:0 }
.side-galleries .links{ display:grid; row-gap:var(--gap); padding-top:var(--gap); margin:0; list-style:none }
.side-galleries .links a{ display:block }

/* =================================================================== */
/* ======================= MOBILE NAV: FULL-PAGE ===================== */
/* =================================================================== */

.navchk{ position:absolute; opacity:0; pointer-events:none }
.nav-toggle{ display:none }

@media (min-width:821px){
  nav.primary ul{ display:flex; gap:28px; align-items:center }
}

@media (max-width:820px){
  html, body{ overflow-x:hidden }
  body.drawer-open{ overflow:hidden }

  .topbar{
    justify-content:flex-start !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
    gap:12px; border:0 !important;
  }
  .brand{ display:none !important }

  .nav-toggle-8{
    position:relative; width:44px; height:26px; border:0;
    background:transparent !important; box-shadow:none !important; cursor:pointer; color:#2f2a24;
    z-index:2400; pointer-events:auto;
  }
  .nav-toggle-8 .bar{
    position:absolute; left:0; height:2px; border-radius:999px; background:currentColor; opacity:.96;
    box-shadow:0 .5px 0 rgba(255,255,255,.45), 0 6px 12px rgba(0,0,0,.18);
  }
  .nav-toggle-8 .b-bot{ width:28px; bottom:2px; left:0; }
  .nav-toggle-8 .b-mid{ width:20px; top:50%; transform:translate(-50%, -50%); left:50%; }
  .nav-toggle-8 .b-top{ width:14px; top:2px; left:50%; }

  nav.primary{
    position:fixed; inset:0; width:100vw; height:100dvh; max-height:none;
    background:var(--drawer-bg); border:0; box-shadow:none;
    transform:translateY(-4%); opacity:0; pointer-events:none;
    transition:opacity .28s ease, transform .28s ease;
    z-index:2000; overflow:auto; will-change:opacity,transform;
  }
  .navchk:checked ~ nav.primary{ opacity:1; pointer-events:auto; transform:translateY(0); }

  .nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1990;
  }
  #navchk:checked ~ .nav-overlay{ opacity:1; pointer-events:auto; }

  .nav-x{
    position:fixed; top:10px; right:12px; z-index:2300;
    width:auto; height:auto; padding:8px 10px;
    background:transparent; border:0; box-shadow:none;
    color:#3f3a33; font-size:26px; line-height:1; cursor:pointer;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  #navchk:checked ~ .nav-x{ opacity:1; pointer-events:auto; }

  nav.primary ul{
    display:flex; flex-direction:column; align-items:center;
    gap:12px; margin:0; padding:calc(16px + 56px) 16px 28px;
    list-style:none; row-gap:6px; text-align:center;
  }
  nav.primary li{ width:min(520px, 92vw); }

  nav.primary > ul > li > a{
    display:block; width:100%;
    font-family:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:500; font-size:20px; line-height:1.35;
    padding:12px 16px; border-radius:10px; text-align:center;
  }

  /* Submenu (centered) */
  nav.primary .has-sub .dropdown{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    display:block; background:transparent; border:0; box-shadow:none;
    margin:6px 0 12px 0; padding:0; list-style:none; text-align:center;
  }
  nav.primary .has-sub .dropdown[hidden]{ display:none !important; }
  nav.primary .has-sub .dropdown a{
    display:block; width:100%;
    font-family:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:500; font-size:20px; line-height:1.35;
    padding:12px 16px; border-radius:10px; background:transparent; text-align:center;
  }
  nav.primary .has-sub .dropdown a::before{ content:none; }
  nav.primary .has-sub .dropdown a:hover,
  nav.primary .has-sub .dropdown a:focus-visible{
    background:var(--drawer-hover); color:var(--ink); outline:none;
  }

  /* ===== “Galleries” = details/summary with ONE black caret ===== */
  nav.primary li.m-galleries{ width:min(520px,92vw); margin:0 auto; }

  /* Kill iOS/Safari default marker HARD */
  details > summary::-webkit-details-marker{ display:none !important; }
  details > summary::marker{ content:"" !important; display:none !important; }

  nav.primary li.m-galleries summary.g-sum{
    list-style:none !important; appearance:none; -webkit-appearance:none;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 16px; border-radius:10px; user-select:none; -webkit-tap-highlight-color:transparent;
    font-family:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:500; font-size:20px; line-height:1.35; color:var(--ink);
  }

  /* Label matches other links */
  nav.primary li.m-galleries .g-link{
    color:var(--ink) !important; text-decoration:none; display:inline-block;
    font-family:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-weight:500 !important; font-size:20px !important; line-height:1.35 !important;
  }

  /* Our single black caret */
  nav.primary li.m-galleries .g-caret{
    appearance:none; border:0; background:transparent; padding:0 2px; line-height:1; cursor:pointer;
    font-size:20px; color:var(--ink); display:inline-block;
  }
  nav.primary li.m-galleries .g-caret::after{ content:"▾"; }
  nav.primary li.m-galleries details[open] .g-caret::after{ content:"▴"; }

  /* Nuke any theme-added arrows/pseudos that cause the blue caret (mobile drawer scope) */
  .topbar nav.primary a::before,
  .topbar nav.primary a::after,
  .topbar nav.primary summary::before,
  .topbar nav.primary summary::after{
    content:none !important; display:none !important;
  }

  /* Show submenu only when open */
  nav.primary li.m-galleries details:not([open]) ul.dropdown{ display:none !important; }
  nav.primary li.m-galleries details[open] ul.dropdown{
    display:flex !important; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
    width:fit-content; max-width:92vw; margin:6px auto 12px auto; padding:0; list-style:none; text-align:center;
  }

  .hero{ transition:none; will-change:auto }
  #content, [data-include="/partials/footer.html"]{ transition:none; will-change:auto; transform:none !important; }

  /* REMOVED the :has() selectors (performance) — kept .drawer-open below */
  /* body:has(#navchk:checked) #content,
  body:has(#navchk:checked) [data-include="/partials/footer.html"],
  body:has(#navchk:checked) .hero{ transform:none !important; } */

  body.drawer-open #content,
  body.drawer-open [data-include="/partials/footer.html"],
  body.drawer-open .hero{ transform:none !important; }

  nav.primary a[aria-current="page"]{
    background:transparent !important; color:var(--accent) !important; position:static !important;
  }
  nav.primary a[aria-current="page"]::before{ content:none !important }

  nav.primary > ul > li + li{ position:relative }
  nav.primary > ul > li + li::before{
    content:""; position:absolute; left:10%; right:10%; top:-3px; height:1px;
    background:linear-gradient(to right, transparent, var(--drawer-rule), transparent);
    opacity:.6;
  }

  /* ------ Standard practice: subtle hierarchy for mobile submenu ------ */
  nav.primary li.m-galleries .dropdown a{
    font-size:18px;         /* top-level remains 20px */
    padding:10px 14px;      /* keeps tap area ~44px+ with line-height */
    line-height:1.35;
  }
}

/* ================= Desktop current page state ================= */
@media (min-width:821px){
  .topbar nav.primary a[aria-current="page"],
  .topbar nav.primary a.is-current{
    color: var(--accent);
    position: static;
    text-decoration: none;
  }
  .topbar nav.primary a[aria-current="page"]::after,
  .topbar nav.primary a.is-current::after{ content: none; }
}

/* FINAL override: no underline for current on desktop */
@media (min-width:821px){
  .topbar nav.primary a.is-current,
  .topbar nav.primary a[aria-current="page"]{
    color: var(--accent);
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    position: static !important;
  }
  .topbar nav.primary a.is-current::after,
  .topbar nav.primary a[aria-current="page"]::after{
    content: none !important; display: none !important;
  }
}

/* Tap stability */
@media (max-width:820px){
  .topbar .is-galleries-dropdown a{
    transition-property: color, background-color, box-shadow, text-shadow, border-color;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
  }
  .topbar .is-galleries-dropdown a:active,
  .topbar .is-galleries-dropdown a:focus{
    font-weight: inherit !important;
    transform: none !important;
    padding-left: inherit !important;
    margin-left: 0 !important;
  }
  .topbar .is-galleries-dropdown a.current,
  .topbar .is-galleries-dropdown a[aria-current="page"]{
    font-weight: inherit !important;
  }
  html.submenu-tap #content,
  html.submenu-tap .hero,
  html.submenu-tap [data-include="/partials/footer.html"]{
    transition: none !important; transform: none !important;
  }
}