/* ==========================================================================
   Million Memory Project Primary Styles
   ========================================================================== */

/* ==========================================================================
   Font Imports
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Brand System
   ========================================================================== */

:root {

    /* ==================================================
       MILLION MEMORY PROJECT
       Parent Brand
       ================================================== */

    --mmp-ink: #332E2B;
    --mmp-white: #FFFFFF;
    --mmp-archive: #F0F5FB;
    --mmp-river: #3F5461;
    --mmp-parchment: #E5DBC2;

    /* ==================================================
       MMP Website Page Palette
       Mockup-aligned warm editorial palette
       ================================================== */

    --mmp-page-ink: #302b28;
    --mmp-page-paper: #fffaf1;
    --mmp-page-cream: #f4efe6;
    --mmp-page-muted: #6b625c;
    --mmp-page-blue: #3f5461;
    --mmp-page-sage: #6b7c7a;
    --mmp-page-gold: #d8b46a;
    --mmp-page-clay: #8a5f45;
    --mmp-page-border: rgba(48, 43, 40, 0.15);
    --mmp-page-border-light: rgba(48, 43, 40, 0.08);
    --mmp-page-shadow: 0 24px 60px rgba(48, 43, 40, 0.14);

    /* ==================================================
       SOUND ARCHIVE BOOKS
       Music Publishing / Artist Books
       ================================================== */

    --sab-steel: #506A7A;
    --sab-sage: #6B7C7A;
    --sab-warm: #E5DBC2;
    --sab-gray: #9B9B9B;

    /* ==================================================
       APPALACHIAN MEMORY PROJECT
       Oral History / Community Archives
       ================================================== */

    --amp-forest: #326031;
    --amp-field: #EAEBD6;

    /* ==================================================
       THROUGH OUR EYES
       Palette TBD
       ================================================== */

    /*
    --toe-primary:
    --toe-secondary:
    --toe-accent:
    */

    /* ==================================================
       Active Brand Defaults
       ================================================== */

    --brand-accent: var(--mmp-river);
    --brand-accent-secondary: var(--mmp-archive);

    /* ==================================================
       Typography
       ================================================== */

    --mmp-font-heading: "Roboto Condensed", sans-serif;
    --mmp-font-editorial: "Lora", serif;
    --mmp-font-body: "Inter", sans-serif;

    /* ==================================================
       Global UI Tokens
       ================================================== */

    --mmp-color-text: var(--mmp-ink);
    --mmp-color-text-muted: rgba(51, 46, 43, 0.72);
    --mmp-color-border: rgba(51, 46, 43, 0.16);
    --mmp-color-border-light: rgba(51, 46, 43, 0.10);

    /* ==================================================
       Layout Widths
       ================================================== */

    --mmp-container-width: 1040px;
    --mmp-container-wide-width: 1240px;
    --mmp-container-narrow-width: 760px;
    --mmp-container-padding: 24px;

    --mmp-section-padding-lg: 96px;
    --mmp-section-padding-md: 72px;
    --mmp-section-padding-sm: 52px;

    --mmp-shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.06);
    --mmp-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* ==========================================================================
   Future Brand Wrappers
   ========================================================================== */

.brand-mmp {
    --brand-accent: var(--mmp-river);
    --brand-accent-secondary: var(--mmp-archive);
}

.brand-sab {
    --brand-accent: var(--sab-steel);
    --brand-accent-secondary: var(--sab-sage);
}

.brand-amp {
    --brand-accent: var(--amp-forest);
    --brand-accent-secondary: var(--amp-field);
}

/* ==========================================================================
   Global Base
   ========================================================================== */

body {
    color: var(--mmp-color-text);
    background: var(--mmp-white);
    font-family: var(--mmp-font-body);
    font-size: 18px;
    line-height: 1.65;
}

body,
button,
input,
select,
textarea {
    font-family: var(--mmp-font-body);
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Imprints page width fixes
   Keeps full-width section backgrounds while constraining content.
   ========================================================================== */

.mmp-ip-hero-grid,
.mmp-ip-imprint-grid,
.mmp-ip-together-grid {
    max-width: var(--mmp-container-wide-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-ip-intro-inner,
.mmp-ip-cta-inner {
    max-width: var(--mmp-container-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-ip-panels,
.mmp-ip-media-small-grid,
.mmp-ip-path-grid {
    width: 100%;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.entry-title,
.wp-block-heading {
    color: var(--mmp-ink);
    font-family: var(--mmp-font-heading);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

h1,
.entry-title {
    font-size: clamp(3rem, 6vw, 5rem);
}

h2 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
}

h3 {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

h4 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
}

p {
    color: var(--mmp-color-text-muted);
}

strong,
b {
    color: var(--mmp-ink);
    font-weight: 700;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--brand-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

/* ==========================================================================
   Layout Helpers
   ========================================================================== */

.mmp-container {
    max-width: var(--mmp-container-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-container-wide {
    max-width: var(--mmp-container-wide-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-container-narrow {
    max-width: var(--mmp-container-narrow-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-inline: auto;
}

.mmp-section {
    padding-block: var(--mmp-section-padding-lg);
}

.mmp-section--medium {
    padding-block: var(--mmp-section-padding-md);
}

.mmp-section--compact {
    padding-block: var(--mmp-section-padding-sm);
}

.mmp-section--white {
    background: var(--mmp-white);
}

.mmp-section--archive {
    background: var(--mmp-archive);
}

.mmp-section--ink {
    background: var(--mmp-ink);
    color: var(--mmp-white);
}

.mmp-section--accent {
    background: var(--brand-accent);
    color: var(--mmp-white);
}

.mmp-section--accent-secondary {
    background: var(--brand-accent-secondary);
}

.mmp-section--ink h1,
.mmp-section--ink h2,
.mmp-section--ink h3,
.mmp-section--ink h4,
.mmp-section--ink h5,
.mmp-section--ink h6,
.mmp-section--accent h1,
.mmp-section--accent h2,
.mmp-section--accent h3,
.mmp-section--accent h4,
.mmp-section--accent h5,
.mmp-section--accent h6 {
    color: var(--mmp-white);
}

.mmp-section--ink p,
.mmp-section--accent p {
    color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Gutenberg / Astra Content Width Control
   Keeps full-width backgrounds but constrains readable content.
   ========================================================================== */

.entry-content > .wp-block-group > .wp-block-columns,
.entry-content > .wp-block-group > .wp-block-group:not(.alignfull),
.entry-content > .wp-block-group > .wp-block-heading,
.entry-content > .wp-block-group > p,
.entry-content > .wp-block-group > .wp-block-buttons,
.entry-content > .wp-block-group > .wp-block-image,
.entry-content > .wp-block-group > .wp-block-quote,
.entry-content > .wp-block-group > .wp-block-separator {
    max-width: var(--mmp-container-width);
    width: calc(100% - (var(--mmp-container-padding) * 2));
    margin-left: auto;
    margin-right: auto;
}

.entry-content > .wp-block-group > .wp-block-columns[class*="hero"],
.entry-content > .wp-block-group > .wp-block-columns[class*="grid"],
.entry-content > .wp-block-group > .wp-block-columns[class*="gallery"],
.entry-content > .wp-block-group > .wp-block-columns[class*="media"],
.entry-content > .wp-block-group > .wp-block-columns[class*="project"],
.entry-content > .wp-block-group > .wp-block-columns[class*="launch"],
.entry-content > .wp-block-group > .wp-block-columns[class*="featured"] {
    max-width: var(--mmp-container-wide-width);
}

/* ==========================================================================
   Editorial Text Helpers
   ========================================================================== */

.mmp-kicker {
    margin: 0 0 12px;
    color: var(--brand-accent);
    font-family: var(--mmp-font-body);
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mmp-lede {
    max-width: 760px;
    color: var(--brand-accent);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.6;
}

.mmp-muted {
    color: var(--mmp-color-text-muted);
}

.mmp-max-text {
    max-width: 760px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.mmp-button {
    border-radius: 0;
    font-family: var(--mmp-font-body);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.mmp-button,
a.mmp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--mmp-ink);
    background: transparent;
    color: var(--mmp-ink);
}

.mmp-button:hover,
a.mmp-button:hover {
    background: var(--mmp-ink);
    color: var(--mmp-white);
}

.mmp-button--dark,
a.mmp-button--dark,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--mmp-ink);
    color: var(--mmp-white);
    border: 1px solid var(--mmp-ink);
}

.mmp-button--dark:hover,
a.mmp-button--dark:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--mmp-white);
}

.mmp-button--accent,
a.mmp-button--accent {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--mmp-white);
}

.mmp-button--accent:hover,
a.mmp-button--accent:hover {
    background: var(--mmp-ink);
    border-color: var(--mmp-ink);
    color: var(--mmp-white);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    border: 1px solid var(--mmp-ink);
    color: var(--mmp-ink);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.mmp-card {
    background: var(--mmp-white);
    border: 1px solid var(--mmp-color-border);
    border-radius: 0;
    box-shadow: var(--mmp-shadow-card);
}

.mmp-card--flat {
    box-shadow: none;
}

.mmp-card--accent {
    border-color: var(--brand-accent);
}

/* ==========================================================================
   Images
   Preserve intentional PNG/SVG transparency site-wide.
   ========================================================================== */

figure,
.wp-block-image,
.wp-block-image figure,
.wp-block-image img,
img {
    background-color: transparent !important;
}

.mmp-image-frame {
    border: 1px solid var(--mmp-color-border);
    box-shadow: var(--mmp-shadow-subtle);
}

.mmp-image-square {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.mmp-image-portrait {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.mmp-image-landscape {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ==========================================================================
   WordPress Block Defaults
   ========================================================================== */

.wp-block-group.alignfull,
.wp-block-cover.alignfull {
    padding-left: var(--mmp-container-padding);
    padding-right: var(--mmp-container-padding);
}

.wp-block-cover {
    color: var(--mmp-white);
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6 {
    color: var(--mmp-white);
}

.wp-block-cover p {
    color: rgba(255, 255, 255, 0.84);
}

.wp-block-separator {
    border-color: var(--mmp-color-border);
}

/* ==========================================================================
   Astra Compatibility
   ========================================================================== */

.ast-container {
    max-width: var(--mmp-container-wide-width);
}

.site-content {
    background: var(--mmp-white);
}

.main-header-menu .menu-link,
.ast-builder-menu .main-navigation > ul > li > a {
    font-family: var(--mmp-font-heading);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ast-site-identity .site-title a {
    font-family: var(--mmp-font-heading);
    font-weight: 700;
}

.ast-single-post .entry-content a,
.ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-underline-offset: 3px;
}

/* ==========================================================================
   WooCommerce Base Compatibility
   ========================================================================== */

.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--mmp-font-heading);
    font-weight: 700;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--mmp-ink);
    font-family: var(--mmp-font-body);
    font-weight: 800;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 921px) {
    :root {
        --mmp-container-padding: 20px;
        --mmp-section-padding-lg: 72px;
        --mmp-section-padding-md: 58px;
        --mmp-section-padding-sm: 44px;
    }

    body {
        font-size: 17px;
    }
}

@media (max-width: 544px) {
    :root {
        --mmp-container-padding: 18px;
        --mmp-section-padding-lg: 56px;
        --mmp-section-padding-md: 46px;
        --mmp-section-padding-sm: 36px;
    }

    body {
        font-size: 16px;
    }
}