/* =====================================================================
   BooKKav — Shared components: header, footer, buttons, cards, motion
   Markup classes are preserved; styling is refined literary-luxury.
   ===================================================================== */

/* ---------------- HEADER (solid, refined, trust-building) ---------------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bk-bg) 86%,transparent); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--bk-border); transition:box-shadow .3s var(--ease);}
.site-header::after{content:""; position:absolute; inset-inline:0; bottom:-1px; height:1px; background:var(--hairline-gold); opacity:.55; pointer-events:none;}
.site-header[data-elevated="true"]{box-shadow:0 10px 30px -18px rgba(8,39,30,.25);}
.header__inner{min-height:74px; display:flex; align-items:center; gap:1.1rem;}

/* ---- top announcement bar (always on top of the header) ---- */
.site-topbar{background:#0a2e24; border-bottom:1px solid rgba(255,255,255,.06);}
.site-topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px;}
.site-topbar__text{margin:0; color:rgba(231,206,148,.92); font-size:.76rem; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.site-topbar__btn{flex:none; display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; line-height:1; color:#231806; background:linear-gradient(180deg,var(--bk-lux-gold-a),var(--bk-gold)); padding:.52rem .92rem; border-radius:999px; white-space:nowrap; transition:filter .2s var(--ease);}
.site-topbar__btn svg{width:11px; height:11px;}
.site-topbar__btn:hover{filter:brightness(1.07);}
@media (max-width:620px){
  .site-topbar__inner{min-height:40px; gap:.5rem;}
  .site-topbar__text{font-size:.7rem;}
  .site-topbar__btn{font-size:.7rem; padding:.44rem .74rem;}
}
@media (max-width:430px){ .site-topbar__text{display:none;} .site-topbar__inner{justify-content:center;} }

.brand{display:inline-flex; align-items:center; gap:.7rem; color:var(--bk-heading);}
.brand__mark{position:relative; width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:12px; background:var(--bk-brand); color:var(--bk-lux-gold-b); font-family:var(--font-display); font-weight:700; font-size:1.4rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.brand__mark::after{content:""; position:absolute; inset:4px; border:1px solid color-mix(in srgb,var(--bk-gold) 45%,transparent); border-radius:8px;}
.brand__text{display:grid; line-height:1.15;}
.brand__text strong{font-family:var(--font-latin); font-weight:600; font-size:1.12rem; color:var(--bk-heading); letter-spacing:.01em;}
.brand__text small{color:var(--bk-muted); font-size:.74rem;}

.main-nav{display:flex; align-items:center; gap:1.3rem; color:var(--bk-body);}
.main-nav--mega{gap:.7rem;}
.main-nav>a{padding:.45rem .2rem; position:relative; font-size:.92rem; color:var(--bk-heading); transition:color .2s var(--ease);}
.main-nav>a::after{content:""; position:absolute; inset-inline:0; bottom:-2px; height:1px; background:var(--bk-gold); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);}
.main-nav>a:hover{color:var(--bk-gold);}
.main-nav>a:hover::after{transform:scaleX(1);}

.nav-group{position:relative; display:inline-flex; align-items:center;}
.nav-group__trigger{border:0; background:transparent; color:var(--bk-heading); cursor:pointer; padding:.45rem .55rem; border-radius:999px; font-size:.92rem; font-weight:inherit; display:inline-flex; align-items:center; gap:.4rem; transition:color .2s var(--ease);}
.nav-group__trigger::after{display:none; content:""; width:6px; height:6px; border-right:1.5px solid var(--bk-gold-700); border-bottom:1.5px solid var(--bk-gold-700); transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--ease);}
.nav-group:hover .nav-group__trigger, .nav-group.is-open .nav-group__trigger{color:var(--bk-gold);}
.nav-group:hover .nav-group__trigger::after, .nav-group.is-open .nav-group__trigger::after{transform:rotate(225deg) translateY(-2px);}

/* active page indicator */
.main-nav>a[aria-current="page"]{font-weight:700; color:var(--bk-gold);}
.main-nav>a[aria-current="page"]::after{transform:scaleX(1);}
.nav-group[data-current="true"] .nav-group__trigger{font-weight:700; color:var(--bk-gold);}
.nav-mega{position:absolute; inset-block-start:calc(100% + 12px); inset-inline-start:0; width:min(420px,82vw); display:grid; gap:.4rem; padding:.7rem; border-radius:18px; border:1px solid var(--bk-border); background:color-mix(in srgb,var(--bk-card) 96%,transparent); box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s var(--ease); backdrop-filter:blur(14px); z-index:60;}
.nav-group:hover .nav-mega, .nav-group.is-open .nav-mega, .nav-group:focus-within .nav-mega{opacity:1; visibility:visible; transform:translateY(0);}
.nav-mega a{display:grid; gap:.15rem; padding:.75rem .85rem; border-radius:12px; border:1px solid transparent; transition:background .2s var(--ease),border-color .2s var(--ease);}
.nav-mega a:hover{border-color:var(--bk-border); background:var(--bk-inset);}
.nav-mega strong{color:var(--bk-heading); font-size:.95rem;}
.nav-mega small{color:var(--bk-muted); font-size:.82rem;}

.header-actions{display:flex; align-items:center; gap:.6rem; margin-inline-start:auto;}
.header-icon-link, .theme-toggle, .nav-toggle{min-width:42px; height:42px; display:inline-grid; place-items:center; border:1px solid transparent; border-radius:11px; color:var(--bk-heading); background:transparent; cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease);}
.header-icon-link:hover, .theme-toggle:hover, .nav-toggle:hover{background:var(--bk-inset); color:var(--bk-gold);}
.header-icon-link svg, .theme-toggle svg{width:18px; height:18px;}
.theme-toggle{font-size:.76rem; font-weight:600;}
.nav-toggle{display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0;}
.nav-toggle span:not(.sr-only){display:block; width:18px; height:2px; background:currentColor; border-radius:99px;}
.logout-inline{display:inline-flex; margin:0;}

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:999px; border:1px solid transparent; padding:.78rem 1.3rem; font-family:var(--font-main); font-weight:600; font-size:.95rem; line-height:1; cursor:pointer; transition:transform .3s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--bk-brand); color:#FBF8F0;}
.btn--primary:hover{background:var(--bk-brand-700);}
.btn--secondary{background:var(--bk-brand-800); color:#FBF8F0;}
.btn--secondary:hover{background:var(--bk-brand-900);}
.btn--ghost{border-color:var(--bk-border); color:var(--bk-heading); background:var(--bk-card);}
.btn--ghost:hover{border-color:var(--bk-gold); color:var(--bk-gold);}
.btn--gold{background:linear-gradient(180deg,var(--bk-lux-gold-b),var(--bk-gold)); color:#231806; box-shadow:var(--shadow-gold);}
.btn--gold:hover{box-shadow:var(--shadow-gold-strong);}
.btn--glass, .btn--on-dark{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); color:#fff; backdrop-filter:blur(8px);}
.btn--glass:hover, .btn--on-dark:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.42); color:#fff;}
.btn--ghost.btn--on-dark{background:rgba(255,255,255,.08);}
.btn--lg{padding:.95rem 1.6rem; font-size:1rem;}
.btn--sm{padding:.55rem .9rem; font-size:.88rem;}

/* ---------------- CARDS ---------------- */
.lux-card{background:var(--bk-card); border:1px solid var(--bk-border); border-radius:var(--radius-lg); padding:clamp(1.1rem,3vw,1.6rem); box-shadow:var(--shadow-soft);}

/* ---------------- FOOTER ---------------- */
.site-footer{position:relative; overflow:hidden; margin-top:0; padding:clamp(48px,6vw,74px) 0 0; background:linear-gradient(160deg,#10312A,#0A2E24); color:#B9C7BF;}
.site-footer::before{content:""; position:absolute; inset-inline:0; top:0; height:1px; background:var(--hairline-gold); opacity:.5;}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.2rem; padding-bottom:clamp(40px,5vw,60px);}
.footer__grid h2{color:#FBF6EA; font-size:.86rem; letter-spacing:.04em; margin:0 0 1.1rem; font-weight:600;}
.footer__grid a{display:block; padding:.32rem 0; color:#A9BCB2; font-size:.9rem; transition:color .2s var(--ease),transform .2s var(--ease);}
.footer__grid a:hover{color:#E7C778; transform:translateX(-4px);}
.footer__brand-block p{margin:1.1rem 0 0; font-size:.9rem; color:#9DB2A8; max-width:34ch; line-height:1.9;}
.brand--footer .brand__mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.brand--footer .brand__text strong{color:#FBF6EA;}
.brand--footer .brand__text small{color:#8BA99C;}
.footer__trust-row{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem;}
.footer__trust-row span{border:1px solid rgba(168,129,45,.3); border-radius:999px; padding:.4rem .8rem; color:#CBB373; font-size:.82rem;}
.footer__bottom{border-top:1px solid rgba(255,255,255,.09); padding:18px 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#8BA99C;}

/* ---------------- MESSAGES ---------------- */
.messages{
  position:fixed;
  top:calc(74px + 1rem);
  right:50%;
  transform:translateX(50%);
  z-index:12000;
  width:min(560px, calc(100vw - 28px));
  margin:0;
  display:grid;
  gap:.7rem;
  pointer-events:none;
}
.message{
  position:relative;
  isolation:isolate;
  padding:.95rem 1.15rem;
  padding-inline-start:2.7rem;
  border-radius:18px;
  background:color-mix(in srgb,var(--bk-card) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--bk-border) 76%,transparent);
  box-shadow:0 24px 70px -30px rgba(14,63,48,.52),0 12px 34px -26px rgba(0,0,0,.38);
  backdrop-filter:saturate(150%) blur(18px);
  color:var(--bk-heading);
  font-weight:650;
  line-height:1.9;
  pointer-events:auto;
  animation:bk-message-in .34s var(--ease-emphatic) both;
  will-change:opacity,transform;
}
.message.is-hiding{
  pointer-events:none;
  animation:bk-message-out .32s var(--ease-emphatic) both;
}
.message::before{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:1rem;
  width:.82rem;
  height:.82rem;
  border-radius:999px;
  transform:translateY(-50%);
  background:var(--info);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--info) 12%,transparent);
}
.message--success{
  border-color:color-mix(in srgb,var(--success) 44%,var(--bk-border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--success) 10%,var(--bk-card)),var(--bk-card) 72%);
}
.message--success::before{
  background:var(--success);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 14%,transparent);
}
.message--error,.message--danger{
  border-color:color-mix(in srgb,var(--danger) 44%,var(--bk-border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 10%,var(--bk-card)),var(--bk-card) 72%);
}
.message--error::before,.message--danger::before{
  background:var(--danger);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--danger) 14%,transparent);
}
.message--warning{
  border-color:color-mix(in srgb,var(--warning) 44%,var(--bk-border));
}
.message--warning::before{
  background:var(--warning);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--warning) 14%,transparent);
}
@keyframes bk-message-in{
  from{opacity:0; transform:translateY(-12px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes bk-message-out{
  from{opacity:1; transform:translateY(0) scale(1);}
  to{opacity:0; transform:translateY(-10px) scale(.98);}
}
@media (max-width:720px){
  .messages{top:.85rem; width:calc(100vw - 24px);}
  .message{border-radius:16px; font-size:.92rem; padding-block:.82rem;}
}

/* ---------------- MOTION HOOKS (powered by motion.js) ---------------- */
.bk-progress{position:fixed; top:0; inset-inline:0; height:3px; z-index:9999; pointer-events:none;}
.bk-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--bk-gold-700),var(--bk-gold),#F0E0B0,var(--bk-gold)); box-shadow:0 0 12px rgba(168,129,45,.5); transition:width .1s linear;}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}
.stagger>*{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease);}
.stagger.is-visible>*{opacity:1; transform:none;}
[data-tilt]{transition:transform .3s var(--ease); transform-style:preserve-3d; will-change:transform;}
.gilt{height:0; border:0; margin:1.6rem 0; position:relative;}
.gilt::before{content:""; position:absolute; inset-inline:0; top:0; height:1px; background:var(--hairline-gold); opacity:.85;}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1180px){
  .main-nav{gap:.5rem; font-size:.92rem;}
  .header-actions{gap:.4rem;}
  .header-register-link{display:none;}
}
@media (max-width:980px){
  .nav-toggle{display:inline-flex;}
  .main-nav{position:fixed; top:118px; right:16px; left:16px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:.5rem; background:linear-gradient(165deg,#0E3F30,#0A2E24); border:1px solid color-mix(in srgb,var(--bk-gold) 24%,transparent); border-radius:18px; box-shadow:0 26px 54px -22px rgba(0,0,0,.7); max-height:calc(100vh - 134px); overflow-y:auto;}
  .main-nav.is-open{display:flex;}
  .main-nav--mega{align-items:stretch;}
  .main-nav>a, .nav-group__trigger{color:#E8EFEA; padding:.85rem .9rem; border-radius:12px; font-size:.95rem;}
  .main-nav>a::after{display:none;}
  .main-nav>*:not(:last-child){border-bottom:1px solid rgba(255,255,255,.08);}
  .main-nav>a:hover, .nav-group__trigger:hover{color:#EBD49A; background:rgba(255,255,255,.05);}
  .main-nav>a[aria-current="page"], .nav-group[data-current="true"] .nav-group__trigger{color:#EBD49A;}
  .nav-group{display:grid;}
  .nav-group__trigger{justify-content:space-between; width:100%; text-align:right; background:transparent;}
  .nav-group__trigger::after{display:inline-block; border-color:#E7C778;}
  .nav-mega{position:static; width:100%; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; margin:.3rem 0 .5rem; padding:.35rem; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.06); border-radius:12px; backdrop-filter:none;}
  .nav-group.is-open .nav-mega{display:grid;}
  .nav-mega a{border:0;}
  .nav-mega a:hover{background:rgba(255,255,255,.06);}
  .nav-mega strong{color:#FBF6EA;}
  .nav-mega small{color:rgba(231,206,148,.66);}
  .header-actions .btn--primary{display:none;}
  .header-panel-link{display:none;}
  .header-actions .logout-inline{display:none;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .footer__grid{grid-template-columns:1fr;}
  .brand__text small{display:none;}
  .header__inner{min-height:64px;}
  .main-nav{top:104px; max-height:calc(100vh - 120px);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .reveal,.stagger>*{opacity:1 !important; transform:none !important;}
}

/* =====================================================================
   Glass header over the emerald hero (homepage) — matches the concept.
   Top of page (data-elevated=false): transparent + light text.
   On scroll interactions.js sets data-elevated=true -> solid light header.
   ===================================================================== */
.site-header{transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .3s var(--ease);}
.brand__mark,.brand__text strong,.brand__text small,.main-nav>a,.nav-group__trigger,.header-icon-link,.theme-toggle,.nav-toggle{transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}

body.hero-dark .site-header:not([data-elevated="true"]){
  background:
    radial-gradient(46% 120% at 80% 34%, rgba(231,206,148,.14), transparent 62%),
    linear-gradient(180deg, #0a2f24 0%, #0e4234 100%);
  border-bottom-color:transparent;
}
body.hero-dark .site-header:not([data-elevated="true"])::after{opacity:0;}
body.hero-dark .site-header:not([data-elevated="true"]) .brand__text strong{color:#FBF6EA;}
body.hero-dark .site-header:not([data-elevated="true"]) .brand__text small{color:rgba(255,255,255,.62);}
body.hero-dark .site-header:not([data-elevated="true"]) .brand__mark{background:rgba(255,255,255,.1); color:#EBD49A; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
body.hero-dark .site-header:not([data-elevated="true"]) .main-nav>a,
body.hero-dark .site-header:not([data-elevated="true"]) .nav-group__trigger{color:#E8EFEA;}
body.hero-dark .site-header:not([data-elevated="true"]) .main-nav>a:hover,
body.hero-dark .site-header:not([data-elevated="true"]) .nav-group:hover .nav-group__trigger,
body.hero-dark .site-header:not([data-elevated="true"]) .nav-group.is-open .nav-group__trigger{color:#EBD49A;}
body.hero-dark .site-header:not([data-elevated="true"]) .main-nav>a[aria-current="page"],
body.hero-dark .site-header:not([data-elevated="true"]) .nav-group[data-current="true"] .nav-group__trigger{color:#EBD49A;}
body.hero-dark .site-header:not([data-elevated="true"]) .nav-group__trigger::after{border-color:#E7C778;}
body.hero-dark .site-header:not([data-elevated="true"]) .header-icon-link,
body.hero-dark .site-header:not([data-elevated="true"]) .theme-toggle,
body.hero-dark .site-header:not([data-elevated="true"]) .nav-toggle{background:transparent; border-color:transparent; color:#EFF4F1;}
body.hero-dark .site-header:not([data-elevated="true"]) .header-icon-link:hover,
body.hero-dark .site-header:not([data-elevated="true"]) .theme-toggle:hover,
body.hero-dark .site-header:not([data-elevated="true"]) .nav-toggle:hover{background:rgba(255,255,255,.1); color:#EBD49A;}
body.hero-dark .site-header:not([data-elevated="true"]) .header-actions .btn--primary{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff;}
body.hero-dark .site-header:not([data-elevated="true"]) .header-actions .btn--primary:hover{background:rgba(255,255,255,.18);}

/* mobile menu panel is now dark green -> its links/triggers stay light even over a dark hero */
@media (max-width:980px){
  body.hero-dark .site-header:not([data-elevated="true"]) .main-nav>a,
  body.hero-dark .site-header:not([data-elevated="true"]) .nav-group__trigger{color:#E8EFEA;}
  body.hero-dark .site-header:not([data-elevated="true"]) .main-nav>a[aria-current="page"],
  body.hero-dark .site-header:not([data-elevated="true"]) .nav-group[data-current="true"] .nav-group__trigger{color:#EBD49A;}
}