/*
Theme Name: BERG Collective Theme
Theme URI: https://www.blackergcollective.com
Description: Custom child theme for BERG Collective built on Kadence Theme. Features Epilogue typography and brick red/gold/cream color scheme.
Author: BERG Collective
Author URI: https://www.blackergcollective.com
Template: kadence
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berg-theme
*/

/* ==========================================================================
   BERG Collective Global Styles - New Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts - Epilogue
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   CSS Custom Properties - BERG Color Palette (New Design)
   -------------------------------------------------------------------------- */
:root {
    /* Primary Colors - New Design */
    --global-palette1: #8b3223;  /* Primary - Brick Red */
    --global-palette2: #7a2b1e;  /* Primary Hover */
    --global-palette3: #191110;  /* Text - Almost Black */
    --global-palette4: #191110;  /* Strong text */
    --global-palette5: #8e5f57;  /* Muted text */
    --global-palette6: #8e5f57;  /* Subtle text */
    --global-palette7: #fbfaf9;  /* Background - Cream */
    --global-palette8: #e8e1da;  /* Border */
    --global-palette9: #ffffff;  /* White */

    /* Additional Colors */
    --global-palette10: #B59410; /* Gold - Accent */
    --global-palette11: #28A745; /* Success */
    --global-palette12: #17A2B8; /* Info */
    --global-palette13: #DC3545; /* Error/Alert */
    --global-palette14: #FFC107; /* Warning */
    --global-palette15: #F39C12; /* Rating */

    /* BERG Custom Variables - New Design */
    --berg-primary: #8b3223;
    --berg-primary-hover: #7a2b1e;
    --berg-gold: #B59410;
    --berg-gold-hover: #9a7d0e;
    --berg-text: #191110;
    --berg-text-muted: #8e5f57;
    --berg-background: #fbfaf9;
    --berg-white: #ffffff;
    --berg-border: #e8e1da;
    --berg-error: #DC3545;
    --berg-success: #28A745;

    /* Legacy variables (mapped to new colors for compatibility) */
    --berg-black: #191110;
    --berg-off-white: #fbfaf9;
    --berg-dark-gray: #191110;
    --berg-medium-gray: #8e5f57;
    --berg-light-gray: #8e5f57;

    /* Typography */
    --global-body-font-family: 'Epilogue', sans-serif;
    --global-heading-font-family: 'Epilogue', sans-serif;

    /* Spacing */
    --berg-space-xs: 4px;
    --berg-space-sm: 8px;
    --berg-space-md: 16px;
    --berg-space-lg: 24px;
    --berg-space-xl: 32px;
    --berg-space-2xl: 40px;
    --berg-space-3xl: 60px;
    --berg-space-4xl: 80px;

    /* Layout */
    --berg-content-max: 1200px;
    --berg-content-narrow: 800px;
    --berg-border-radius-sm: 4px;
    --berg-border-radius-md: 8px;
    --berg-border-radius-lg: 16px;
    --berg-border-radius-xl: 24px;
    --berg-border-radius-2xl: 40px;

    /* Shadows */
    --berg-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --berg-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --berg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --berg-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --berg-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --berg-transition-fast: 0.2s ease;
    --berg-transition-base: 0.3s ease;
    --berg-transition-slow: 0.4s ease;
}

/* --------------------------------------------------------------------------
   Base Typography
   -------------------------------------------------------------------------- */

body {
    font-family: 'Epilogue', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--berg-text);
    background-color: var(--berg-background);
}

/* Headings - Lower specificity to not override inline styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
}

/* Only apply default color when no inline style is present */
h1:not([style*="color"]),
h2:not([style*="color"]),
h3:not([style*="color"]),
h4:not([style*="color"]),
h5:not([style*="color"]),
h6:not([style*="color"]) {
    color: var(--berg-text);
}

/* WordPress block headings - respect inline styles */
.wp-block-heading {
    font-family: 'Epilogue', sans-serif;
}

.wp-block-heading:not([style*="color"]) {
    color: var(--berg-text);
}

/* Entry titles */
.entry-title {
    font-family: 'Epilogue', sans-serif;
    color: var(--berg-text);
    font-weight: 700;
}

/* Default heading sizes (only when not set inline) */
h1:not([style*="font-size"]) { font-size: 48px; line-height: 1.1; }
h2:not([style*="font-size"]) { font-size: 36px; line-height: 1.2; }
h3:not([style*="font-size"]) { font-size: 28px; line-height: 1.3; }
h4:not([style*="font-size"]) { font-size: 22px; line-height: 1.4; }
h5:not([style*="font-size"]) { font-size: 18px; line-height: 1.4; }
h6:not([style*="font-size"]) { font-size: 16px; line-height: 1.4; }

/* Responsive Typography */
@media (max-width: 1024px) {
    h1:not([style*="font-size"]) { font-size: 42px; }
    h2:not([style*="font-size"]) { font-size: 32px; }
    h3:not([style*="font-size"]) { font-size: 24px; }
}

@media (max-width: 767px) {
    h1:not([style*="font-size"]) { font-size: 36px; }
    h2:not([style*="font-size"]) { font-size: 28px; }
    h3:not([style*="font-size"]) { font-size: 22px; }
    h4:not([style*="font-size"]) { font-size: 20px; }
}

/* Paragraphs */
p {
    font-family: 'Epilogue', sans-serif;
}

p:not([style*="color"]) {
    color: var(--berg-text);
}

/* --------------------------------------------------------------------------
   WordPress Block Styles - Respect Inline Styles
   -------------------------------------------------------------------------- */

/* Ensure inline styles on WordPress blocks take precedence */
.wp-block-group[style],
.wp-block-column[style],
.wp-block-columns[style],
.wp-block-cover[style],
.wp-block-image[style] {
    /* Let inline styles work */
}

/* Text color inheritance */
.has-text-color {
    /* Respect the inline color */
}

/* Background color inheritance */
.has-background {
    /* Respect the inline background */
}

/* --------------------------------------------------------------------------
   BERG Component Styles
   -------------------------------------------------------------------------- */

/* Eyebrow Text */
.berg-eyebrow,
.kb-adv-text.berg-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--berg-gold);
    margin-bottom: 16px;
}

/* Gold Underline */
.berg-gold-underline::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--berg-gold);
    margin-top: 16px;
}

.berg-gold-underline.center::after {
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* Primary Button (Brick Red) */
.berg-btn-primary,
.wp-block-button.is-style-berg-primary .wp-block-button__link,
.kb-button.berg-btn-primary {
    background-color: var(--berg-primary);
    color: var(--berg-white);
    padding: 16px 32px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Epilogue', sans-serif;
    border: none;
    transition: background var(--berg-transition-base), transform var(--berg-transition-fast);
    text-decoration: none;
}

.berg-btn-primary:hover,
.wp-block-button.is-style-berg-primary .wp-block-button__link:hover,
.kb-button.berg-btn-primary:hover {
    background-color: var(--berg-primary-hover);
    transform: translateY(-2px);
    color: var(--berg-white);
}

/* Secondary Button (Outline) */
.berg-btn-secondary,
.wp-block-button.is-style-berg-secondary .wp-block-button__link,
.kb-button.berg-btn-secondary {
    background-color: transparent;
    color: var(--berg-text);
    padding: 14px 30px;
    border: 2px solid var(--berg-border);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Epilogue', sans-serif;
    transition: background var(--berg-transition-base), color var(--berg-transition-base), border-color var(--berg-transition-base);
    text-decoration: none;
}

.berg-btn-secondary:hover,
.wp-block-button.is-style-berg-secondary .wp-block-button__link:hover,
.kb-button.berg-btn-secondary:hover {
    background-color: var(--berg-text);
    border-color: var(--berg-text);
    color: var(--berg-white);
}

/* White Outline Button (for dark backgrounds) */
.berg-btn-white-outline,
.wp-block-button.is-style-berg-white-outline .wp-block-button__link,
.kb-button.berg-btn-white-outline {
    background-color: transparent;
    color: var(--berg-white);
    padding: 14px 30px;
    border: 2px solid var(--berg-white);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Epilogue', sans-serif;
    transition: background var(--berg-transition-base), color var(--berg-transition-base);
    text-decoration: none;
}

.berg-btn-white-outline:hover,
.wp-block-button.is-style-berg-white-outline .wp-block-button__link:hover,
.kb-button.berg-btn-white-outline:hover {
    background-color: var(--berg-white);
    color: var(--berg-text);
}

/* Link Button */
.berg-btn-link,
.kb-button.berg-btn-link {
    background: transparent;
    color: var(--berg-primary);
    padding: 0;
    border: none;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Epilogue', sans-serif;
    text-decoration: none;
}

.berg-btn-link:hover,
.kb-button.berg-btn-link:hover {
    color: var(--berg-primary-hover);
    text-decoration: underline;
}

/* WordPress buttons - ensure pill shape */
.wp-block-button__link {
    font-family: 'Epilogue', sans-serif;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

/* Standard Card */
.berg-card {
    background: var(--berg-white);
    border-radius: var(--berg-border-radius-xl);
    box-shadow: var(--berg-shadow-md);
    overflow: hidden;
    transition: transform var(--berg-transition-base), box-shadow var(--berg-transition-base);
}

.berg-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--berg-shadow-lg);
}

/* Card Image Zoom */
.berg-card .berg-card-image {
    overflow: hidden;
}

.berg-card .berg-card-image img {
    transition: transform 0.4s ease;
}

.berg-card:hover .berg-card-image img {
    transform: scale(1.05);
}

/* Card Content */
.berg-card-content {
    padding: 24px;
}

@media (max-width: 767px) {
    .berg-card-content {
        padding: 20px;
    }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* Section Backgrounds */
.berg-bg-white {
    background-color: var(--berg-white);
}

.berg-bg-cream,
.berg-bg-off-white {
    background-color: var(--berg-background);
}

.berg-bg-dark {
    background-color: #2f2828;
}

.berg-bg-primary {
    background-color: var(--berg-primary);
}

/* Section Padding */
.berg-section {
    padding: 80px 24px;
}

@media (max-width: 1024px) {
    .berg-section {
        padding: 60px 24px;
    }
}

@media (max-width: 767px) {
    .berg-section {
        padding: 48px 20px;
    }
}

/* --------------------------------------------------------------------------
   Partner Logos
   -------------------------------------------------------------------------- */

.berg-partner-logo img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--berg-transition-base), opacity var(--berg-transition-base), transform var(--berg-transition-base);
    max-height: 60px;
    width: auto;
}

.berg-partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Stats / Metrics
   -------------------------------------------------------------------------- */

.berg-stat-number {
    font-size: 42px;
    font-weight: 900;
    color: var(--berg-primary);
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Epilogue', sans-serif;
}

.berg-stat-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--berg-text);
    font-family: 'Epilogue', sans-serif;
}

@media (max-width: 767px) {
    .berg-stat-number {
        font-size: 36px;
    }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.berg-testimonial-quote {
    font-size: 24px;
    font-style: italic;
    line-height: 1.5;
    color: var(--berg-text);
    font-family: 'Epilogue', sans-serif;
}

.berg-quote-mark {
    font-size: 72px;
    color: var(--berg-gold);
    line-height: 1;
    font-family: Georgia, serif;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.berg-input,
.kb-form input[type="text"],
.kb-form input[type="email"],
.kb-form textarea {
    background: var(--berg-white);
    border: 1px solid var(--berg-border);
    border-radius: var(--berg-border-radius-md);
    padding: 16px;
    font-size: 16px;
    font-family: 'Epilogue', sans-serif;
    color: var(--berg-text);
    transition: border-color var(--berg-transition-base), box-shadow var(--berg-transition-base);
}

.berg-input:focus,
.kb-form input[type="text"]:focus,
.kb-form input[type="email"]:focus,
.kb-form textarea:focus {
    border-color: var(--berg-primary);
    box-shadow: 0 0 0 3px rgba(139, 50, 35, 0.2);
    outline: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* Header */
.site-header {
    background: var(--berg-white);
    box-shadow: var(--berg-shadow-sm);
}

/* Nav Links */
.header-navigation .menu-item a {
    font-size: 15px;
    font-weight: 500;
    font-family: 'Epilogue', sans-serif;
    color: var(--berg-text);
    transition: color var(--berg-transition-fast);
}

.header-navigation .menu-item a:hover,
.header-navigation .current-menu-item a {
    color: var(--berg-primary);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer.berg-footer {
    background: #2f2828;
    color: var(--berg-white);
    padding: 80px 24px 40px;
}

.site-footer.berg-footer a {
    color: var(--berg-white);
    transition: color var(--berg-transition-fast);
}

.site-footer.berg-footer a:hover {
    color: var(--berg-gold);
}

/* Footer Navigation Lists */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin: 0;
    padding: 0;
}

.footer-nav-list li::marker {
    content: none;
}

.footer-nav-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav-list a:hover {
    color: var(--berg-gold);
}

/* Footer Bottom Links */
.wp-block-group p a {
    text-decoration: none;
}

/* Footer responsive */
@media (max-width: 782px) {
    .wp-block-group .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-group .wp-block-column {
        flex-basis: 100%;
        margin-bottom: 32px;
    }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* Focus States */
:focus {
    outline: 2px solid var(--berg-primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--berg-primary);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

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

.text-primary { color: var(--berg-primary); }
.text-gold { color: var(--berg-gold); }
.text-dark { color: var(--berg-text); }
.text-muted { color: var(--berg-text-muted); }
.text-white { color: var(--berg-white); }

.uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-black { font-weight: 900; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   WordPress Block Overrides - Allow Inline Styles
   -------------------------------------------------------------------------- */

/* Ensure WordPress block inline styles take precedence */
.wp-block-heading[style*="color"] {
    color: unset;
}

.wp-block-paragraph[style*="color"] {
    color: unset;
}

/* Buttons - let inline styles work */
.wp-block-button__link[style] {
    /* Inline styles take precedence */
}

/* Groups with backgrounds */
.wp-block-group[style*="background"] {
    /* Inline background takes precedence */
}