/*
Theme Name: Social Hub Theme
Description: Social Hub child theme for Astra — Interkultur i Lund's English community
Template:    astra
Version:     1.1.0
Text Domain: socialhub
*/

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
    /* Colors */
    --sh-color-primary:   #E07A47;
    --sh-color-secondary: #2A6F77;
    --sh-color-accent:    #F2B134;
    --sh-color-bg:        #FAF3EA;
    --sh-color-border:    #E8DFD4;
    --sh-color-text:      #2B2420;
    --sh-color-white:     #FFFFFF;

    /* Bridge: Astra global color slots → our design tokens */
    --ast-global-color-0: var(--sh-color-primary);
    --ast-global-color-1: var(--sh-color-secondary);
    --ast-global-color-2: var(--sh-color-text);
    --ast-global-color-3: var(--sh-color-text);
    --ast-global-color-4: var(--sh-color-bg);
    --ast-global-color-5: var(--sh-color-white);
    --ast-global-color-6: var(--sh-color-border);
    --ast-global-color-7: var(--sh-color-accent);
    --ast-global-color-8: #000000;

    /* RGB triplets — for rgba() use */
    --sh-color-primary-rgb: 224, 122, 71;
    --sh-color-text-rgb:     43,  36, 32;
    --sh-color-bg-rgb:      250, 243, 234;

    /* Typography */
    --sh-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --sh-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* Shadows */
    --sh-shadow-header:          0 1px 6px  rgba(var(--sh-color-text-rgb), 0.06);
    --sh-shadow-card:            0 2px 10px rgba(var(--sh-color-text-rgb), 0.07);
    --sh-shadow-card-hover:      0 8px 28px rgba(var(--sh-color-text-rgb), 0.13);
    --sh-shadow-header-scrolled: 0 4px 24px rgba(var(--sh-color-text-rgb), 0.14);

    /* Transitions */
    --sh-transition-fast:   0.18s ease;
    --sh-transition-card:   0.22s ease;
    --sh-transition-smooth: 0.35s ease;

    /* Border radius */
    --sh-radius-card:  12px;
    --sh-radius-photo: 20px;
    --sh-radius-pill:  50px;
}

/* ── Global ──────────────────────────────────────────────────── */
body {
    background-color: var(--sh-color-bg);
}

/* Enforce Inter as the base font everywhere Astra may override */
body, input, button, select, textarea,
.ast-single-post .entry-content,
.site-footer, .widget, .wp-block-widget-group {
    font-family: var(--sh-font-body);
}

/* ── Header / Navbar ─────────────────────────────────────────── */
#masthead,
.site-header,
.main-header-bar,
.ast-masthead-custom-menu-items {
    background-color: var(--sh-color-bg) !important;
    border-bottom: 1px solid var(--sh-color-border);
    box-shadow: var(--sh-shadow-header);
}

/* Site branding: logo icon + "Social Hub" text side-by-side, vertically centered */
.site-branding,
.ast-site-name-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
}

.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

.custom-logo-link img {
    display: block;
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
}

/* Site title — styled as brand wordmark */
.site-title,
.site-title a,
.ast-site-name-wrap .site-title a {
    font-family: var(--sh-font-display) !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: var(--sh-color-text) !important;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.site-title a:hover {
    color: var(--sh-color-primary) !important;
}

/* Hide site tagline in header */
.site-description {
    display: none !important;
}

/* Nav links */
.main-navigation a,
.main-header-bar .menu-item > a,
#site-navigation .menu-item > a {
    color: var(--sh-color-text) !important;
    font-weight: 500;
}
.main-navigation a:hover,
.main-header-bar .menu-item > a:hover,
.main-header-bar .current-menu-item > a,
#site-navigation .current-menu-item > a {
    color: var(--sh-color-primary) !important;
}

/* Nav links: scale-in underline on hover (inspired by Kompis Sverige) */
.main-navigation .menu-item > a,
.main-header-bar .menu-item > a,
#site-navigation .menu-item > a {
    position: relative;
}
.main-navigation .menu-item > a::after,
.main-header-bar .menu-item > a::after,
#site-navigation .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 12px;
    right: 12px;
    width: auto;
    height: 2px;
    background: var(--sh-color-primary);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease-out;
}
.main-navigation .menu-item > a:hover::after,
.main-header-bar .current-menu-item > a::after,
#site-navigation .current-menu-item > a::after {
    transform: scaleX(1);
}

/* Hide Astra page-title banner that outputs "Home" on the static front page */
.ast-breadcrumbs-wrapper,
.page-id-8 .entry-header,
.page-id-8 .page-title,
.home .ast-page-title-wrap,
.home .page-header,
.front-page .page-header,
.page-template-default.page .entry-header {
    display: none !important;
}

/* Ensure cover hero sits flush below the header (no gap) */
.wp-block-cover.alignfull:first-of-type {
    margin-top: 0; /* no !important — lets Astra's JS set sticky-header offset */
}

/* ── Bento Section (Story + Values) ─────────────────────────── */
.sh-bento-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.sh-bento__mission {
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--sh-color-primary);
    border-radius: var(--sh-radius-card);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 280px;
}

.sh-bento__val {
    background: var(--sh-color-white);
    border-radius: var(--sh-radius-card);
    padding: 1.75rem;
    box-shadow: var(--sh-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sh-bento__val--wide {
    grid-column: 2 / 4;
}

.sh-bento__icon {
    font-size: 2rem;
    line-height: 1;
    margin: 0 0 0.25rem !important;
}

@media (max-width: 920px) {
    .sh-bento-grid {
        grid-template-columns: 1.2fr 1fr;
    }
    .sh-bento__val--wide {
        grid-column: 2; /* was 2/4; col 3 doesn't exist at tablet */
    }
}

@media (max-width: 768px) {
    .sh-bento-grid {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem;
    }
    .sh-bento__mission { grid-row: auto; min-height: auto; }
    .sh-bento__val--wide { grid-column: 1; }
}

/* ── Diagonal Split Section ──────────────────────────────────── */
.sh-split-section .wp-block-columns {
    gap: 0 !important;
    align-items: stretch !important;
    min-height: 360px;
    overflow: hidden;
    max-width: 1300px !important;
}
.sh-split__img-col {
    padding: 0 !important;
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    overflow: hidden;
    flex-shrink: 0;
}
.sh-split__img-col .wp-block-image {
    height: 100%;
    margin: 0 !important;
}
.sh-split__img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sh-split__text-col {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3.5rem 4rem 1.5rem !important;
    gap: 1rem;
}
.sh-split__values {
    border-top: 1px solid var(--sh-color-border);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sh-split__values .wp-block-paragraph {
    font-size: 0.95rem !important;
    font-weight: 600;
    color: var(--sh-color-text);
    margin: 0 !important;
}

@media (max-width: 768px) {
    .sh-split-section .wp-block-columns { min-height: auto; }
    .sh-split__img-col {
        clip-path: none;
        min-height: 260px;
        flex-basis: 100% !important;
    }
    .sh-split__text-col {
        padding: 2.5rem 1.5rem !important;
        flex-basis: 100% !important;
    }
}

/* ── Activity & Query Loop Cards ────────────────────────────── */
/* Equal-height columns: stretch li items to fill row height */
.wp-block-query .wp-block-post-template.is-flex-container {
    align-items: stretch !important;
}
.wp-block-query .wp-block-post-template.is-flex-container > .wp-block-post {
    display: flex !important;
    flex-direction: column;
}
/* Outer card (direct parent of featured image) — height + hover */
.wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) {
    position: relative;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    transition: transform var(--sh-transition-card), box-shadow var(--sh-transition-card);
    box-shadow: var(--sh-shadow-card);
}
/* Inner content group grows to fill remaining card height */
.wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-group {
    flex: 1;
}
/* Orange top-bar overlay — rendered above the image via z-index */
.wp-block-query .wp-block-group:has(> .wp-block-post-featured-image)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--sh-color-primary);
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--sh-transition-card);
    border-radius: var(--sh-radius-card) var(--sh-radius-card) 0 0;
}
.wp-block-query .wp-block-group:has(> .wp-block-post-featured-image):hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-shadow-card-hover);
}
.wp-block-query .wp-block-group:has(> .wp-block-post-featured-image):hover::before {
    transform: scaleX(1);
}

/* ── Featured Image in Cards ─────────────────────────────────── */
.wp-block-post-featured-image {
    overflow: hidden;
}
.wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform var(--sh-transition-smooth);
}
.wp-block-query .wp-block-group:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

/* ── Post Titles in Cards ─────────────────────────────────────── */
.wp-block-post-title a {
    text-decoration: none;
    color: var(--sh-color-text);
    transition: color var(--sh-transition-fast);
}
.wp-block-post-title a:hover {
    color: var(--sh-color-primary);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
    transition: opacity var(--sh-transition-fast), transform 0.15s ease;
    cursor: pointer;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Cover Block ─────────────────────────────────────────────── */
.wp-block-cover {
    background-color: var(--sh-color-text);
}

/* ── Read More Link ───────────────────────────────────────────── */
.wp-block-read-more {
    color: var(--sh-color-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.5rem;
    transition: color var(--sh-transition-fast);
}
.wp-block-read-more:hover {
    color: var(--sh-color-primary);
}

/* ── On-Break Cards Muted Style ──────────────────────────────── */
.wp-block-query .wp-block-group[style*="opacity:0.82"] {
    filter: grayscale(25%);
}
.wp-block-query .wp-block-group[style*="opacity:0.82"]:hover {
    filter: grayscale(0%);
    opacity: 1 !important;
}

/* ── Warm Section Links ──────────────────────────────────────── */
a {
    transition: color var(--sh-transition-fast);
}

/* ── Narrow desktop: prevent nav wrapping at ~960px ─────────── */
/* Astra's hamburger kicks in at 921px; between 921–1050px links
   can wrap. Tighten padding so they stay on one line. */
@media (min-width: 921px) and (max-width: 1050px) {
    .main-navigation .menu-item > a,
    .main-header-bar .menu-item > a,
    #site-navigation .menu-item > a {
        padding-left: 8px  !important;
        padding-right: 8px !important;
        font-size: 0.875rem !important;
    }
    /* Keep underline aligned to the new tighter padding */
    .main-navigation .menu-item > a::after,
    .main-header-bar .menu-item > a::after,
    #site-navigation .menu-item > a::after {
        left: 4px;
        right: 4px;
    }
}

/* ── Mobile: hamburger icon color ────────────────────────────── */
@media (max-width: 920px) {
    /* Astra mobile menu toggle button */
    .main-header-bar button.menu-toggle,
    .ast-mobile-header-wrap button.menu-toggle,
    #ast-mobile-header button.menu-toggle,
    .ast-mobile-menu-triggers {
        color: var(--sh-color-text) !important;
    }
    /* SVG icon fill */
    .main-header-bar button.menu-toggle svg,
    .ast-mobile-header-wrap button.menu-toggle svg,
    #ast-mobile-header button.menu-toggle svg {
        fill: var(--sh-color-text) !important;
        color: var(--sh-color-text) !important;
    }
    /* Classic three-line hamburger spans */
    /* .main-header-bar button.menu-toggle span:not(.screen-reader-text),
    .ast-mobile-header-wrap button.menu-toggle span:not(.screen-reader-text),
    .ast-mobile-menu-triggers span {
        background-color: var(--sh-color-text) !important;
        border-color: var(--sh-color-text) !important;
    } */
}

/* ── Admin bar: fix 46px dead gap at ≤600px ─────────────────── */
/* At ≤600px WP switches #wpadminbar to position:absolute (scrolls
   with page), but still injects margin-top:46px on <html> via
   inline style — that gap only makes sense for a fixed bar.
   Cancel it so bar + header sit flush in normal document flow. */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

/* ── Tablet: 3-column post grids → 2 columns ─────────────────── */
@media (max-width: 920px) {
    .wp-block-post-template.is-flex-container,
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Mobile Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .wp-block-columns.alignwide {
        flex-direction: column;
    }
    .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .wp-block-post-template.is-flex-container,
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .wp-block-cover__inner-container {
        padding: 1.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS & MOTION  (Social Hub 1.1)
   GPU-safe: only transform + opacity animated.
   Respect prefers-reduced-motion — see bottom guard.
   ══════════════════════════════════════════════════════════════════ */

@keyframes sh-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes sh-ken-burns {
    from { transform: scale(1)    translate3d(0,      0,       0); }
    to   { transform: scale(1.09) translate3d(-1.5%, -0.75%, 0); }
}

@keyframes sh-cta-glow {
    0%, 100% { box-shadow: 0 4px 18px rgba(var(--sh-color-primary-rgb), 0.38); }
    50%       { box-shadow: 0 6px 32px rgba(var(--sh-color-primary-rgb), 0.65),
                            0 0 0 5px rgba(var(--sh-color-primary-rgb), 0.14); }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — Kompis Sverige–inspired two-column layout
   Left: headline + squiggle + CTA  |  Right: photo cards
   ══════════════════════════════════════════════════════════════════ */

.sh-hero {
    padding: 8.5rem 1.5rem 4.5rem !important;
}
.sh-hero__cards-col {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
}

/* Eyebrow pill badge above h1 */
.sh-eyebrow {
    display: inline-block;
    background: rgba(var(--sh-color-primary-rgb), 0.12);
    color: var(--sh-color-primary) !important;
    padding: 5px 14px;
    border-radius: var(--sh-radius-pill);
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

/* Small stats line below buttons */
.sh-hero__stats {
    border-top: 1px solid rgba(var(--sh-color-text-rgb), 0.12);
    padding-top: 1rem;
    color: #92938e !important;
}

/* Photo cards: right column */
.sh-photo-card {
    border-radius: var(--sh-radius-photo) !important;
    overflow: hidden !important;
}

/* Glassmorphism eyebrow on photo cards (vinjett — Kompis Sverige style) */
.sh-card-tag {
    display: inline-block !important;
    background: rgba(var(--sh-color-bg-rgb), 0.22) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: var(--sh-color-white) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px !important;
    border-radius: var(--sh-radius-pill) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Ken Burns on both photo cards */
.sh-photo-card .wp-block-cover__image-background {
    animation: sh-ken-burns 20s cubic-bezier(0.12, 0, 0.39, 0) forwards;
    will-change: transform;
}
.sh-photo-card:nth-child(2) .wp-block-cover__image-background {
    animation-duration: 26s;
    animation-delay: 0.5s;
}

/* ── Hero left column: staggered text entrance ──────────────── */
.sh-hero .wp-block-column:first-child > * {
    animation: sh-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sh-hero .wp-block-column:first-child > *:nth-child(1) { animation-delay: 0.05s; }
.sh-hero .wp-block-column:first-child > *:nth-child(2) { animation-delay: 0.20s; }
.sh-hero .wp-block-column:first-child > *:nth-child(3) { animation-delay: 0.36s; }
.sh-hero .wp-block-column:first-child > *:nth-child(4) { animation-delay: 0.50s; }
.sh-hero .wp-block-column:first-child > *:nth-child(5) { animation-delay: 0.62s; }

/* ── Hero right column: photo cards slide up ────────────────── */
.sh-hero__cards-col > .wp-block-cover:nth-child(1) {
    animation: sh-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
.sh-hero__cards-col > .wp-block-cover:nth-child(2) {
    animation: sh-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

/* ── Photo card inner text stagger ──────────────────────────── */
.sh-hero__cards-col .wp-block-cover__inner-container > *:nth-child(1) { animation: sh-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; }
.sh-hero__cards-col .wp-block-cover__inner-container > *:nth-child(2) { animation: sh-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.64s both; }

/* ── SVG squiggle underline (Kompis Sverige's signature) ────── */
.sh-squiggle {
    position: relative;
    display: inline;
    white-space: nowrap;
}
.sh-squiggle__svg {
    position: absolute;
    bottom: -0.18em;
    left: 0;
    width: 100%;
    height: 0.45em;
    overflow: visible;
    pointer-events: none;
}
.sh-squiggle__svg path {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: sh-draw-squiggle 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}
@keyframes sh-draw-squiggle {
    to { stroke-dashoffset: 0; }
}

/* ── CTA glow: 3 pulses then stops ──────────────────────────── */
.sh-hero .wp-block-buttons > .wp-block-button:first-child .wp-block-button__link {
    animation: sh-cta-glow 1.8s ease-in-out 1.5s 3;
}

/* ── Mobile: stack columns ───────────────────────────────────── */
@media (max-width: 768px) {
    .sh-hero__cards-col { margin-top: 2rem; }
}

/* ── Header: frosted backdrop + deeper shadow when user scrolls */
#masthead.sh-scrolled {
    background-color: rgba(var(--sh-color-bg-rgb), 0.95) !important;
    box-shadow: var(--sh-shadow-header-scrolled) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ── Scroll reveal: fade + slide (headings, sections, columns) */
.sh-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity  0.38s cubic-bezier(0.22, 1, 0.36, 1) var(--sh-delay, 0ms),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) var(--sh-delay, 0ms);
}
.sh-reveal.sh-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scroll reveal: fade-only (interactive cards — keeps hover transform clean) */
.sh-fade {
    opacity: 0;
    transition: opacity var(--sh-transition-smooth) var(--sh-delay, 0ms);
}
.sh-fade.sh-visible {
    opacity: 1;
}

/* ── Section heading: gradient underline that draws in on reveal */
h2.wp-block-heading.sh-reveal::after,
h3.wp-block-heading.sh-reveal::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sh-color-primary), var(--sh-color-secondary));
    border-radius: 2px;
    margin: 10px 0 0;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--sh-delay, 0ms) + 200ms);
}
h2.wp-block-heading.has-text-align-center.sh-reveal::after,
h3.wp-block-heading.has-text-align-center.sh-reveal::after {
    margin: 10px auto 0;
}
h2.wp-block-heading.sh-reveal.sh-visible::after,
h3.wp-block-heading.sh-reveal.sh-visible::after {
    width: 52px;
}

/* ══════════════════════════════════════════════════════════════════
   UTILITY & COMPONENT CLASSES
   Applied via Gutenberg's "Additional CSS class" — replaces inline
   styles in block content so values live in one place (the :root
   token block above) rather than scattered across post_content.
   ══════════════════════════════════════════════════════════════════ */

/* ── Section Containers ──────────────────────────────────────── */
.sh-section-primary   { background-color: var(--sh-color-primary)   !important; }
.sh-section-secondary { background-color: var(--sh-color-secondary) !important; }
.sh-section-light     { background-color: #F5EFE6 !important; }
.sh-section-lighter   { background-color: #F0EBE3 !important; }

/* ── Cards ───────────────────────────────────────────────────── */
.sh-card {
    background-color: var(--sh-color-white) !important;
    border-radius:    var(--sh-radius-card)  !important;
    padding:          2rem 1.75rem           !important;
}
.sh-card--compact {
    background-color: var(--sh-color-white) !important;
    border-radius:    var(--sh-radius-card)  !important;
    padding:          2rem 1.5rem            !important;
}
.sh-info-box {
    background-color: var(--sh-color-white) !important;
    border-radius:    var(--sh-radius-photo) !important;
    padding:          2rem                   !important;
}

/* ── Cover Heights ───────────────────────────────────────────── */
.sh-cover-tall { min-height: 420px !important; }
.sh-cover-page { min-height: 400px !important; }

/* ── Typography — Headings ───────────────────────────────────── */
.sh-heading-page {
    font-size:   clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700                    !important;
    color:       var(--sh-color-white)  !important;
}
.sh-heading-section {
    font-size: 2.2rem              !important;
    color:     var(--sh-color-text) !important;
}
.sh-heading-uppercase {
    font-size:      1.4rem                  !important;
    font-weight:    700                     !important;
    letter-spacing: 0.06em                  !important;
    text-transform: uppercase               !important;
    color:          var(--sh-color-white)   !important;
}
.sh-heading-md {
    font-size:   1.75rem            !important;
    font-weight: 700                !important;
    color:       var(--sh-color-text) !important;
}
.sh-stat-number {
    font-size:   3rem                  !important;
    font-weight: 700                   !important;
    color:       var(--sh-color-white) !important;
}
.sh-subheading {
    font-size:   1.1rem                    !important;
    font-weight: 600                       !important;
    color:       var(--sh-color-secondary) !important;
}

/* ── Typography — Body & Inline ──────────────────────────────── */
.sh-body-text {
    font-size:   1.05rem !important;
    line-height: 1.75    !important;
    color:       #4A3F3A !important;
}
.sh-text-muted   { color: #6B5B54                    !important; }
.sh-text-light   { color: #F5EFE6                    !important; }
.sh-text-white   { color: var(--sh-color-white)      !important; }
.sh-text-accent  { color: var(--sh-color-accent)     !important; font-size: 0.9rem !important; }

/* ── Hero Buttons (pill shape) ───────────────────────────────── */
.sh-btn-primary .wp-block-button__link,
.wp-block-button.sh-btn-primary .wp-block-button__link {
    border-radius:    var(--sh-radius-pill)  !important;
    background-color: var(--sh-color-primary) !important;
    color:            var(--sh-color-white)  !important;
    padding:          0.85rem 1.75rem        !important;
    border:           none                   !important;
}
.sh-btn-outline .wp-block-button__link,
.wp-block-button.sh-btn-outline .wp-block-button__link {
    border-radius:    var(--sh-radius-pill)      !important;
    border:           2px solid var(--sh-color-secondary) !important;
    color:            var(--sh-color-secondary)  !important;
    background-color: transparent               !important;
    padding:          0.85rem 1.75rem           !important;
}

/* ── Utilities ───────────────────────────────────────────────── */
.sh-image-rounded { border-radius: var(--sh-radius-photo) !important; }
.sh-divider-light {
    background-color: #F0EBE3 !important;
    color:            #F0EBE3 !important;
    margin-top:       1.25rem !important;
    margin-bottom:    1.25rem !important;
}

/* ── prefers-reduced-motion: disable everything ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .sh-reveal,
    .sh-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    h2.wp-block-heading.sh-reveal::after,
    h3.wp-block-heading.sh-reveal::after {
        width: 52px !important;
        transition: none !important;
    }
    .sh-hero .wp-block-column:first-child > *,
    .sh-hero__cards-col > .wp-block-cover,
    .sh-hero__cards-col .wp-block-cover__inner-container > *,
    .sh-hero .wp-block-buttons > .wp-block-button:first-child .wp-block-button__link,
    .sh-photo-card .wp-block-cover__image-background {
        animation: none !important;
        opacity:   1 !important;
        transform: none !important;
    }
    .sh-squiggle__svg path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ── Calendar & Events ───────────────────────────────────────── */

/* Wrapper */
.sh-cal-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

/* Legend */
.sh-cal-legend {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sh-cal-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sh-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sh-color-text);
}

.sh-cal-legend__dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.sh-cal-legend__dot[data-type="activity"] { background: var(--sh-color-secondary); }
.sh-cal-legend__dot[data-type="event"]    { background: var(--sh-color-primary); }

/* Calendar card */
#sh-calendar {
    background: var(--sh-color-white);
    border-radius: var(--sh-radius-card);
    box-shadow: var(--sh-shadow-card);
    border: 1px solid var(--sh-color-border);
    padding: 1rem;
    font-family: var(--sh-font-body) !important;
}

/* FC base */
#sh-calendar .fc { color: var(--sh-color-text); font-family: var(--sh-font-body); }
#sh-calendar .fc a { color: inherit; text-decoration: none; }

/* Toolbar */
#sh-calendar .fc-toolbar {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sh-color-border);
    margin-bottom: 1rem !important;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#sh-calendar .fc-toolbar-title {
    font-family: var(--sh-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--sh-color-text);
}

/* All buttons: outlined */
#sh-calendar .fc-button,
#sh-calendar .fc-button-primary {
    background: transparent !important;
    border: 1.5px solid var(--sh-color-border) !important;
    color: var(--sh-color-text) !important;
    border-radius: 8px !important;
    padding: 0.38rem 0.75rem !important;
    font-family: var(--sh-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
}

#sh-calendar .fc-button:hover,
#sh-calendar .fc-button-primary:hover {
    border-color: var(--sh-color-secondary) !important;
    color: var(--sh-color-secondary) !important;
    background: rgba(42, 111, 119, 0.06) !important;
}

/* Active view */
#sh-calendar .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--sh-color-secondary) !important;
    border-color: var(--sh-color-secondary) !important;
    color: var(--sh-color-white) !important;
}

/* Today button: pill + terracotta */
#sh-calendar .fc-today-button {
    background: var(--sh-color-primary) !important;
    border-color: var(--sh-color-primary) !important;
    color: var(--sh-color-white) !important;
    border-radius: var(--sh-radius-pill) !important;
    padding: 0.38rem 1rem !important;
    cursor: pointer !important;
}

#sh-calendar .fc-today-button:disabled { opacity: 0.4 !important; cursor: default !important; }

/* Day column headers */
#sh-calendar .fc-col-header-cell-cushion {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.45;
    padding: 0.6rem 0.25rem;
    cursor: default;
}

/* Grid */
#sh-calendar .fc-scrollgrid            { border: none !important; }
#sh-calendar .fc-scrollgrid td,
#sh-calendar .fc-scrollgrid th         { border-color: var(--sh-color-border) !important; }

/* Day cells */
#sh-calendar .fc-daygrid-day           { min-height: 80px; }

#sh-calendar .fc-daygrid-day-number {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem;
    margin: 0.25rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none !important;
    cursor: default;
    transition: background 0.15s ease;
}

/* Today */
#sh-calendar .fc-day-today {
    background: rgba(var(--sh-color-primary-rgb), 0.04) !important;
}

#sh-calendar .fc-day-today .fc-daygrid-day-number {
    background: var(--sh-color-primary);
    color: var(--sh-color-white);
}

/* Other-month days */
#sh-calendar .fc-day-other .fc-daygrid-day-number { opacity: 0.28; }

/* Events */
#sh-calendar .fc-event {
    border: none !important;
    border-radius: 5px !important;
    padding: 2px 7px !important;
    font-size: 0.775rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-bottom: 2px !important;
    transition: opacity 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease !important;
}

#sh-calendar .fc-event:hover {
    opacity: 0.84 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.13) !important;
}

#sh-calendar .fc-event-time  { opacity: 0.8; }

/* "More" link */
#sh-calendar .fc-daygrid-more-link {
    font-size: 0.75rem;
    color: var(--sh-color-secondary);
    font-weight: 600;
    cursor: pointer;
}

/* List view */
#sh-calendar .fc-list                  { border: none !important; }

#sh-calendar .fc-list-day-cushion {
    background: var(--sh-color-bg) !important;
    font-family: var(--sh-font-display);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.55rem 1rem;
    border-radius: 6px;
}

#sh-calendar .fc-list-day-text,
#sh-calendar .fc-list-day-side-text    { text-decoration: none !important; }

#sh-calendar .fc-list-event            { cursor: pointer; }
#sh-calendar .fc-list-event:hover td   { background: var(--sh-color-bg) !important; }

#sh-calendar .fc-list-event-dot        { border-width: 6px !important; border-radius: 50% !important; }

#sh-calendar .fc-list-event-title a {
    font-weight: 500;
    color: var(--sh-color-text);
    text-decoration: none !important;
}

#sh-calendar .fc-list-event-time       { opacity: 0.5; font-size: 0.8125rem; }

#sh-calendar .fc-list-empty            { background: var(--sh-color-bg) !important; border-radius: 8px; }
#sh-calendar .fc-list-empty-cushion    { opacity: 0.5; }

/* Week/time grid */
#sh-calendar .fc-timegrid-slot-label-cushion { font-size: 0.75rem; opacity: 0.45; }

/* ── Popup ───────────────────────────────────────────────────── */
.sh-cal-popup {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.sh-cal-popup.is-open {
    pointer-events: auto;
    opacity: 1;
}

.sh-cal-popup__card {
    background: var(--sh-color-white);
    border-radius: var(--sh-radius-card);
    box-shadow: 0 24px 64px rgba(var(--sh-color-text-rgb), 0.18);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    position: relative;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.sh-cal-popup.is-open .sh-cal-popup__card { transform: scale(1) translateY(0); }

.sh-cal-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    padding: 0.35rem;
    cursor: pointer;
    color: var(--sh-color-text);
    opacity: 0.35;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.sh-cal-popup__close:hover { opacity: 1; background: var(--sh-color-bg); }

.sh-cal-popup__badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 0.875rem;
    color: var(--sh-color-white);
}

.sh-cal-popup__badge[data-type="activity"] { background: var(--sh-color-secondary); }
.sh-cal-popup__badge[data-type="event"]    { background: var(--sh-color-primary); }

.sh-cal-popup__title {
    font-family: var(--sh-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sh-color-text);
    margin: 0 0 0.75rem;
    line-height: 1.3;
    padding-right: 1.75rem;
}

.sh-cal-popup__schedule,
.sh-cal-popup__time {
    font-family: var(--sh-font-body);
    font-size: 0.9rem;
    color: var(--sh-color-text);
    margin: 0.2rem 0;
    line-height: 1.5;
}

.sh-cal-popup__schedule { opacity: 0.65; }
.sh-cal-popup__time     { font-weight: 500; }

.sh-cal-popup__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
}

.sh-cal-popup__dropin,
.sh-cal-popup__reg-required {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 9px;
}

.sh-cal-popup__dropin        { background: rgba(42, 111, 119, 0.1);  color: var(--sh-color-secondary); }
.sh-cal-popup__reg-required  { background: rgba(224, 122, 71, 0.1);  color: var(--sh-color-primary); }

.sh-cal-popup__cta {
    display: inline-block;
    margin-top: 1.375rem;
    padding: 0.7rem 1.5rem;
    background: var(--sh-color-primary);
    color: var(--sh-color-white) !important;
    border-radius: var(--sh-radius-pill);
    font-family: var(--sh-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: opacity 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.sh-cal-popup__cta:hover { opacity: 0.88; transform: translateY(-1px); }

/* Backdrop */
.sh-cal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(var(--sh-color-text-rgb), 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.sh-cal-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ── Single Event Page ───────────────────────────────────────── */
.sh-event__hero {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
}

.sh-event__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sh-event__body {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.sh-event__title {
    font-family: var(--sh-font-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--sh-color-text);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.sh-event__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--sh-color-secondary);
    font-weight: 500;
}

.sh-event__meta .sh-event__date::after {
    content: '\00B7';
    margin-left: 1rem;
    color: var(--sh-color-border);
}

.sh-event__meta .sh-event__time:only-child::before,
.sh-event__meta .sh-event__date:only-child::after { content: none; }

.sh-event__register-btn {
    display: inline-block;
    margin-bottom: 2rem;
    padding: 0.8rem 1.75rem;
    background-color: var(--sh-color-primary);
    color: var(--sh-color-white);
    border-radius: var(--sh-radius-pill);
    font-family: var(--sh-font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity var(--sh-transition-fast), transform 0.15s ease;
}

.sh-event__register-btn:hover { opacity: 0.88; transform: translateY(-1px); color: var(--sh-color-white); }

.sh-event__content {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--sh-color-text);
}

/* List view: colored row backgrounds by event type */
#sh-calendar .fc-list-event[data-type="activity"] td {
    background: rgba(42, 111, 119, 0.07) !important;
}
#sh-calendar .fc-list-event[data-type="event"] td {
    background: rgba(224, 122, 71, 0.07) !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #sh-calendar .fc-list-event-time,
    #sh-calendar .fc-event-time {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .sh-cal-wrap { padding: 0.75rem 0.5rem 2rem; }
    #sh-calendar { padding: 0.625rem 0.5rem; }

    /* Header toolbar: nav only — no cramping */
    #sh-calendar .fc-header-toolbar {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        padding-bottom: 0.625rem;
        margin-bottom: 0 !important;
    }
    #sh-calendar .fc-header-toolbar .fc-toolbar-chunk:first-child { flex: 0 0 auto; }
    #sh-calendar .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { flex: 1; text-align: center; }
    #sh-calendar .fc-header-toolbar .fc-toolbar-chunk:last-child   { flex: 0 0 auto; }

    /* Title */
    #sh-calendar .fc-toolbar-title { font-size: 1rem; }

    /* Footer toolbar: view switcher full-width strip */
    #sh-calendar .fc-footer-toolbar {
        margin-top: 0 !important;
        padding: 0.625rem 0 0;
        border-top: 1px solid var(--sh-color-border);
        justify-content: center !important;
    }
    #sh-calendar .fc-footer-toolbar .fc-button-group { width: 100%; }
    #sh-calendar .fc-footer-toolbar .fc-button       { flex: 1; justify-content: center; }

    /* Smaller buttons on mobile */
    #sh-calendar .fc-button,
    #sh-calendar .fc-button-primary {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.8125rem !important;
        min-height: 36px;
    }

    /* Day cell height */
    #sh-calendar .fc-daygrid-day { min-height: 60px !important; }

    .sh-cal-popup__card { padding: 1.25rem; }
    .sh-event__body     { padding: 2rem 1rem 3.5rem; }
}