/* Folkle type and surfaces, matched to Khushi's Framer site (heartwarming-forms…framer.app/folkle), Oct 19.
   Same plum palette. One clean font everywhere (DM Sans), one italic serif accent (Instrument Serif),
   soft pastel cards with rounded corners and no borders, plain-text questions. Loaded last on every page. */

:root { --fk-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --fk-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif; }

/* ---------- one font everywhere ---------- */
html body, html body *:not(svg):not(path):not(circle):not(rect) { font-family: var(--fk-sans) !important; }
/* the logo stays exactly like folkle.co */
html body .fk-logo-name:not(#fk-x) { font-family: Georgia, 'Times New Roman', serif !important; }
html body .fk-logo-tag:not(#fk-x) { font-family: Georgia, 'Times New Roman', serif !important; }

/* headings: medium-bold and tight, like the reference (the :not(#fk-x) makes these win over each page's own heading styles) */
html body h1:not(#fk-x), html body h2:not(#fk-x), html body h3:not(#fk-x), html body h4:not(#fk-x) { font-family: var(--fk-sans) !important; font-weight: 600 !important; letter-spacing: -0.025em !important; }
/* small card titles stay medium */
html body .c-steps h3:not(#fk-x), html body .fpx-perk b:not(#fk-x) { font-weight: 500 !important; letter-spacing: -0.01em !important; }
html body h1, html body h2, html body h3, .fx-sec-h h2, .aq-title, .aq-top h1, .fx-phero h2 {
  font-weight: 600 !important; letter-spacing: -0.025em !important; line-height: 1.12 !important;
}
.fx-sec-h h2 { font-size: 28px !important; }
.aq-top h1 { font-size: clamp(28px, 3.4vw, 40px) !important; }
.fx-phero h2 { font-size: clamp(30px, 3.6vw, 42px) !important; }
#fx .fx-hero.fx-hero-a h1 { font-size: 36px !important; }
@media (max-width: 600px) {
  .fx-sec-h h2 { font-size: 24px !important; }
  #fx .fx-hero.fx-hero-a h1 { font-size: min(26px, 5.4vw) !important; }
}

/* the one serif accent: the italic words inside big headlines ("from parents, by parents", "swear by.", "with us") */
html body h1 span:not(#fk-x), html body h1 em:not(#fk-x), html body h1 i:not(#fk-x), html body .fpx-hero h1 span:not(#fk-x) {
  font-family: var(--fk-accent) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: 0 !important;
}

/* place names and card titles: medium, not serif */
.fx-card b, #fx .fx-flip-f b { font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.2 !important; }
.fx-card b { font-size: 18px !important; }
#fx .fx-flip-f b { font-size: 19px !important; }
#fx .fx-flip-b strong { font-weight: 600 !important; letter-spacing: -0.03em !important; font-size: 44px !important; }
@media (max-width: 600px) { .fx-card b { font-size: 16.5px !important; } #fx .fx-flip-f b { font-size: 17px !important; } #fx .fx-flip-b strong { font-size: 38px !important; } }

/* reading text: light and calm */
.aq-prev p, .aq-msg > p, .fx-voice blockquote { font-size: 15px !important; line-height: 1.6 !important; color: #1F4535 !important; font-style: normal !important; }

/* ---------- surfaces: soft pastel cards, rounded, no borders or shadows ---------- */
.cat, .category-extras a, .fx-card, .fx-sidebox, #fx .fx-tiles-a .fx-ta, .fx-gate, .aq-gatebox, .fpx-perk, .pf-card,
#fx .fx-flip-f, #fx .fx-flip-b, .aq-prev, .aq-msg:not(.aq-reply) {
  box-shadow: none !important; border-radius: 12px !important;
}
#fx .fx-hero.fx-hero-a, .fpx-hero, #howc { border-radius: 16px !important; }

/* homepage categories: pastel fills, text on the left, no icons (like the reference) */
.cat-row .cat { border: 0 !important; align-items: flex-start !important; text-align: left !important; padding: 22px 20px 26px !important; min-height: 120px; }
.cat-row .cat svg { display: none !important; }
.cat-row .cat b { font-size: 19px !important; font-weight: 500 !important; letter-spacing: -0.01em; }
.cat-row .cat:nth-child(1) { background: #E6F0DD !important; }
.cat-row .cat:nth-child(2) { background: #E6F0DD !important; }
.cat-row .cat:nth-child(3) { background: #F5E9C8 !important; }
.cat-row .cat:nth-child(4) { background: #F5E9C8 !important; }
.cat-row .cat:hover { filter: brightness(.98); transform: none !important; box-shadow: none !important; }

/* homepage "Parents are asking": plain questions, no boxes */
.asking .q { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.asking .qx { font-size: 20px !important; font-weight: 400 !important; line-height: 1.38 !important; letter-spacing: -0.01em; color: #1F4535 !important; font-style: normal !important; }
@media (max-width: 600px) { .asking .qx { font-size: 18px !important; } }

/* homepage "How Folkle works": a soft block, the steps calm */
#howc { background: #F5E9C8 !important; padding: 36px 36px 40px !important; }
#howc .c-steps h3 { font-size: 17px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; }
#howc .c-steps p { font-size: 14px !important; }
@media (max-width: 600px) { #howc { padding: 22px 16px 26px !important; } }

/* place cards and Find boxes: white cards with only a whisper of a line */
.fx-card, .fx-sidebox, .aq-prev, .aq-msg:not(.aq-reply), .pf-card, #fx .fx-flip-f { border: 1px solid #ECE9DF !important; background: #FFFFFF !important; }
.fx-card:hover { border-color: #D5D9CF !important; transform: none !important; }
/* buttons keep their pill shape, no glow */
.fx-go, .aq-askbtn, .aq-send, .nav-cta, .fpx-hero a, .fpx-hero button { box-shadow: none !important; }

/* Oct 20 (Khushi): "remove that leaf". No leaf marks anywhere in the pages: not next to field labels,
   not falling on the welcome screen, not inline in text. (The browser-tab icon is separate and stays.) */
html body img[src*="folkle-leaf"]:not(#fk-x), html body .leaf-burst:not(#fk-x), html body .folkle-leaf:not(#fk-x), html body .leaf-inline:not(#fk-x) { display: none !important; }
html body .req:not(#fk-x) { display: none !important; }

/* live site (Oct 20): keep the Folkle logo exactly as on folkle.co, serif word plus the leaf */
html body .fk-logo img.fk-logo-leaf:not(#fk-x):not(#fk-y) { display: inline-block !important; }