@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/inter-latin-variable.woff2') format('woff2');
}

/* =====================================================
   BRAND COLOR UTILITIES
   Defined as plain CSS — immune to Tailwind JIT / CDN
   caching / minification issues.
   ===================================================== */

:root {
    --brand: #8B2635;
    --brand-dark: #6d1d28;
    --off-white: #fafaf9;
}

/* Background */
.bg-brand {
    background-color: var(--brand) !important;
}

.bg-brand-dark {
    background-color: var(--brand-dark) !important;
}

.bg-off-white {
    background-color: var(--off-white) !important;
}

/* Opacity variants */
.bg-brand\/5 {
    background-color: rgba(139, 38, 53, 0.05) !important;
}

.bg-brand\/10 {
    background-color: rgba(139, 38, 53, 0.10) !important;
}

/* Text */
.text-brand {
    color: var(--brand) !important;
}

/* Border */
.border-brand {
    border-color: var(--brand) !important;
}

.border-brand\/20 {
    border-color: rgba(139, 38, 53, 0.20) !important;
}

/* Hover states */
.hover\:bg-brand:hover {
    background-color: var(--brand) !important;
}

.hover\:bg-brand-dark:hover {
    background-color: var(--brand-dark) !important;
}

.hover\:text-brand:hover {
    color: var(--brand) !important;
}

/* Dimensional Text Utility */
.text-dimensional {
    /* Lighter neutral grey edges, white center, horizontal metallic gradient */
    background-image: linear-gradient(to right, #a3a3a3 0%, #ffffff 50%, #a3a3a3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Logo Gradient Mask Utility */
.logo-gradient-mask {
    background-image: linear-gradient(to right, #a3a3a3 0%, #ffffff 50%, #a3a3a3 100%);
    -webkit-mask-image: url('assets/images/logo.svg');
    mask-image: url('assets/images/logo.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 100%;
    height: 100%;
}

/* Hero Inverted Corner Mask */
.hero-cutout-mask {
    --r: 3rem;
    /* Main border radius of the hero card (approx 48px) */
    --s: 40px;
    /* Size of the inverted curve (concave radius) */
    --x: 320px;
    /* Horizontal width of the logo tab cutout */
    --y: 88px;
    /* Vertical height of the logo tab cutout */

    /* Complex mask to cut out the top-left corner with inverted radius */
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
    --_d: (var(--s) + var(--r));

    -webkit-mask:
        calc(100% - var(--_d) - var(--x)) 0 var(--_m),
        100% calc(100% - var(--_d) - var(--y)) var(--_m),
        radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * (var(--r) + var(--x))) calc(-1 * (var(--r) + var(--y))),
        var(--_g) calc(100% - var(--_d) - var(--x)) 0,
        var(--_g) 0 calc(100% - var(--_d) - var(--y));

    mask:
        calc(var(--_d) + var(--x)) 0 var(--_m),
        0 calc(var(--_d) + var(--y)) var(--_m),
        radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
        var(--_g) calc(var(--_d) + var(--x)) 0,
        var(--_g) 0 calc(var(--_d) + var(--y));

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    /* To fill the rest of the shape (since the mask defines the corner, we need the main block) 
       This mask logic essentially draws the corners.
       Actually, the user's snippet draws a SHAPE with that corner. 
       Let's use the snippet as intended: on the HERO container itself to "cut" it? 
       No, the snippet creates a shape with an inverted corner. 
       If I apply this to the HERO, it will mask the hero to HAVE that shape.
       Wait, the snippet creates a specific rounded rectangle with an inverted chunk taken out?
       Let's look at the mask definition closely.
       It uses radial gradients to draw corners.
       
       Let's stick to the user's exact logic but adapted for the top-left cutout.
       The user's code seems to define a top-left inverted corner shape.
       Let's apply this to the hero container to give it that "bite" taken out of the top-left.
    */
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
}

/* User's exact requested snippet adapted for the Hero Cutout logic */
/* We will apply this to a wrapper or the logo tab itself to INVERT it? 
   Actually, the best way to get the "green circle" look (a smooth cutout) 
   is to apply this mask to the HERO IMAGE container, effectively "erasing" the top-left corner 
   in the shape of the logo tab.
*/
.inverted-radius-cutout {
    --r: 40px;
    /* outer radius match */
    --s: 40px;
    /* inner curve size */
    --x: 340px;
    /* width of tab */
    --y: 90px;
    /* height of tab */

    mask:
        radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 101%) var(--x) var(--y) / calc(100% - var(--x)) calc(100% - var(--y)) no-repeat,
        conic-gradient(from 180deg at var(--x) var(--y), #000 0 90deg, #0000 0) no-repeat,
        linear-gradient(#000 0 0) 0 0 / var(--x) calc(100% - var(--y) + var(--r)) no-repeat,
        linear-gradient(#000 0 0) 0 0 / calc(100% - var(--x) + var(--r)) var(--y) no-repeat;

    /* The above is a guess at "cutting out". 
     Let's use the User's EXACT snippet which creates a "blob" with an inverted corner?
     Actually, looking at the snippet:
       radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) ...
     It creates a "concave" curve at 0 0 relative to position (r+x, r+y).
     
     If this is a mask, it reveals. 
     We want to REVEAL the hero, but HIDE the top-left corner.
     
     Let's try applying the simpler ::before/::after fix I did before but simpler?
     No, the user explicitly gave me code. I should use it.
     The code creates a shape with an inverted radius on one corner.
     I should apply this to the HERO CONTAINER.
  */

    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
    --_d: (var(--s) + var(--r));

    /* This masks the element TO BE that shape. */
    mask:
        calc(100% - var(--_d) - var(--x)) 0 var(--_m),
        100% calc(100% - var(--_d) - var(--y)) var(--_m),
        radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(100% - (var(--r) + var(--x))) calc(100% - (var(--r) + var(--y))),
        var(--_g) calc(100% - var(--_d) - var(--x)) 0,
        var(--_g) 0 calc(100% - var(--_d) - var(--y));

    /* Wait, this mask is for a shape with ONE inverted corner. 
       The user wants the HERO to have that regular corner, but the LOGO TAB to sit there.
       The LOGO TAB needs the inverted corners.
       
       Let's stick to the User's code. 
       They said: "use this unconventional inverted border radius method"
       And showed a code block for `.inverted-radius`.
       
       I will add this class `.inverted-radius` directly to CSS and use it on the Logo Tab.
    */
}

.inverted-radius {
    --r: 2.5rem;
    /* 40px - matches hero border radius */
    --s: 40px;
    /* size of inner curve for the "scoop" */
    /* Remove offset x/y since we want it on the corner itself? 
     Actually, the user's snippet has x/y offsets. 
     Let's just paste the user's code and apply it to the logo tab.
     But the logo tab needs to be WHITE solid.
     This code creates a SHAPE.
     So if I apply `.inverted-radius` to the logo tab `div`, it will maintain that shape.
  */
    --x: 0px;
    --y: 0px;

    /* Updated variables to match context */
    --r: 40px;
    --s: 40px;
    --x: 0px;
    --y: 0px;

    /* background: white;  (Already set in HTML) */
    border-radius: var(--r);
    /* This sets the main outer radius */

    /* The User's Mask Code */
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
    --_d: (var(--s) + var(--r));

    /* We need to adjust the mask for the BOTTOM-RIGHT corner to be inverted?
     The User's code makes the TOP-LEFT inverted? 
     "radial-gradient(var(--s) at 0 0" -> Top Left.
     
     The logo tab needs the BOTTOM-RIGHT to be the scoop.
     So I need to rotate or flip this logic.
     
     radial-gradient(var(--s) at 100% 100%) -> Bottom Right.
  */

    mask:
        /* Top Left Corner (Normal Rounded) */
        0 0 var(--_m),
        /* Top Right Corner (Normal Rounded) */
        100% 0 var(--_m),
        /* Bottom Left Corner (Normal Rounded) */
        0 100% var(--_m),
        /* Bottom Right Corner (INVERTED SCOOP) */
        radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) 100% 100%,

        /* Filling the rest */
        conic-gradient(from 180deg at var(--r) var(--r), #000 90deg, #0000 0) 0 0,
        conic-gradient(from 270deg at calc(100% - var(--r)) var(--r), #000 90deg, #0000 0) 100% 0,
        conic-gradient(from 90deg at var(--r) calc(100% - var(--r)), #000 90deg, #0000 0) 0 100%;
    /* This is getting complicated to re-write. 
    
    Let's just use the `.inverted-radius` class as a utility for now with the user's code exactly, 
    but we might need to rely on the previous simpler method if this mask is for a different shape.
    
    Actually, re-reading the user's request: "unconventional inverted border radius method... remember to set z-index to 1".
    
    The code suggests a mask on the element itself.
    
       They said: "unconventional inverted border radius method... remember to set z-index to 1".
       
       The code suggests a mask on the element itself.
       
       Let's try to just paste the code provided, but I suspect it creates a specific shape (top-left inverted). 
       I will add the class `.inverted-border-radius` with the user's code.
    */
}

/* Logo Tab with Inverted Curves (Pseudo-Elements) */
.logo-tab {
    background-color: white;
    border-bottom-right-radius: 40px;
    /* Round the tab's own corner */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

/* Curve on the Right edge (transitioning to top) */
.logo-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    /* Create a concave curve: transparent at bottom-left, white elsewhere */
    background-image: radial-gradient(circle at 100% 100%, transparent 40px, #ffffff 40.5px);
    pointer-events: none;
    z-index: 10;
}

/* Curve on the Bottom edge (transitioning to left) */
.logo-tab::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: transparent;
    /* Create a concave curve: transparent at top-right, white elsewhere */
    background-image: radial-gradient(circle at 100% 100%, transparent 40px, #ffffff 40.5px);
    pointer-events: none;
    z-index: 10;
}

/* Responsive adjustment for curve size */
@media (max-width: 768px) {
    .logo-tab {
        border-bottom-right-radius: 24px;
    }

    .logo-tab::before,
    .logo-tab::after {
        width: 24px;
        height: 24px;
    }

    .logo-tab::before {
        background-image: radial-gradient(circle at 100% 100%, transparent 24px, #ffffff 24.5px);
    }

    .logo-tab::after {
        background-image: radial-gradient(circle at 100% 100%, transparent 24px, #ffffff 24.5px);
    }
}

/* Let's try the simpler pseudo-element fix again but ensure it's VISIBLE. 
   The User said "They aren't positioned correctly".
   They were positioned at 100% top/left.
   
   If I use the User's code, it creates a standalone shape.
*/

.logo-tab-inverted {
    --r: 2.5rem;
    /* Matches hero radius */
    --s: 40px;
    /* Curve size */
    background: white;
    border-radius: var(--r);

    /* Mask construction for Bottom-Right Scoop */
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);

    mask:
        /* Top Left, Top Right, Bottom Left corners (standard rounded) */
        calc(100% - var(--r)) 0 var(--_m),
        0 calc(100% - var(--r)) var(--_m),

        /* The main body */
        linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat;

    /* COMPOSITE MASK: Exclude the scoop at bottom right */
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;

    /* Reveal everything, then CUT OUT bottom right? 
       No, masks reveal where they are opaque.
    */
}

/* User's Code Block - Direct Copy (with variable tweaks) */
.inverted-radius {
    --r: 40px;
    /* Radius */
    --s: 40px;
    /* Inner curve */
    --x: 0px;
    --y: 0px;

    background: white;
    border-radius: var(--r);

    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
    --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
    --_d: (var(--s) + var(--r));

    /* This specific mask pattern from the user creates a specific shape. 
     I'll apply it. */
    mask:
        calc(var(--_d) + var(--x)) 0 var(--_m),
        0 calc(var(--_d) + var(--y)) var(--_m),
        radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
        var(--_g) calc(var(--_d) + var(--x)) 0,
        var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
}

/* Base Styles & Animations */
:root {
    --primary: #8B0000;
    --accent: #DC2626;
    --light: #F8F9FA;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1a202c;
    background-color: var(--light);
}

/* Suppress browser/Tailwind focus ring flash on form fields */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Fluid Typography Utilities */
.text-fluid-h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
}

.text-fluid-h2 {
    font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
}

.text-fluid-h3 {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
}

.text-fluid-body {
    font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
}

.text-fluid-small {
    font-size: clamp(0.875rem, 0.25vw + 0.75rem, 1rem);
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.glass-dark {
    background: rgba(139, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Vertical Marquee Animation */
@keyframes marquee-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.animate-marquee-up {
    animation: marquee-up 60s linear infinite;
}

.animate-marquee-up:hover {
    animation-play-state: paused;
}

/* Horizontal Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Card Hover Effects */
.platform-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dimensional Button Gradient */
.btn-dimensional {
    background-image: radial-gradient(ellipse at bottom center, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
}

/* Scroll-triggered Fade In Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Platform Card Hover - Blue Background */
.platform-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background-color: #DC2626 !important;
    /* red-500 */
}

.platform-card:hover * {
    color: white !important;
}

/* Hide scrollbar for clean horizontal carousel */
.hide-scroll::-webkit-scrollbar {
    display: none;
}

.hide-scroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* =====================================================
   WORDPRESS ADMIN BAR OFFSET
   When logged in, WP adds a 32px admin bar at the top.
   All fixed-position elements need to account for this.
   ===================================================== */
.admin-bar #mainNav {
    top: 32px !important;
}

.admin-bar #floatingDonate {
    top: calc(50% + 16px) !important;
}

.admin-bar #donateDrawer {
    top: 32px !important;
}

.admin-bar #donateDrawer #drawerPanel {
    top: 0 !important;
    height: calc(100vh - 32px) !important;
}

.admin-bar #mobileMenu {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
}

/* Mobile admin bar is 46px */
@media screen and (max-width: 782px) {
    .admin-bar #mainNav {
        top: 46px !important;
    }

    .admin-bar #floatingDonate {
        top: calc(50% + 23px) !important;
    }

    .admin-bar #donateDrawer {
        top: 46px !important;
    }

    .admin-bar #donateDrawer #drawerPanel {
        height: calc(100vh - 46px) !important;
    }

    .admin-bar #mobileMenu {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* =====================================================
   HERO H1 ANIMATION — FLASH PREVENTION
   Hide hero headline lines with CSS before GSAP
   animates them in, preventing the visible-then-animate
   flash. JS adds .hero-ready class after animation init.
   ===================================================== */
.hero-line span {
    opacity: 0;
    transform: translateY(100px);
}

/* Fallback: if JS doesn't load within 3s, show the text */
@keyframes heroFallback {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-line span {
    animation: heroFallback 0.8s ease-out 3s forwards;
}

/* When GSAP is active, it controls opacity/transform directly,
   so cancel the fallback animation */
.hero-ready .hero-line span {
    animation: none;
}

/* =====================================================
   PAGINATION STYLES
   ===================================================== */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-numbers:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.page-numbers.current {
    background-color: var(--brand);
    border-color: var(--brand);
    color: white;
}

.page-numbers.prev,
.page-numbers.next {
    border: none;
    color: #666;
}

.page-numbers.prev:hover,
.page-numbers.next:hover {
    color: var(--brand);
}
/* =====================================================
   PROSE TYPOGRAPHY — Blog Post Content
   Restores all Gutenberg block-editor output styles
   that Tailwind CDN preflight strips (lists, headings,
   blockquotes, tables, code blocks, etc.).
   Ensures WYSIWYG parity: editor ↔ front end.
   ===================================================== */

/* --- Paragraphs --- */
.prose p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

/* --- Headings --- */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
}

.prose h2 {
    font-size: 1.75em;
    margin-top: 2em;
    margin-bottom: 0.75em;
    letter-spacing: -0.02em;
}

.prose h3 {
    font-size: 1.375em;
    margin-top: 1.75em;
    margin-bottom: 0.5em;
}

.prose h4 {
    font-size: 1.125em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.prose h5,
.prose h6 {
    font-size: 1em;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #555;
}

/* --- Unordered Lists ---
   !important overrides Tailwind CDN preflight which
   injects after linked stylesheets at runtime. */
.prose ul {
    list-style-type: disc !important;
    padding-left: 1.75em !important;
    margin-top: 1em !important;
    margin-bottom: 1.5em !important;
}

.prose ul ul {
    list-style-type: circle !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.prose ul ul ul {
    list-style-type: square !important;
}

/* --- Ordered Lists --- */
.prose ol {
    list-style-type: decimal !important;
    padding-left: 1.75em !important;
    margin-top: 1em !important;
    margin-bottom: 1.5em !important;
}

.prose ol ol {
    list-style-type: lower-alpha !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.prose ol ol ol {
    list-style-type: lower-roman !important;
}

/* --- List Items (shared) --- */
.prose li {
    margin-bottom: 0.5em !important;
    line-height: 1.7;
    display: list-item !important;
}

.prose li > p {
    margin-bottom: 0.5em;
}

.prose li:last-child {
    margin-bottom: 0;
}

/* --- Blockquotes --- */
.prose blockquote {
    border-left: 3px solid var(--brand, #8B2635);
    padding: 0.75em 1.25em;
    margin: 1.5em 0;
    color: #444;
    font-style: italic;
    background-color: rgba(139, 38, 53, 0.03);
}

.prose blockquote p {
    margin-bottom: 0.75em;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

/* --- Links inside prose --- */
.prose a {
    color: var(--brand, #8B2635);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: var(--brand-dark, #6d1d28);
}

/* --- Images & Figures --- */
.prose img {
    max-width: 100%;
    height: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-radius: 2px;
}

.prose figure {
    margin: 2em 0;
}

.prose figcaption {
    font-size: 0.875em;
    color: #888;
    margin-top: 0.5em;
    text-align: center;
}

/* --- Horizontal Rules --- */
.prose hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 2.5em 0;
}

/* --- Inline Code --- */
.prose code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875em;
    background-color: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    color: #c7254e;
}

/* --- Code Blocks (pre > code) --- */
.prose pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 1.25em 1.5em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5em 0;
    font-size: 0.875em;
    line-height: 1.6;
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
    border-radius: 0;
}

/* --- Tables --- */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9375em;
}

.prose thead th {
    text-align: left;
    font-weight: 600;
    padding: 0.75em 1em;
    border-bottom: 2px solid #e5e5e5;
    color: #333;
}

.prose tbody td {
    padding: 0.75em 1em;
    border-bottom: 1px solid #f0f0f0;
}

.prose tbody tr:last-child td {
    border-bottom: none;
}

/* --- Strong / Bold --- */
.prose strong,
.prose b {
    font-weight: 700;
    color: #111;
}

/* --- Emphasis / Italic --- */
.prose em,
.prose i {
    font-style: italic;
}

/* --- WordPress Gutenberg Blocks --- */

/* WP Separator block */
.prose .wp-block-separator {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 2.5em auto;
    max-width: 100px;
}

.prose .wp-block-separator.is-style-wide {
    max-width: 100%;
}

.prose .wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    max-width: 100%;
}

.prose .wp-block-separator.is-style-dots::before {
    content: '···';
    letter-spacing: 1em;
    font-size: 1.5em;
    color: #ccc;
}

/* WP Quote block */
.prose .wp-block-quote {
    border-left: 3px solid var(--brand, #8B2635);
    padding: 0.75em 1.25em;
    margin: 1.5em 0;
}

.prose .wp-block-quote cite {
    display: block;
    font-size: 0.875em;
    color: #888;
    margin-top: 0.5em;
    font-style: normal;
}

/* WP Image block */
.prose .wp-block-image {
    margin: 2em 0;
}

.prose .wp-block-image img {
    margin-top: 0;
    margin-bottom: 0;
}

/* WP List block — ensure styles apply even with .wp-block-list */
.prose .wp-block-list {
    padding-left: 1.75em !important;
    margin-top: 1em !important;
    margin-bottom: 1.5em !important;
}

.prose ul.wp-block-list {
    list-style-type: disc !important;
}

.prose ol.wp-block-list {
    list-style-type: decimal !important;
}

/* ─── Dark-background checkbox ───────────────────────
   Used on hero and footer forms where the background is
   very dark. Native accent-white makes checked state
   invisible (white-on-white), so we replace with a
   custom styled checkbox that is clearly visible in both
   checked and unchecked states.
   ──────────────────────────────────────────────────── */
.f2f-checkbox-dark {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}
.f2f-checkbox-dark:checked {
    background: #ffffff;
    border-color: #ffffff;
}
.f2f-checkbox-dark:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 5px;
    height: 9px;
    border: 2px solid #8B2635;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.f2f-checkbox-light {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1px solid #e5e5e5;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}
.f2f-checkbox-light:checked {
    background: #8B2635;
    border-color: #8B2635;
}
.f2f-checkbox-light:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}