/* ===== Design Tokens (keep) ===== */
:root {
  --sage-primary: hsl(151, 25%, 45%);
 --sage-soft:  hsl(151, 15%, 92%);  
 --sage-light: hsl(151, 18%, 88%); 
  --ocean-blue: hsl(210, 45%, 55%);
  --ocean-light: hsl(210, 35%, 75%);
  --ocean-soft: hsl(210, 25%, 95%);
  --earth-warm: hsl(25, 15%, 85%);
  --earth-cream: hsl(35, 25%, 96%);
  --earth-deep: hsl(20, 10%, 25%);
  --background: hsl(35, 25%, 98%);
  --foreground: hsl(20, 15%, 15%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 15%, 15%);
  --primary: hsl(151, 25%, 45%);
  --primary-foreground: hsl(0, 0%, 98%);
  --primary-glow: hsl(151, 35%, 65%);
  --secondary: hsl(151, 15%, 92%);
  --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(25, 15%, 88%);
  --shadow-soft: 0 4px 12px -2px hsla(151, 25%, 45%, 0.1);
  --shadow-medium: 0 8px 25px -5px hsla(151, 25%, 45%, 0.15);
  --shadow-glow: 0 0 30px hsla(151, 35%, 65%, 0.3);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --footer-start: #0f2d27;
  --footer-end:   #091b18;
  --emerald-start: #0f2d27;
  --emerald-end:   #091b18;
}

/* ===== 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;
}

/* Inner text only handles spacing (no own bg/radius) */
.faq-content-inner{
  padding: .75rem 1.25rem 1.25rem; /* pt-3 px-5 pb-5 */
}
.faq-content-inner > .divider{
  margin-top:.25rem;
  border-top:1px dashed hsla(151,25%,45%,0.15);
}

/* 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); }