@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,700&display=swap');

/* ============================================================
   Medijus UI — rounded "liquid glass" controls
   Loaded on every page after tailwind.css so it can override
   utility + inline styles. Toned-down: subtle frosted glass,
   low glow. Scoped to primary (gold) action buttons + hero
   search; tabs/filters/accordions are intentionally excluded.
   ============================================================ */

/* Serif display heading — luxury-minimalism hero/section titles */
.display-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* Primary action buttons -> dark "graphite glass" on light pages.
   Gold is reserved for small accents (stars, links, icons). */
a.bg-primary,
button.bg-primary,
input.bg-primary {
  position: relative;
  border-radius: 8px !important;                 /* crisp, professional corners */
  background-color: rgba(31, 41, 55, 0.04) !important;   /* hollow: almost no fill */
  background-image: none !important;
  color: #1f2937 !important;                              /* dark text on light bg */
  border: 1.5px solid rgba(17, 24, 39, 0.32) !important; /* just the stroke */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}
/* Dark pages: light stroke + light text */
.dark a.bg-primary,
.dark button.bg-primary,
.dark input.bg-primary {
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
}

/* Cookie-accept lives on the dark banner -> keep a gold glass accent */
#cookie-accept {
  position: relative;
  border-radius: 8px !important;
  background-color: rgba(212, 160, 23, 0.92) !important;
  background-image: linear-gradient(180deg,
                      rgba(224, 175, 40, 0.95) 0%,
                      rgba(198, 148, 12, 0.92) 100%) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.20) !important;
  transition: transform .2s ease, box-shadow .25s ease !important;
}

/* no fill gloss on the hollow buttons */
a.bg-primary::before,
button.bg-primary::before,
input.bg-primary::before { display: none; }

a.bg-primary:hover,
button.bg-primary:hover,
input.bg-primary:hover,
#cookie-accept:hover {
  transform: translateY(-1px);
}
/* subtle fill on hover so it still feels interactive */
a.bg-primary:hover,
button.bg-primary:hover,
input.bg-primary:hover {
  background-color: rgba(17, 24, 39, 0.07) !important;
  border-color: rgba(17, 24, 39, 0.55) !important;
}
.dark a.bg-primary:hover,
.dark button.bg-primary:hover,
.dark input.bg-primary:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

a.bg-primary:active,
button.bg-primary:active,
input.bg-primary:active,
#cookie-accept:active {
  transform: translateY(0) scale(0.98);
}

/* keep button text/icon above the gloss */
a.bg-primary > *,
button.bg-primary > * {
  position: relative;
  z-index: 1;
  color: inherit !important;
}

/* ---- Hero search field: matching frosted glass (crisp corners) ---- */
#hero-search {
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.05) !important;
}
.dark #hero-search {
  background-color: rgba(31, 41, 55, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* ---- Reusable glass utility (per spec) ---- */
.glass-element {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 10px;
}

/* ---- Frosted navigation bar (sits over scrolling content) ---- */
nav.fixed {
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.dark nav.fixed {
  background: rgba(17, 24, 39, 0.60) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---- Glass cookie banner (over content) ---- */
#cookie-consent-banner {
  background: rgba(17, 24, 39, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ---- Glass modals (over dimmed overlay) ---- */
.modal-card {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
}
.dark .modal-card {
  background: rgba(31, 41, 55, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ---- Hero search pair: slimmer, a touch longer, thin even strokes ---- */
#hero-search,
#hero-search-btn {
  height: 3rem !important;              /* 56px -> 48px: a bit smaller */
}
#hero-search-btn {
  padding-left: 2.75rem !important;     /* a touch longer */
  padding-right: 2.75rem !important;
  font-size: 0.95rem !important;
}
#hero-search {
  border: 1px solid rgba(17, 24, 39, 0.12) !important;  /* thin, even with the button */
}

/* ============================================================
   Luxury-minimalism polish (Superhuman-style) — all pages
   ============================================================ */

/* Tighter, more refined display headings */
h1, h2 { letter-spacing: -0.02em; }
h1 { line-height: 1.1; }

/* Premium, soft card elevation on hover */
.card-hover {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease !important;
}
.card-hover:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px -18px rgba(15, 23, 42, 0.20) !important;
}

/* Refined gold focus ring */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18) !important;
}

/* Smoother, more graceful scroll-reveal (if .reveal is used) */
.reveal { transition-timing-function: cubic-bezier(.2,.7,.2,1) !important; }

/* ============================================================
   Subtle "glass light" — a reflection that reads in BOTH modes.
   Light mode: convey "lit from above" via depth — crisp top edge,
   faint lower inner shade, and a soft elevation shadow (the dark
   cues are what stay visible on white). Dark mode: bright inner
   highlights. Add class="glass-light" to apply to any shape.
   ============================================================ */
.bg-primary\/10, .bg-primary\/20, .bg-primary\/5,
.bg-primary.bg-opacity-10, .bg-primary.bg-opacity-20, .bg-primary.bg-opacity-5,
.glass-light {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),          /* crisp top highlight */
    inset 0 -10px 14px -11px rgba(15, 23, 42, 0.18),  /* lower inner shade */
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 10px 22px -12px rgba(15, 23, 42, 0.14) !important; /* soft elevation */
}
.dark .bg-primary\/10, .dark .bg-primary\/20, .dark .bg-primary\/5,
.dark .bg-primary.bg-opacity-10, .dark .bg-primary.bg-opacity-20, .dark .bg-primary.bg-opacity-5,
.dark .glass-light {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 10px 16px -12px rgba(255, 255, 255, 0.14),
    inset 0 -10px 14px -12px rgba(0, 0, 0, 0.5),
    0 10px 24px -12px rgba(0, 0, 0, 0.55) !important;
}

/* Buttons keep the hollow look but gain a faint lit edge in both modes */
a.bg-primary, button.bg-primary, input.bg-primary, #cookie-accept {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px -12px rgba(15, 23, 42, 0.18) !important;
}
.dark a.bg-primary, .dark button.bg-primary, .dark input.bg-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 18px -12px rgba(0, 0, 0, 0.5) !important;
}