/*
 * Belanjawan 2027 — page-specific theme.
 * Loads AFTER Bootstrap core. Overrides Bootstrap's CSS variables where useful
 * (so btn-primary, text-primary, etc. automatically pick up the brand color)
 * and adds a small set of custom classes/components Bootstrap has no
 * equivalent for (ticker, video shelf, hero type scale).
 *
 * This file is specific to THIS microsite and lives in this app's own
 * public/css/ — it is NOT part of the shared Bootstrap bundle on S3/CloudFront.
 */

:root {
    /* Retheme Bootstrap's own variables so built-in classes (btn-primary,
       text-primary, border-primary, bg-primary...) use the brand color. */
    --bs-primary: #F34423;
    --bs-primary-rgb: 243, 68, 35;
    --bs-link-color: #F34423;
    --bs-link-color-rgb: 243, 68, 35;
    --bs-link-hover-color: #C22F13;
    --bs-link-hover-color-rgb: 194, 47, 19;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-bg: #FAF9F6;
    --bs-body-color: #0B0D12;
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-pill: 50rem;

    /* Custom brand tokens with no direct Bootstrap slot. */
    --awani-ink: #0B0D12;
    --awani-navy: #141B2E;
    --awani-paper: #FAF9F6;
    --awani-mist: #E7E4DB;
    --awani-gold: #F4B400;
    --awani-gold-dark: #C98E00;
    --awani-slate: #5B6472;
    --awani-smoke: #9AA3B0;
    --awani-red-dark: #C22F13;
}

html {
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "ss01";
}

::selection {
    background: var(--bs-primary);
    color: var(--awani-paper);
}

:focus-visible {
    outline: 3px solid var(--awani-gold);
    outline-offset: 2px;
}

/* ---------- Type ---------- */
.font-display {
    font-family: 'Anton', sans-serif;
    letter-spacing: .01em;
}
.font-mono {
    font-family: 'Space Mono', monospace;
}
.hero-display {
    font-size: 15vw;
    line-height: .85;
}
@media (min-width: 576px) {
    .hero-display { font-size: 9vw; }
}
@media (min-width: 992px) {
    .hero-display { font-size: 7.5rem; }
}

/* ---------- Brand color utilities Bootstrap doesn't ship ---------- */
.bg-ink   { background-color: var(--awani-ink) !important; }
.bg-navy  { background-color: var(--awani-navy) !important; }
.bg-gold  { background-color: var(--awani-gold) !important; }
.bg-mist  { background-color: var(--awani-mist) !important; }
.text-gold  { color: var(--awani-gold) !important; }
.text-slate { color: var(--awani-slate) !important; }
.text-smoke { color: var(--awani-smoke) !important; }
.text-paper { color: var(--awani-paper) !important; }
.border-mist { border-color: var(--awani-mist) !important; }

/* Extra spacing step (Bootstrap tops out at 5 / 3rem) */
.py-lg-6 { }
@media (min-width: 992px) {
    .py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
}

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
}
.skip-link:focus {
    left: 1rem;
    top: .5rem;
    background: var(--awani-paper);
    color: var(--awani-ink);
    padding: .75rem 1.25rem;
    border-radius: .375rem;
}

/* ---------- Ticker ---------- */
.ticker-wrap {
    background: var(--awani-ink);
    border-bottom: 1px solid rgba(243, 68, 35, .4);
    height: 2.5rem;
    overflow: hidden;
}
.ticker-track {
    animation: ticker-scroll 48s linear infinite;
    white-space: nowrap;
}
.ticker-wrap:hover .ticker-track {
    animation-play-state: paused;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- Live pulse dot ---------- */
.pulse-dot {
    animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}

/* ---------- Navbar (scrollspy active state) ---------- */
#mainNav .nav-link {
    color: var(--awani-smoke);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    padding-bottom: .25rem;
}
#mainNav .nav-link:hover {
    color: #fff;
}
#mainNav .nav-link.active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--bs-primary);
}

/* ---------- News hover states ---------- */
.headline-item:hover .headline-title,
.strip-item:hover .strip-title {
    color: var(--bs-primary) !important;
}
.img-hover {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.headline-item:hover .img-hover,
.strip-item:hover .img-hover {
    transform: scale(1.05);
}

/* ---------- Video shelf ---------- */
.video-shelf {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.video-shelf::-webkit-scrollbar {
    display: none;
}
.video-card-wrap .img-hover {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.video-card-wrap:hover .img-hover {
    transform: scale(1.06) rotate(-.4deg);
}
.play-overlay {
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: opacity .2s, background-color .2s;
}
.video-card-wrap:hover .play-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, .3);
}

/* ---------- Focus / initiative cards ---------- */
.icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 68, 35, .1);
    color: var(--bs-primary);
    transition: background-color .2s, color .2s;
}
.focus-card:hover {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 .5rem 1.5rem rgba(11, 13, 18, .08);
}
.focus-card:hover .icon-circle {
    background: var(--bs-primary);
    color: var(--awani-paper);
}

/* ---------- FAQ accordion (Bootstrap native, brand-colored) ---------- */
.faq-question.accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background-color: rgba(243, 68, 35, .06);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(243, 68, 35, .25);
}
.accordion-button::after {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .pulse-dot { animation: none; }
    html { scroll-behavior: auto !important; }
}

/* ============================================================
   Belanjawan Typing Game ("Taip & Belanjawan")
   Everything scoped under .taip-game so it can't leak into or
   collide with the rest of the page (Bootstrap's .badge, the
   real <body>, global :root variables, etc.)
   ============================================================ */
.taip-game {
    --tg-navy: #123b72;
    --tg-blue: #1f65b5;
    --tg-sky: #eaf6ff;
    --tg-yellow: #ffd329;
    --tg-green: #20b66b;
    --tg-red: #e84b4b;
    --tg-white: #fff;
    --tg-shadow: 0 12px 30px rgba(18, 59, 114, .18);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--tg-navy);
}
.taip-game * {
    box-sizing: border-box;
}
.taip-game button {
    font: inherit;
}
.taip-game .game {
    width: min(1100px, 94vw);
    min-height: 720px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.8) 0 35px, transparent 36px),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.65) 0 45px, transparent 46px),
        linear-gradient(#75c8f6 0%, #dff5ff 58%, #b8dc9d 58%, #d7edc8 100%);
    box-shadow: var(--tg-shadow);
}
.taip-game .game:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(160deg, transparent 0 48%, rgba(255,255,255,.28) 49% 51%, transparent 52%);
    pointer-events: none;
}
.taip-game .screen { position: relative; z-index: 2; min-height: 720px; padding: 24px; }
.taip-game .hidden { display: none !important; }

/* Start / result */
.taip-game .center { min-height: 670px; display: flex; align-items: center; justify-content: center; text-align: center; }
.taip-game .panel {
    width: min(620px, 100%);
    background: rgba(255,255,255,.94);
    border: 4px solid rgba(18,59,114,.1);
    border-radius: 30px;
    padding: 38px 34px;
    box-shadow: var(--tg-shadow);
}
.taip-game .logo {
    display: inline-block;
    font-weight: 1000;
    font-size: clamp(42px, 8vw, 78px);
    line-height: .88;
    color: #ffd329;
    -webkit-text-stroke: 3px var(--tg-navy);
    text-shadow: 4px 5px 0 #fff, 7px 8px 0 rgba(18,59,114,.25);
    transform: rotate(-2deg);
}
.taip-game .tagline { font-size: 18px; font-weight: 700; margin: 18px 0 28px; }
.taip-game .instructions { background: #f3f8ff; border-radius: 18px; padding: 18px; margin: 20px 0; text-align: left; }
.taip-game .instructions p { margin: 9px 0; }
.taip-game .start-btn {
    border: 0;
    border-radius: 18px;
    padding: 15px 40px;
    background: var(--tg-yellow);
    color: var(--tg-navy);
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 0 #d5a900;
    transition: .15s;
}
.taip-game .start-btn:hover { transform: translateY(-2px); }
.taip-game .start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d5a900; }

/* HUD */
.taip-game .hud { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; align-items: center; }
.taip-game .hud-box { background: rgba(18,59,114,.94); color: white; border-radius: 18px; padding: 11px 16px; text-align: center; font-weight: 800; }
.taip-game .hud-label { font-size: 12px; opacity: .75; text-transform: uppercase; letter-spacing: 1px; }
.taip-game .hud-value { font-size: 22px; }
.taip-game .progress { display: flex; justify-content: center; gap: 7px; margin-top: 7px; }
.taip-game .dot { width: 13px; height: 13px; border-radius: 50%; background: #8ca4c1; }
.taip-game .dot.done { background: var(--tg-green); }
.taip-game .dot.current { background: var(--tg-yellow); transform: scale(1.25); }

/* Scene */
.taip-game .scene { height: 390px; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 15px; }
.taip-game .sun { position: absolute; right: 8%; top: 25px; width: 90px; height: 90px; border-radius: 50%; background: #ffe56a; box-shadow: 0 0 50px rgba(255,229,106,.65); }
.taip-game .building { position: absolute; bottom: 18px; width: 210px; height: 180px; left: 50%; transform: translateX(-50%); background: #f5e8d1; border-radius: 80px 80px 8px 8px; opacity: .8; }
.taip-game .building:before { content: ""; position: absolute; left: 20px; right: 20px; top: 55px; height: 100px; background: repeating-linear-gradient(90deg, #83c4dd 0 25px, #f5e8d1 25px 38px); border-radius: 8px; }
.taip-game .ground { position: absolute; left: -10%; right: -10%; bottom: 0; height: 75px; background: #9bca77; border-radius: 50% 50% 0 0/40% 40% 0 0; }

/* Character */
.taip-game .character-wrap { position: relative; z-index: 3; width: 220px; height: 330px; display: flex; justify-content: center; align-items: flex-end; animation: tg-enter .55s ease-out both; }
.taip-game .character-wrap.exit { animation: tg-exit .45s ease-in both; }
.taip-game .character-wrap.success { animation: tg-happy .55s ease-in-out; }
.taip-game .character { position: relative; width: 145px; height: 285px; }
.taip-game .head { position: absolute; left: 39px; top: 0; width: 68px; height: 72px; border-radius: 48% 48% 46% 46%; background: #c9855e; border: 3px solid #8e5438; z-index: 4; }
.taip-game .hair { position: absolute; left: 35px; top: -5px; width: 76px; height: 42px; background: #3a251d; border-radius: 55% 55% 35% 35%; z-index: 5; }
.taip-game .eye { position: absolute; top: 31px; width: 8px; height: 10px; background: #241b18; border-radius: 50%; z-index: 6; }
.taip-game .eye.l { left: 57px; }
.taip-game .eye.r { left: 82px; }
.taip-game .smile { position: absolute; left: 64px; top: 48px; width: 18px; height: 9px; border-bottom: 3px solid #7b382e; border-radius: 0 0 50% 50%; z-index: 6; }
.taip-game .body { position: absolute; left: 24px; top: 69px; width: 98px; height: 125px; border-radius: 25px 25px 14px 14px; background: #2466aa; border: 3px solid rgba(0,0,0,.14); }
.taip-game .arm { position: absolute; top: 78px; width: 25px; height: 105px; background: #c9855e; border-radius: 20px; z-index: 1; }
.taip-game .arm.l { left: 5px; transform: rotate(13deg); }
.taip-game .arm.r { right: 5px; transform: rotate(-13deg); }
.taip-game .leg { position: absolute; top: 184px; width: 34px; height: 91px; background: #263d5c; border-radius: 10px 10px 7px 7px; }
.taip-game .leg.l { left: 36px; }
.taip-game .leg.r { left: 77px; }
.taip-game .shoe { position: absolute; top: 260px; width: 52px; height: 22px; background: #1d2530; border-radius: 18px 20px 8px 8px; }
.taip-game .shoe.l { left: 22px; }
.taip-game .shoe.r { left: 73px; }

/* Clothing variations */
.taip-game .character.teacher .body { background: #7a4ea3; }
.taip-game .character.teacher .leg { background: #27364c; }
.taip-game .character.electrician .body { background: #f19b24; }
.taip-game .character.electrician .leg { background: #30465b; }
.taip-game .character.cleaner .body { background: #39a7a0; }
.taip-game .character.cleaner .leg { background: #3d5671; }
.taip-game .character.office .body { background: #315c91; }
.taip-game .character.office .leg { background: #26394f; }
.taip-game .character.worker .body { background: #f28d24; }
.taip-game .character.worker .leg { background: #34485c; }
.taip-game .character.service .body { background: #e8f0f4; }
.taip-game .character.service .leg { background: #384e68; }

.taip-game .vest { position: absolute; left: 27px; top: 72px; width: 92px; height: 50px; border-left: 12px solid #ffb52d; border-right: 12px solid #ffb52d; border-bottom: 4px solid #d77816; border-radius: 5px; z-index: 2; }
.taip-game .hat { position: absolute; left: 31px; top: -16px; width: 76px; height: 27px; background: #ffb51f; border: 3px solid #bd7b0c; border-radius: 50% 50% 12px 12px; z-index: 7; }
.taip-game .clipboard { position: absolute; right: -16px; top: 113px; width: 43px; height: 55px; background: #b77b40; border: 3px solid #7a4c25; border-radius: 4px; z-index: 5; }
.taip-game .broom { position: absolute; right: -42px; top: 98px; width: 8px; height: 130px; background: #9a6a3d; transform: rotate(10deg); z-index: 5; }
.taip-game .broom:after { content: ""; position: absolute; bottom: -8px; left: -13px; width: 35px; height: 20px; background: #d3a24b; border-radius: 50%; }
.taip-game .tie { position: absolute; left: 67px; top: 75px; width: 12px; height: 44px; background: #e34c4c; clip-path: polygon(20% 0, 80% 0, 100% 100%, 50% 78%, 0 100%); z-index: 3; }
.taip-game .badge { position: absolute; left: 75px; top: 100px; width: 20px; height: 20px; border-radius: 50%; background: white; border: 2px solid #ddd; z-index: 4; }

/* Word */
.taip-game .word-sign {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    max-width: 80%;
    background: white;
    border: 5px solid var(--tg-blue);
    border-radius: 18px;
    padding: 13px 24px;
    text-align: center;
    font-size: clamp(28px, 4vw, 45px);
    font-weight: 1000;
    letter-spacing: 1px;
    box-shadow: 0 7px 0 rgba(18,59,114,.22);
    animation: tg-float 1.8s ease-in-out infinite;
    z-index: 6;
}
.taip-game .word-sign .typed { color: var(--tg-green); }
.taip-game .word-sign .remaining { color: var(--tg-navy); }
.taip-game .word-sign.shake { animation: tg-shake .35s ease-in-out; }
.taip-game .input-panel {
    position: relative;
    z-index: 5;
    background: rgba(18,59,114,.94);
    border-radius: 25px;
    padding: 18px 22px 20px;
    color: white;
    width: min(760px, 90%);
    margin: 0 auto;
    text-align: center;
}
.taip-game .input-label { font-weight: 800; margin-bottom: 10px; }
.taip-game .typed-display {
    min-height: 58px;
    background: white;
    color: var(--tg-navy);
    border-radius: 15px;
    padding: 12px 18px;
    font-size: clamp(25px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.taip-game .typed-display .correct { color: var(--tg-green); }
.taip-game .typed-display .cursor {
    display: inline-block;
    width: 3px;
    height: 34px;
    background: var(--tg-navy);
    vertical-align: -5px;
    animation: tg-blink .8s infinite;
}
.taip-game .hint { font-size: 13px; opacity: .72; margin-top: 8px; }

/* Flash overlay — absolute + clipped to .game (not fixed/viewport-wide) */
.taip-game .flash {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: rgba(32,182,107,.18);
    opacity: 0;
}
.taip-game .flash.show { animation: tg-flash .45s ease-out; }

.taip-game .score-big { font-size: 58px; font-weight: 1000; margin: 8px; }
.taip-game .result-row { display: flex; gap: 12px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.taip-game .result-box { background: #f1f7ff; border-radius: 16px; padding: 15px 25px; min-width: 150px; }
.taip-game .result-box strong { display: block; font-size: 27px; }

@keyframes tg-enter { from { transform: translateX(160px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes tg-exit { to { transform: translateX(-180px); opacity: 0; } }
@keyframes tg-happy { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px) rotate(-2deg); } 70% { transform: translateY(0) rotate(2deg); } }
@keyframes tg-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@keyframes tg-shake { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 8px)); } 75% { transform: translateX(calc(-50% + 8px)); } }
@keyframes tg-blink { 50% { opacity: 0; } }
@keyframes tg-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 700px) {
    .taip-game .game, .taip-game .screen { min-height: 680px; }
    .taip-game .screen { padding: 14px; }
    .taip-game .hud { grid-template-columns: 1fr 1fr; }
    .taip-game .hud .progress-box { grid-column: 1/-1; grid-row: 1; }
    .taip-game .scene { height: 360px; }
    .taip-game .word-sign { top: 20px; font-size: 28px; min-width: 190px; }
    .taip-game .character-wrap { transform: scale(.9); }
    .taip-game .input-panel { width: 96%; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .taip-game .character-wrap,
    .taip-game .character-wrap.success,
    .taip-game .word-sign,
    .taip-game .typed-display .cursor,
    .taip-game .flash.show {
        animation: none !important;
    }
}