/* ===== Design Tokens (blue theme) ===== */
:root {
  /* legacy greens kept (unused now, safe to delete later) */
  --sage-primary: hsl(151 25% 45%);
  /* UPDATED to blue tints */
  --sage-soft:  hsl(210 35% 96%);  /* very light blue */
  --sage-light: hsl(210 35% 92%);  /* light blue */

  /* brand blues */
  --ocean-blue:  hsl(210 45% 55%);
  --ocean-light: hsl(210 35% 75%);
  --ocean-soft:  hsl(210 25% 95%);

  /* earth tones */
  --earth-warm:  hsl(25 15% 85%);
  --earth-cream: hsl(35 25% 96%);
  --earth-deep:  hsl(20 10% 25%);

  /* neutrals */
  --background:  hsl(35 25% 98%);
  --foreground:  hsl(20 15% 15%);
  --card:        hsl(0 0% 100%);
  --card-foreground: hsl(20 15% 15%);

  /* was 210,45%,55% */
  --primary: hsl(210,45%,45%); 
  --primary-foreground: hsl(0,0%,98%);
  /* hover a touch darker for affordance */
  --primary-hover: hsl(210,50%,40%);     

  --secondary: hsl(210 25% 95%);
  --secondary-foreground: hsl(20 15% 15%);
  --muted: hsl(25 15% 90%);
  --muted-foreground: hsl(20 10% 45%);
  --accent: hsl(210 35% 75%);
  --accent-foreground: hsl(20 15% 15%);

  --border: hsl(210 30% 85%);

  /* shadows tuned to blue */
  --shadow-soft:   0 4px 12px -2px hsla(210,45%,55%,0.10);
  --shadow-medium: 0 8px 25px -5px hsla(210,45%,55%,0.15);
  --shadow-glow:   0 0 30px hsla(210,65%,70%,0.30);

  /* radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* footer gradient — blue */
  --footer-start: #0a2235;
  --footer-end:   #061523;

  /* legacy emerald alias (now blue) */
  --emerald-start: #0a2235;
  --emerald-end:   #061523;
  
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-serif: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

body{ font-family: var(--font-sans); }
h1,h2,h3,.heading{ font-family: var(--font-serif); }


/* ===== Base (small quality-of-life) ===== */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; } /* anchors won't hide under top edge */

/* ===== Keyframes & helpers used by Tailwind markup ===== */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes glow { from{ box-shadow:0 0 20px hsla(151,35%,65%,.2)} to{ box-shadow:0 0 40px hsla(151,35%,65%,.4)} }
@keyframes pulseSoft { 0%,100%{opacity:1} 50%{opacity:.6} }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fade-in { animation: fadeIn .8s ease-out forwards; }
.animate-slide-up { animation: slideUp .8s ease-out forwards; }
.animate-glow { animation: glow 2s ease-in-out infinite alternate; }
.animate-pulse-soft { animation: pulseSoft 2s ease-in-out infinite; }

/* Visibility guards */
#loading-screen { opacity: 1; transition: opacity .3s ease; }
#loading-screen.hidden { opacity: 0; pointer-events: none; visibility: hidden; }

/* Helper for your delayed float */
.delay-2000 { animation-delay: 2s !important; }

/* === Element-by-element reveal system === */
:root{
  --reveal-distance: 16px;
  --reveal-duration: 600ms;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

/* start state */
[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(1);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

/* variants */
[data-reveal="fade"]      { transform: none; }
[data-reveal="fade-up"]   { transform: translateY(var(--reveal-distance)); }
[data-reveal="fade-down"] { transform: translateY(calc(var(--reveal-distance) * -1)); }
[data-reveal="fade-left"] { transform: translateX(var(--reveal-distance)); }
[data-reveal="fade-right"]{ transform: translateX(calc(var(--reveal-distance) * -1)); }
[data-reveal="zoom-in"]   { transform: scale(.96); }

/* end state */
.revealed{ opacity: 1 !important; transform: none !important; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal],
  .animate-float,.animate-glow,.animate-pulse-soft{
    animation: none !important;
    transition: none !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* --- Accordion: make the whole card expand, no rounded gap --- */

/* --- Milloin-vastaanotolle FAQ --- */
.faq-item{
  background:#fff;                 /* solid white */
  border:1px solid hsla(151,15%,92%,0.40);
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--shadow-soft, 0 4px 12px -2px rgba(0,0,0,.07));
  overflow:hidden;                 /* hides any inner rounding seams */
}

/* Header button inherits the card bg; no radius on header itself */
.faq-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:1rem 1.25rem;            /* px-5 py-4 */
  text-align:left;
  background:transparent;          /* same white via parent */
  border:0;
  border-radius:0;
}

/* subtle divider appears only when open so join looks intentional */
.faq-item.open .faq-btn{
  box-shadow: inset 0 -1px 0 hsla(151,25%,45%,0.15);
}

/* Collapsible panel – same white via parent; height animated */
.faq-content{
  background:transparent;          /* inherits the card white */
  height:0;
  opacity:0;
  transform: translateY(-4px);
  overflow:clip;                   /* smoother than hidden */
  transition:
    height 280ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms cubic-bezier(.22,.61,.36,1),
    transform 220ms cubic-bezier(.22,.61,.36,1);
}
.faq-content.open{
  opacity:1;
  transform:none;
}

/* Chevron rotate */
.faq-icon{
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
  transform-box: fill-box;
  transform-origin: center;
}
.faq-btn[aria-expanded="true"] .faq-icon{ transform: rotate(180deg); }

      @keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.bounce-soft {
  animation: bounceSoft 1.6s cubic-bezier(0,0,.2,1) infinite;
  display: inline-block;
  will-change: transform;
}