/* Kashi & Kin — shared nav + footer styles. Included on every page via
   <link rel="stylesheet" href="/assets/nav.css">. Edit here, it updates
   everywhere at once. Depends on the CSS custom properties (--ink, --brass,
   etc.) already declared in each page's :root — this file doesn't redefine them. */

nav{position:sticky;top:0;z-index:100;background:rgba(18,16,14,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:16px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
nav .wrap.nav-in{padding-left:14px}
.logo{font-family:var(--serif);font-size:1.3rem;font-weight:500}
.logo span{color:var(--brass)}
.logo small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.3em;color:rgba(232,224,210,.45);text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav-links>a{font-size:.8rem;letter-spacing:.04em;color:rgba(232,224,210,.7);transition:.25s}
.nav-links>a:hover,.nav-links>a.active{color:var(--brass-lit)}
.nav-cta{border:1px solid var(--brass);color:var(--brass-lit)!important;padding:9px 18px;border-radius:1px;font-family:var(--mono);font-size:.68rem!important;letter-spacing:.12em!important;text-transform:uppercase;transition:.3s}
.nav-cta:hover{background:var(--brass);color:var(--ink)!important}
.nav-contact,.nav-auth{background:none;border:1px solid var(--line);color:rgba(232,224,210,.75);padding:9px 16px;border-radius:1px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.25s}
.nav-contact:hover,.nav-auth:hover{border-color:var(--brass);color:var(--brass-lit)}
.burger{display:none;background:none;border:0;color:var(--sandstone);font-size:1.4rem;cursor:pointer}

.nav-drop{position:relative}
.nav-drop-btn{display:flex;align-items:center;gap:6px;background:none;border:0;font-family:inherit;font-size:.8rem;letter-spacing:.04em;color:rgba(232,224,210,.7);cursor:pointer;padding:4px 0;transition:.25s}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn,.nav-drop.active .nav-drop-btn{color:var(--brass-lit)}
.nav-drop-btn svg{transition:transform .25s}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);min-width:210px;background:rgba(18,16,14,.98);border:1px solid var(--line);border-radius:3px;padding:10px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.2s ease;backdrop-filter:blur(14px);z-index:50}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible}
.nav-drop-menu a{padding:9px 12px;border-radius:2px;font-size:.82rem;white-space:nowrap;color:rgba(232,224,210,.75)}
.nav-drop-menu a:hover,.nav-drop-menu a.active{background:rgba(184,134,58,.12);color:var(--brass-lit)}

.crumb{padding:18px 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:rgba(232,224,210,.4)}
.crumb a:hover{color:var(--brass-lit)}

footer{padding:70px 0 30px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;padding-bottom:40px}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-cols h6{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.foot-cols ul{list-style:none}
.foot-cols li{margin-bottom:10px;font-size:.85rem;color:rgba(232,224,210,.65)}
.foot-cols a:hover{color:var(--brass-lit)}
.legal-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;border-top:1px solid var(--line);font-size:.68rem;color:rgba(232,224,210,.35)}
.legal-links .links{display:flex;gap:16px;flex-wrap:wrap}
.legal-links a{color:rgba(232,224,210,.4)}
.legal-links a:hover{color:var(--brass-lit)}

@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;padding:26px 28px;gap:6px;border-bottom:1px solid var(--line);max-height:80vh;overflow-y:auto}
  .nav-drop-menu{position:static;transform:none;opacity:1;visibility:visible;display:none;background:transparent;border:0;padding:4px 0 10px 14px;backdrop-filter:none}
  .nav-drop.open .nav-drop-menu{display:flex}
  .nav-drop-btn{width:100%;justify-content:space-between;padding:10px 0}
  .nav-auth{width:100%;text-align:center}
}
@media(max-width:640px){
  .foot{gap:30px}
  .foot-cols{gap:30px}
}

/* ---------- shared "Contact us" modal (fallback for pages with no local
   modal of their own) — see footer.php for the markup + JS, and header.php
   for the "Contact us" button that triggers it. Most pages don't redefine
   these classes locally, so they need to live here to render correctly. ---------- */
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);opacity:.6}
.auth-overlay{position:fixed;inset:0;background:rgba(18,16,14,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:.3s;padding:20px}
.auth-overlay.open{opacity:1;pointer-events:auto}
.auth-modal{background:#171412;border:1px solid var(--line);max-width:420px;width:100%;padding:44px 36px;position:relative;max-height:90vh;overflow-y:auto}
.auth-close{position:absolute;top:16px;right:18px;background:none;border:0;color:rgba(232,224,210,.5);font-size:1.6rem;cursor:pointer;line-height:1}
.auth-close:hover{color:var(--brass-lit)}
.auth-title{font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--paper);margin-top:18px}
.auth-sub{font-size:.86rem;color:rgba(232,224,210,.6);margin-top:10px;line-height:1.6}
.contact-icons{display:flex;justify-content:center;gap:16px;margin-top:26px}
.contact-icons a{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.25s}
.contact-icons a:hover{border-color:var(--brass);background:rgba(184,134,58,.08)}
.contact-icons svg{width:20px;height:20px;stroke:var(--brass-lit);flex-shrink:0}
.auth-divider{display:flex;align-items:center;gap:14px;margin:26px 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,224,210,.35)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.contact-form{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.contact-form-row{display:flex;gap:10px;flex-wrap:wrap}
.contact-form-row .auth-input{flex-basis:140px}
.auth-input{width:100%;flex:1;min-width:0;background:var(--ink);border:1px solid var(--line);color:var(--paper);padding:14px 16px;font-family:var(--sans);font-size:.9rem;border-radius:1px}
.auth-input:focus{border-color:var(--brass);outline:none}
.contact-form textarea{background:var(--ink);border:1px solid var(--line);color:var(--paper);padding:14px 16px;font-family:var(--sans);font-size:.9rem;border-radius:1px;resize:vertical;min-height:90px}
.contact-form textarea:focus{border-color:var(--brass);outline:none}
.contact-note{margin-top:14px;font-size:.8rem;color:var(--brass-lit);min-height:18px}
.btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 24px;border-radius:2px;border:1px solid;transition:.25s;display:inline-block}
.btn-solid{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:500}
.btn-solid:hover{background:var(--brass-lit);border-color:var(--brass-lit)}