/* ========================================
CUSTOM CSS STYLES (Full replacement)
======================================== */

/* ========================================
   THEME TOKENS - WCAG AA Compliant Color System
   ======================================== */

/* Default theme (dark) - accessible defaults */
:root {
    --bg: #0b0d10;              /* page background (dark) */
    --panel: #0f1316;           /* panels/cards */
    --text-primary: #f4f5f6;    /* main text on dark - WCAG AA compliant */
    --text-secondary: #bfc4c6;  /* muted text */
    --accent: #f2c75c;          /* gold accent - accessible in both modes */
    --accent-strong: #d4a84a;   /* darker gold for links/hover */
    --muted: #8b8f93;
    --link: var(--accent);
    --overlay-dark: rgba(0,0,0,0.52);
    --overlay-light: rgba(255,255,255,0.22);
    --blockquote-bg: rgba(255,255,255,0.03);
    --blockquote-border: var(--accent-strong);

    /* Hero caption positioning and styling */
    --hero-caption-bottom-mobile: 14%;
    --hero-caption-bottom-tablet: 10%;
    --hero-caption-bottom-desktop: 8%;
    --hero-caption-maxwidth: 820px;
    --hero-caption-radius: 12px;

    /* Accent variables */
    --hero-accent: #f2c75c;

    /* Hero caption backgrounds (theme-aware tokens) */
    --hero-caption-bg-dark: rgba(0,0,0,0.52);
    --hero-caption-bg-light: rgba(255,255,255,0.20);

    /* Legacy compatibility */
    --text: var(--text-primary);

    /* Reflections section CSS variables */
    --reflections-tile-gap: 20px;
    --reflections-tile-size: 320px; /* base square on desktop; responsive applied */
    --reflections-border-radius: 12px;
    --reflections-shadow: 0 8px 20px rgba(0,0,0,0.25);
    --reflections-accent: #C5A572; /* muted gold */
    --reflections-accent-2: #E0218A; /* barbie pink for subtle highlights */
    --reflections-text-color: #F9F6F7;
    --reflections-bg: #0E0E0E; /* inherits from global dark theme */
}

/* Fallback if no theme variable set - prefer dark */
:root:not([data-theme]) { 
    color-scheme: dark; 
}

/* Light theme tokens override when data-theme="light" */
html[data-theme="light"],
body[data-theme="light"] {
    --bg: #ffffff;              /* page background (light) */
    --panel: #f6f6f7;           /* panel / card bg */
    --text-primary: #111317;    /* dark text for readability - WCAG AA */
    --text-secondary: #4b4f52;  /* muted dark */
    --accent: #b8861b;          /* slightly darker gold for contrast on light */
    --accent-strong: #9c6f16;   /* even darker for links */
    --muted: #6b6f73;
    --link: var(--accent);
    --overlay-dark: rgba(0,0,0,0.48);
    --overlay-light: rgba(255,255,255,0.28);
    --blockquote-bg: rgba(0,0,0,0.03);
    --blockquote-border: var(--accent-strong);

    /* Hero caption tokens for light mode */
    --hero-caption-bg-light: rgba(255,255,255,0.20);
    --hero-accent: #b8861b;

    /* Legacy compatibility */
    --text: var(--text-primary);
}

/* Dark theme explicit - same as default */
[data-theme="dark"] {
    --bg: #0b0d10;
    --panel: #0f1316;
    --text-primary: #f4f5f6;
    --text-secondary: #bfc4c6;
    --accent: #f2c75c;
    --accent-strong: #d4a84a;
    --muted: #8b8f93;
    --link: var(--accent);
    --overlay-dark: rgba(0,0,0,0.52);
    --overlay-light: rgba(255,255,255,0.22);
    --blockquote-bg: rgba(255,255,255,0.03);
    --blockquote-border: var(--accent-strong);

    /* Legacy compatibility */
    --text: var(--text-primary);
}

/* High contrast theme */
[data-theme="contrast"] {
    --bg: #000000;
    --panel: #1a1a1a;
    --text-primary: #FFFFFF;
    --text-secondary: #E0E0E0;
    --accent: #FFD700;          /* bright gold for high contrast */
    --accent-strong: #FFA500;   /* orange for better visibility */
    --muted: #B0B0B0;
    --link: var(--accent);
    --overlay-dark: rgba(0,0,0,0.85);
    --overlay-light: rgba(255,255,255,0.15);
    --blockquote-bg: rgba(255,255,255,0.05);
    --blockquote-border: var(--accent);

    /* Legacy compatibility */
    --text: var(--text-primary);
}

/* Page-level backgrounds and text */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, .font-display {
    font-family: 'Playfair Display', serif;
}

/* Hide the "Writing" category label visually but keep it in the DOM for admin use */
.post-meta .post-category,
.card-tags .card-tag {
    display: none;
}

/* Post titles and read-more in accent color */
.post-title,
.post-list .post-title,
.card-title,
.blog-list .title {
    color: var(--link);
}

.read-more,
.post-excerpt a.read-more,
.card-read-more,
a.read-more,
.post-meta a,
.card-link {
    color: var(--link);
    text-decoration: underline;
}

.read-more:hover,
.post-excerpt a.read-more:hover,
.card-read-more:hover,
a.read-more:hover,
.card-link:hover {
    filter: brightness(0.92);
}

/* Blockquote style - removes raw '>' and '---' artifacts visually */
blockquote,
.pull-quote {
    border-left: 4px solid var(--blockquote-border);
    background: var(--blockquote-bg);
    margin: 1.2em 0;
    padding: 0.9em 1.2em;
    font-style: italic;
    color: var(--text-primary);
    border-radius: 4px;
    position: relative;
}

/* Hide raw markers inside blockquotes (if content contains literal > or --- ) */
blockquote > p:first-child::before {
    content: "";
}

/* Ensure blockquote paragraphs have no extra margins */
blockquote p {
    margin: 0;
}

/* Pull-quote styling (centered, big, decorative) */
.pull-quote {
    font-family: "Playfair Display", serif;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    color: var(--accent-strong);
    margin: 1.6em auto;
    max-width: 900px;
    padding: 0.2em 1em;
    letter-spacing: 0.2px;
    border-left: none; /* Remove border for pull quotes */
    background: transparent; /* Pull quotes don't need background */
}

/* Responsive adjustments for pull-quote */
@media (max-width: 720px) {
    .pull-quote {
        font-size: 1.15rem;
        padding: 0 12px;
    }
    .post-title {
        font-size: 1.6rem;
    }
}

/* Filter button styling */
.filter-btn {
    position: relative;
    transition: color 0.3s ease;
}

.filter-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: var(--accent);
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
}

.filter-btn.active,
.filter-btn:hover {
    color: var(--accent);
}

.filter-btn.active::after,
.filter-btn:hover::after {
    width: 100%;
}

/* Portfolio item hover effect */
.portfolio-item .overlay {
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    transform: translateY(20px);
}

.portfolio-item:hover .overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-item img {
    transition: transform 0.4s ease-in-out;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

/* Layout-specific styles for videos */
.portfolio-horizontal {
    aspect-ratio: 16/9; /* Horizontal layout for longform videos */
}

.portfolio-vertical {
    aspect-ratio: 9/16; /* Vertical layout for shorts/reels */
}

.portfolio-portrait {
    aspect-ratio: 4/5; /* Portrait layout for short videos */
}

/* Blog post thumbnails */
.blog-thumbnail {
    aspect-ratio: 9/16; /* Portrait layout for blog posts */
    width: 100%;
    object-fit: cover;
}

.blog-thumbnail-horizontal {
    aspect-ratio: 16/9; /* Horizontal layout for specific blog posts */
    width: 100%;
    object-fit: cover;
}

/* Ensure regular grid items maintain their aspect ratio */
.portfolio-item:not(.portfolio-horizontal):not(.portfolio-vertical):not(.portfolio-portrait) {
    aspect-ratio: 4/5; /* Portrait aspect ratio for other content */
}

/* Modal styling */
.modal {
    display: none; /* Hidden by default */
}
.modal.flex {
    display: flex;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Enhanced mobile scrolling */
body {
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 80px; /* Account for fixed header */
}

/* Improved scroll restoration */
@supports (scroll-behavior: smooth) {
    html {
        scroll-padding-top: 80px;
    }
}

/* Custom scrollbar for a more refined look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbars */
}
::-webkit-scrollbar-track {
    background: var(--panel);
}
::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Horizontal scroll containers */
.impact-scroll-container, .skills-scroll-container {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) var(--panel);
    scroll-snap-type: x mandatory;
    cursor: grab;
}

.impact-scroll-container:active, .skills-scroll-container:active {
    cursor: grabbing;
}

.impact-scroll-container::-webkit-scrollbar,
.skills-scroll-container::-webkit-scrollbar {
    height: 6px;
}

/* Scroll snap for cards */
.impact-scroll-container [class*="min-w-"],
.skills-scroll-container [class*="min-w-"] {
    scroll-snap-align: start;
}

/* Add scroll indicators for horizontal containers */
.impact-scroll-container::before,
.skills-scroll-container::before {
    content: '← Scroll or drag to explore →';
    position: absolute;
    right: 20px;
    top: -40px;
    color: var(--text-secondary);
    font-size: 12px;
    opacity: 0.7;
    pointer-events: none;
}

/* Mobile touch optimization */
@media (max-width: 768px) {
    .impact-scroll-container::before,
    .skills-scroll-container::before {
        content: '← Swipe to explore →';
        right: 10px;
        top: -35px;
        font-size: 11px;
    }
}

/* Enhanced animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* Smooth transitions for hover effects */
.transition-all {
    transition: all 0.3s ease;
}

/* Card hover effects */
.hover\:scale-105:hover {
    transform: scale(1.05);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Social media links styling */
.social-links a {
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-2px);
    color: var(--accent);
}

/* Skills section animations */
.skill-card {
    transition: all 0.3s ease;
}

.skill-card:hover {
    box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Enhanced portfolio item animations */
.portfolio-item {
    transition: all 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Smooth fade-in animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Enhanced button animations */
button, .btn {
    transition: all 0.3s ease;
}

button:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Gradient text effect for headings */
.gradient-text {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pulse animation for call-to-action elements */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ========================================
ACCESSIBILITY STYLES
======================================== */

/* Nav, headings, blog list cards, excerpt text - reference tokens */
.site-nav,
.blog-card,
.skills-card,
.panel,
.card {
    background-color: var(--panel);
    color: var(--text-primary);
}

/* Blog title and post meta */
.post-title,
.blog-list .title {
    color: var(--text-primary);
}

.post-meta,
.blog-excerpt,
.card-excerpt {
    color: var(--text-secondary);
}

/* Ensure contrast for small text */
.small,
.muted {
    color: var(--text-secondary);
}

/* Accessibility: focus outline color uses accent */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: 3px;
}

/* Light theme - compatibility */
body.light-theme {
    /* Theme variables handle this now */
}

/* Hero section text color adjustments for light theme */
body.light-theme section[aria-label="Hero section with background image"] .text-gray-300,
body.light-theme section[aria-label="Hero section with background image"] .text-gray-400 {
    color: var(--text-secondary) !important;
}

body.light-theme section[aria-label="Hero section with background image"] h1 {
    color: var(--text-primary) !important;
}

/* Override for hero-caption-wrap - use proper contrast colors */
body.light-theme .hero-caption-wrap .text-gray-300 {
    color: var(--text-primary) !important;
}

body.light-theme .hero-caption-wrap .text-gray-400 {
    color: var(--text-secondary) !important;
}

body.light-theme .hero-caption-wrap h1 {
    color: var(--text-primary) !important;
}

/* High contrast theme */
body.high-contrast {
    /* Theme variables handle this now */
}

body.high-contrast .text-gray-200,
body.high-contrast .text-gray-300,
body.high-contrast .text-gray-400 {
    color: var(--text-primary) !important;
}

body.high-contrast .bg-gray-900,
body.high-contrast .bg-gray-800 {
    background-color: var(--panel) !important;
}

body.high-contrast .border-gray-700 {
    border-color: var(--muted) !important;
}

body.high-contrast a:hover,
body.high-contrast button:hover {
    background-color: var(--accent) !important;
    color: var(--bg) !important;
}

/* Font size scaling */
body.font-small {
    font-size: 14px;
}

body.font-large {
    font-size: 18px;
}

body.font-extra-large {
    font-size: 22px;
}

/* Reduced motion */
body.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Enhanced focus indicators */
body.enhanced-focus *:focus {
    outline: 3px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* Accessibility panel styling */
#accessibility-panel {
    backdrop-filter: blur(10px);
}

.theme-btn.active {
    background-color: var(--accent) !important;
    color: var(--bg) !important;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent);
    color: var(--bg);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 100;
}

.skip-link:focus {
    top: 6px;
}

/* Scroll to top button */
#scroll-to-top {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 30%, transparent);
}

#scroll-to-top:active {
    transform: translateY(0);
}

/* Enhanced scroll to top for reduced motion users */
body.reduce-motion #scroll-to-top {
    transition: opacity 0.01ms !important;
}

body.reduce-motion #scroll-to-top:hover {
    transform: none !important;
}

/* ========================================
*/

/* HERO: full-bleed background image, fully responsive */
.hero-section {
    width: 100%;
    min-height: 70vh;
    background-image: url('my-bg.png?v=2');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Hero container (legacy support) */
.hero {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Desktop hero height (tall and dramatic) */
@media(min-width: 1024px) {
    .hero-section {
        min-height: 70vh;
    }
}

/* Tablet hero height (between mobile and desktop) */
@media(min-width: 769px) and (max-width: 1023px) {
    .hero-section {
        min-height: 55vh;
    }
}

/* Mobile / small screens - allow natural expansion without cropping */
@media(max-width: 768px) {
    .hero-section {
        min-height: 50vh;
        background-position: top center;
    }
}

/* Extra small screens - ensure hero expands naturally */
@media(max-width: 480px) {
    .hero-section {
        min-height: 45vh;
        background-position: top center;
    }
}

/* NEW: welcome banner (separate block below hero) */
.welcome-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.25rem;
    box-sizing: border-box;
    background: transparent; /* keep hero visible above — banner sits after hero */
}

.welcome-inner {
    width: min(1100px, 92%);
    padding: 2.25rem;
    border-radius: 12px;
    background: rgba(10,10,10,0.6); /* dark translucent by default - use tokens */
    border: 2px solid var(--accent, #f2c75c);
    color: var(--text, #fff);
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Anchor caption to bottom, responsive and theme aware */
.hero-caption-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: var(--hero-caption-maxwidth);
    padding: 26px 32px;
    border-radius: var(--hero-caption-radius);
    z-index: 20;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22);
    background: var(--hero-caption-bg-dark); /* dark default */
    color: var(--text-primary);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    border: 2px solid rgba(0,0,0,0.12);
    transition: bottom .28s ease, transform .28s ease, background .28s ease, color .28s ease;
}

/* position by breakpoint */
@media(min-width:1200px) {
    .hero-caption-wrap {
        bottom: var(--hero-caption-bottom-desktop);
        padding: 32px 40px;
    }
}

/* Responsive text sizes */
.welcome-inner h1 {
    font-size: clamp(28px, 6vw, 56px);
    margin: 0 0 .6rem;
    line-height: 1.05;
}

.welcome-inner .lead {
    font-size: clamp(14px, 2.4vw, 20px);
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* Ensure header/nav doesn't create dead space above hero */
.header, header.site-header {
    position: relative;
    z-index: 30;
}

/* If header is fixed, ensure body top padding equals header height */
:root {
    --header-height: 72px;
}

body.has-fixed-header .site-wrapper {
    padding-top: var(--header-height);
}

/* Theme-aware hero caption backgrounds and color adjustments */
html[data-theme="light"] .hero-caption-wrap,
body.light-theme .hero-caption-wrap {
    background: var(--hero-caption-bg-light, rgba(255,255,255,0.20));
    color: var(--text-primary, #111);
    border: 2px solid rgba(34,34,34,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

html[data-theme="light"] .hero-caption-wrap .hero-title,
body.light-theme .hero-caption-wrap .hero-title,
html[data-theme="light"] .hero-caption-wrap p,
body.light-theme .hero-caption-wrap p {
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 2px 8px rgba(0,0,0,0.06);
}

/* Dark theme explicit (keeps default dark look) */
html[data-theme="dark"] .hero-caption-wrap,
body[data-theme="dark"] .hero-caption-wrap,
:root .hero-caption-wrap {
    background: var(--hero-caption-bg-dark, rgba(0,0,0,0.52));
    color: var(--text-primary);
    box-shadow: 0 14px 40px rgba(0,0,0,0.22);
}

/* High contrast override */
body.high-contrast .hero-caption-wrap {
    background: rgba(0,0,0,0.85);
    color: var(--text-primary);
    border: 2px solid var(--accent);
}

/* Accent border option */
.hero-caption-wrap.accent {
    border: 2px solid var(--hero-accent, var(--accent));
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

/* extra nudge when JS flags face-centred */
.hero.is-face-centred .hero-caption-wrap {
    bottom: calc(var(--hero-caption-bottom-mobile) + 8%);
}

/* Accessibility: ensure hero-caption text contrasts on top of white shirts in light mode */
.hero-caption-wrap .hero-title,
.hero-caption-wrap p {
    line-height: 1.18;
}

/* If hero caption appears on top of light areas (white shirt), switch to stronger color in light theme */
html[data-theme="light"] .hero-caption-wrap.text-strong,
body.light-theme .hero-caption-wrap.text-strong {
    background: rgba(255,255,255,0.90);
    color: var(--text-primary);
}

/* If hero caption is placed into a lower secondary section (not overlay), allow a "detached" look */
.hero-caption-wrap.detached {
    position: relative;
    transform: translateX(-50%) translateY(0);
    margin: 28px auto;
}

/* ========================================
DROP-SHADOW / IMAGE FRAMING

/* Utility: drop shadow for whole hero image container (useful if site wants a subtle card effect) */
.hero-frame {
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    border-radius: 6px;
    overflow: hidden;
}

/* Optional: add a subtle inner glow around face area using pseudo element (handled by JS for accuracy) */
.hero-face-focus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -30%);
    pointer-events: none;
    border-radius: 50%;
    box-shadow: 0 0 120px rgba(0,0,0,0.18) inset;
}

/* ========================================
SHADOW CONTROL - FOR DESIGNER UI (matching your Canva controls)

/* Example utility to simulate drop shadow parameters if you need CSS-ready defaults:
   - blur: mapped to spread in box-shadow
   - angle & distance: applied via transform offset (we provide utilities below for typical combos)
   - color & intensity: translate to rgba color used
*/

/* default soft drop */
.drop-shadow-soft {
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* stronger drop */
.drop-shadow-strong {
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}

/* directional offsets (approximate angle/distance combos) */
.shadow-angle-45 {
    box-shadow: 14px 14px 30px rgba(0,0,0,0.20);
}
.shadow-angle-135 {
    box-shadow: -14px 14px 30px rgba(0,0,0,0.20);
}

/* Example helper for designer to control intensity via CSS variable --shadow-intensity */
:root { --shadow-intensity: 0.22; }
.drop-shadow-variable {
    box-shadow: 0 18px 40px rgba(0,0,0,var(--shadow-intensity));
}

/* ========================================
BLOG / POST LAYOUT FIXES

/* Ensure Read more links and titles use accent color and are visible in light/dark */
.blog-list .post-excerpt,
.blog-card .excerpt {
    color: var(--text-secondary);
}

/* "Read more" accent */
.blog-list .read-more,
.blog-card .read-more {
    color: var(--link);
}

/* Prevent hero overlay block from pushing content down unevenly on mobile: ensure hero container height auto */
.hero, .hero .hero-image {
    min-height: 320px;
}

/* For large hero (desktop) keep taller aspect */
@media(min-width: 1200px) {
    .hero, .hero .hero-image {
        min-height: 520px;
    }
}

/* Ensure page header doesn't overlay hero (fix dead space on top) */
.site-header {
    position: relative; /* let header be normal flow so hero snaps to top */
}

/* If header needs to be fixed, reserve header height so hero doesn't get hidden */
.site-header.fixed + .hero {
    margin-top: calc(var(--site-header-height, 72px) * 1px);
}

/* Make sure blog images render inside article content (fix missing inline images like icebergei.png) */
.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2em 0;
}

/* If a link in the article points to an image (e.g., !Emotional iceberg...), force it to expand inline */
.article-body a.link-to-image img,
.article-body a[href$=".png"] img,
.article-body a[href$=".jpg"] img {
    display: block;
    margin: 1.2em 0;
    border-radius: 6px;
}

/* Force visible caption for inline images with fallback text color in light mode */
.article-body .figure-caption {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 6px;
}

/* Ensure article headings adapt to color-mode */
.article-body h1, .article-body h2, .article-body h3 {
    color: var(--text-primary);
}

/* Ensure white titles in dark mode switch to dark text in light mode (fix collapsed text) */
html[data-theme="light"] .post-title,
html[data-theme="light"] .article-body h1 {
    color: var(--text-primary);
}

/* Read-more accents in lists */
.blog-list .read-more {
    color: var(--link);
    text-decoration: underline;
}

/* ========================================
ACCESSIBILITY & MISC

/* Mobile optimizations: ensure hero caption doesn't cover face by default */
@media (max-width: 767px) {
    .hero-caption-wrap {
        bottom: 8%;
        padding: 18px;
        width: 94%;
    }

    /* Lower overlay if hero is face-centred (JS can toggle .is-face-centred) */
    .hero.is-face-centred .hero-caption-wrap {
        bottom: 6%;
    }
}

/* Detect when overlay must be moved out (site may apply .caption-below to move caption into its own block) */
.hero.caption-below .hero-caption-wrap {
    position: relative;
    margin: 28px auto;
    transform: translateX(-50%);
    left: 50%;
    bottom: auto;
}

/* Smooth transitions for theme changes */
* {
    transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

/* ========================================
   FOOTER / NAV / SMALL FIXES
   ======================================== */

.footer, .site-nav {
    background-color: var(--panel);
    color: var(--text-primary);
}

/* Nav links adapt to theme */
.site-nav a {
    color: var(--text-primary);
}
html[data-theme="light"] .site-nav a {
    color: var(--text-primary);
}

/* Ensure buttons using accent in light mode become visible */
.button-accent {
    background: var(--accent);
    color: var(--bg);
}

/* ========================================
   REFLECTIONS SECTION
   ======================================== */

/* Outer wrapper */
.reflections-section {
    background-color: var(--bg);
    color: var(--text-primary);
}

/* Header / title area */
.reflections-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Tag filter bar */
.reflections-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.reflections-filters button,
.reflections-filter-btn {
    background: var(--panel);
    color: var(--text-primary);
    border: 1px solid var(--muted);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reflections-filters button:hover,
.reflections-filter-btn:hover {
    background: var(--reflections-accent);
    color: var(--reflections-bg);
    border-color: var(--reflections-accent);
}

.reflections-filters button.active,
.reflections-filter-btn.active {
    background: var(--reflections-accent);
    color: var(--reflections-bg);
    border-color: var(--reflections-accent);
}

/* Grid container */
.reflections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--reflections-tile-gap);
    margin-bottom: 3rem;
}

/* Responsive grid */
@media (min-width: 768px) {
    .reflections-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .reflections-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Each tile */
.reflection-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--reflections-border-radius);
    overflow: hidden;
    box-shadow: var(--reflections-shadow);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--panel);
    position: relative;
}

.reflection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* Thumbnail image (center-cropped, cover) */
.reflection-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* Title, excerpt area below image - Hidden by default */
.reflection-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: var(--text-primary);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85));
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-height: 100%;
    overflow-y: auto;
}

/* Show metadata on hover for desktop */
@media (hover: hover) {
    .reflection-card:hover .reflection-meta {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Show metadata when active class is added (for mobile tap) */
.reflection-card.active .reflection-meta {
    opacity: 1;
    transform: translateY(0);
}

.reflection-meta h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: var(--text-primary);
}

.reflection-meta p {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.reflection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.reflection-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--reflections-accent);
    color: var(--reflections-bg);
    border-radius: 4px;
    opacity: 0.9;
}

/* Load more button */
.load-more-reflections {
    display: block;
    margin: 2rem auto;
    padding: 0.75rem 2rem;
    background: var(--reflections-accent);
    color: var(--reflections-bg);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-reflections:hover {
    background: var(--reflections-accent-2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(224, 33, 138, 0.3);
}

/* ========================================
   FINAL NOTES / ADMIN UTILITIES
   ======================================== */

/* Utility classes you can use in markup:
   - .hero-caption-wrap.accent  -> accent border version
   - .hero.is-face-centred      -> JS sets when face-focused to nudge caption down
   - .hero.caption-below        -> moves caption into its own block under hero (recommended for very tight mobile crops)
   - .drop-shadow-soft / -strong etc for image framing
*/

/* End of CSS file */