/* Camp Cardinal shared styles. */

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 100px; }
body {
    font-family: 'Nunito', sans-serif;
    background-color: #FFF7EA;
    color: #123A56;
    overflow-x: hidden;
}
#app-header { display: contents; }
h1, h2, h3, h4, h5 {
    font-family: 'Fredoka', sans-serif;
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* Handwritten camp-sign accent (eyebrow labels) */
.font-accent { font-family: 'Gochi Hand', cursive !important; letter-spacing: 0.02em; }

/* Shared responsive page title for interior pages. One clear typographic step
   larger than a major section heading, fluid so long titles never clip on small
   screens (min ~40px at 320px, up to 72px on desktop). Hierarchy: .page-title >
   section heading (text-3xl/4xl) > card heading. The homepage hero H1 keeps its
   own bespoke sizing and does not use this class. */
.page-title {
    font-size: clamp(2.5rem, 5.2vw + 1.1rem, 4.5rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.skip-link {
    position: absolute; top: -60px; left: 0;
    background: #C12F1D; color: white;
    padding: 10px 18px; z-index: 200;
    border-radius: 0 0 12px 0;
    font-weight: 800;
}
.skip-link:focus { top: 0; }

/* Visible focus states everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
    outline: 3px dashed #B84A0B;
    outline-offset: 3px;
    border-radius: 10px;
}
/* No persistent browser outline on <summary> after a mouse click (keyboard
   focus still shows the dashed ring above via :focus-visible). */
summary:focus:not(:focus-visible) { outline: none; }

/* === KEYFRAME ANIMATIONS === */
@keyframes float-soft { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes drift-slow { from { transform: translateX(-120vw); } to { transform: translateX(120vw); } }
@keyframes pulse-glow { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: .55; transform: scale(1.12); } }
@keyframes sway-leaf { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes shine-sweep { 0% { left: -100%; } 60%,100% { left: 150%; } }
@keyframes ken-burns { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.1) translate(-2%,-2%); } 100% { transform: scale(1) translate(0,0); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes wobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.animate-float-soft { animation: float-soft 8s ease-in-out infinite; }
.animate-drift { animation: drift-slow 60s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 6s ease-in-out infinite; }
.animate-sway { animation: sway-leaf 6s ease-in-out infinite; transform-origin: bottom center; }
.animate-breathe { animation: breathe 4s ease-in-out infinite; }
.animate-ken-burns { animation: ken-burns 20s ease-in-out infinite; }
.animate-wobble { animation: wobble 4s ease-in-out infinite; transform-origin: center; }
.animate-bob { animation: bob 3.5s ease-in-out infinite; }
.animate-drift-delayed { animation: drift-slow 80s linear 8s infinite; }
.animate-drift-fast { animation: drift-slow 30s linear infinite; }
.animate-float-delayed { animation-delay: 1.5s; }
.animate-float-medium { animation: float-soft 8s ease-in-out infinite; }

/* Scroll reveal is progressively enhanced; content remains visible without JavaScript. */
.reveal { opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }
.reveal.reveal-pending { opacity: 0; transform: translateY(30px); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.word-reveal span { display: inline-block; opacity: 1; transform: translateY(0) rotate(0); transition: opacity 0.55s cubic-bezier(0.34,1.56,0.64,1), transform 0.55s cubic-bezier(0.34,1.56,0.64,1); }
.word-reveal.reveal-pending span { opacity: 0; transform: translateY(24px) rotate(-4deg); }
.word-reveal.visible span { opacity: 1; transform: translateY(0) rotate(0); }

/* ===== Cartoon "coloring-book" cards ===== */
.premium-card {
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
    border: 3px solid #123A56 !important;
    box-shadow: 7px 7px 0 0 rgba(18,58,86,0.9);
    border-radius: 26px;
}

/* Cartoon icon blob — chunky circle with outline + hard shadow */
.icon-blob {
    display: inline-flex; align-items: center; justify-content: center;
    border: 3px solid #123A56;
    box-shadow: 4px 4px 0 0 rgba(18,58,86,0.9);
    border-radius: 9999px;
}
.icon-blob.squish { border-radius: 26px; }

/* Generic cartoon outline panel */
.toon {
    border: 3px solid #123A56;
    box-shadow: 5px 5px 0 0 rgba(18,58,86,0.9);
    border-radius: 22px;
}

/* ===== Chunky "sticker" buttons ===== */
.btn-premium {
    position: relative; overflow: hidden;
    border: 3px solid rgba(18,58,86,0.85);
    box-shadow: 0 5px 0 0 rgba(18,58,86,0.85);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-premium::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shine-sweep 3.5s infinite;
}
.btn-premium:active { transform: translateY(5px); box-shadow: 0 0 0 0 rgba(18,58,86,0.85); }
.btn-premium:disabled {
    cursor: wait;
    opacity: 0.78;
}
.btn-premium:disabled:active {
    transform: none;
    box-shadow: 0 5px 0 0 rgba(18,58,86,0.85);
}

.btn-secondary-premium {
    border: 3px solid rgba(18,58,86,0.85);
    box-shadow: 0 5px 0 0 rgba(18,58,86,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn-secondary-premium:active { transform: translateY(5px); box-shadow: 0 0 0 0 rgba(18,58,86,0.25); }

@media (hover: hover) and (pointer: fine) {
    .premium-card:hover {
        transform: translate(-2px,-5px) rotate(-1deg);
        box-shadow: 10px 13px 0 0 rgba(18,58,86,0.9);
    }
    .btn-premium:hover { transform: translateY(2px); box-shadow: 0 3px 0 0 rgba(18,58,86,0.85); }
    .btn-premium:disabled:hover { transform: none; box-shadow: 0 5px 0 0 rgba(18,58,86,0.85); }
    .btn-secondary-premium:hover { transform: translateY(2px); box-shadow: 0 3px 0 0 rgba(18,58,86,0.25); background-color: #FFC53D; color: #123A56; }
}

/* Sticker badge (rotated pill) */
.camp-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 3px solid rgba(18,58,86,0.85);
    box-shadow: 0 4px 0 0 rgba(18,58,86,0.85);
    border-radius: 9999px; font-weight: 800;
    transform: rotate(-2deg);
}

/* Organic shapes */
.organic-mask { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
.organic-mask-2 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

/* ===== OUTDOOR SCENERY ===== */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 50s linear infinite; }

/* Sunny sky gradient */
.scene-sky {
    background: linear-gradient(180deg, #A9E0FF 0%, #D6EEFF 40%, #EAF6E0 78%, #FFF7EA 100%);
}

/* Shining sun (spinning rays + glowing disc) */
.sun-rays {
    background: repeating-conic-gradient(from 0deg, #FFC53D 0deg 5deg, transparent 5deg 30deg);
    -webkit-mask: radial-gradient(closest-side, transparent 54%, #000 56%, #000 74%, transparent 76%);
            mask: radial-gradient(closest-side, transparent 54%, #000 56%, #000 74%, transparent 76%);
}
.sun-disc {
    background: radial-gradient(circle at 38% 34%, #FFE38A, #FFC53D 72%);
    box-shadow: 0 0 50px rgba(255,197,61,0.65);
}

/* Polaroid photo frame */
.polaroid {
    background: #fff;
    padding: 12px 12px 40px;
    border-radius: 8px;
    box-shadow: 6px 6px 0 0 rgba(18,58,86,0.85);
    border: 3px solid #123A56;
}
.polaroid > img { border-radius: 4px; display: block; }
.polaroid .caption {
    font-family: 'Gochi Hand', cursive;
    text-align: center; color: #123A56;
    font-size: 1.15rem; margin-top: 6px;
}
/* Bit of "washi tape" */
.tape::before {
    content: ''; position: absolute; top: -14px; left: 50%;
    width: 96px; height: 28px; transform: translateX(-50%) rotate(-4deg);
    background: rgba(255,197,61,0.75);
    box-shadow: 0 2px 6px rgba(18,58,86,0.15);
}

/* Soft polka-dot "picnic blanket" texture (replaces cold topo lines) */
.topo-bg {
    background-image: radial-gradient(rgba(47,143,78,0.10) 2px, transparent 2px),
                      radial-gradient(rgba(255,138,61,0.10) 2px, transparent 2px);
    background-size: 44px 44px, 44px 44px;
    background-position: 0 0, 22px 22px;
}

/* Global warm sunny background */
.global-bg {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2;
    background: linear-gradient(160deg, #DCF2FF 0%, #FFF7EA 42%, #FFF7EA 60%, #EAFBD9 100%);
    background-size: 200% 200%;
    animation: gradient-shift 24s ease infinite;
}

.parallax-wrap { transition: transform 0.2s ease-out; will-change: transform; }

/* Header nav dropdowns — one shared component for About / Programs / Resources.
   Closed panels are fully non-interactive: visibility:hidden + pointer-events:none
   here, plus the `inert` attribute and aria-hidden set in JS. Nothing is left as a
   clickable ghost region over the header. */
.nav-panel { visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.nav-panel.open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }

/* Split trigger: a text LINK (navigates to the section overview) and an adjacent
   chevron TOGGLE (opens/closes the menu) look like one cohesive pill. The whole
   pill turns sunshine for the current section (.is-section) or while open
   (.is-open) — open/current/hover never stack into conflicting looks. */
.nav-split { border: 2px solid transparent; }
.nav-split:hover { background-color: rgba(255,197,61,0.5); border-color: rgba(18,58,86,0.7); }
.nav-split.is-open,
.nav-split.is-section { background-color: #FFC53D; border-color: rgba(18,58,86,0.85); }

/* Menu items: one shared style. Hover = yellow; current page = yellow + aria-current. */
.nav-panel a:hover { background-color: rgba(255,197,61,0.55); }
.nav-panel a[aria-current="page"] { background-color: #FFC53D; }

/* Keyboard focus adds a clear navy ring on the link, the chevron toggle, and menu
   items; a mouse click leaves no persistent outline (only :focus-visible draws it).
   Navy focus is scoped to the nav so the rest of the site keeps its own style. */
.nav-trigger-link:focus-visible,
.nav-trigger-toggle:focus-visible,
.nav-panel a:focus-visible {
    outline: 3px solid #123A56;              /* navy, solid — accessible keyboard ring */
    outline-offset: -2px;
    border-radius: 9999px;
}
.nav-panel a:focus-visible { outline-offset: -2px; border-radius: 12px; background-color: #FFC53D; }

/* Pennant bunting garland under the header */
.bunting {
    position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
    transform: translateY(100%);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='28'%20viewBox='0%200%20160%2028'%3E%3Crect%20x='0'%20y='1'%20width='160'%20height='2'%20fill='%23123A56'/%3E%3Cpolygon%20points='3,3%2039,3%2021,26'%20fill='%23E23D28'/%3E%3Cpolygon%20points='43,3%2079,3%2061,26'%20fill='%23FFC53D'/%3E%3Cpolygon%20points='83,3%20119,3%20101,26'%20fill='%232BB3E8'/%3E%3Cpolygon%20points='123,3%20159,3%20141,26'%20fill='%232F8F4E'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-position: left top; background-size: 160px 22px;
    pointer-events: none; z-index: 1;
}

/* Mobile drawer */
body.drawer-open { overflow: hidden; }
#mobile-drawer { visibility: hidden; transition: transform .35s cubic-bezier(0.16,1,0.3,1), visibility 0s linear .35s; transform: translateX(100%); }
#mobile-drawer.open { visibility: visible; transition-delay: 0s; transform: translateX(0); }
.mobile-group-panel { visibility: hidden; max-height: 0; overflow: hidden; transition: max-height .3s ease, visibility 0s linear .3s; }
.mobile-group-panel.open { visibility: visible; max-height: 320px; transition-delay: 0s; }

/* Accordions */
.accordion-panel { visibility: hidden; max-height: 0; overflow: hidden; transition: max-height .5s ease, visibility 0s linear .5s; }
.accordion-panel.open { visibility: visible; max-height: 1600px; transition-delay: 0s; }

/* Native job-description disclosures */
.job-description summary::-webkit-details-marker { display: none; }
.job-description[open] summary .fa-chevron-down { transform: rotate(180deg); }

/* The `hidden` attribute must always win, even on elements that also carry a
   Tailwind display utility (e.g. `flex`). Tailwind's preflight `[hidden]` rule
   uses :where() (zero specificity), so a later `.flex`/`.grid` utility would
   otherwise override it and reveal error banners / filtered cards. */
[hidden] { display: none !important; }

/* Accessible team-profile dialog */
dialog.profile-dialog {
    width: min(92vw, 640px);
    max-height: 88vh;
    border: 3px solid #123A56;
    border-radius: 26px;
    padding: 0;
    background: #FFF7EA;
    box-shadow: 8px 8px 0 0 rgba(18,58,86,0.85);
    overflow: hidden auto;
}
dialog.profile-dialog::backdrop { background: rgba(18,58,86,0.55); backdrop-filter: blur(2px); }

/* Founder full photo inside the dialog: never cropped, sized to the viewport */
.founder-dialog-photo {
    width: 100%;
    max-height: 46vh;
    object-fit: contain;
    background: #D6EEFF;
    display: block;
}

/* Consistent founder thumbnail frame — a portrait media box sized for headshots.
   object-fit: cover fills the frame identically for both founders (one square,
   one portrait source) with the face centered; no distortion, no letterboxing. */
.founder-frame {
    aspect-ratio: 4 / 5;
    background: #D6EEFF;
    overflow: hidden;
    display: block;
}
.founder-frame img {
    display: block;          /* block, not inline — no baseline/line-height gap */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Sawyer registration embed */
[data-sawyer-embed] {
    /* Phone heights vary more than widths: keep at least 640px of sessions,
       grow on taller phones, and stop at the 680px desktop target. */
    --sawyer-viewport-height: 41.25rem;
    --sawyer-viewport-height: clamp(40rem, 82svh, 42.5rem);
    position: relative;
}
.sawyer-widget {
    width: 100%;
    max-width: 100%;
    min-height: var(--sawyer-viewport-height);
}
.sawyer-widget iframe[data-sawyer-viewport] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: var(--sawyer-viewport-height) !important;
    min-height: 0 !important;
    border: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
/* Reserve the final viewport while Sawyer loads, then collapse the reservation
   if the vendor script fails so the existing fallback remains compact. */
[data-sawyer-loading] {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}
[data-sawyer-embed][data-sawyer-state="failure"] .sawyer-widget { min-height: 0; }
.sawyer-widget > iframe + div { margin-top: 0.5rem; }
.sawyer-widget > iframe + div > [data-iframe-height] {
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}
.sawyer-widget > iframe + div > [data-iframe-height] > a {
    display: inline-flex;
    align-items: center;
    max-width: fit-content;
    line-height: 1.4 !important;
}
.sawyer-spinner {
    width: 22px; height: 22px; border-radius: 9999px;
    border: 3px solid rgba(18,58,86,0.2); border-top-color: #06779F;
    animation: cc-spin 0.8s linear infinite; display: inline-block;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

@media (min-width: 768px) and (max-width: 1023px) {
    [data-sawyer-embed] {
        --sawyer-viewport-height: 41.25rem;
        --sawyer-viewport-height: clamp(40rem, 75svh, 42.5rem);
    }
}

@media (min-width: 1024px) {
    [data-sawyer-embed] { --sawyer-viewport-height: 42.5rem; }
}

/* Sawyer needs about 305px of unscaled content width for its narrow card layout.
   Reclaim the registration card's horizontal padding on phones; at 320px only,
   use the available outer gutter too while retaining the rounded blue card. */
@media (max-width: 767px) {
    .registration-card { padding-inline: 0.625rem; }
    .registration-card > :not([data-sawyer-embed]) { margin-inline: 1rem; }
}
@media (max-width: 374px) {
    .registration-card {
        margin-inline: -1rem;
        padding-inline: 0;
    }
    .registration-card > [data-sawyer-embed] { margin-inline: -1px; }
}

/* Ensure comfortable touch targets */
.tap { min-width: 44px; min-height: 44px; }
.policy-topic-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 639px) {
    .policy-list .accordion-panel > div { padding-left: 1.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal.reveal-pending { opacity: 1; transform: none; }
    .word-reveal span, .word-reveal.reveal-pending span { opacity: 1; transform: none; }
    .global-bg { animation: none; }
}