/*
Theme Name: GaunKhaneKhata
Theme URI: https://example.com/storynest
Author: OpenAI
Description: A mobile-first, kid-and-senior-friendly WordPress theme for stories, riddles, multimedia posts and quizzes.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: storynest
Tags: accessibility-ready, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  --sn-bg: #fffaf2;
  --sn-surface: #ffffff;
  --sn-surface-2: #f3efe6;
  --sn-text: #1d2433;
  --sn-muted: #5d6675;
  --sn-primary: #5b4bdb;
  --sn-primary-dark: #4437b7;
  --sn-accent: #f3b43f;
  --sn-success: #2f9e6f;
  --sn-border: #ddd8cd;
  --sn-shadow: 0 12px 30px rgba(29,36,51,.09);
  --sn-radius: 20px;
  --sn-font-scale: 1;
  --sn-content-width: 1180px;
}

html { font-size: calc(16px * var(--sn-font-scale)); scroll-behavior: smooth; }
html.sn-dark {
  --sn-bg: #111827;
  --sn-surface: #1c2535;
  --sn-surface-2: #263145;
  --sn-text: #f4f7fb;
  --sn-muted: #c1cad7;
  --sn-primary: #9c91ff;
  --sn-primary-dark: #b1a9ff;
  --sn-accent: #ffd36a;
  --sn-success: #62c99b;
  --sn-border: #3a4659;
  --sn-shadow: 0 12px 30px rgba(0,0,0,.25);
}
html.sn-contrast {
  --sn-bg: #fff;
  --sn-surface: #fff;
  --sn-surface-2: #eee;
  --sn-text: #000;
  --sn-muted: #111;
  --sn-primary: #0000cc;
  --sn-primary-dark: #000099;
  --sn-accent: #ffcc00;
  --sn-border: #000;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sn-bg); color: var(--sn-text);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height: 1.7; font-size: 1rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sn-primary); }
button, input, textarea, select { font: inherit; }
button, .button, .wp-block-button__link {
  min-height: 44px; border: 0; border-radius: 999px; padding: .7rem 1.1rem;
  background: var(--sn-primary); color: #fff; cursor: pointer; font-weight: 700;
}
button:hover, .button:hover { background: var(--sn-primary-dark); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 4px solid var(--sn-accent); outline-offset: 3px;
}
.sn-skip-link { position: absolute; left: -9999px; top: 10px; z-index: 9999; background:#000; color:#fff; padding:10px 14px; }
.sn-skip-link:focus { left:10px; }
.sn-container { width:min(calc(100% - 32px), var(--sn-content-width)); margin-inline:auto; }
.sn-header {
  position: sticky; top:0; z-index:100; background:color-mix(in srgb, var(--sn-bg) 92%, transparent);
  backdrop-filter: blur(14px); border-bottom:1px solid var(--sn-border);
}
.sn-nav { min-height:76px; display:flex; align-items:center; gap:20px; justify-content:space-between; }
.sn-brand { display:flex; align-items:center; gap:10px; color:var(--sn-text); text-decoration:none; font-size:1.25rem; font-weight:900; }
.sn-brand img { width:44px; height:44px; object-fit:contain; border-radius:12px; }
.sn-brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--sn-primary); color:#fff; font-size:1.4rem; }
.sn-menu { display:none; }
.sn-main-menu { display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0; }
.sn-main-menu a { color:var(--sn-text); text-decoration:none; font-weight:700; }
.sn-tools { display:flex; gap:6px; align-items:center; }
.sn-tool { min-width:44px; padding:.55rem .7rem; background:var(--sn-surface-2); color:var(--sn-text); border:1px solid var(--sn-border); }
.sn-hero { padding:64px 0 36px; }
.sn-hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.sn-eyebrow { color:var(--sn-primary); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; }
.sn-hero h1 { font-size:clamp(2.4rem,7vw,5.3rem); line-height:1.05; margin:.25rem 0 1rem; letter-spacing:-.04em; }
.sn-hero p { font-size:1.25rem; color:var(--sn-muted); max-width:650px; }
.sn-hero-art { min-height:300px; display:grid; place-items:center; }
.sn-orbit { width:min(100%,420px); aspect-ratio:1; border-radius:40% 60% 55% 45%; background:var(--sn-surface-2); position:relative; box-shadow:var(--sn-shadow); transform:rotate(-5deg); }
.sn-orbit span { position:absolute; display:grid; place-items:center; width:74px; height:74px; border-radius:22px; background:var(--sn-surface); box-shadow:var(--sn-shadow); font-size:2rem; transform:rotate(5deg); }
.sn-orbit .one { top:16%; left:15%; } .sn-orbit .two { right:13%; top:28%; } .sn-orbit .three { left:25%; bottom:13%; } .sn-orbit .four { right:20%; bottom:12%; }
.sn-section { padding:42px 0; }
.sn-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.sn-section h2 { margin:0; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.15; }
.sn-muted { color:var(--sn-muted); }
.sn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sn-card { background:var(--sn-surface); border:1px solid var(--sn-border); border-radius:var(--sn-radius); overflow:hidden; box-shadow:var(--sn-shadow); }
.sn-card-media { aspect-ratio:16/10; background:var(--sn-surface-2); overflow:hidden; }
.sn-card-media img { width:100%; height:100%; object-fit:cover; }
.sn-card-body { padding:20px; }
.sn-card h3 { margin:.1rem 0 .5rem; font-size:1.35rem; line-height:1.25; }
.sn-card h3 a { color:var(--sn-text); text-decoration:none; }
.sn-meta { color:var(--sn-muted); font-size:.92rem; }
.sn-tag { display:inline-block; padding:.25rem .6rem; background:var(--sn-surface-2); border-radius:999px; color:var(--sn-primary); font-weight:800; font-size:.8rem; }
.sn-empty { padding:30px; border:2px dashed var(--sn-border); border-radius:var(--sn-radius); text-align:center; color:var(--sn-muted); }
.sn-feature { display:grid; grid-template-columns:1fr 1fr; background:var(--sn-surface); border:1px solid var(--sn-border); border-radius:28px; overflow:hidden; box-shadow:var(--sn-shadow); }
.sn-feature-media { min-height:320px; background:var(--sn-surface-2); }
.sn-feature-media img { width:100%; height:100%; object-fit:cover; }
.sn-feature-body { padding:clamp(24px,5vw,56px); display:flex; flex-direction:column; justify-content:center; }
.sn-feature-body h2 { font-size:clamp(2rem,5vw,3.5rem); line-height:1.08; margin:.4rem 0 1rem; }
.sn-feature-body p { color:var(--sn-muted); font-size:1.08rem; }
.sn-panel { background:var(--sn-surface); border:1px solid var(--sn-border); border-radius:28px; padding:28px; box-shadow:var(--sn-shadow); }
.sn-riddle { text-align:center; }
.sn-riddle-question { font-size:clamp(1.4rem,4vw,2rem); font-weight:800; margin:10px auto 20px; max-width:800px; }
.sn-answer { display:none; margin:18px auto; padding:16px; background:var(--sn-surface-2); border-radius:16px; max-width:700px; }
.sn-answer.is-visible { display:block; }
.sn-quiz-wrap { max-width:850px; margin:auto; }
.sn-progress { height:10px; background:var(--sn-surface-2); border-radius:99px; overflow:hidden; margin:12px 0 28px; }
.sn-progress > span { display:block; height:100%; background:var(--sn-primary); width:0; transition:width .25s ease; }
.sn-question { font-size:1.45rem; font-weight:800; }
.sn-options { display:grid; gap:12px; margin:18px 0; }
.sn-option { width:100%; text-align:left; background:var(--sn-surface-2); color:var(--sn-text); border:2px solid var(--sn-border); border-radius:16px; }
.sn-option.is-selected { border-color:var(--sn-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--sn-primary) 18%,transparent); }
.sn-quiz-result { display:none; text-align:center; }
.sn-quiz-result.is-visible { display:block; }
.sn-quiz-score { font-size:3rem; font-weight:900; color:var(--sn-primary); }
.sn-loadmore-wrap { text-align:center; padding-top:24px; }
.sn-spinner { display:none; margin:12px auto; width:32px; height:32px; border:4px solid var(--sn-border); border-top-color:var(--sn-primary); border-radius:50%; animation:snspin .8s linear infinite; }
.sn-spinner.is-active { display:block; }
@keyframes snspin { to { transform:rotate(360deg); } }
.sn-single { padding:55px 0; }
.sn-content { max-width:820px; margin:auto; }
.sn-content h1 { font-size:clamp(2.2rem,6vw,4.2rem); line-height:1.08; margin:.3rem 0 1rem; }
.sn-content .sn-featured-image { margin:30px 0; border-radius:24px; overflow:hidden; }
.sn-content p, .sn-content li { font-size:1.12rem; }
.sn-content blockquote { border-left:5px solid var(--sn-primary); padding:10px 20px; margin:25px 0; background:var(--sn-surface-2); border-radius:0 14px 14px 0; }
.sn-footer { margin-top:60px; padding:36px 0; border-top:1px solid var(--sn-border); color:var(--sn-muted); }
.sn-footer-grid { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.sn-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sn-reduced-motion *, .sn-reduced-motion *::before, .sn-reduced-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
@media (max-width:900px) {
  .sn-hero-grid,.sn-feature { grid-template-columns:1fr; }
  .sn-grid { grid-template-columns:repeat(2,1fr); }
  .sn-main-menu { display:none; position:absolute; left:16px; right:16px; top:70px; padding:18px; background:var(--sn-surface); border:1px solid var(--sn-border); border-radius:18px; box-shadow:var(--sn-shadow); flex-direction:column; align-items:flex-start; }
  .sn-main-menu.is-open { display:flex; }
  .sn-menu { display:inline-grid; }
}
@media (max-width:620px) {
  .sn-container { width:min(calc(100% - 24px),var(--sn-content-width)); }
  .sn-nav { min-height:68px; }
  .sn-brand span { display:none; }
  .sn-tools { gap:3px; }
  .sn-tool { min-width:42px; padding:.5rem; }
  .sn-hero { padding:40px 0 22px; }
  .sn-grid { grid-template-columns:1fr; }
  .sn-section { padding:30px 0; }
  .sn-feature-media { min-height:220px; }
}