/**
 * Hard Rock Blog - Main Stylesheet
 *
 * EXPLANATION:
 * ============
 * This file contains all CSS for the theme. We use CSS Custom Properties
 * (variables) for colors so they can be changed via the Customizer and
 * easily switched for light/dark mode.
 *
 * Organization:
 * 1. CSS Variables (colors, spacing)
 * 2. Reset & Base Styles
 * 3. Layout (container, grid)
 * 4. Header
 * 5. Mobile Menu
 * 6. Footer
 * 7. Components (buttons, cards)
 * 8. Utility Classes
 * 9. Responsive Breakpoints
 *
 * @package HardRockBlog
 * @since 1.0.0
 */

/*--------------------------------------------------------------
# 1. CSS Variables
--------------------------------------------------------------*/

/**
 * EXPLANATION:
 * CSS Custom Properties (variables) let us define values once
 * and reuse them throughout. They start with -- and are accessed
 * with var(--name).
 *
 * Benefits:
 * - Change a color in one place, updates everywhere
 * - JavaScript can modify them for live theme switching
 * - Customizer can inject overrides via inline styles
 */
:root {
    /* Colors - Dark Mode (Default) */
    --hrb-primary: #7C3AED;
    --hrb-primary-hover: #9F67FF;
    --hrb-secondary: #1F1B2E;
    --hrb-surface: #2D2640;
    --hrb-text: #FFFFFF;
    --hrb-text-secondary: #A0A0A0;
    --hrb-border: #3D3654;

    /* Typography */
    --hrb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hrb-font-size-base: 16px;
    --hrb-font-size-sm: 14px;
    --hrb-font-size-xs: 12px;
    --hrb-font-size-lg: 18px;
    --hrb-font-size-xl: 20px;
    --hrb-font-size-2xl: 24px;
    --hrb-font-size-3xl: 30px;

    /* Spacing */
    --hrb-spacing-xs: 4px;
    --hrb-spacing-sm: 8px;
    --hrb-spacing-md: 16px;
    --hrb-spacing-lg: 24px;
    --hrb-spacing-xl: 32px;
    --hrb-spacing-2xl: 48px;
    --hrb-spacing-3xl: 64px;

    /* Layout */
    --hrb-container-max: 1440px;
    --hrb-container-padding: 20px;
    --hrb-header-height: 70px;
    --hrb-header-height-mobile: 60px;

    /* Transitions */
    --hrb-transition-fast: 150ms ease;
    --hrb-transition-normal: 250ms ease;
    --hrb-transition-slow: 350ms ease;

    /* Shadows */
    --hrb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --hrb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --hrb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

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

/**
 * Light Mode Colors
 *
 * EXPLANATION:
 * When body has .light-mode class, these variables override the defaults.
 * The class is toggled by JavaScript when user clicks the theme toggle.
 */
body.light-mode {
    --hrb-secondary: #FFFFFF;
    --hrb-surface: #F5F5F5;
    --hrb-text: #1F1B2E;
    --hrb-text-secondary: #666666;
    --hrb-border: #E0E0E0;
}

/*--------------------------------------------------------------
# 2. Reset & Base Styles
--------------------------------------------------------------*/

/**
 * EXPLANATION:
 * CSS Reset removes browser default styling for consistency.
 * We use a minimal reset that keeps useful defaults.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--hrb-font-size-base);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--hrb-font-family);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hrb-text);
    background-color: var(--hrb-secondary);
    transition: background-color var(--hrb-transition-normal),
                color var(--hrb-transition-normal);
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--hrb-transition-fast);
}

a:hover {
    color: var(--hrb-primary);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lists */
ul, ol {
    list-style: none;
}

/* Buttons */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--hrb-primary);
    outline-offset: 2px;
}

/*--------------------------------------------------------------
# 3. Layout
--------------------------------------------------------------*/

.hrb-container {
    max-width: var(--hrb-container-max);
    margin: 0 auto;
    padding: 0 var(--hrb-container-padding);
}

.hrb-main {
    min-height: calc(100vh - var(--hrb-header-height));
}

.hrb-content {
    padding: var(--hrb-spacing-2xl) 0;
}

/*--------------------------------------------------------------
# 4. Header
--------------------------------------------------------------*/

.hrb-header {
    background-color: var(--hrb-secondary);
    border-bottom: 1px solid var(--hrb-border);
    height: var(--hrb-header-height);
    z-index: 100;
    transition: background-color var(--hrb-transition-normal);
}

/**
 * Sticky Header
 *
 * EXPLANATION:
 * position: sticky keeps the header fixed at the top when scrolling,
 * but only when enabled via Customizer (.hrb-header--sticky class).
 */
.hrb-header--sticky {
    position: sticky;
    top: 0;
}

.hrb-header__container {
    max-width: var(--hrb-container-max);
    margin: 0 auto;
    padding: 0 var(--hrb-container-padding);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrb-spacing-lg);
}

/* Mobile Menu Toggle - Hidden on desktop */
.hrb-header__menu-toggle {
    display: none;
}

/* Logo */
.hrb-header__logo {
    flex-shrink: 0;
}

.hrb-header__logo img,
.hrb-header__logo .custom-logo {
    height: 40px;
    width: auto;
}

/* Dark/light mode logo switching — CSS only, no flash */
.hrb-logo__light                 { display: none; }
body.light-mode .hrb-logo__dark  { display: none; }
body.light-mode .hrb-logo__light { display: inline-block; }

.hrb-header__logo .site-title {
    font-size: var(--hrb-font-size-xl);
    font-weight: 700;
    color: var(--hrb-text);
}

/* Desktop Navigation */
.hrb-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hrb-nav-menu {
    display: flex;
    gap: var(--hrb-spacing-xl);
}

.hrb-nav-menu li {
    position: relative;
}

.hrb-nav-menu a {
    display: block;
    padding: var(--hrb-spacing-sm) 0;
    font-size: var(--hrb-font-size-base);
    font-weight: 500;
    color: var(--hrb-text);
    position: relative;
}

/**
 * Active/Hover Underline Effect
 *
 * EXPLANATION:
 * We use a ::after pseudo-element to create the purple underline.
 * It starts at 0 width and expands on hover/active state.
 */
.hrb-nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--hrb-primary);
    transition: width var(--hrb-transition-normal);
}

.hrb-nav-menu a:hover::after,
.hrb-nav-menu .current-menu-item a::after,
.hrb-nav-menu .current_page_item a::after {
    width: 100%;
}

/* Header Actions (Theme toggle + Buttons) */
.hrb-header__actions {
    display: flex;
    align-items: center;
    gap: var(--hrb-spacing-md);
}

.hrb-header__buttons {
    display: flex;
    gap: var(--hrb-spacing-sm);
}

/*--------------------------------------------------------------
# Theme Toggle Button
--------------------------------------------------------------*/

.hrb-theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: var(--hrb-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hrb-text-secondary);
    transition: color var(--hrb-transition-fast),
                background-color var(--hrb-transition-fast);
}

.hrb-theme-toggle:hover {
    color: var(--hrb-text);
    background-color: var(--hrb-surface);
}

.hrb-theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show sun in dark mode, moon in light mode */
.hrb-theme-toggle__sun {
    display: block;
}

.hrb-theme-toggle__moon {
    display: none;
}

body.light-mode .hrb-theme-toggle__sun {
    display: none;
}

body.light-mode .hrb-theme-toggle__moon {
    display: block;
}

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

.hrb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hrb-spacing-xs);
    padding: var(--hrb-spacing-sm) var(--hrb-spacing-lg);
    font-size: var(--hrb-font-size-sm);
    font-weight: 600;
    border-radius: var(--hrb-radius-md);
    transition: all var(--hrb-transition-fast);
    white-space: nowrap;
}

.hrb-btn__icon {
    width: 16px;
    height: 16px;
}

/* Outline Button (Login) */
.hrb-btn--outline {
    background: transparent;
    border: 1px solid var(--hrb-text-secondary);
    color: var(--hrb-text);
}

.hrb-btn--outline:hover {
    border-color: var(--hrb-text);
    color: var(--hrb-text);
}

/* Primary Button (Register) */
.hrb-btn--primary {
    background: var(--hrb-primary);
    border: 1px solid var(--hrb-primary);
    color: #FFFFFF;
}

.hrb-btn--primary:hover {
    background: var(--hrb-primary-hover);
    border-color: var(--hrb-primary-hover);
    color: #FFFFFF;
}

/*--------------------------------------------------------------
# 5. Mobile Menu
--------------------------------------------------------------*/

/**
 * The menu panel sits directly below the header and slides downward.
 * z-index 99 keeps it behind the header (z-index 100) so the header
 * is always visible and acts as the natural "close" affordance via
 * the hamburger→X animation.
 */
.hrb-mobile-menu {
    position: fixed;
    top: var(--hrb-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hrb-secondary);
    z-index: 99;
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform var(--hrb-transition-slow),
                opacity var(--hrb-transition-slow);
    opacity: 0;
    overflow-y: auto;
}

.hrb-mobile-menu.is-open {
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

.hrb-mobile-menu__nav {
    flex: 1;
    padding: var(--hrb-spacing-2xl) var(--hrb-container-padding);
}

.hrb-mobile-nav-menu {
    display: flex;
    flex-direction: column;
    gap: var(--hrb-spacing-lg);
}

.hrb-mobile-nav-menu a {
    display: block;
    font-size: var(--hrb-font-size-2xl);
    font-weight: 600;
    color: var(--hrb-text);
    padding: var(--hrb-spacing-sm) 0;
    position: relative;
}

.hrb-mobile-nav-menu .current-menu-item a,
.hrb-mobile-nav-menu .current_page_item a {
    color: var(--hrb-primary);
}

.hrb-mobile-nav-menu .current-menu-item a::after,
.hrb-mobile-nav-menu .current_page_item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--hrb-primary);
}

.hrb-mobile-menu__footer {
    padding: var(--hrb-spacing-lg) var(--hrb-container-padding);
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--hrb-border);
}

/*--------------------------------------------------------------
# Hamburger Icon & Animation
--------------------------------------------------------------*/

.hrb-hamburger {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hrb-hamburger__line {
    width: 100%;
    height: 2px;
    background-color: var(--hrb-text);
    border-radius: 1px;
    transition: transform var(--hrb-transition-normal),
                opacity var(--hrb-transition-normal),
                background-color var(--hrb-transition-fast);
    transform-origin: center;
}

/* Animate to X when menu is open */
.hrb-header__menu-toggle.is-open .hrb-hamburger__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hrb-header__menu-toggle.is-open .hrb-hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hrb-header__menu-toggle.is-open .hrb-hamburger__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/*--------------------------------------------------------------
# 6. Footer
--------------------------------------------------------------*/

.hrb-footer {
    background-color: var(--hrb-surface);
    padding: var(--hrb-spacing-3xl) var(--hrb-container-padding);
    transition: background-color var(--hrb-transition-normal);
}

/* Footer Logo */
.hrb-footer__logo {
    text-align: center;
    margin-bottom: var(--hrb-spacing-2xl);
}

.hrb-footer__logo img,
.hrb-footer__logo .custom-logo {
    height: 60px;
    width: auto;
    margin: 0 auto;
}

/* Footer Content — flexbox so any number of menu columns works naturally */
.hrb-footer__content {
    max-width: var(--hrb-container-max);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: var(--hrb-spacing-2xl);
    padding-bottom: var(--hrb-spacing-2xl);
    border-bottom: 1px solid var(--hrb-border);
}

/* App Download Section */
.hrb-app-download {
    max-width: 280px;
}

.hrb-app-download__title {
    font-size: var(--hrb-font-size-sm);
    font-weight: 600;
    color: var(--hrb-text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: var(--hrb-spacing-md);
}

.hrb-app-download__content {
    display: flex;
    gap: var(--hrb-spacing-md);
}

.hrb-app-download__qr img {
    width: 80px;
    height: 80px;
    border-radius: var(--hrb-radius-md);
    background: white;
    padding: 4px;
}

.hrb-app-download__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--hrb-spacing-sm);
}

/* Store Buttons */
.hrb-store-btn {
    display: flex;
    align-items: center;
    gap: var(--hrb-spacing-sm);
    background: var(--hrb-secondary);
    padding: var(--hrb-spacing-sm) var(--hrb-spacing-md);
    border-radius: var(--hrb-radius-md);
    transition: background-color var(--hrb-transition-fast);
}

.hrb-store-btn:hover {
    background: var(--hrb-border);
    color: var(--hrb-text);
}

.hrb-store-btn__icon {
    width: 20px;
    height: 20px;
}

.hrb-store-btn__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hrb-store-btn__text small {
    font-size: 10px;
    color: var(--hrb-text-secondary);
}

.hrb-store-btn__text strong {
    font-size: var(--hrb-font-size-sm);
}

/* Footer Menus — flex container so columns distribute evenly */
.hrb-footer__menus {
    flex: 1;
    display: flex;
    gap: var(--hrb-spacing-xl);
}

.hrb-footer-menu {
    flex: 1;
    min-width: 100px;
}

.hrb-footer-menu__title {
    font-size: var(--hrb-font-size-base);
    font-weight: 600;
    color: var(--hrb-text);
    margin-bottom: var(--hrb-spacing-md);
    display: block;
    cursor: default;
}

.hrb-footer-menu__title .hrb-footer-menu__arrow {
    display: none;
}

.hrb-footer-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--hrb-spacing-sm);
}

.hrb-footer-menu__list a {
    font-size: var(--hrb-font-size-sm);
    color: var(--hrb-text-secondary);
}

.hrb-footer-menu__list a:hover {
    color: var(--hrb-text);
}

/* Social Icons */
.hrb-footer__social {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.hrb-social-icons {
    display: flex;
    flex-direction: column;
    gap: var(--hrb-spacing-sm);
    background-color: var(--hrb-secondary);
    padding: var(--hrb-spacing-sm);
    border-radius: var(--hrb-radius-full);
}

.hrb-social-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--hrb-radius-full);
    background-color: var(--hrb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: background-color var(--hrb-transition-fast),
                transform var(--hrb-transition-fast);
}

.hrb-social-icon:hover {
    background-color: var(--hrb-primary-hover);
    color: #FFFFFF;
    transform: scale(1.1);
}

.hrb-social-icon svg {
    width: 18px;
    height: 18px;
}

/* Payment Icons */
.hrb-footer__payments {
    max-width: var(--hrb-container-max);
    margin: var(--hrb-spacing-2xl) auto;
}

.hrb-payment-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--hrb-spacing-md);
}

.hrb-payment-icon {
    background: white;
    border-radius: var(--hrb-radius-lg);
    padding: var(--hrb-spacing-sm) var(--hrb-spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrb-payment-icon img {
    height: 30px;
    width: auto;
}

/* Legal Section */
.hrb-footer__legal {
    max-width: var(--hrb-container-max);
    margin: 0 auto;
    text-align: center;
    font-size: var(--hrb-font-size-xs);
    color: var(--hrb-text-secondary);
}

.hrb-footer__copyright {
    margin-bottom: var(--hrb-spacing-md);
}

.hrb-legal-disclaimer {
    line-height: 1.5;
}

/*--------------------------------------------------------------
# 7. Post Cards (Index Page)
--------------------------------------------------------------*/

.hrb-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--hrb-spacing-xl);
}

.hrb-post-card {
    background: var(--hrb-surface);
    border-radius: var(--hrb-radius-lg);
    overflow: hidden;
    transition: transform var(--hrb-transition-fast),
                box-shadow var(--hrb-transition-fast);
}

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

.hrb-post-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.hrb-post-card__content {
    padding: var(--hrb-spacing-lg);
}

.hrb-post-card__category {
    display: inline-block;
    font-size: var(--hrb-font-size-xs);
    font-weight: 600;
    color: var(--hrb-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--hrb-spacing-sm);
}

.hrb-post-card__title {
    font-size: var(--hrb-font-size-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--hrb-spacing-sm);
}

.hrb-post-card__title a:hover {
    color: var(--hrb-primary);
}

.hrb-post-card__excerpt {
    font-size: var(--hrb-font-size-sm);
    color: var(--hrb-text-secondary);
    margin-bottom: var(--hrb-spacing-md);
}

.hrb-post-card__date {
    font-size: var(--hrb-font-size-xs);
    color: var(--hrb-text-secondary);
}

/* No Posts Message */
.hrb-no-posts {
    text-align: center;
    padding: var(--hrb-spacing-3xl) 0;
}

.hrb-no-posts h1 {
    font-size: var(--hrb-font-size-2xl);
    margin-bottom: var(--hrb-spacing-md);
}

/* Pagination */
.navigation.pagination {
    margin-top: var(--hrb-spacing-2xl);
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: var(--hrb-spacing-sm);
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--hrb-spacing-md);
    background: var(--hrb-surface);
    border-radius: var(--hrb-radius-md);
    font-weight: 500;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--hrb-primary);
    color: #FFFFFF;
}

/*--------------------------------------------------------------
# 8. Responsive Styles
--------------------------------------------------------------*/

/* Tablet and below */
@media (max-width: 1024px) {
    .hrb-footer__content {
        flex-wrap: wrap;
        gap: var(--hrb-spacing-xl);
    }

    .hrb-footer__menus {
        flex-wrap: wrap;
    }

    .hrb-social-icons {
        flex-direction: row;
        border-radius: var(--hrb-radius-full);
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    :root {
        --hrb-header-height: var(--hrb-header-height-mobile);
    }

    /* Header Mobile */
    .hrb-header__menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .hrb-header__nav {
        display: none;
    }

    .hrb-header__theme-toggle {
        display: none;
    }

    .hrb-header__buttons .hrb-btn__icon {
        display: none;
    }

    /* Footer Mobile */
    .hrb-footer__content {
        flex-direction: column;
        gap: 0;
    }

    .hrb-app-download {
        max-width: 100%;
        padding-bottom: var(--hrb-spacing-xl);
        border-bottom: 1px solid var(--hrb-border);
    }

    .hrb-app-download__content {
        justify-content: flex-start;
    }

    .hrb-app-download__qr {
        display: none;
    }

    .hrb-app-download__buttons {
        flex-direction: row;
    }

    /* Footer Menus — stack vertically, become accordions */
    .hrb-footer__menus {
        flex-direction: column;
        gap: 0;
    }

    .hrb-footer-menu {
        border-bottom: 1px solid var(--hrb-border);
    }

    .hrb-footer-menu__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--hrb-spacing-md) 0;
        margin-bottom: 0;
        cursor: pointer;
    }

    .hrb-footer-menu__title .hrb-footer-menu__arrow {
        display: block;
        width: 20px;
        height: 20px;
        transition: transform var(--hrb-transition-fast);
    }

    .hrb-footer-menu.is-open .hrb-footer-menu__arrow {
        transform: rotate(180deg);
    }

    .hrb-footer-menu__links {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--hrb-transition-normal);
    }

    .hrb-footer-menu.is-open .hrb-footer-menu__links {
        max-height: 500px;
    }

    .hrb-footer-menu__list {
        padding-bottom: var(--hrb-spacing-md);
    }

    /* Social Icons — horizontal pill row */
    .hrb-footer__social {
        justify-content: center;
        padding: var(--hrb-spacing-xl) 0;
    }

    .hrb-social-icons {
        flex-direction: row;
        padding: var(--hrb-spacing-sm) var(--hrb-spacing-lg);
    }

    /* Payment Icons */
    .hrb-payment-icons {
        justify-content: center;
    }

    /* Posts Grid */
    .hrb-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .hrb-header__buttons .hrb-btn {
        padding: var(--hrb-spacing-sm) var(--hrb-spacing-md);
        font-size: var(--hrb-font-size-xs);
    }

    .hrb-mobile-menu__buttons .hrb-btn {
        padding: var(--hrb-spacing-sm) var(--hrb-spacing-md);
        font-size: var(--hrb-font-size-xs);
    }
}