/* imagemakers-foundation CSS bundle */

/* fonts.css */
/* Defulat Fonts */


/* theme-tokens.css */
/**
 * Theme Tokens
 *
 * Shared theme configuration with CSS custom properties.
 * No Tailwind dependencies - pure CSS.
 */

/* Font sizes - Mobile first (72% of desktop) */
:root {
    --font-size-schedule-sm: 0.585rem; /* 9.36px (13px * 0.72) */
    --font-size-schedule-md: 1.53rem; /* 24.48px (34px * 0.72) */
    --font-size-schedule-lg: 2.88rem; /* 46.08px (64px * 0.72) */
}

/* Scale up at 1150px (85% of desktop) */
@media (width >= 1150px) {
    :root {
        --font-size-schedule-sm: 0.6906rem; /* 11.05px (13px * 0.85) */
        --font-size-schedule-md: 1.8062rem; /* 28.9px (34px * 0.85) */
        --font-size-schedule-lg: 3.4rem; /* 54.4px (64px * 0.85) */
    }
}

/* Scale up at 1450px (100% - full desktop) */
@media (width >= 1450px) {
    :root {
        --font-size-schedule-sm: 0.8125rem;
        --font-size-schedule-md: 2.125rem; 
        --font-size-schedule-lg: 4rem;
    }
}


/* app.css */
/* assets/css/app.css */
@import url('./fonts.css');
@import url('./theme-tokens.css');
@import url('./layout.css');
@import url('./header.css');
@import url('./footer.css');
@import url('./blocks.css');

/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Global CSS custom properties */
:root {
    /* Content layout constraints */
    --content-gutter: 1.25rem;
    --content-max-width: 101.5rem;

    /* Theme colors */

    /* Typography */

    /* -- Body */
    --font-body-color: var(--color-slate);
    --font-body-family:
        'Geist', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
    --font-body-line-height: 1.556em;
    --font-body-size: 1.125rem;
    --font-body-weight: 400;

    /* -- Heading */
    --font-heading-color: var(--color-evergreen);
    --font-heading-family:
        'Impact', 'Haettenschweiler', 'Franklin Gothic Bold', 'Arial Narrow', 'Gothic A1',
        sans-serif;
    --font-heading-line-height: 1em;
    --font-heading-size: 5rem;
    --font-heading-weight: 700;

    /* -- Display */
    --font-display-color: var(--color-sandstone);
    --font-display-family: 'Arial Black', verdana, 'Helvetica Neue', sans-serif;
    --font-display-line-height: 1em;
    --font-display-size: 1.875rem;
    --font-display-weight: 700;

    /* Spacing Tokens */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
}

@media (width >= 768px) {
    :root {
        --content-gutter: 2rem;
    }
}

@media (width >= 1024px) {
    :root {
        --content-gutter: 3rem;
    }
}

@media (width >= 1200px) {
    :root {
        --content-gutter: 4rem;
    }
}

/* Base styles */
body {
    font-family: var(--font-body-family);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--font-body-line-height);
    overflow-x: hidden;
}

.heading {
    color: var(--font-heading-color);
    font-family: var(--font-heading-family);
    font-size: var(--font-heading-size);
    font-weight: var(--font-heading-weight);
    line-height: var(--font-heading-line-height);
    text-transform: uppercase;
}


/* layout.css */
/**
 * Layout System
 *
 * Grid-based layout utilities using CSS Grid and modern layout patterns.
 * Provides container, grid, and common layout patterns.
 */

/* ==========================================================================
   Container System
   ========================================================================== */

/**
 * .container - Main content container
 * Constrains content to max-width with responsive padding
 */
.container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-max-width, 90rem);
    padding-left: var(--content-gutter, 1.25rem);
    padding-right: var(--content-gutter, 1.25rem);
}

/**
 * .container--narrow - Narrower content for reading
 */
.container--narrow {
    max-width: 60rem;
}

/**
 * .container--wide - Wider content container
 */
.container--wide {
    max-width: 120rem;
}

/**
 * .container--full - Full width, no max-width constraint
 */
.container--full {
    max-width: none;
}

/* ==========================================================================
   Grid System
   ========================================================================== */

/**
 * .grid - Base grid container
 * Responsive 12-column grid that collapses on mobile
 */
.grid {
    display: grid;
    gap: var(--grid-gap, 2rem);
    grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
}

/**
 * Grid gaps
 */
.grid--gap-sm {
    --grid-gap: 1rem;
}

.grid--gap-md {
    --grid-gap: 2rem;
}

.grid--gap-lg {
    --grid-gap: 3rem;
}

.grid--gap-xl {
    --grid-gap: 4rem;
}

/**
 * Grid columns - explicit column counts
 */
.grid--2 {
    --grid-columns: 2;
}

.grid--3 {
    --grid-columns: 3;
}

.grid--4 {
    --grid-columns: 4;
}

.grid--6 {
    --grid-columns: 6;
}

/**
 * Responsive grids - automatically adjust columns based on available space
 */
.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-width, 20rem)), 1fr));
}

.grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min-width, 20rem)), 1fr));
}

/**
 * Grid item spanning
 */
.grid__item--span-2 {
    grid-column: span 2;
}

.grid__item--span-3 {
    grid-column: span 3;
}

.grid__item--span-4 {
    grid-column: span 4;
}

.grid__item--span-6 {
    grid-column: span 6;
}

.grid__item--span-8 {
    grid-column: span 8;
}

.grid__item--span-full {
    grid-column: 1 / -1;
}

/* Responsive grid adjustments */
@media (width <= 768px) {
    .grid {
        --grid-columns: 1;
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--6 {
        --grid-columns: 1;
    }

    .grid__item--span-2,
    .grid__item--span-3,
    .grid__item--span-4,
    .grid__item--span-6,
    .grid__item--span-8 {
        grid-column: span 1;
    }
}

@media (width >= 768px) and (width < 1024px) {
    .grid--3,
    .grid--4,
    .grid--6 {
        --grid-columns: 2;
    }
}

/* ==========================================================================
   Common Layout Patterns
   ========================================================================== */

/**
 * .stack - Vertical stack with consistent spacing
 * Great for text content, cards, sections
 */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 1.5rem);
}

.stack--sm {
    --stack-gap: 0.75rem;
}

.stack--md {
    --stack-gap: 1.5rem;
}

.stack--lg {
    --stack-gap: 3rem;
}

.stack--xl {
    --stack-gap: 4rem;
}

/**
 * .cluster - Horizontal grouping with wrapping
 * Great for tags, buttons, inline lists
 */
.cluster {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, 1rem);
}

.cluster--start {
    justify-content: flex-start;
}

.cluster--center {
    justify-content: center;
}

.cluster--end {
    justify-content: flex-end;
}

.cluster--between {
    justify-content: space-between;
}

/**
 * .sidebar-layout - Sidebar + main content layout
 * Responsive sidebar that stacks on mobile
 */
.sidebar-layout {
    display: grid;
    gap: var(--layout-gap, 2rem);
}

@media (width >= 1024px) {
    .sidebar-layout {
        grid-template-columns: var(--sidebar-width, 20rem) 1fr;
    }

    .sidebar-layout--reverse {
        grid-template-columns: 1fr var(--sidebar-width, 20rem);
    }
}

/**
 * .split - Split layout (50/50)
 * Stacks on mobile, side-by-side on larger screens
 */
.split {
    display: grid;
    gap: var(--split-gap, 2rem);
}

@media (width >= 768px) {
    .split {
        grid-template-columns: 1fr 1fr;
    }

    .split--thirds {
        grid-template-columns: 1fr 2fr;
    }

    .split--thirds-reverse {
        grid-template-columns: 2fr 1fr;
    }
}

/**
 * .cover - Full viewport height section
 * Centers content vertically
 */
.cover {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--spacing-8) 0;
}

/**
 * .flow - Add consistent spacing between child elements
 * Uses the lobotomized owl selector for automatic spacing
 */
.flow > * + * {
    margin-top: var(--flow-space, 1.5rem);
}

.flow--sm > * + * {
    --flow-space: 0.75rem;
}

.flow--lg > * + * {
    --flow-space: 2.5rem;
}

.flow--xl > * + * {
    --flow-space: 4rem;
}

/* ==========================================================================
   Section Spacing
   ========================================================================== */

/**
 * .section - Page section with consistent vertical spacing
 */
.section {
    padding-bottom: var(--section-padding, 4rem);
    padding-top: var(--section-padding, 4rem);
}

.section--sm {
    --section-padding: 2rem;
}

.section--md {
    --section-padding: 4rem;
}

.section--lg {
    --section-padding: 6rem;
}

.section--xl {
    --section-padding: 8rem;
}

@media (width >= 1024px) {
    .section {
        --section-padding: 6rem;
    }

    .section--sm {
        --section-padding: 3rem;
    }

    .section--lg {
        --section-padding: 8rem;
    }

    .section--xl {
        --section-padding: 12rem;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/**
 * Responsive visibility
 */
.hidden-mobile {
    display: none;
}

@media (width >= 768px) {
    .hidden-mobile {
        display: revert;
    }
}

.hidden-desktop {
    display: revert;
}

@media (width >= 768px) {
    .hidden-desktop {
        display: none;
    }
}

/**
 * Text alignment
 */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/**
 * Max widths for content
 */
.max-w-prose {
    max-width: 65ch;
}

.max-w-narrow {
    max-width: 45rem;
}

.max-w-wide {
    max-width: 80rem;
}

/**
 * Centering utilities
 */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}


/* footer.css */
/**
 * Footer Component Styles
 *
 * Styles for the site footer including widgets, navigation, and copyright
 */

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
    background: var(--footer-bg, var(--color-gray-900, #111827));
    color: var(--footer-color, var(--color-gray-300, #d1d5db));
    margin-top: auto;
}

.site-footer a {
    color: var(--footer-link-color, var(--color-gray-100, #f3f4f6));
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--footer-link-hover, var(--color-white, #fff));
}

/* ==========================================================================
   Footer Widgets
   ========================================================================== */

.site-footer__widgets {
    border-bottom: 1px solid var(--footer-border, rgb(255 255 255 / 0.1));
}

.site-footer__widget-area {
    /* Widget area styles */
}

.site-footer__widget-area h2,
.site-footer__widget-area h3,
.site-footer__widget-area h4 {
    color: var(--footer-heading-color, var(--color-white, #fff));
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 0;
}

.site-footer__widget-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__widget-area li {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Footer Bottom Bar
   ========================================================================== */

.site-footer__bottom {
    padding-bottom: var(--spacing-8, 2rem);
    padding-top: var(--spacing-8, 2rem);
}

.site-footer__bottom-layout {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

@media (width >= 768px) {
    .site-footer__bottom-layout {
        flex-direction: row;
        text-align: left;
    }
}

.site-footer__copyright {
    font-size: 0.875rem;
}

.site-footer__copyright p {
    margin: 0;
}

/* ==========================================================================
   Footer Navigation
   ========================================================================== */

.site-footer__nav {
    /* Footer nav container */
}

.site-footer__menu {
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__menu__item {
    /* Menu item */
}

.site-footer__menu__link {
    display: block;
}


/* blocks.css */
/**
 * Blocks
 *
 * Block-specific styles have been moved to Components/ directory.
 * Each block component loads its own CSS via the Component Registry pattern.
 *
 * This file is kept for any global block-related styles that apply to all blocks.
 */

/* Cards Block - Hover Effect */
.cards__content-wrapper {
	position: relative;
	min-height: 3em; /* Adjust based on your content needs */
}

.cards__default,
.cards__hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 0.3s ease;
}

.cards__default {
	opacity: 1;
	visibility: visible;
}

.cards__hover {
	opacity: 0;
	visibility: hidden;
}

.cards__item:hover .cards__default {
	opacity: 0;
	visibility: hidden;
}

.cards__item:hover .cards__hover {
	opacity: 1;
	visibility: visible;
}

/* Posts Archive - Filter Slider */
.post-archive__filters-wrapper {
	margin-bottom: 2rem;
}

.post-archive__filters {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Mobile slider effect - below 1025px */
@media (width <= 1025px) {
	.post-archive__filters-wrapper {
		overflow: auto hidden;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE and Edge */
		margin-left: calc(-1 * var(--content-gutter, 1.25rem));
		margin-right: calc(-1 * var(--content-gutter, 1.25rem));
		padding-left: var(--content-gutter, 1.25rem);
		padding-right: var(--content-gutter, 1.25rem);
	}

	/* Hide scrollbar for Chrome, Safari and Opera */
	.post-archive__filters-wrapper::-webkit-scrollbar {
		display: none;
	}

	.post-archive__filters {
		flex-wrap: nowrap;
		min-width: min-content;
	}

	.post-archive__filter {
		flex-shrink: 0;
		white-space: nowrap;
	}
}