/* HADI QPMO Kids Theme Main CSS */
:root {
    --hadi-blue:#1565c0;
    --hadi-orange:#f57c00;
    --hadi-green:#2e7d32;
    --hadi-purple:#6a1b9a;
    --hadi-brown:#8d6e63;
    --hadi-red:#d84315;
    --hadi-cream:#fff7df;
    --hadi-ink:#1f2937;
    --hadi-soft:#eef7e8;
    --hadi-white:#ffffff;
}

* { box-sizing: border-box; }
body {
    margin:0;
    color:var(--hadi-ink);
    background:linear-gradient(180deg,#fff8df,#eef7e8);
    font-family: "Nunito", "Segoe UI", Arial, sans-serif;
    line-height:1.6;
}
img { max-width:100%; height:auto; }
a { color:var(--hadi-blue); }
.container { width:min(1180px, calc(100% - 36px)); margin-inline:auto; }

.screen-reader-text {
    position:absolute;
    left:-9999px;
}
.screen-reader-text:focus {
    left:16px; top:16px; z-index:1000;
    background:#fff; padding:12px; border-radius:8px;
}

.site-header {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,247,223,.94);
    backdrop-filter: blur(12px);
    border-bottom:1px solid rgba(31,41,55,.08);
}
.header-inner {
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.site-brand {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--hadi-ink);
}
.brand-mark {
    width:54px; height:54px;
    display:grid; place-items:center;
    border-radius:16px;
    background:var(--hadi-blue);
    color:#fff;
    font-size:30px;
    font-weight:900;
    box-shadow:0 10px 25px rgba(21,101,192,.28);
}
.site-brand strong { display:block; font-size:20px; line-height:1.15; }
.site-brand small { display:block; color:#5b6472; font-weight:700; }

.primary-nav ul {
    display:flex;
    align-items:center;
    gap:20px;
    list-style:none;
    padding:0;
    margin:0;
}
.primary-nav a {
    font-weight:900;
    text-decoration:none;
    color:#0f3f80;
}
.menu-toggle { display:none; }

.hero {
    padding:64px 0 56px;
    background:
        radial-gradient(circle at 82% 12%, rgba(245,124,0,.18), transparent 24%),
        radial-gradient(circle at 8% 20%, rgba(21,101,192,.13), transparent 28%),
        linear-gradient(135deg,#fff7df,#f3f9e8);
}
.hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:44px;
    align-items:center;
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--hadi-orange);
    font-weight:1000;
    margin:0 0 10px;
}
.hero h1 {
    font-size:clamp(42px,6vw,76px);
    line-height:.95;
    color:#0f3f80;
    margin:0 0 22px;
}
.hero p, .section p { font-size:18px; }
.button-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn {
    display:inline-block;
    text-decoration:none;
    font-weight:1000;
    border-radius:999px;
    padding:14px 22px;
}
.btn-primary { background:var(--hadi-orange); color:#fff; box-shadow:0 10px 25px rgba(245,124,0,.28); }
.btn-secondary { border:3px solid var(--hadi-blue); background:#fff; color:var(--hadi-blue); }
.btn-light { background:#fff; color:var(--hadi-blue); }

.hero-art {
    min-height:520px;
    border:8px solid #e7f1dc;
    border-radius:38px;
    padding:26px;
    position:relative;
    background:#fff;
    box-shadow:0 25px 60px rgba(31,41,55,.16);
    overflow:hidden;
}
.dream-sky {
    position:absolute;
    inset:26px;
    border-radius:28px;
    background:linear-gradient(180deg,#dff2ff,#fff7df);
}
.dream-sky::after {
    content:"";
    position:absolute;
    width:120px; height:120px; border-radius:50%;
    background:#ffd45d;
    right:34px; top:28px;
}
.hadi-character, .hadi-blanket, .dream-icon, .dream-card { position:absolute; z-index:2; }
.hadi-character {
    left:84px; bottom:118px;
    width:160px; height:210px;
    border-radius:80px 80px 35px 35px;
    background:#d7b899;
    color:#4a2e1f;
    display:grid; place-items:center;
    font-weight:1000;
    box-shadow:inset 0 -70px 0 #e7d7b7;
}
.hadi-blanket {
    left:60px; bottom:94px;
    width:220px; height:58px;
    border-radius:40px;
    background:#eee6d5;
    color:#7a6a53;
    display:grid; place-items:center;
    font-size:13px;
    font-weight:900;
}
.dream-icon { font-size:78px; }
.robot { left:310px; bottom:150px; }
.unicorn { right:78px; bottom:150px; }
.dream-card {
    left:26px; right:26px; bottom:26px;
    border-radius:24px;
    padding:18px;
    background:linear-gradient(135deg,#f3e5f5,#e3f2fd);
    border:3px dashed #b39ddb;
}
.dream-card strong { display:block; color:var(--hadi-purple); font-size:24px; }
.dream-card span { font-weight:800; }

.qpmo-section { margin-top:-28px; position:relative; z-index:3; }
.qpmo-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.qpmo-card {
    min-height:150px;
    border-radius:28px;
    padding:20px;
    color:#fff;
    text-align:center;
    box-shadow:0 16px 35px rgba(31,41,55,.18);
}
.qpmo-card strong { display:block; font-size:52px; line-height:1; }
.qpmo-card span { display:block; font-size:18px; font-weight:1000; }
.qpmo-card small { display:block; margin-top:6px; font-weight:800; }
.q { background:var(--hadi-blue); }
.p { background:var(--hadi-orange); }
.m { background:var(--hadi-green); }
.o { background:var(--hadi-purple); }

.section { padding:70px 0; }
.section-light { background:rgba(255,255,255,.58); margin-top:40px; }
.section-heading {
    max-width:840px;
    margin:0 auto 36px;
    text-align:center;
}
.section h2 {
    font-size:clamp(30px,4vw,50px);
    line-height:1.05;
    margin:0 0 18px;
    color:#0f3f80;
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}
.feature-card, .timeline-card, .content-card, .page-content {
    background:#fff;
    border-radius:28px;
    box-shadow:0 14px 30px rgba(31,41,55,.1);
}
.feature-card {
    padding:22px;
    border-bottom:8px solid #d7ead0;
}
.feature-card span { font-size:38px; }
.feature-card h3 { margin:12px 0 8px; color:var(--hadi-green); font-size:24px; }
.feature-card p { font-size:15px; margin:0; }

.story-grid, .contact-grid {
    display:grid;
    grid-template-columns:1fr .75fr;
    gap:34px;
    align-items:center;
}
.story-box {
    background:#fff;
    border-radius:34px;
    padding:32px;
    border:5px solid #ffe0b2;
    box-shadow:0 15px 35px rgba(31,41,55,.12);
}
.story-box h3 { color:var(--hadi-orange); font-size:30px; margin-top:0; }
.story-box li { font-size:18px; margin:12px 0; font-weight:800; }

.timeline {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}
.timeline-card {
    padding:22px;
    border-top:8px solid var(--hadi-blue);
}
.timeline-card strong { color:var(--hadi-orange); font-size:20px; }
.timeline-card span { display:block; font-weight:1000; color:#0f3f80; margin:8px 0; }
.timeline-card p { font-size:15px; margin:0; }

.cta-section {
    max-width:none;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,var(--hadi-blue),var(--hadi-purple));
}
.cta-section h2 { color:#fff; max-width:900px; margin-inline:auto; }
.cta-section p { max-width:780px; margin:0 auto 26px; }

.hadi-contact-form {
    background:#fff;
    border-radius:32px;
    padding:26px;
    display:grid;
    gap:14px;
    box-shadow:0 16px 35px rgba(31,41,55,.12);
}
.hadi-contact-form label { font-weight:900; color:#0f3f80; }
.hadi-contact-form input,
.hadi-contact-form select,
.hadi-contact-form textarea {
    width:100%;
    margin-top:6px;
    padding:15px 16px;
    border-radius:16px;
    border:2px solid #d7e3d2;
    font:inherit;
}
.hadi-contact-form button {
    border:0;
    background:var(--hadi-green);
    color:#fff;
    padding:16px;
    border-radius:18px;
    font-weight:1000;
    font-size:17px;
    cursor:pointer;
}
.content-area { padding:60px 0; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.content-card, .page-content { padding:26px; }
.content-card h1, .content-card h2 { font-size:26px; }
.text-link { font-weight:1000; }

.site-footer {
    background:#12345c;
    color:#fff;
    padding:50px 0 18px;
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:24px;
}
.site-footer a { color:#fff7df; }
.footer-bottom {
    border-top:1px solid rgba(255,255,255,.18);
    margin-top:28px;
    padding-top:18px;
    text-align:center;
    font-size:14px;
}

@media (max-width: 960px) {
    .hero-grid, .story-grid, .contact-grid { grid-template-columns:1fr; }
    .feature-grid, .timeline, .post-grid { grid-template-columns:1fr 1fr; }
    .primary-nav {
        display:none;
        position:absolute;
        left:18px; right:18px; top:78px;
        background:#fff;
        border-radius:20px;
        padding:18px;
        box-shadow:0 12px 30px rgba(31,41,55,.15);
    }
    .primary-nav.is-open { display:block; }
    .primary-nav ul { flex-direction:column; align-items:flex-start; }
    .menu-toggle {
        display:inline-flex;
        border:0;
        border-radius:999px;
        padding:12px 16px;
        background:var(--hadi-blue);
        color:#fff;
        font-weight:900;
    }
}
@media (max-width: 620px) {
    .qpmo-grid, .feature-grid, .timeline, .post-grid, .footer-grid { grid-template-columns:1fr; }
    .hero-art { min-height:430px; }
    .robot { left:240px; bottom:140px; }
    .unicorn { right:42px; bottom:140px; }
}

.will-animate { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.will-animate.is-visible { opacity:1; transform:translateY(0); }