/*
Theme Name: FFOA Custom Theme
Theme URI: https://financialfoundationsofamerica.org
Description: Custom WordPress theme for Financial Foundations of America - A 501(c)(3) nonprofit organization providing financial literacy education. Built with modern WordPress best practices, Full Site Editing support, comprehensive Schema.org markup, and WCAG 2.1 AA accessibility compliance.
Author: Financial Foundations of America
Author URI: https://financialfoundationsofamerica.org
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ffoa-custom
Domain Path: /languages
Tags: education, nonprofit, accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, flexible-header, full-site-editing, rtl-language-support, threaded-comments, translation-ready, wide-blocks

FFOA Custom Theme, Copyright 2025 Financial Foundations of America
FFOA Custom Theme is distributed under the terms of the GNU GPL

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/**
 * Table of Contents
 *
 * 1. CSS Reset & Normalization
 * 2. CSS Custom Properties (Variables)
 * 3. Typography
 * 4. Layout & Structure
 * 5. Accessibility
 * 6. Components
 * 7. Utilities
 * 8. Media Queries
 */

/* ==========================================================================
   1. CSS Reset & Normalization
   ========================================================================== */

/* Box sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins and padding */
* {
    margin: 0;
    padding: 0;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.6;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make images easier to work with */
img,
picture,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   2. CSS Custom Properties (Variables)
   ========================================================================== */

:root {
    /* Color Palette - Using HSL for easier manipulation */
    --color-primary-h: 224.35;
    --color-primary-s: 40.35%;
    --color-primary-l: 22.35%;
    --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

    --color-secondary-h: 51.94;
    --color-secondary-s: 35.45%;
    --color-secondary-l: 62.94%;
    --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));

    --color-accent-h: 29.14;
    --color-accent-s: 20.71%;
    --color-accent-l: 66.86%;
    --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));

    --color-light-h: 240;
    --color-light-s: 10.53%;
    --color-light-l: 92.55%;
    --color-light: hsl(var(--color-light-h), var(--color-light-s), var(--color-light-l));

    --color-dark-h: 0;
    --color-dark-s: 0%;
    --color-dark-l: 0%;
    --color-dark: hsl(var(--color-dark-h), var(--color-dark-s), var(--color-dark-l));

    --color-white: hsl(0, 0%, 100%);

    --color-text-primary: hsl(180, 24.53%, 41.57%);
    --color-text-secondary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
    --color-background: hsl(var(--color-light-h), var(--color-light-s), var(--color-light-l));

    /* Typography */
    --font-family-heading: "Helvetica Neue", Arial, sans-serif;
    --font-family-body: Georgia, serif;
    --font-family-mono: "Courier New", monospace;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-base: 1rem; /* 16px */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */

    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;

    /* Spacing */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem; /* 8px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */
    --space-4xl: 6rem; /* 96px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6.8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-index */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* Container widths */
    --container-max-width: 1200px;
    --container-padding: var(--space-lg);

    /* Button styles */
    --button-padding-x: 1.336em;
    --button-padding-y: 0.8em;
    --button-border-radius: var(--radius-md);
    --button-border-width: 2px;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
}

h1, .h1 { font-size: var(--font-size-5xl); }
h2, .h2 { font-size: var(--font-size-4xl); }
h3, .h3 { font-size: var(--font-size-3xl); }
h4, .h4 { font-size: var(--font-size-2xl); }
h5, .h5 { font-size: var(--font-size-xl); }
h6, .h6 { font-size: var(--font-size-lg); }

/* Responsive typography */
@media (max-width: 768px) {
    h1, .h1 { font-size: var(--font-size-4xl); }
    h2, .h2 { font-size: var(--font-size-3xl); }
    h3, .h3 { font-size: var(--font-size-2xl); }
    h4, .h4 { font-size: var(--font-size-xl); }
}

p {
    margin-bottom: var(--space-md);
}

a {
    color: var(--color-text-primary);
    text-decoration: underline;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--color-accent);
}

/* ==========================================================================
   4. Layout & Structure
   ========================================================================== */

.site-container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ==========================================================================
   5. Accessibility
   ========================================================================== */

/* Skip to content link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: var(--z-index-tooltip);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-dark);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--space-sm);
    left: var(--space-sm);
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible styling for better keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   6. Components
   ========================================================================== */

/* Buttons */
.wp-element-button,
.wp-block-button__link,
button,
.button {
    display: inline-block;
    padding: var(--button-padding-y) var(--button-padding-x);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    text-decoration: none;
    text-align: center;
    border-radius: var(--button-border-radius);
    border: var(--button-border-width) solid var(--color-dark);
    background-color: transparent;
    color: var(--color-dark);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
button:hover,
.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background-color: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   7. Utilities
   ========================================================================== */

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

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   8. Media Queries
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
    :root {
        --font-size-base: 1.125rem; /* 18px */
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-xl);
    }
}