/*
Theme Name: EmpowerHerFame
Theme URI: https://empowerherfame.com
Author: EHF Development Team
Author URI: https://empowerherfame.com
Description: Custom WordPress theme for EmpowerHerFame using component-based architecture and Gutenberg blocks
Version: 1.0.0
License: Proprietary
License URI: https://empowerherfame.com/license
Text Domain: ehf
Tags: custom-theme, gutenberg-blocks, component-based
*/

/* ==========================================================================
   IMPORTANT: This file contains ONLY theme metadata and base layout styles.
   All component-specific styles are in their respective component CSS files.
   
   Modular CSS Structure:
   - assets/css/base/variables.css - CSS custom properties
   - assets/css/base/reset.css - CSS reset and base elements
   - components/[component]/[component].css - Component-specific styles
   - blocks/[block]/style.css - Block-specific styles
   ========================================================================== */

/* ==========================================================================
   Base Layout & Container Styles
   ========================================================================== */

.container {
    max-width: var(--ehf-container-xl);
    margin: 0 auto;
    padding: 0 var(--ehf-spacing-md);
}

@media (min-width: 640px) {
    .container {
        max-width: var(--ehf-container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--ehf-container-md);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--ehf-container-lg);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: var(--ehf-container-xl);
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: var(--ehf-container-2xl);
    }
}

/* Site Layout */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
    padding-top: var(--ehf-spacing-2xl);
    padding-bottom: var(--ehf-spacing-2xl);
}

/* Remove top padding on front page for hero gallery */
.home .site-content,
.single .site-content,
.page .site-content {
    padding-top: 0;
}

/* Skip Link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: var(--ehf-spacing-md);
    z-index: var(--ehf-z-modal);
    width: auto;
    height: auto;
    padding: var(--ehf-spacing-sm) var(--ehf-spacing-md);
    background-color: #D1B79F;
    color: var(--ehf-white);
    text-decoration: none;
    border-radius: var(--ehf-border-radius-md);
}

/* Screen Reader Text */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
}

/* ==========================================================================
   WordPress Gutenberg Block Support
   ========================================================================== */

/* Block alignments */
.alignwide {
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    max-width: 100vw;
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

.alignleft {
    float: left;
    margin-right: var(--ehf-spacing-lg);
    margin-bottom: var(--ehf-spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--ehf-spacing-lg);
    margin-bottom: var(--ehf-spacing-md);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Block spacing */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    margin-bottom: var(--ehf-spacing-lg);
}

/* Entry content spacing */
.entry-content > * + * {
    margin-top: var(--ehf-spacing-md);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: var(--ehf-spacing-xl);
    margin-bottom: var(--ehf-spacing-md);
}

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

/* Responsive utilities */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* Body classes for menu state */
body.menu-open {
    overflow: hidden;
}

@media (max-width: 1023px) {
    body.menu-open .main-navigation {
        display: block;
    }
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    margin: var(--ehf-spacing-md) 0;
    border-radius: var(--ehf-border-radius-md);
    border: var(--ehf-border-width) solid var(--ehf-border-color);
}