/* ============================================================
   MANIGOD KIDS CLUB — COMPONENT LIBRARY
   components.css  ·  requires colors_and_type.css
   Capsules, very-rounded vignette cards, subtle frosted glass,
   season switch, tags (NO bullet dots), inputs, FAQ.
   ============================================================ */

/* ---------------- LAYOUT HELPERS ---------------- */
.mkc-container{
  width:100%;
  max-width:var(--mkc-maxw);
  margin-inline:auto;
  padding-inline:var(--mkc-gutter);
}
.mkc-container--wide{max-width:var(--mkc-maxw-wide);}
.mkc-section{padding-block:var(--mkc-section-y);}
.mkc-stack{display:flex;flex-direction:column;}
.mkc-row{display:flex;align-items:center;}

/* ====================================================
   BUTTONS — capsule, tactile, palette-only
   ==================================================== */
.mkc-btn{
  --_bg:var(--mkc-green);
  --_fg:var(--mkc-cream);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--mkc-font);
  font-size:var(--mkc-text-body);
  font-weight:var(--mkc-w-medium);
  letter-spacing:-0.01em;
  line-height:1;
  padding:1.0625em 1.75em;
  min-height:52px;
  border:none;border-radius:var(--mkc-r-pill);
  background:var(--_bg);color:var(--_fg);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--mkc-dur-fast) var(--mkc-ease),
             background var(--mkc-dur-fast) var(--mkc-ease),
             box-shadow var(--mkc-dur-fast) var(--mkc-ease),
             opacity var(--mkc-dur-fast) var(--mkc-ease);
}
.mkc-btn svg{width:1.15em;height:1.15em;flex:none;}
/* Hover routes through --_bg (NOT `background`) so every variant keeps a
   legible --_fg pairing — never green text on a green fill. */
.mkc-btn:hover{--_bg:var(--mkc-green-600);transform:translateY(-2px);box-shadow:var(--mkc-shadow-md);}
.mkc-btn:active{transform:translateY(0) scale(.985);}
.mkc-btn:focus-visible{outline:3px solid var(--mkc-green-40);outline-offset:3px;}
.mkc-btn:disabled,.mkc-btn[aria-disabled="true"]{opacity:.45;box-shadow:none;transform:none;pointer-events:none;}

/* primary on cream is the default above (cream text on green fill). */
/* Primary on green: green text on a cream fill — hover brightens the fill,
   text stays green for full contrast. */
.mkc-btn--on-ink{--_bg:var(--mkc-cream);--_fg:var(--mkc-green);}
.mkc-btn--on-ink:hover{--_bg:#fffef0;}

/* secondary — outlined capsule */
.mkc-btn--secondary{
  --_bg:transparent;--_fg:var(--mkc-green);
  box-shadow:inset 0 0 0 1.5px var(--mkc-border-strong);
}
.mkc-btn--secondary:hover{--_bg:var(--mkc-green-08);box-shadow:inset 0 0 0 1.5px var(--mkc-green-40);}
.mkc-btn--secondary.mkc-btn--on-ink{--_fg:var(--mkc-cream);box-shadow:inset 0 0 0 1.5px var(--mkc-border-paper);}
.mkc-btn--secondary.mkc-btn--on-ink:hover{--_bg:var(--mkc-cream-12);}

/* ghost / discreet — text + chevron */
.mkc-btn--ghost{--_bg:transparent;--_fg:var(--mkc-green);padding-inline:1em;min-height:44px;}
.mkc-btn--ghost:hover{--_bg:var(--mkc-green-06);transform:none;box-shadow:none;}

/* glass button — sits on imagery */
.mkc-btn--glass{
  --_bg:var(--mkc-glass-cream);--_fg:var(--mkc-green);
  -webkit-backdrop-filter:blur(var(--mkc-glass-blur));backdrop-filter:blur(var(--mkc-glass-blur));
  box-shadow:inset 0 0 0 1px var(--mkc-cream-40),var(--mkc-shadow-sm);
}
.mkc-btn--glass:hover{--_bg:var(--mkc-cream-72);}

.mkc-btn--sm{font-size:var(--mkc-text-sm);min-height:42px;padding:.7em 1.2em;}
.mkc-btn--lg{font-size:var(--mkc-text-lead);min-height:60px;padding:1.1em 2em;}
.mkc-btn--block{display:flex;width:100%;}

/* ====================================================
   TAGS / LABELS — pill, NO bullet dots (per brand brief)
   ==================================================== */
.mkc-tag{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--mkc-text-label);
  font-weight:var(--mkc-w-medium);
  letter-spacing:0.01em;
  line-height:1;
  padding:.62em 1em;
  border-radius:var(--mkc-r-pill);
  background:var(--mkc-green-08);
  color:var(--mkc-ink);
  white-space:nowrap;
}
.mkc-tag--ink{background:var(--mkc-green);color:var(--mkc-cream);}
.mkc-tag--outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mkc-border-strong);}
.mkc-tag--glass{
  background:var(--mkc-cream-24);color:var(--mkc-cream);
  -webkit-backdrop-filter:blur(var(--mkc-glass-blur-sm));backdrop-filter:blur(var(--mkc-glass-blur-sm));
  box-shadow:inset 0 0 0 1px var(--mkc-cream-24);
}
/* uppercase eyebrow label (section kicker) — no dot */
.mkc-eyebrow{
  display:inline-block;
  font-size:var(--mkc-text-label);
  font-weight:var(--mkc-w-semibold);
  letter-spacing:var(--mkc-ls-label);
  text-transform:uppercase;
  color:var(--mkc-ink-soft);
}
.mkc-eyebrow--paper{color:var(--mkc-paper-soft);}

/* ====================================================
   CARDS — generous radius, soft shadow, "mini-screen" feel
   ==================================================== */
.mkc-card{
  background:var(--mkc-surface);
  color:var(--mkc-ink);
  border-radius:var(--mkc-r-lg);
  box-shadow:var(--mkc-shadow-card);
  border:1px solid var(--mkc-border);
  overflow:hidden;
  transition:transform var(--mkc-dur) var(--mkc-ease),box-shadow var(--mkc-dur) var(--mkc-ease);
}
.mkc-card--ink{background:var(--mkc-surface-ink);border-color:var(--mkc-border-paper);color:var(--mkc-paper);}
.mkc-card--pad{padding:clamp(20px,3vw,32px);}
.mkc-card--hover:hover{transform:translateY(-6px);box-shadow:var(--mkc-shadow-lg);}

/* Vignette / season card — image fills, content padded, capsule CTA */
.mkc-vignette{
  position:relative;
  display:block;
  border-radius:var(--mkc-r-xl);
  overflow:hidden;
  box-shadow:var(--mkc-shadow-card);
  isolation:isolate;
  color:var(--mkc-cream);
  text-decoration:none;
  background:var(--mkc-green);
}
.mkc-vignette .mkc-media{position:absolute;inset:0;z-index:-2;}
.mkc-vignette .mkc-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--mkc-dur-slow) var(--mkc-ease);}
/* functional darkening veil for legibility — bottom-weighted, neutral */
.mkc-vignette::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--mkc-veil-green-strong) 0%,
             rgba(13,38,20,.18) 46%,rgba(13,38,20,0) 72%);
}
.mkc-vignette:hover .mkc-media img{transform:scale(1.05);}
.mkc-vignette__body{
  position:relative;
  padding:clamp(20px,3vw,30px);
  display:flex;flex-direction:column;gap:.5rem;
  min-height:clamp(280px,38vw,440px);
  justify-content:flex-end;
}
.mkc-vignette__top{position:absolute;top:clamp(18px,2.4vw,26px);left:clamp(18px,2.4vw,26px);
  right:clamp(18px,2.4vw,26px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}

/* ====================================================
   IMAGE PLACEHOLDER — branded, used when a photo is missing
   ==================================================== */
.mkc-ph{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--mkc-green);
  color:var(--mkc-cream-40);
  overflow:hidden;
}
.mkc-ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--mkc-green-700),var(--mkc-green) 70%);
  opacity:.9;
}
.mkc-ph__mark{position:relative;width:34%;max-width:120px;opacity:.5;}
.mkc-ph__label{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-size:var(--mkc-text-label);letter-spacing:var(--mkc-ls-label);
  text-transform:uppercase;color:var(--mkc-cream-40);
}

/* ====================================================
   GLASS / FROSTED — subtle, nature-soft (not "tech")
   ==================================================== */
.mkc-glass{
  background:var(--mkc-glass-cream);
  -webkit-backdrop-filter:blur(var(--mkc-glass-blur)) saturate(1.1);
  backdrop-filter:blur(var(--mkc-glass-blur)) saturate(1.1);
  border:1px solid var(--mkc-cream-40);
  border-radius:var(--mkc-r-lg);
  box-shadow:var(--mkc-shadow-md);
}
.mkc-glass--ink{
  background:var(--mkc-glass-green);
  border:1px solid var(--mkc-cream-16);
  color:var(--mkc-cream);
}

/* ====================================================
   NAVBAR — floating capsule
   ==================================================== */
.mkc-nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 12px 10px 24px;
  background:var(--mkc-cream);
  border-radius:var(--mkc-r-pill);
  box-shadow:var(--mkc-shadow-md);
}
.mkc-nav--glass{
  background:var(--mkc-glass-green);
  -webkit-backdrop-filter:blur(var(--mkc-glass-blur)) saturate(1.1);
  backdrop-filter:blur(var(--mkc-glass-blur)) saturate(1.1);
  box-shadow:inset 0 0 0 1px var(--mkc-cream-16),var(--mkc-shadow-lg);
}
.mkc-nav__links{display:flex;align-items:center;gap:4px;}
.mkc-navlink{
  font-size:var(--mkc-text-sm);font-weight:var(--mkc-w-medium);
  color:var(--mkc-ink-soft);text-decoration:none;
  padding:.7em 1.1em;border-radius:var(--mkc-r-pill);
  transition:background var(--mkc-dur-fast) var(--mkc-ease),color var(--mkc-dur-fast) var(--mkc-ease);
}
.mkc-navlink:hover{color:var(--mkc-ink);background:var(--mkc-green-06);}
.mkc-navlink[aria-current],.mkc-navlink.is-active{background:var(--mkc-green);color:var(--mkc-cream);}
/* glass nav variant */
.mkc-nav--glass .mkc-navlink{color:var(--mkc-paper-soft);}
.mkc-nav--glass .mkc-navlink:hover{color:var(--mkc-cream);background:var(--mkc-cream-12);}
.mkc-nav--glass .mkc-navlink[aria-current],.mkc-nav--glass .mkc-navlink.is-active{background:var(--mkc-cream);color:var(--mkc-green);}

/* ====================================================
   SEASON SWITCH — segmented capsule, no colour change
   ==================================================== */
.mkc-switch{
  position:relative;display:inline-flex;
  padding:5px;border-radius:var(--mkc-r-pill);
  background:var(--mkc-green-08);
  box-shadow:inset 0 0 0 1px var(--mkc-border);
}
.mkc-switch--ink{background:var(--mkc-cream-12);box-shadow:inset 0 0 0 1px var(--mkc-cream-16);}
.mkc-switch__thumb{
  position:absolute;top:5px;bottom:5px;left:5px;
  width:calc(50% - 5px);
  border-radius:var(--mkc-r-pill);
  background:var(--mkc-green);
  box-shadow:var(--mkc-shadow-sm);
  /* softer, slower glide between seasons */
  transition:transform 520ms cubic-bezier(.62,.02,.2,1);
}
.mkc-switch--ink .mkc-switch__thumb{background:var(--mkc-cream);}
.mkc-switch[data-active="hiver"] .mkc-switch__thumb{transform:translateX(100%);}
.mkc-switch__opt{
  position:relative;z-index:1;
  flex:1;min-width:120px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.7em 1.3em;border:none;background:none;cursor:pointer;
  font-family:var(--mkc-font);font-size:var(--mkc-text-sm);font-weight:var(--mkc-w-medium);
  color:var(--mkc-ink-soft);
  transition:color 440ms cubic-bezier(.62,.02,.2,1);
}
.mkc-switch__opt[aria-selected="true"]{color:var(--mkc-cream);}
.mkc-switch--ink .mkc-switch__opt{color:var(--mkc-paper-soft);}
.mkc-switch--ink .mkc-switch__opt[aria-selected="true"]{color:var(--mkc-green);}

/* ====================================================
   FORM INPUTS
   ==================================================== */
.mkc-field{display:flex;flex-direction:column;gap:.5rem;}
.mkc-field__label{font-size:var(--mkc-text-sm);font-weight:var(--mkc-w-medium);color:var(--mkc-ink-soft);}
.mkc-input,.mkc-textarea{
  font-family:var(--mkc-font);font-size:var(--mkc-text-body);
  color:var(--mkc-ink);
  background:var(--mkc-cream);
  border:1.5px solid var(--mkc-border-strong);
  border-radius:var(--mkc-r-md);
  padding:1em 1.25em;width:100%;
  transition:border-color var(--mkc-dur-fast) var(--mkc-ease),box-shadow var(--mkc-dur-fast) var(--mkc-ease);
}
.mkc-textarea{border-radius:var(--mkc-r-sm);min-height:140px;resize:vertical;line-height:var(--mkc-lh-body);}
.mkc-input::placeholder,.mkc-textarea::placeholder{color:var(--mkc-ink-faint);}
.mkc-input:focus,.mkc-textarea:focus{
  outline:none;border-color:var(--mkc-green);
  box-shadow:0 0 0 4px var(--mkc-green-12);
}

/* ====================================================
   FAQ ACCORDION
   ==================================================== */
.mkc-faq{border-top:1px solid var(--mkc-border);}
.mkc-faq__item{border-bottom:1px solid var(--mkc-border);}
.mkc-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:1.4em 0;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--mkc-font);font-size:var(--mkc-text-h4);font-weight:var(--mkc-w-medium);
  color:var(--mkc-ink);
}
.mkc-faq__icon{flex:none;width:34px;height:34px;border-radius:var(--mkc-r-pill);
  display:grid;place-items:center;background:var(--mkc-green-08);
  transition:transform var(--mkc-dur) var(--mkc-ease),background var(--mkc-dur-fast) var(--mkc-ease);}
.mkc-faq__icon svg{width:16px;height:16px;}
.mkc-faq__item.is-open .mkc-faq__icon{transform:rotate(45deg);background:var(--mkc-green);color:var(--mkc-cream);}
.mkc-faq__a{overflow:hidden;max-height:0;transition:max-height var(--mkc-dur) var(--mkc-ease);}
.mkc-faq__a-inner{padding:0 0 1.5em;color:var(--mkc-ink-soft);font-size:var(--mkc-text-body);
  line-height:var(--mkc-lh-body);max-width:60ch;}

/* ====================================================
   SCROLL REVEAL (paired with IntersectionObserver)
   ==================================================== */
.mkc-reveal{opacity:0;transform:translateY(38px);
  --rv-ease:cubic-bezier(.16,.68,.30,1);
  transition:opacity .9s var(--rv-ease),transform 1.05s var(--rv-ease),filter .9s var(--rv-ease);
  will-change:opacity,transform;}
.mkc-reveal.is-in{opacity:1;transform:none;filter:none;will-change:auto;}
@media (min-width:761px){
  /* a touch of focus-blur on the way in — only on larger screens for perf */
  .mkc-reveal{filter:blur(6px);}
}
@media (prefers-reduced-motion:reduce){
  .mkc-reveal{opacity:1 !important;transform:none !important;filter:none !important;}
}