/* ==========================================================
   Lakiasiat Kari Korhonen Oy - Modern Light Scandinavian Legal Theme
   Clean, Bright, Prestigious, Mobile-First
   ========================================================== */

/* Fonts are loaded with <link rel=stylesheet> + preconnect in the templates. */

:root {
  /* Light Modern Nordic Palette */
  --bg-main: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-muted: #F1F5F9;
  
  /* Primary & Accent Blues */
  --nordic-navy-dark: #07101C;
  --nordic-navy: #0B192C;
  --nordic-blue-bar: #15305B;      /* Lighter, rich sapphire blue for navbar */
  --nordic-blue-hover: #1E3E62;
  --nordic-slate: #334155;
  --text-dark: #0F172A;
  --text-body: #334155;
  --text-muted: #64748B;
  
  /* Refined Gold & Amber Accents */
  --gold-primary: #C5A880;
  --gold-dark: #9A7B40;
  --gold-accent: #D97706;
  --gold-hover: #F59E0B;
  /* Darkened so white button text keeps >= 4.5:1 across the whole gradient */
  --gold-gradient: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  --gold-soft-gradient: linear-gradient(135deg, #FDF8F0 0%, #F5EBE0 100%);
  
  /* Radii & Shadows */
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-subtle: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 10px 30px -4px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
  --shadow-gold: 0 10px 25px -5px rgba(217, 119, 6, 0.28);
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  min-height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-body);
  background-color: var(--bg-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Headings: Clean, Modern Sans-Serif */
/* Headings: Clean, Modern Sans-Serif.
   No colour here on purpose. This rule comes after Tailwind, so a colour set
   here beat every inherited `text-white` — a heading inside a dark block
   rendered dark navy on dark navy (the landing page header and its sidebar
   card). Every heading in the templates sets its own colour class, so letting
   the colour inherit is both safer and what callers already expect. */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ================= HEADER & NAVBAR STYLES ================= */
.main-nav-bar {
  background: rgba(21, 48, 91, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 88px;
  display: flex;
  align-items: center;
  /* The mobile drawer is a sibling of the header row, so the row must wrap:
     without this the drawer is laid out BESIDE the bar and gets clipped. */
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

.nav-link-item {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 700;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  position: relative;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-link-item:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}

.nav-link-item.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Modern Card Transitions */
.interactive-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.interactive-card:hover {
  transform: translateY(-4px);
  border-color: #CBD5E1;
  box-shadow: var(--shadow-hover);
}

/* Trust Badge (Light Luxury Style) */
.trust-badge-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #92400E;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.trust-badge-navy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #1E40AF;
  font-weight: 700;
  font-size: 0.78rem;
}

/* Primary Buttons */
.btn-primary-navy {
  background: var(--nordic-navy);
  color: #FFFFFF;
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-primary-navy:hover {
  background: var(--nordic-blue-hover);
  box-shadow: 0 10px 20px -5px rgba(11, 25, 44, 0.3);
  transform: translateY(-1px);
}

.btn-primary-gold {
  background: var(--gold-gradient);
  color: #FFFFFF;
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-primary-gold:hover {
  background: linear-gradient(135deg, #92400E 0%, #78350F 100%);
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

/* Slider / Carousel Styles */
.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.slider-slide {
  display: none;
  width: 100%;
  animation: fadeIn 0.6s ease-in-out forwards;
}

.slider-slide.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 25, 44, 0.75);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
}
.slider-nav-btn:hover {
  background: var(--nordic-navy);
  transform: translateY(-50%) scale(1.08);
}
.slider-nav-prev { left: 16px; }
.slider-nav-next { right: 16px; }

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.25s ease;
}
.slider-dot.active {
  width: 28px;
  border-radius: 9999px;
  background: #F59E0B;
}

/* Floating Pulse for Messengers */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
.pulse-messenger {
  animation: pulse-ring 2.5s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

/* Modal Backdrops */
.modal-backdrop-blur {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mobile Sticky Action Bar with iOS Safe Area Insets.
   Rendered only when the `mobile_action_bar` setting is on, which is why the
   body padding is keyed off `has-mobile-bar` instead of applying to every
   phone: with the bar hidden the extra 72px left a dead strip below the
   footer and the cookie banner never reached the bottom edge. */
.mobile-action-bar {
  display: none;
}
@media (max-width: 768px) {
  .mobile-action-bar {
    display: flex;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  body.has-mobile-bar {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* iPhone / iOS Specific Layout Fixes */
@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .main-nav-bar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  input, select, textarea {
    font-size: 16px !important; /* Prevents auto-zoom on iOS inputs */
  }
}

/* ==========================================================================
   Honeypot field: invisible to people and screen readers, but present in the
   DOM so naive bots fill it in and get silently rejected (audit P1-9).
   Deliberately not display:none - some bots skip hidden inputs.
   ========================================================================== */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ==========================================================================
   Service filter tabs ("Oikeudenalat ja palvelut").
   Active/inactive styling lives here instead of in Tailwind utility classes.
   The bug it fixes: the *active* tab kept the utility `hover:bg-slate-100`,
   which outranks `bg-nordic-900` (`:hover` = 0,2,0 vs 0,1,0). While the
   pointer rested on the tab the background turned near-white while the text
   stayed white, so the label disappeared until the cursor moved away.
   ========================================================================== */
.service-tab {
  background-color: #ffffff;
  color: #334155;                /* slate-700 on white = 10.3:1 */
  border: 1px solid #e2e8f0;     /* slate-200 */
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.service-tab:hover {
  background-color: #f1f5f9;     /* slate-100; slate-700 text = 9.4:1 */
  border-color: #cbd5e1;
  color: #0f172a;
}
.service-tab:focus-visible {
  outline: 2px solid #b45309;    /* gold-600 */
  outline-offset: 2px;
}
.service-tab.is-active,
.service-tab.is-active:hover {
  background-color: #0B192C;     /* nordic-900; white text = 15.8:1 */
  border-color: #0B192C;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}

/* ==========================================================================
   Mobile drawer navigation.
   The drawer previously repeated the header logo, put the language switcher
   below eight links, and drew a chevron on every item even though none of them
   opens a submenu. Now the active section is marked with an amber edge instead
   of a misleading arrow.
   ========================================================================== */
.mobile-nav-link {
  position: relative;
  display: block;
  border-radius: .75rem;
  padding: .7rem .75rem;
  transition: background-color .2s ease, color .2s ease;
}
.mobile-nav-link + .mobile-nav-link {
  border-top: 1px solid rgb(255 255 255 / .06);
}
.mobile-nav-link:hover {
  background-color: rgb(255 255 255 / .1);
}
.mobile-nav-link.is-active {
  background-color: rgb(255 255 255 / .12);
  color: #fff;
  font-weight: 700;
}
.mobile-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background-color: #d97706;    /* gold-500 */
}

/* ==========================================================================
   Landing page header: a very slow, low-contrast drift.
   The durations are deliberately long (26-34s) so it reads as depth rather
   than motion — the brief was "subtle, not fast". Both layers are decorative
   and stop completely for visitors who ask for reduced motion.
   ========================================================================== */
.lp-hero-glow,
.lp-hero-scales {
  position: absolute;
  pointer-events: none;
}

/* Animated through background-position rather than transform: a scaled or
   translated layer would extend past the header's bounding box, which the
   layout diagnostics report as an overflow even though overflow:hidden clips it. */
.lp-hero-glow {
  inset: 0;
  background:
    radial-gradient(38% 55% at 18% 25%, rgba(217, 119, 6, .30), transparent 65%),
    radial-gradient(42% 60% at 82% 12%, rgba(59, 130, 246, .26), transparent 68%);
  background-size: 130% 130%;
  animation: lp-drift 11s ease-in-out infinite alternate;
}

@keyframes lp-drift {
  from { background-position: 0% 0%; opacity: .8; }
  to   { background-position: 34% 28%; opacity: 1; }
}

/* Scales of justice: the firm's own symbol, barely visible, gently tilting. */
.lp-hero-scales {
  right: 0;
  top: 50%;
  width: min(44vw, 430px);
  height: auto;
  color: #fff;
  opacity: .14;
  transform-origin: 50% 15%;
  animation: lp-tilt 9s ease-in-out infinite alternate;
}

@keyframes lp-tilt {
  from { transform: translateY(-50%) rotate(-2.6deg); }
  to   { transform: translateY(-50%) rotate(2.6deg); }
}

@media (max-width: 767px) {
  /* Half of the artwork would sit under the text on a phone. */
  .lp-hero-scales { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-glow,
  .lp-hero-scales {
    animation: none;
  }
  .lp-hero-scales {
    transform: translateY(-50%);
  }
}