/* ============================================================
   Baldų Filosofija — shared site styles
   Loaded on every page. Page-specific rules live in each
   page's own <style> block.
   ============================================================ */

/* BRAND TOKENS */
:root {
  --clr-brand:        #C4973E;
  --clr-brand-soft:   rgba(196,151,62,.08);
  --clr-brand-border: rgba(196,151,62,.25);
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --container-max: 1200px;
  --radius: 4px;
}

body { font-family: var(--font-body); }

/* ── NAV ─────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:200; backdrop-filter:blur(10px); }

.nav-inner { position:relative; display:flex; align-items:center; gap:var(--sp-4); max-width:var(--container-max); width:100%; margin:0 auto; }
.nav-links  { position:absolute !important; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav-cta    { margin-left:auto; }
.nav-hamburger { flex-shrink:0; font-size:28px !important; }

/* nav link hover underline */
.nav-link { position:relative; transition:color .22s; }
.nav-link::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:var(--clr-brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover { color:var(--clr-brand) !important; }
.nav-link:hover::after,
.nav-link.active::after { transform:scaleX(1); }

/* logos */
.nav-logo-img {
  height:44px; width:auto; display:block;
  filter:brightness(0); transition:filter .25s;
}
.nav-logo-img:hover { filter:brightness(0) sepia(1) saturate(5) brightness(1.1); }
.footer-logo-img { filter:brightness(0) invert(1); height:48px; width:auto; }

/* ── MOBILE MENU ─────────────────────────────────────────── */
.mobile-menu {
  position:fixed; inset:0; background:var(--clr-white); z-index:999;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .25s, transform .25s;
  display:flex; flex-direction:column; padding:0 24px 32px;
}
.mobile-menu.open { opacity:1; pointer-events:all; transform:none; }
.mobile-menu-header {
  height:68px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--clr-line); flex-shrink:0;
}
.mobile-menu-logo { height:48px; width:auto; filter:brightness(0); }
.mobile-menu-links { display:flex; flex-direction:column; padding:24px 0; gap:0; flex:1; justify-content:center; }
.mobile-menu-link {
  font-size:28px; font-weight:400; color:var(--clr-ink-2);
  padding:16px 0; border-bottom:1px solid var(--clr-line);
  text-decoration:none; text-align:center;
  font-family:var(--font-heading);
}
.mobile-menu-link.active { color:var(--clr-brand); }
.mobile-menu-footer { display:flex; flex-direction:column; gap:10px; }
.mobile-menu-tel {
  text-align:center; padding:12px; font-size:15px; font-weight:500;
  color:var(--clr-ink-2); text-decoration:none;
  border:1px solid var(--clr-line); border-radius:var(--radius);
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { border-radius:var(--radius) !important; font-weight:400 !important; }
.btn-warm          { background:#C4973E !important; color:#fff !important; border-color:#C4973E !important; }
.btn-warm:hover    { background:#b08635 !important; border-color:#b08635 !important; color:#fff !important; }

/* gold outline style — used by nav CTA and hero secondary button */
.btn-outline-gold,
.nav-cta {
  background:transparent !important;
  color:var(--clr-brand) !important;
  border:1px solid var(--clr-brand) !important;
}
.btn-outline-gold:hover,
.nav-cta:hover { background:rgba(255,255,255,.12) !important; color:#fff !important; }

/* ghost button for dark backgrounds */
.btn-outline-white {
  display:inline-flex; align-items:center; gap:8px;
  padding:0 24px; height:44px;
  font-size:15px; font-weight:400;
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.3);
  background:transparent; text-decoration:none;
  border-radius:var(--radius); box-sizing:border-box;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:white; }

/* large size modifier */
.btn.btn-lg,
.btn-outline-white.btn-lg { height:52px; padding:0 28px; font-size:16px; }

/* ── FORM FIELDS (modal + contact page) ──────────────────── */
.field-wrap  { display:flex; flex-direction:column; gap:6px; }
.field-label {
  font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--clr-ink-2);
}
.field-input {
  width:100%; padding:11px 14px; font-size:15px; font-family:var(--font-body);
  border:1px solid var(--clr-line); background:var(--clr-white); color:var(--clr-ink);
  outline:none; transition:border-color .2s; box-sizing:border-box;
  border-radius:var(--radius); appearance:none; -webkit-appearance:none;
}
.field-input:focus   { border-color:var(--clr-brand); }
.field-input::placeholder { color:var(--clr-muted, #aaa); }
.field-input.error   { border-color:#e05252; }
.field-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.field-textarea { resize:vertical; min-height:100px; }
.field-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── FOOTER GRID ─────────────────────────────────────────── */
@media(max-width:768px){ .footer-grid { grid-template-columns:1fr 1fr !important; } }
@media(max-width:480px){ .footer-grid { grid-template-columns:1fr !important; } }

/* ── MOBILE STICKY CTA (index only, harmless on other pages) */
#mobile-sticky-cta {
  display:none;
  position:fixed; bottom:20px; left:0; right:0; z-index:900;
  text-align:center;
  transform:translateY(80px); opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.28));
}
#mobile-sticky-cta.visible { transform:translateY(0); opacity:1; }
@media(max-width:900px) {
  #mobile-sticky-cta { display:block; }
  .nav-cta    { display:none !important; }
  .nav-hamburger { margin-left:auto; }
  .nav-logo-img.hidden { opacity:1 !important; pointer-events:auto !important; }
}