@layer components {
/**
 * Hello Middleton - Button System
 * Unified button components with variants and states.
 * Uses BEM naming convention.
 *
 * @requires critical/tokens.css
 */

/* =========================================================================
   BASE BUTTON - .hm-btn
   ========================================================================= */

.hm-btn {
    /* Reset */
    appearance: none;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;

    /* Base styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);

    /* Default variant (same as secondary) */
    background: var(--hm-bg-elevated);
    color: var(--hm-text);
    border: 1px solid var(--hm-border);
}

.hm-btn:hover {
    background: var(--hm-bg-subtle);
    border-color: var(--hm-border-strong);
}

.hm-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
}

.hm-btn:active {
    transform: scale(0.98);
}

.hm-btn:disabled,
.hm-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================================
   BUTTON VARIANTS
   ========================================================================= */

/* Primary Button - Main CTA */
.hm-btn--primary {
    background: var(--hm-primary);
    color: var(--hm-text-inverse);
    border-color: var(--hm-primary);
}

.hm-btn--primary:hover {
    background: var(--hm-primary-hover);
    border-color: var(--hm-primary-hover);
}

/* Secondary Button - Default, outlined */
.hm-btn--secondary {
    background: var(--hm-bg-elevated);
    color: var(--hm-text);
    border: 1px solid var(--hm-border);
}

.hm-btn--secondary:hover {
    background: var(--hm-bg-subtle);
    border-color: var(--hm-border-strong);
}

/* Accent Button - Trust actions */
.hm-btn--accent {
    background: var(--hm-accent);
    color: var(--hm-text-inverse);
    border-color: var(--hm-accent);
}

.hm-btn--accent:hover {
    background: var(--hm-accent-hover);
    border-color: var(--hm-accent-hover);
}

.hm-btn--accent:focus-visible {
    box-shadow: var(--shadow-glow-accent);
}

/* Ghost Button - Minimal, text-like */
.hm-btn--ghost {
    background: transparent;
    color: var(--hm-text-secondary);
    border-color: transparent;
}

.hm-btn--ghost:hover {
    background: var(--hm-bg-subtle);
    color: var(--hm-text);
}

/* Danger Button - Destructive actions */
.hm-btn--danger {
    background: var(--hm-danger);
    color: var(--hm-text-inverse);
    border-color: var(--hm-danger);
}

.hm-btn--danger:hover {
    background: #B91C1C; /* darker red */
    border-color: #B91C1C;
}

.hm-btn--danger:focus-visible {
    box-shadow: var(--shadow-glow-danger);
}

/* Success Button */
.hm-btn--success {
    background: var(--hm-success);
    color: var(--hm-text-inverse);
    border-color: var(--hm-success);
}

.hm-btn--success:hover {
    background: #166534; /* darker green */
    border-color: #166534;
}

/* Link Button - Looks like a link */
.hm-btn--link {
    background: transparent;
    color: var(--hm-primary);
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hm-btn--link:hover {
    color: var(--hm-primary-hover);
    background: transparent;
}

/* =========================================================================
   BUTTON SIZES
   ========================================================================= */

/* Small */
.hm-btn--sm {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

/* Large */
.hm-btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
}

/* Extra Large */
.hm-btn--xl {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    border-radius: var(--radius-lg);
}

/* =========================================================================
   BUTTON MODIFIERS
   ========================================================================= */

/* Full width */
.hm-btn--block {
    display: flex;
    width: 100%;
}

/* Rounded pill */
.hm-btn--pill {
    border-radius: var(--radius-full);
}

/* Icon only */
.hm-btn--icon {
    padding: var(--space-2);
    aspect-ratio: 1;
}

.hm-btn--icon.hm-btn--sm {
    padding: var(--space-1-5);
}

.hm-btn--icon.hm-btn--lg {
    padding: var(--space-3);
}

/* =========================================================================
   BUTTON WITH ICON
   ========================================================================= */

.hm-btn__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.hm-btn__icon--left {
    margin-right: var(--space-1);
}

.hm-btn__icon--right {
    margin-left: var(--space-1);
}

/* =========================================================================
   BUTTON GROUPS
   ========================================================================= */

.hm-btn-group {
    display: inline-flex;
}

.hm-btn-group .hm-btn {
    border-radius: 0;
}

.hm-btn-group .hm-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.hm-btn-group .hm-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.hm-btn-group .hm-btn:not(:first-child) {
    margin-left: -1px;
}

.hm-btn-group .hm-btn:hover,
.hm-btn-group .hm-btn:focus {
    z-index: 1;
}

/* =========================================================================
   WORDPRESS INTEGRATION
   Common button classes used by WordPress/plugins
   ========================================================================= */

/* WP Submit buttons */
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

/* Primary style for main submit buttons */
input[type="submit"],
button[type="submit"],
.wp-block-button__link,
.button-primary {
    background: var(--hm-primary);
    color: var(--hm-text-inverse);
    border: 1px solid var(--hm-primary);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-button__link:hover,
.button-primary:hover {
    background: var(--hm-primary-hover);
    border-color: var(--hm-primary-hover);
}

/* Secondary buttons */
.button-secondary,
.button:not(.button-primary) {
    background: var(--hm-bg-elevated);
    color: var(--hm-text);
    border: 1px solid var(--hm-border);
}

.button-secondary:hover,
.button:not(.button-primary):hover {
    background: var(--hm-bg-subtle);
    border-color: var(--hm-border-strong);
}

/* =========================================================================
   MOBILE TOUCH TARGETS
   Ensure buttons meet 44px minimum touch target
   ========================================================================= */

@media (max-width: 767px) {
    .hm-btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }

    .hm-btn--sm {
        min-height: 36px;
        padding: var(--space-2) var(--space-3);
    }

    input[type="submit"],
    button[type="submit"],
    .button {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }
}

/* =========================================================================
   LOADING STATE
   ========================================================================= */

.hm-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.hm-btn--loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}
/**
 * Hello Middleton - Card Components
 * Unified card system for news, activity, events, and classifieds.
 * Uses BEM naming convention for specificity control.
 *
 * @requires critical/tokens.css
 */

/* =========================================================================
   SHARED CARD TOKENS
   All card types inherit these for visual consistency across components.
   ========================================================================= */

.ct-card,
.unh-card,
.sc-item,
.hm-card,
.hm-classifieds-item {
    --card-bg: var(--hm-bg-elevated);
    --card-border: var(--hm-border);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    --card-lift: -3px;
    --card-accent: linear-gradient(90deg, var(--hm-primary), var(--hm-accent));
}

/* =========================================================================
   BASE CARD - .hm-card
   ========================================================================= */

.hm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition:
        transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

/* Touch-specific active state */
.hm-card:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

/* Card hover state */
.hm-card:hover {
    transform: translateY(var(--card-lift));
    box-shadow: var(--card-shadow-hover);
    border-color: var(--hm-border-strong);
}

/* Card focus state */
.hm-card:focus-within {
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border-color: var(--hm-primary);
}

/* Top accent line on hover */
.hm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    z-index: 1;
}

.hm-card:hover::before {
    opacity: 1;
}

/* =========================================================================
   CARD IMAGE - .hm-card__image
   ========================================================================= */

.hm-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--hm-bg-muted);
}

.hm-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.hm-card:hover .hm-card__image img {
    transform: scale(1.05);
}

/* Image overlay gradient */
.hm-card__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.hm-card:hover .hm-card__image::after {
    opacity: 1;
}

/* =========================================================================
   CARD CONTENT - .hm-card__content
   ========================================================================= */

.hm-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
}

.hm-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--hm-text);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-2);
}

.hm-card__title a {
    color: inherit;
    text-decoration: none;
    touch-action: manipulation;
}

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

.hm-card__title a:active {
    opacity: 0.8;
}

.hm-card__excerpt {
    font-size: var(--text-sm);
    color: var(--hm-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================================
   CARD META - .hm-card__meta
   ========================================================================= */

.hm-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--hm-text-muted);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--hm-border);
}

.hm-card__date,
.hm-card__author,
.hm-card__source {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.hm-card__date::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--hm-text-muted);
    border-radius: var(--radius-full);
}

.hm-card__date:first-child::before {
    display: none;
}

/* =========================================================================
   CARD VARIANTS
   ========================================================================= */

/* Featured Card - Larger, more prominent */
.hm-card--featured {
    grid-column: span 2;
}

.hm-card--featured .hm-card__image {
    aspect-ratio: 21 / 9;
}

.hm-card--featured .hm-card__title {
    font-size: var(--text-2xl);
}

/* Compact Card - No image, smaller */
.hm-card--compact {
    flex-direction: row;
    padding: var(--space-3);
    gap: var(--space-3);
}

.hm-card--compact .hm-card__image {
    width: 80px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

.hm-card--compact .hm-card__content {
    padding: 0;
}

.hm-card--compact .hm-card__title {
    font-size: var(--text-base);
}

/* Horizontal Card */
.hm-card--horizontal {
    flex-direction: row;
}

.hm-card--horizontal .hm-card__image {
    width: 40%;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
}

/* =========================================================================
   RSS/FEEDZY CARDS - Integration
   ========================================================================= */

.feedzy-rss .rss_item,
.hm-master-layout .rss_item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--hm-bg-elevated);
    border: 1px solid var(--hm-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
}

.feedzy-rss .rss_item:hover,
.hm-master-layout .rss_item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--hm-border-strong);
}

/* RSS card accent line */
.feedzy-rss .rss_item::before,
.hm-master-layout .rss_item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hm-primary), var(--hm-accent));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    z-index: 1;
}

.feedzy-rss .rss_item:hover::before,
.hm-master-layout .rss_item:hover::before {
    opacity: 1;
}

/* RSS image */
.rss_item .rss_image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--hm-bg-muted);
}

.rss_item .rss_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.rss_item:hover .rss_image img {
    transform: scale(1.05);
}

/* RSS content */
.rss_item .rss_content {
    padding: var(--space-4);
}

.rss_item .rss_title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--hm-text);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-2);
}

.rss_item .rss_title a {
    color: inherit;
    text-decoration: none;
}

.rss_item .rss_title a:hover {
    color: var(--hm-primary);
}

/* RSS meta info */
.rss_item .rss_meta {
    font-size: var(--text-xs);
    color: var(--hm-text-muted);
}

/* =========================================================================
   ACTIVITY/PULSE CARDS - BuddyPress Integration
   ========================================================================= */

.pulse-items .activity-item,
.hm-master-layout .activity-item {
    background: var(--hm-bg-elevated);
    border: 1px solid var(--hm-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
}

.pulse-items .activity-item:hover,
.hm-master-layout .activity-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--hm-border-strong);
}

/* Touch feedback for activity cards */
.pulse-items .activity-item,
.hm-master-layout .activity-item {
    -webkit-tap-highlight-color: transparent;
}

.pulse-items .activity-item:active,
.hm-master-layout .activity-item:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

/* Activity header with avatar */
.activity-item .activity-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.activity-item .activity-avatar {
    flex-shrink: 0;
}

.activity-item .activity-avatar img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.activity-item .activity-content {
    flex: 1;
    min-width: 0;
}

/* Activity time */
.activity-item .activity-time-since {
    font-size: var(--text-xs);
    color: var(--hm-text-muted);
}

/* =========================================================================
   SECTION HEADERS
   ========================================================================= */

.hm-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--hm-border);
}

.hm-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--hm-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hm-section-link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--hm-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: gap var(--duration-fast) var(--ease-out);
}

.hm-section-link:hover {
    gap: var(--space-2);
    color: var(--hm-primary-hover);
}

.hm-section-link::after {
    content: '\2192'; /* → */
    transition: transform var(--duration-fast) var(--ease-out);
}

.hm-section-link:hover::after {
    transform: translateX(2px);
}

/* =========================================================================
   CARD GRID LAYOUTS
   ========================================================================= */

.hm-card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .hm-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hm-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Bento-style grid */
.hm-card-grid--bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(200px, auto);
}

.hm-card-grid--bento .hm-card--featured {
    grid-column: span 2;
    grid-row: span 2;
}

@media (min-width: 1024px) {
    .hm-card-grid--bento {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================================================= */

/* Disable hover effects on touch devices to prevent sticky states */
@media (hover: none) {
    .hm-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .hm-card:hover::before {
        opacity: 0;
    }

    .hm-card:hover .hm-card__image img {
        transform: none;
    }

    .feedzy-rss .rss_item:hover,
    .hm-master-layout .rss_item:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .pulse-items .activity-item:hover,
    .hm-master-layout .activity-item:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

/* Enhanced touch feedback - only on touch devices */
@media (hover: none) and (pointer: coarse) {
    .hm-card:active,
    .feedzy-rss .rss_item:active,
    .hm-master-layout .rss_item:active,
    .pulse-items .activity-item:active,
    .hm-master-layout .activity-item:active {
        transform: scale(0.98);
        transition: transform 0.1s var(--ease-out);
    }
}

/* =========================================================================
   CLS PREVENTION - External Images & Skeleton Loading
   ========================================================================= */

/* Force aspect-ratio on all news/RSS images to prevent CLS */
.rss_item img,
.feedzy-rss img,
.news-card img,
.hm-news-item img,
article img[src*="villages-news"],
article img[src*="leesburg-news"],
article img[src*="bbc.com"],
article img[src*="foxnews"],
article img[src*="espn.com"],
article img[src*="techcrunch"] {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    background: var(--hm-bg-muted);
}

/* Skeleton placeholder for loading images */
.rss_image,
.hm-card__image,
.news-card-image {
    position: relative;
    background: var(--hm-bg-muted);
}

.rss_image::before,
.hm-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--hm-bg-muted) 0%,
        var(--hm-neutral-200) 50%,
        var(--hm-bg-muted) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    opacity: 0;
    transition: opacity var(--duration-normal);
}

.rss_image:not(:has(img[src])) ::before,
.hm-card__image:not(:has(img[src]))::before {
    opacity: 1;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Reserve space for common RSS card heights */
.feedzy-rss .rss_item,
.hm-news-item {
    min-height: 280px;
}

.feedzy-rss .rss_item.compact,
.hm-news-item--compact {
    min-height: 120px;
}
/**
 * Hello Middleton - Site Layout System
 * Wider site layout for better screen real estate usage
 *
 * @requires tokens.css
 * @since 2.1.4
 */

/* ==========================================================================
   WIDER SITE LAYOUT - Container Overrides
   ========================================================================== */

/* Override default container width - use more screen space */
.container,
.elementor-section.elementor-section-boxed > .elementor-container,
.site-content .container,
#primary .container,
.content-area .container {
    max-width: 1600px !important;
    width: 95% !important;
}

/* Full-width sections should truly be full width */
.elementor-section-full_width,
.elementor-section.elementor-section-full_width > .elementor-container,
.e-con.e-con-full,
[data-settings*="full_width"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   CUSTOM SECTIONS - Wider Layout
   ========================================================================== */

.unified-news-hub,
.community-talk,
.weather-bar,
.hm-quick-actions,
.hm-stats-mini,
.hm-main-content-row {
    max-width: 1600px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
/* .hm-ticker-wrap excluded — uses full-bleed layout (see news-ticker.css) */

/* Elementor containers in our page should be full width */
.elementor-widget-shortcode {
    width: 100%;
}

/* ==========================================================================
   HEADER & FOOTER - Wider Layout
   ========================================================================== */

/* Site header should also be wider */
.site-header .container,
.masthead .container,
#masthead .container,
.site-header-wrapper .container {
    max-width: 1600px !important;
    width: 95% !important;
}

/* Footer should match */
.site-footer .container,
#colophon .container,
footer .container {
    max-width: 1600px !important;
    width: 95% !important;
}

/* ==========================================================================
   GRID ADJUSTMENTS - Large Screens
   ========================================================================== */

/* Adjust news hub grid for wider layout - more columns on large screens */
@media (min-width: 1400px) {
    .unh-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .unh-card-featured {
        grid-column: span 2;
        grid-row: span 2;
    }

    .ct-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1600px) {
    .unh-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .ct-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   MAIN CONTENT ROW - Proportions
   ========================================================================== */

/* Main content row - adjust proportions for wider layout */
@media (min-width: 1200px) {
    .hm-news-hub-column {
        flex: 1 1 75% !important;
    }

    .hm-sidebar-column {
        flex: 0 0 23% !important;
        min-width: 320px;
    }
}

/* ==========================================================================
   BUDDYPRESS / BUDDYX - Wider Layout
   ========================================================================== */

.buddypress-wrap .bp-wrap,
.buddypress-wrap .bp-dir-vert-nav,
.buddypress .bp-wrap {
    max-width: 1600px;
    margin: 0 auto;
}

/* ==========================================================================
   CONTENT AREAS
   ========================================================================== */

/* Content area within pages */
.site-content,
.content-area,
#primary,
#main {
    max-width: 100%;
}

/* Ensure the boxed layout option doesn't constrain us */
body.boxed-layout .container,
body.site-boxed-layout .container {
    max-width: 1600px !important;
}

/* ==========================================================================
   RESPONSIVE - Tablet & Below (max-width: 1200px)
   ========================================================================== */

@media (max-width: 1200px) {
    .container,
    .unified-news-hub,
    .community-talk,
    .weather-bar,
    .hm-quick-actions {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    /* .hm-ticker-wrap excluded — full-bleed via news-ticker.css */
}

/* ==========================================================================
   RESPONSIVE - Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    main,
    .site-main,
    #primary {
        padding: 12px !important;
    }

    .container,
    .site-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   SECTION BACKGROUNDS — Alternating rhythm
   Apply via Elementor container CSS classes for visual zone separation.
   ========================================================================== */

[class*="hm-section--"] {
    padding: var(--space-16, 64px) 0;
}

.hm-section--light {
    background: var(--hm-bg);
}

.hm-section--subtle {
    background: var(--hm-bg-subtle);
}

.hm-section--dark {
    background: var(--hm-neutral-900);
    color: var(--hm-text-inverse);
}

.hm-section--dark a {
    color: var(--hm-primary-400);
}

.hm-section--dark a:hover {
    color: var(--hm-primary-300);
}

/* ==========================================================================
   FOOTER — Compact layout
   Styles moved to forms.css unlayered section for parent theme override.
   ========================================================================== */

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .container,
    .site-content .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   WORLD-CLASS EDITORIAL REFINEMENTS (Feb 22, 2026)
   ========================================================================== */

/* The Paper Feel */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
}

/* Editorial Spacing */
.entry-content, .hm-content-area {
    line-height: 1.75 !important;
    font-size: 1.1rem !important;
}

/* Drop Caps */
.single-post .entry-content > p:first-of-type::first-letter {
    font-family: 'DM Serif Display', serif;
    font-size: 4.5rem;
    font-weight: 700;
    float: left;
    margin-right: 12px;
    line-height: 0.85;
    color: #F97316;
}

/* Reading Progress */
#hm-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #14B8A6;
    z-index: var(--z-max);
    transition: width 0.1s ease-out;
}
/**
 * Hello Middleton - Form Components
 * Consistent form styling across the site.
 *
 * @requires critical/tokens.css, critical/layers.css
 * @since 2.2.0
 * @updated 2026-02-02 - Refactored to use CSS Layers (removed 11 !important declarations)
 */


    /* =========================================================================
       FORM BASE
       ========================================================================= */

    .hm-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    /* =========================================================================
       FORM GROUP
       ========================================================================= */

    .hm-form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Inline group */
    .hm-form-group--inline {
        flex-direction: row;
        align-items: center;
    }

    /* =========================================================================
       LABELS
       ========================================================================= */

    .hm-label,
    label {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text);
    }

    .hm-label--required::after {
        content: ' *';
        color: var(--hm-danger);
    }

    /* =========================================================================
       TEXT INPUTS
       ========================================================================= */

    .hm-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"] {
        width: 100%;
        padding: var(--space-2-5) var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: 1.5;
        color: var(--hm-text);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);
        /* Prevent iOS zoom on focus */
        font-size: max(16px, var(--text-base));
    }

    .hm-input:hover,
    input[type="text"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    input[type="search"]:hover {
        border-color: var(--hm-border-strong);
    }

    .hm-input:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus {
        outline: none;
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
    }

    /* Placeholder */
    .hm-input::placeholder,
    input::placeholder {
        color: var(--hm-text-muted);
    }

    /* =========================================================================
       TEXTAREA
       ========================================================================= */

    .hm-textarea,
    textarea {
        width: 100%;
        min-height: 120px;
        padding: var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: var(--hm-text);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        resize: vertical;
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);
        /* Prevent iOS zoom */
        font-size: max(16px, var(--text-base));
    }

    .hm-textarea:focus,
    textarea:focus {
        outline: none;
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
    }

    /* =========================================================================
       SELECT
       ========================================================================= */

    .hm-select,
    select {
        width: 100%;
        padding: var(--space-2-5) var(--space-3);
        padding-right: var(--space-8);
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: 1.5;
        color: var(--hm-text);
        background: var(--hm-bg-elevated);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2357534E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3) center;
        background-size: 12px;
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        appearance: none;
        cursor: pointer;
        transition:
            border-color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);
    }

    .hm-select:focus,
    select:focus {
        outline: none;
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
    }

    /* =========================================================================
       CHECKBOX & RADIO
       ========================================================================= */

    .hm-checkbox,
    .hm-radio {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        cursor: pointer;
    }

    .hm-checkbox input,
    .hm-radio input {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        accent-color: var(--hm-primary);
        cursor: pointer;
    }

    .hm-checkbox span,
    .hm-radio span {
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        line-height: 1.4;
    }

    /* Custom checkbox styling */
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--hm-primary);
        cursor: pointer;
    }

    input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--hm-primary);
        cursor: pointer;
    }

    /* =========================================================================
       INPUT ADDONS (Icons, Buttons)
       ========================================================================= */

    .hm-input-group {
        display: flex;
        align-items: stretch;
    }

    .hm-input-group .hm-input,
    .hm-input-group input {
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }

    .hm-input-group .hm-btn,
    .hm-input-group button {
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        border-left: none;
    }

    /* Input with icon */
    .hm-input-icon {
        position: relative;
    }

    .hm-input-icon .hm-input,
    .hm-input-icon input {
        padding-left: var(--space-10);
    }

    .hm-input-icon__icon {
        position: absolute;
        left: var(--space-3);
        top: 50%;
        transform: translateY(-50%);
        color: var(--hm-text-muted);
        pointer-events: none;
    }

    /* =========================================================================
       FORM STATES
       ========================================================================= */

    /* Error state */
    .hm-input--error,
    .has-error input,
    .has-error textarea,
    .has-error select {
        border-color: var(--hm-danger);
    }

    .hm-input--error:focus,
    .has-error input:focus,
    .has-error textarea:focus {
        box-shadow: var(--shadow-glow-danger);
    }

    .hm-error-message {
        font-size: var(--text-sm);
        color: var(--hm-danger);
        margin-top: var(--space-1);
    }

    /* Success state */
    .hm-input--success {
        border-color: var(--hm-success);
    }

    /* Disabled state */
    .hm-input:disabled,
    input:disabled,
    textarea:disabled,
    select:disabled {
        background: var(--hm-bg-muted);
        color: var(--hm-text-muted);
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* =========================================================================
       HELP TEXT
       ========================================================================= */

    .hm-help-text {
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        margin-top: var(--space-1);
    }

    /* =========================================================================
       SEARCH FORM
       ========================================================================= */

    .hm-search-form {
        display: flex;
        gap: var(--space-2);
    }

    .hm-search-form .hm-input,
    .hm-search-form input[type="search"] {
        flex: 1;
        border-radius: var(--radius-full);
        padding-left: var(--space-4);
    }

    .hm-search-form .hm-btn {
        border-radius: var(--radius-full);
    }

    /* WordPress search form */
    .search-form {
        display: flex;
        gap: var(--space-2);
    }

    .search-form .search-field {
        flex: 1;
    }

    /* =========================================================================
       FILE INPUT
       ========================================================================= */

    .hm-file-input {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .hm-file-input input[type="file"] {
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
    }

    .hm-file-input input[type="file"]::file-selector-button {
        padding: var(--space-2) var(--space-4);
        margin-right: var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text);
        background: var(--hm-bg-subtle);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .hm-file-input input[type="file"]::file-selector-button:hover {
        background: var(--hm-bg-muted);
    }

    /* =========================================================================
       MOBILE OPTIMIZATIONS
       ========================================================================= */

    @media (max-width: 767px) {
        /* Ensure inputs are at least 44px for touch targets */
        .hm-input,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="url"],
        input[type="tel"],
        input[type="number"],
        .hm-textarea,
        textarea,
        .hm-select,
        select {
            min-height: 48px;
            padding: var(--space-3);
        }

        /* Slightly larger tap targets for checkboxes/radios */
        .hm-checkbox input,
        .hm-radio input,
        input[type="checkbox"],
        input[type="radio"] {
            width: 22px;
            height: 22px;
        }
    }

    /* =========================================================================
       WORDPRESS / PLUGIN FORM OVERRIDES
       ========================================================================= */

    /* Contact Form 7 */
    .wpcf7-form-control {
        width: 100%;
    }

    .wpcf7-submit {
        min-width: 150px;
    }

    /* BuddyPress forms */
    #buddypress input[type="text"],
    #buddypress input[type="email"],
    #buddypress input[type="password"],
    #buddypress textarea {
        width: 100%;
        padding: var(--space-2-5) var(--space-3);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
    }

    #buddypress input[type="text"]:focus,
    #buddypress input[type="email"]:focus,
    #buddypress input[type="password"]:focus,
    #buddypress textarea:focus {
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
        outline: none;
    }

    /* =========================================================================
       ANONYMOUS TIP LINE - Government Document Style
       ========================================================================= */

    .hm-gov-form {
        max-width: 700px;
        margin: 0 auto;
        padding: 0;
        background: var(--brand-gov-paper);
        border: 2px solid var(--brand-gov-blue);
        border-radius: 2px;
        box-shadow:
            0 0 0 4px var(--brand-gov-paper),
            0 0 0 6px var(--brand-gov-blue),
            8px 8px 0 rgba(30, 58, 95, 0.15);
        font-family: "Courier New", Courier, monospace;
        position: relative;
        overflow: hidden;
    }

    /* Subtle paper texture effect */
    .hm-gov-form::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 24px,
                rgba(0,0,0,0.02) 24px,
                rgba(0,0,0,0.02) 25px
            );
        pointer-events: none;
        z-index: 0;
    }

    .hm-gov-form > * {
        position: relative;
        z-index: 1;
    }

    /* Header */
    .hm-gov-form-header {
        background: linear-gradient(180deg, var(--brand-gov-blue) 0%, #2d4a6f 100%);
        color: #fff;
        padding: 20px 25px;
        margin-bottom: 0;
        border-bottom: 4px solid var(--brand-gov-gold);
        text-align: center;
    }

    .hm-gov-header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 12px;
        border-bottom: 1px dashed rgba(255,255,255,0.3);
    }

    .hm-gov-eagle {
        font-size: 32px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }

    .hm-gov-badge {
        background: var(--brand-gov-gold);
        color: var(--brand-gov-blue);
        padding: 4px 12px;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 0.15em;
        border-radius: 2px;
        font-family: "Sometype Mono", monospace;
    }

    .hm-gov-barcode {
        font-family: "Libre Barcode 39", monospace;
        font-size: 28px;
        letter-spacing: -2px;
        color: rgba(255, 255, 255, 0.85);
    }

    .hm-gov-form-header strong {
        display: block;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .hm-gov-subtitle {
        display: block;
        font-size: 12px;
        line-height: 1.5;
        color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        max-width: 500px;
        margin: 0 auto 12px;
    }

    .hm-gov-microprint {
        display: block;
        font-size: 7px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 10px;
    }

    /* Form fields */
    .hm-gov-form .hm-field {
        padding: 15px 25px;
        border-bottom: 1px dashed #ccc;
    }

    .hm-gov-form .hm-field:last-of-type {
        border-bottom: none;
    }

    .hm-gov-form .hm-field label {
        display: block;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--brand-gov-blue);
        margin-bottom: 8px;
    }

    .hm-gov-form input[type="text"],
    .hm-gov-form input[type="email"],
    .hm-gov-form textarea,
    .hm-gov-form select {
        width: 100%;
        padding: 12px 15px;
        font-family: "Courier New", Courier, monospace;
        font-size: 14px;
        border: 2px solid #d4d4d4;
        border-radius: 0;
        background: #fff;
        transition: all 0.2s ease;
    }

    .hm-gov-form input:focus,
    .hm-gov-form textarea:focus,
    .hm-gov-form select:focus {
        outline: none;
        border-color: var(--brand-gov-blue);
        box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    }

    .hm-gov-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    .hm-gov-form select {
        cursor: pointer;
    }

    /* Submit button */
    .hm-gov-form input[type="submit"] {
        display: block;
        width: calc(100% - 50px);
        margin: 25px auto;
        padding: 16px 30px;
        background: linear-gradient(180deg, var(--brand-gov-gold) 0%, #b8941f 100%);
        color: var(--brand-gov-blue);
        border: none;
        font-family: "Sometype Mono", monospace;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
    }

    .hm-gov-form input[type="submit"]:hover {
        background: linear-gradient(180deg, #d4ac2d 0%, var(--brand-gov-gold) 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(201, 162, 39, 0.4);
    }

    /* Small text footer */
    .hm-gov-form .small-text {
        text-align: center;
        font-size: 10px;
        color: #666;
        padding: 15px 25px;
        background: #f5f5f0;
        border-top: 1px solid #ddd;
        margin: 0;
    }

    /* =========================================================================
       SUBMIT NEWS - Newsroom Intake Style
       ========================================================================= */

    .hm-newsroom-form {
        max-width: 700px;
        margin: 0 auto;
        padding: 0;
        background: #ffffff;
        border-radius: var(--radius-md);
        box-shadow:
            0 4px 6px rgba(0, 0, 0, 0.05),
            0 10px 40px rgba(30, 64, 175, 0.1);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* Header */
    .hm-newsroom-header {
        background: linear-gradient(135deg, var(--mn-primary, var(--brand-news-blue)) 0%, var(--mn-primary-dark, var(--brand-news-blue-dark)) 100%);
        color: #fff;
        padding: 25px 30px;
        position: relative;
        overflow: hidden;
    }

    .hm-newsroom-header::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .hm-newsroom-topline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .hm-newsroom-tag {
        background: var(--mn-accent, #f59e0b);
        color: #000;
        padding: 5px 14px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.15em;
        border-radius: var(--radius-xl);
        font-family: "Sometype Mono", monospace;
    }

    .hm-newsroom-edition {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
        font-family: "Sometype Mono", monospace;
        letter-spacing: 0.05em;
    }

    .hm-newsroom-header strong {
        display: block;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .hm-newsroom-subtitle {
        display: block;
        font-size: 14px;
        line-height: 1.5;
        color: #fff;
    }

    /* Form body */
    .hm-newsroom-form > br {
        display: none;
    }

    .hm-newsroom-form > *:not(.hm-newsroom-header):not(.small-text):not(input[type="submit"]):not(.wpcf7-response-output) {
        padding: 0 30px;
    }

    /* Field labels */
    .hm-newsroom-form br + br {
        display: block;
        content: "";
        margin: 20px 0;
    }

    /* Input styling */
    .hm-newsroom-form input[type="text"],
    .hm-newsroom-form input[type="email"],
    .hm-newsroom-form textarea,
    .hm-newsroom-form select {
        width: 100%;
        padding: 14px 18px;
        font-size: 15px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        transition: all 0.2s ease;
        margin-top: 6px;
        margin-bottom: 20px;
    }

    .hm-newsroom-form input:focus,
    .hm-newsroom-form textarea:focus,
    .hm-newsroom-form select:focus {
        outline: none;
        border-color: var(--mn-primary, var(--brand-news-blue));
        background: #fff;
        box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1);
    }

    .hm-newsroom-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Radio buttons */
    .hm-newsroom-form .wpcf7-radio {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 8px;
        margin-bottom: 20px;
    }

    .hm-newsroom-form .wpcf7-list-item {
        margin: 0;
    }

    .hm-newsroom-form .wpcf7-list-item label {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        background: #f3f4f6;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;
    }

    .hm-newsroom-form .wpcf7-list-item label:hover {
        border-color: var(--mn-primary, var(--brand-news-blue));
        background: #eff6ff;
    }

    .hm-newsroom-form .wpcf7-list-item input:checked + span {
        color: var(--mn-primary, var(--brand-news-blue));
        font-weight: 600;
    }

    /* Checkbox */
    .hm-newsroom-form .wpcf7-checkbox {
        margin: 20px 0;
    }

    .hm-newsroom-form .wpcf7-checkbox label {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
        background: #fef3c7;
        border: 2px solid var(--mn-accent, #f59e0b);
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Submit button */
    .hm-newsroom-form input[type="submit"] {
        display: block;
        width: calc(100% - 60px);
        margin: 25px 30px 30px;
        padding: 16px 30px;
        background: linear-gradient(135deg, var(--mn-primary, var(--brand-news-blue)) 0%, var(--mn-primary-dark, var(--brand-news-blue-dark)) 100%);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
    }

    .hm-newsroom-form input[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4);
    }

    /* File upload */
    .hm-newsroom-form input[type="file"],
    .hm-gov-form input[type="file"] {
        padding: 12px;
        background: #f9fafb;
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        margin-top: 6px;
        margin-bottom: 20px;
    }

    .hm-newsroom-form input[type="file"]:hover,
    .hm-gov-form input[type="file"]:hover {
        border-color: var(--mn-primary, var(--brand-news-blue));
        background: #eff6ff;
    }

    /* Small text footer */
    .hm-newsroom-form .small-text {
        text-align: center;
        font-size: 12px;
        color: #6b7280;
        padding: 20px 30px;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
        margin: 0;
    }

    /* =========================================================================
       REPORT AD FORM - Warning/Red Theme
       ========================================================================= */

    .hm-report-form {
        max-width: 700px;
        margin: 0 auto;
        padding: 0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* Header */
    .hm-report-header {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: #fff;
        padding: 24px 28px;
        border-radius: var(--radius-md) 12px 0 0;
        text-align: center;
        margin-bottom: 0;
    }

    .hm-report-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .hm-report-header strong {
        display: block;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }

    .hm-report-subtitle {
        display: block;
        font-size: 14px;
        opacity: 0.9;
        line-height: 1.5;
        max-width: 500px;
        margin: 0 auto;
    }

    /* Form body */
    .hm-report-form .wpcf7-form {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-top: none;
        border-radius: 0 0 12px 12px;
        padding: 28px;
        box-shadow: 0 8px 30px rgba(185, 28, 28, 0.1);
    }

    /* Fields */
    .hm-report-form .hm-field {
        margin-bottom: 20px;
    }

    .hm-report-form .hm-field label {
        display: block;
        font-weight: 600;
        font-size: 14px;
        color: #1f2937;
        margin-bottom: 6px;
    }

    .hm-report-form .hm-field input[type="text"],
    .hm-report-form .hm-field input[type="email"],
    .hm-report-form .hm-field input[type="url"],
    .hm-report-form .hm-field textarea,
    .hm-report-form .hm-field select {
        width: 100%;
        padding: 12px 14px;
        font-size: 15px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        transition: border-color 0.2s, box-shadow 0.2s;
        font-family: inherit;
    }

    .hm-report-form .hm-field input:focus,
    .hm-report-form .hm-field textarea:focus,
    .hm-report-form .hm-field select:focus {
        outline: none;
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
        background: #fff;
    }

    .hm-report-form .hm-field textarea {
        min-height: 120px;
        resize: vertical;
    }

    .hm-report-form .hm-field select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 40px;
    }

    /* Field hints */
    .hm-report-form .hm-field-hint {
        display: block;
        font-size: 12px;
        color: #6b7280;
        margin-top: 4px;
    }

    /* File upload */
    .hm-report-form .hm-field input[type="file"] {
        padding: 10px;
        background: #f9fafb;
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
    }

    .hm-report-form .hm-field input[type="file"]:hover {
        border-color: #dc2626;
        background: #fef2f2;
    }

    /* Submit button */
    .hm-report-form input[type="submit"] {
        display: block;
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 10px;
    }

    .hm-report-form input[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(185, 28, 28, 0.3);
    }

    .hm-report-form input[type="submit"]:active {
        transform: translateY(0);
    }

    /* Note at bottom */
    .hm-report-note {
        margin-top: 20px;
        padding: 14px 16px;
        background: #fef3c7;
        border: 1px solid #f59e0b;
        border-radius: 8px;
        font-size: 13px;
        color: #92400e;
        text-align: center;
    }

    .hm-report-note a {
        color: #b45309;
        text-decoration: underline;
    }

    .hm-report-note a:hover {
        color: #92400e;
    }

    /* Success/error messages - CF7 plugin overrides */
    .hm-report-form .wpcf7-response-output {
        margin: 20px 0 0;
        padding: 14px 16px;
        border-radius: 8px;
        font-size: 14px;
    }

    .hm-report-form .wpcf7-mail-sent-ok {
        background: #d1fae5;
        border-color: #10b981;
        color: #065f46;
    }

    .hm-report-form .wpcf7-validation-errors,
    .hm-report-form .wpcf7-acceptance-missing {
        background: #fee2e2;
        border-color: #ef4444;
        color: #991b1b;
    }

    /* Validation error on fields */
    .hm-report-form .wpcf7-not-valid {
        border-color: #ef4444;
    }

    .hm-report-form .wpcf7-not-valid-tip {
        color: #dc2626;
        font-size: 12px;
        margin-top: 4px;
    }

    /* Spinner */
    .hm-report-form .wpcf7-spinner {
        margin: 10px auto;
        display: block;
    }

    /* =========================================================================
       SPECIALIZED FORMS - Responsive
       ========================================================================= */

    @media (max-width: 640px) {
        .hm-gov-form,
        .hm-newsroom-form {
            margin: 0 15px;
            border-radius: 8px;
        }

        .hm-gov-form-header,
        .hm-newsroom-header {
            padding: 20px;
        }

        .hm-gov-header-top {
            flex-direction: column;
            gap: 10px;
        }

        .hm-gov-barcode {
            display: none;
        }

        .hm-gov-form .hm-field,
        .hm-newsroom-form > *:not(.hm-newsroom-header):not(.small-text) {
            padding: 12px 20px;
        }

        .hm-newsroom-form input[type="submit"] {
            width: calc(100% - 40px);
            margin: 20px 20px 25px;
        }

        .hm-newsroom-form .wpcf7-radio {
            flex-direction: column;
        }

        .hm-report-header {
            padding: 20px;
        }

        .hm-report-header strong {
            font-size: 18px;
        }

        .hm-report-form .wpcf7-form {
            padding: 20px;
        }
    }

    /* =========================================================================
       SOCIAL LOGIN (Nextend Social Login Plugin)
       ========================================================================= */

    /* Container - add separator and spacing */
    .nsl-container {
        margin: 20px 0;
    }

    /* "Continue with Google" button styling */
    .nsl-container .nsl-button-google {
        border-radius: var(--radius-md) !important;
        font-family: var(--font-body) !important;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .nsl-container .nsl-button-google:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
    }

    /* Separator between social login and form */
    .nsl-container-login-layout-below .nsl-container-buttons,
    .nsl-container-register-layout-below .nsl-container-buttons {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--hm-border);
    }

    /* "or" divider text */
    .nsl-or-divider {
        text-align: center;
        font-size: var(--text-sm);
        color: var(--hm-text-muted);
        margin: 12px 0;
    }

    /* Full-width button on mobile */
    @media (max-width: 767px) {
        .nsl-container .nsl-button {
            width: 100%;
        }
    }

    /* =========================================================================
       INVITE / REFERRAL PAGE
       ========================================================================= */

    .hm-invite-card {
        max-width: 640px;
        margin: 0 auto;
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }

    .hm-invite-header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6);
        background: linear-gradient(135deg, var(--hm-accent-50) 0%, var(--hm-primary-50) 100%);
        border-bottom: 1px solid var(--hm-border);
    }

    .hm-invite-header-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: var(--hm-accent);
        color: #fff;
        border-radius: var(--radius-md);
    }

    .hm-invite-title {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        color: var(--hm-text);
        margin: 0 0 4px;
        line-height: var(--leading-tight);
    }

    .hm-invite-subtitle {
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        margin: 0;
        line-height: var(--leading-normal);
    }

    .hm-invite-section {
        padding: var(--space-5) var(--space-6);
        border-bottom: 1px solid var(--hm-border);
    }

    .hm-invite-section:last-of-type {
        border-bottom: none;
    }

    .hm-invite-section-label {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: var(--hm-text);
        margin-bottom: var(--space-3);
    }

    /* Share link row */
    .hm-invite-link-row {
        display: flex;
        gap: var(--space-2);
    }

    .hm-invite-link-input {
        flex: 1;
        padding: var(--space-2-5) var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        background: var(--hm-bg-subtle);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        cursor: text;
    }

    .hm-invite-copy-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-2-5) var(--space-4);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: #fff;
        background: var(--hm-accent);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .hm-invite-copy-btn:hover {
        background: var(--hm-accent-hover);
    }

    /* Email form */
    .hm-invite-form-fields {
        display: flex;
        gap: var(--space-2);
    }

    .hm-invite-input {
        flex: 1;
        padding: var(--space-2-5) var(--space-3);
        font-size: var(--text-base);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        background: var(--hm-bg-elevated);
        font-family: var(--font-body);
        font-size: max(16px, var(--text-base));
    }

    .hm-invite-input:focus {
        outline: none;
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
    }

    .hm-invite-send-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-2-5) var(--space-4);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: #fff;
        background: var(--hm-primary);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .hm-invite-send-btn:hover {
        background: var(--hm-primary-hover);
    }

    .hm-invite-send-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Feedback messages */
    .hm-invite-feedback {
        min-height: 0;
        overflow: hidden;
        transition: all var(--duration-fast) var(--ease-out);
    }

    .hm-invite-feedback:empty {
        display: none;
    }

    .hm-invite-feedback--success {
        margin-top: var(--space-3);
        padding: var(--space-3);
        background: var(--hm-success-light);
        color: var(--hm-success-dark);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    .hm-invite-feedback--error {
        margin-top: var(--space-3);
        padding: var(--space-3);
        background: var(--hm-danger-light);
        color: var(--hm-danger-dark);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    /* Referral stats */
    .hm-invite-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--hm-border);
    }

    .hm-invite-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-4) var(--space-3);
        background: var(--hm-bg-elevated);
        text-align: center;
    }

    .hm-invite-stat-number {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        color: var(--hm-accent);
        line-height: 1;
    }

    .hm-invite-stat-label {
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        font-weight: var(--font-medium);
    }

    /* Logged-out prompt */
    .hm-invite-login-prompt {
        max-width: 480px;
        margin: 0 auto;
        text-align: center;
        padding: var(--space-8);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
    }

    .hm-invite-login-prompt p {
        color: var(--hm-text-secondary);
        font-size: var(--text-lg);
        margin-bottom: var(--space-4);
    }

    /* Mobile responsive */
    @media (max-width: 599px) {
        .hm-invite-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--space-5);
        }

        .hm-invite-section {
            padding: var(--space-4);
        }

        .hm-invite-link-row {
            flex-direction: column;
        }

        .hm-invite-form-fields {
            flex-direction: column;
        }

        .hm-invite-copy-btn,
        .hm-invite-send-btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* =========================================================================
       WELCOME / ONBOARDING PAGE
       ========================================================================= */

    .hm-welcome-card {
        max-width: 480px;
        margin: 0 auto;
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }

    .hm-welcome-header {
        padding: var(--space-6);
        background: linear-gradient(135deg, var(--hm-primary-50) 0%, var(--hm-accent-50) 100%);
        border-bottom: 1px solid var(--hm-border);
        text-align: center;
    }

    .hm-welcome-title {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        color: var(--hm-text);
        margin: 0 0 var(--space-2);
        line-height: var(--leading-tight);
    }

    .hm-welcome-subtitle {
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        margin: 0;
        line-height: var(--leading-normal);
    }

    .hm-welcome-form {
        padding: var(--space-6);
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    /* Avatar section */
    .hm-welcome-avatar-section {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .hm-welcome-avatar-preview {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        border-radius: var(--radius-full);
        overflow: hidden;
        border: 3px solid var(--hm-border);
        background: var(--hm-bg-subtle);
    }

    .hm-welcome-avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .hm-welcome-avatar-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .hm-welcome-upload-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: var(--hm-text);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: border-color var(--duration-fast) var(--ease-out),
                    background var(--duration-fast) var(--ease-out);
    }

    .hm-welcome-upload-btn:hover {
        border-color: var(--hm-primary);
        background: var(--hm-primary-50);
    }

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

    /* Display name field */
    .hm-welcome-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .hm-welcome-field-label {
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        color: var(--hm-text);
    }

    .hm-welcome-input {
        padding: var(--space-3);
        font-family: var(--font-body);
        font-size: max(16px, var(--text-base));
        color: var(--hm-text);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        transition: border-color var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    .hm-welcome-input:focus {
        outline: none;
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
    }

    /* Action buttons */
    .hm-welcome-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .hm-welcome-complete-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
        font-weight: var(--font-bold);
        color: #fff;
        background: var(--hm-primary);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out);
    }

    .hm-welcome-complete-btn:hover {
        background: var(--hm-primary-hover);
        transform: translateY(-1px);
    }

    .hm-welcome-complete-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .hm-welcome-skip-btn {
        background: none;
        border: none;
        color: var(--hm-text-muted);
        font-size: var(--text-sm);
        cursor: pointer;
        padding: var(--space-1) var(--space-2);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .hm-welcome-skip-btn:hover {
        color: var(--hm-text-secondary);
    }

    /* Mobile */
    @media (max-width: 479px) {
        .hm-welcome-form {
            padding: var(--space-4);
        }

        .hm-welcome-header {
            padding: var(--space-5);
        }

        .hm-welcome-avatar-section {
            flex-direction: column;
            text-align: center;
        }
    }

    /* =========================================================================
       REGISTRATION PAGE — Full professional styling
       ========================================================================= */

    /* Form container — centered card layout */
    body.register #buddypress,
    body.register .buddypress-wrap {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        box-shadow: var(--shadow-md);
    }

    /* Intro text */
    body.register #buddypress .register-section-intro,
    body.register .buddypress-wrap > .bp-feedback {
        background: var(--hm-bg-subtle);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        margin-bottom: var(--space-5);
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        line-height: var(--leading-relaxed);
    }

    body.register .bp-feedback .bp-icon {
        display: none;
    }

    /* Section headings */
    body.register #buddypress h2,
    body.register .register-section h2 {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: var(--font-semibold);
        color: var(--hm-text);
        margin: 0 0 var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--hm-border);
    }

    /* Field labels */
    body.register #signup-form label,
    body.register .register-section label {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text);
        margin-bottom: var(--space-1-5);
    }

    /* Text inputs */
    body.register #signup-form input[type="text"],
    body.register #signup-form input[type="email"],
    body.register #signup-form input[type="password"],
    body.register .password-entry {
        width: 100%;
        padding: var(--space-3);
        font-family: var(--font-body);
        font-size: max(16px, var(--text-base));
        color: var(--hm-text);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        transition: border-color var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    body.register #signup-form input:focus,
    body.register .password-entry:focus {
        outline: none;
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-glow);
    }

    /* Field spacing */
    body.register .editfield,
    body.register .register-section > div {
        margin-bottom: var(--space-4);
    }

    /* Password wrapper */
    body.register .wp-pwd {
        position: relative;
    }

    body.register .password-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    body.register .password-input-wrapper .password-entry {
        padding-right: var(--space-10);
    }

    /* Show/hide password toggle */
    body.register .wp-hide-pw {
        position: absolute;
        right: var(--space-2);
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        padding: var(--space-1-5);
        color: var(--hm-text-muted);
        cursor: pointer;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: unset;
        min-width: unset;
    }

    body.register .wp-hide-pw:hover {
        color: var(--hm-text);
        background: var(--hm-bg-subtle);
    }

    body.register .wp-hide-pw .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

    /* Caps lock warning — hidden by default, shown via .active class */
    body.register #caps-warning,
    body.register .caps-warning {
        display: none;
        align-items: center;
        gap: var(--space-1-5);
        margin-top: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--hm-warning-light);
        border: 1px solid var(--hm-warning);
        border-radius: var(--radius-sm);
        font-size: var(--text-xs);
        color: var(--hm-warning-dark);
        line-height: 1.4;
    }

    body.register .caps-icon {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
    }

    body.register .caps-icon svg {
        width: 16px;
        height: 16px;
        fill: var(--hm-warning-dark);
        stroke: var(--hm-warning-dark);
    }

    /* Password strength meter */
    body.register #pass-strength-result {
        margin-top: var(--space-2);
        padding: var(--space-1-5) var(--space-3);
        border-radius: var(--radius-sm);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        border: 1px solid transparent;
    }

    body.register #pass-strength-result.short {
        background: var(--hm-danger-light);
        color: var(--hm-danger-dark);
        border-color: var(--hm-danger);
    }

    body.register #pass-strength-result.bad {
        background: #fef3c7;
        color: #92400e;
        border-color: #f59e0b;
    }

    body.register #pass-strength-result.good {
        background: #dbeafe;
        color: var(--brand-news-blue);
        border-color: #3b82f6;
    }

    body.register #pass-strength-result.strong {
        background: var(--hm-success-light);
        color: var(--hm-success-dark);
        border-color: var(--hm-success);
    }

    /* Password hint */
    body.register #signup-form .bp-signup-password-hint,
    body.register #signup-form p.description,
    body.register .wp-pwd + p,
    body.register .wp-pwd ~ p {
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        margin-top: var(--space-2);
        line-height: var(--leading-relaxed);
    }

    /* Profile field visibility note */
    body.register #signup-form p.field-visibility-settings-notoggle,
    body.register .field-visibility-settings-notoggle {
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        margin-top: var(--space-1);
    }

    /* Privacy & Terms section */
    .privacy-policy-accept {
        margin-top: var(--space-5);
        padding-top: var(--space-4);
        border-top: 1px solid var(--hm-border);
    }

    .privacy-policy-accept label {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        font-size: var(--text-sm);
        line-height: 1.5;
        color: var(--hm-text-secondary);
        cursor: pointer;
    }

    .privacy-policy-accept input[type="hidden"] {
        display: none;
    }

    .privacy-policy-accept input[type="checkbox"] {
        flex-shrink: 0;
        margin-top: 3px;
    }

    .privacy-policy-accept a {
        color: var(--hm-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .privacy-policy-accept a:hover {
        color: var(--hm-primary-hover);
    }

    .hm-registration-terms-note {
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        margin: var(--space-1-5) 0 var(--space-4);
        padding-left: calc(18px + var(--space-2));
        line-height: 1.5;
    }

    .hm-registration-terms-note a {
        color: var(--hm-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .hm-registration-terms-note a:hover {
        color: var(--hm-primary-hover);
    }

    /* Submit button */
    body.register #signup-form input[type="submit"],
    body.register #signup-form .submit input {
        display: block;
        width: 100%;
        padding: var(--space-3) var(--space-6);
        margin-top: var(--space-4);
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: var(--font-bold);
        color: var(--hm-text-inverse);
        background: linear-gradient(145deg, var(--hm-primary-600) 0%, var(--hm-primary) 100%);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    body.register #signup-form input[type="submit"]:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    /* Mobile registration */
    @media (max-width: 599px) {
        body.register #buddypress,
        body.register .buddypress-wrap {
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            margin: 0 var(--space-2);
        }
    }



/* ==========================================================================
   HONEYPOT - Anti-spam hidden field
   Uses off-screen positioning so bots fill it, humans never see it.
   Do NOT use display:none - bots detect that and skip the field.
   Kept outside @layer so it cannot be overridden by layered styles.
   ========================================================================== */

.hm-hp-wrap {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   Using !important here is appropriate as this is a user preference override
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hm-gov-form input[type="submit"],
    .hm-newsroom-form input[type="submit"],
    .hm-report-form input[type="submit"] {
        transition: none !important;
    }

    .hm-gov-form input[type="submit"]:hover,
    .hm-newsroom-form input[type="submit"]:hover,
    .hm-report-form input[type="submit"]:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   REGISTRATION PAGE — Outside @layer for parent theme override
   These MUST be unlayered because BuddyX parent theme CSS is unlayered,
   and unlayered styles always beat layered styles in the cascade.
   ========================================================================== */

/* Password field wrapper — force stacking, not inline */
body.register .wp-pwd .password-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Show/hide password button — replace broken dashicons with CSS eye icon */
body.register .wp-hide-pw {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    color: #78716C !important;
    min-height: unset !important;
    min-width: unset !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    z-index: 2 !important;
}

body.register .wp-hide-pw:hover {
    background: #f5f5f4 !important;
    color: #44403C !important;
}

/* Replace dashicons with CSS eye icon since dashicons font isn't loaded */
body.register .wp-hide-pw .dashicons {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

body.register .wp-hide-pw .dashicons::before {
    display: none !important;
    content: none !important;
}

/* Password input — give room for the toggle button */
body.register .password-entry,
body.register #pass1 {
    padding-right: 48px !important;
    width: 100% !important;
}

/* Caps lock warning — hidden by default, shown by JS when caps lock detected */
body.register #caps-warning,
body.register .caps-warning {
    width: 100% !important;
    flex-basis: 100% !important;
    display: none;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    background: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #92400e !important;
    line-height: 1.4 !important;
    order: 10 !important;
}

/* Show caps warning when JS detects caps lock */
body.register #caps-warning.active,
body.register .caps-warning.active {
    display: flex !important;
}

/* Caps lock SVG icon — small and proportional */
body.register .caps-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
}

body.register .caps-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: #92400e !important;
    stroke: #92400e !important;
    stroke-width: 0.3 !important;
}

/* Password strength meter */
body.register #pass-strength-result {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-top: 8px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid transparent !important;
    order: 11 !important;
}

body.register #pass-strength-result.short {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #dc2626 !important;
}

body.register #pass-strength-result.bad {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
}

body.register #pass-strength-result.good {
    background: #dbeafe !important;
    color: var(--brand-news-blue) !important;
    border-color: #3b82f6 !important;
}

body.register #pass-strength-result.strong {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #10b981 !important;
}

/* Password hint text — ensure visible */
body.register .wp-pwd ~ p,
body.register .wp-pwd + p {
    font-size: 12px !important;
    color: #78716C !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   FOOTER — Compact single-line copyright bar (unlayered for override)
   ========================================================================== */

/* Collapse empty widget area — no widgets configured */
footer.site-footer .site-footer-wrapper {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Footer container — no wasted space */
footer.site-footer {
    margin: 0 !important;
    border-top: none !important;
    padding: 0 !important;
    background: #FAFAF9 !important;
}

/* Mobile: add bottom padding to clear fixed nav bar */
@media (max-width: 999px) {
    footer.site-footer {
        padding-bottom: 68px !important;
    }
}

/* Copyright bar — compact centered text */
footer.site-footer .site-info {
    display: block !important;
    text-align: center !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #78716C !important;
    border-top: 1px solid #E7E5E4 !important;
    background: #FAFAF9 !important;
    min-height: 0 !important;
    height: auto !important;
    white-space: normal !important;
}

/* Make .container transparent in layout — its children become inline */
footer.site-footer .site-info > div.container,
footer.site-footer .site-info > .container {
    display: contents !important;
}

/* Kill the clearfix pseudo-elements that force a line break */
footer.site-footer .site-info > .container::before,
footer.site-footer .site-info > .container::after {
    content: none !important;
    display: none !important;
}

/* Privacy Policy link — inline, strip WP button padding */
footer.site-footer .site-info .privacy-policy-link,
footer.site-footer .site-info a.privacy-policy-link {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Separator between copyright and privacy link */
footer.site-footer .site-info .privacy-policy-link::before {
    content: "·" !important;
    margin-right: 6px !important;
    color: #A8A29E !important;
}

/* Strip ALL button-like styling from footer links */
footer.site-footer .site-info a,
footer.site-footer .site-info .container a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    color: #57534E !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    height: auto !important;
    min-height: 0 !important;
}

footer.site-footer .site-info a:hover {
    color: var(--hm-primary) !important;
}

/* ==========================================================================
   REGISTRATION — Bottom padding for mobile nav clearance
   ========================================================================== */

body.register .buddypress-wrap,
body.register #buddypress {
    padding-bottom: 80px !important;
}
/**
 * Hello Middleton - Hero Section
 * Full hero for logged-out visitors, slim bar for logged-in.
 *
 * @requires tokens.css
 * @since 2.4.0
 */

@layer components {

    /* =========================================================================
       LOGGED-OUT: Full Hero Section
       ========================================================================= */

    .hm-hero {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        min-height: 480px;
        padding: var(--space-12) var(--space-4) var(--space-10);
        background-image: var(--hero-bg, linear-gradient(135deg, var(--hm-primary), var(--hm-accent)));
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        contain: layout style;
    }

    @media (min-width: 768px) {
        .hm-hero {
            min-height: 560px;
            padding: var(--space-16) var(--space-6) var(--space-12);
        }
    }

    /* --- Dark Overlay --- */
    .hm-hero__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(28, 25, 23, 0.65), rgba(180, 83, 9, 0.45));
        z-index: 1;
        pointer-events: none;
    }

    /* --- Bottom fade to page background --- */
    .hm-hero__fade {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 60%, var(--hm-bg) 100%);
        z-index: 2;
        pointer-events: none;
    }

    /* --- Content wrapper --- */
    .hm-hero__content {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 720px;
        width: 100%;
        gap: var(--space-4);
    }

    /* --- Mobile Branding Animation --- */
    .hm-hero__mobile-branding {
        display: none;
    }

    @media (max-width: 768px) {
        .hm-hero__mobile-branding {
            display: block;
            margin-bottom: var(--space-4);
        }

        .hm-hm-logo-animated {
            display: flex;
            flex-direction: column;
            line-height: 1;
            font-family: var(--font-display);
            text-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }

        .word-hello {
            font-size: 3rem;
            color: var(--hm-primary);
            font-style: italic;
            animation: hero-slide-up 0.8s var(--ease-out) forwards;
            opacity: 0;
        }

        .word-middleton {
            font-size: 1.5rem;
            color: white;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-top: -5px;
            animation: hero-slide-up 0.8s var(--ease-out) 0.2s forwards;
            opacity: 0;
        }

        .hm-hero__title {
            display: none; /* Hide standard title on mobile in favor of animation */
        }
    }

    @keyframes hero-slide-up {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* --- Eyebrow --- */
    .hm-hero__eyebrow {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color: var(--hm-primary-200);
        margin: 0;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    /* --- Title --- */
    .hm-hero__title {
        font-family: var(--font-display);
        font-size: var(--text-3xl);
        font-weight: var(--font-bold);
        line-height: var(--leading-tight);
        color: var(--hm-text-inverse);
        margin: 0;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    @media (min-width: 768px) {
        .hm-hero__title {
            font-size: var(--text-5xl);
        }
    }

    /* --- Subtitle --- */
    .hm-hero__subtitle {
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: rgba(253, 252, 250, 0.92);
        margin: 0;
        max-width: 560px;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    }

    @media (min-width: 768px) {
        .hm-hero__subtitle {
            font-size: var(--text-lg);
        }
    }

    /* --- CTAs container --- */
    .hm-hero__ctas {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
        margin-top: var(--space-2);
    }

    @media (min-width: 768px) {
        .hm-hero__ctas {
            flex-direction: row;
            justify-content: center;
            width: auto;
        }
    }

    /* --- Shared CTA styles --- */
    .hm-hero__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-6);
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        text-decoration: none;
        border-radius: var(--radius-full);
        cursor: pointer;
        transition:
            background var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out),
            transform var(--duration-fast) var(--ease-out);
    }

    .hm-hero__cta:focus-visible {
        outline: 2px solid var(--hm-primary-300);
        outline-offset: 2px;
    }

    /* --- Primary CTA --- */
    .hm-hero__cta--primary {
        background: var(--hm-primary);
        color: var(--hm-text-inverse);
        border: 2px solid transparent;
    }

    .hm-hero__cta--primary:hover {
        background: var(--hm-primary-hover);
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px);
        color: var(--hm-text-inverse);
    }

    /* --- Ghost CTA --- */
    .hm-hero__cta--ghost {
        background: rgba(255, 255, 255, 0.15);
        color: #FDFCFA;
        border: 1px solid rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .hm-hero__cta--ghost:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #FFFFFF;
        transform: translateY(-1px);
    }

    /* --- Stats pill (glass-morphism) --- */
    .hm-hero__stats {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2-5) var(--space-5);
        margin-top: var(--space-3);
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-full);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .hm-hero__stat {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: rgba(253, 252, 250, 0.9);
        white-space: nowrap;
    }

    .hm-hero__stat strong {
        font-weight: var(--font-semibold);
        color: #FDFCFA;
    }

    .hm-hero__stat .hm-icon {
        opacity: 0.75;
    }

    .hm-hero__stat-divider {
        width: 1px;
        height: 16px;
        background: rgba(255, 255, 255, 0.25);
    }

    /* --- "Serving since" fallback text --- */
    .hm-hero__since {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-wide);
        color: rgba(253, 252, 250, 0.6);
        margin: var(--space-3) 0 0;
    }

    /* =========================================================================
       MOBILE OVERRIDES (max-width 768px)
       ========================================================================= */

    @media (max-width: 768px) {
        .hm-hero {
            min-height: 400px;
            align-items: center;
            background-image: var(--hero-bg-mobile, var(--hero-bg));
        }

        .hm-hero__ctas {
            align-items: stretch;
        }

        .hm-hero__cta {
            width: 100%;
        }

        .hm-hero__stats {
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
        }

        .hm-hero__stat-divider {
            display: none;
        }

        .hm-hero__stat {
            font-size: var(--text-xs);
        }
    }

    /* =========================================================================
       LOGGED-IN: Slim Welcome Bar
       ========================================================================= */

    .hm-hero-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 80px;
        padding: var(--space-4);
        background: var(--hm-bg-elevated);
        border-bottom: 1px solid var(--hm-border);
    }

    .hm-hero-bar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        width: 100%;
        max-width: var(--content-width);
        flex-wrap: wrap;
    }

    .hm-hero-bar__greeting {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-body);
        font-size: var(--text-base);
        color: var(--hm-text);
        margin: 0;
    }

    .hm-hero-bar__greeting .hm-icon {
        color: var(--hm-primary);
    }

    .hm-hero-bar__links {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .hm-hero-bar__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-2) var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text-secondary);
        text-decoration: none;
        border-radius: var(--radius-full);
        border: 1px solid var(--hm-border);
        background: var(--hm-bg);
        transition:
            border-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);
    }

    .hm-hero-bar__link:hover {
        color: var(--hm-primary);
        border-color: var(--hm-primary);
        box-shadow: var(--shadow-xs);
    }

    /* Mobile: stack greeting and links */
    @media (max-width: 768px) {
        .hm-hero-bar__inner {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-3);
        }

        .hm-hero-bar__links {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .hm-hero-bar__links::-webkit-scrollbar {
            display: none;
        }

        .hm-hero-bar__link {
            white-space: nowrap;
            flex-shrink: 0;
        }
    }

    /* =========================================================================
       REDUCED MOTION
       ========================================================================= */

    @media (prefers-reduced-motion: reduce) {
        .hm-hero__cta {
            transition: none;
        }

        .hm-hero__cta:hover {
            transform: none;
        }

        .hm-hero-bar__link {
            transition: none;
        }
    }

} /* end @layer components */
/**
 * Hello Middleton - Navigation Components
 * Header, mobile bottom nav, menus, and navigation elements.
 *
 * @requires critical/tokens.css, critical/layers.css
 * @updated 2026-02-02 - Refactored to use CSS Layers (removed 45 !important declarations)
 */

/* ==========================================================================
   COMPONENT STYLES - @layer components
   These styles automatically override theme/plugin styles without !important
   because 'components' layer has higher priority than 'theme' and 'plugins' layers
   ========================================================================== */

@layer components {

    /* =========================================================================
       SITE HEADER
       ========================================================================= */

    .site-header,
    #masthead {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        background: var(--hm-bg-elevated);
        border-bottom: 1px solid var(--hm-border);
        transition:
            box-shadow var(--duration-normal) var(--ease-out),
            backdrop-filter var(--duration-normal) var(--ease-out),
            background var(--duration-normal) var(--ease-out);
    }

    /* Warm gradient accent line at top of header */
    .site-header::before,
    #masthead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--hm-primary), var(--hm-accent));
        z-index: 10;
    }

    /* Scrolled state */
    .site-header.scrolled,
    #masthead.scrolled {
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.95);
    }

    /* Header container — center on mobile, space-between on desktop */
    .site-header .container,
    .masthead-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--header-height);
        padding: 0 var(--space-4);
        max-width: var(--content-width);
        margin: 0 auto;
    }

    @media (max-width: 767px) {
        .site-header .container,
        .masthead-container {
            min-height: 56px; /* Strict mobile height */
            padding: 0 var(--space-3);
        }
    }

    /* =========================================================================
       SITE BRANDING / LOGO
       ========================================================================= */

    .site-branding {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0 auto;
        padding: 0 var(--space-4);
    }

    @media (max-width: 767px) {
        .site-branding {
            padding: 0 var(--space-2);
        }
    }

    /* New Logo Wordmark Styling */
    .hm-logo-wordmark {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        text-decoration: none !important;
        transition: transform var(--duration-fast) var(--ease-out);
        padding-right: 24px; /* Increased padding */
        overflow: visible;
        white-space: nowrap;
    }

    .hm-logo-wordmark:hover {
        transform: scale(1.02);
    }

    .hm-logo-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .hm-logo-icon svg {
        stroke: var(--hm-primary);
        transition: transform var(--duration-fast) var(--ease-out);
    }

    .hm-logo-wordmark:hover .hm-logo-icon svg {
        transform: translateY(-2px);
    }

    .hm-logo-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        padding-right: 5px; /* Tiny buffer to prevent character clipping */
    }

    .hm-logo__hello {
        font-family: var(--font-display);
        font-size: 1.1rem; /* Shrunk from 1.25rem */
        font-weight: 700;
        font-style: italic;
        color: var(--hm-primary);
        letter-spacing: -0.01em;
    }

    .hm-logo__middleton {
        font-family: var(--font-body);
        font-size: 0.6rem; /* Shrunk from 0.65rem */
        font-weight: 800;
        text-transform: uppercase;
        color: var(--hm-text);
        letter-spacing: 0.08em; /* Adjusted for better N visibility */
        margin-top: -2px;
        font-optical-sizing: auto;
        -webkit-font-smoothing: antialiased;
    }

    @media (max-width: 767px) {
        .hm-logo-icon svg {
            width: 20px; /* Shrunk slightly */
            height: 20px;
        }
        .hm-logo__hello {
            font-size: 0.95rem; /* Shrunk from 1.1rem */
        }
        .hm-logo__middleton {
            font-size: 0.5rem; /* Shrunk from 0.55rem */
        }
        .hm-logo-wordmark {
            gap: 6px;
            padding-right: 16px;
        }
    }

    .custom-logo,
    .site-logo img {
        height: auto;
        max-height: 80px; /* Increased from 65px */
        max-width: 360px;
        width: auto;
        object-fit: contain;
        transition: max-height var(--duration-normal) var(--ease-out);
    }

    @media (max-width: 767px) {
        .custom-logo,
        .site-logo img {
            max-height: 40px; /* Further optimized for 56px header */
        }
    }

    .site-title {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--hm-text);
        margin: 0;
        line-height: 1;
    }

    .site-title a {
        color: inherit;
        text-decoration: none;
    }

    .site-description {
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        margin: 0;
    }

    /* =========================================================================
       PRIMARY NAVIGATION (Desktop)
       ========================================================================= */

    .main-navigation,
    .primary-menu,
    #site-navigation {
        display: none;
    }

    /* Navigation list */
    .main-navigation ul,
    .primary-menu ul {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Navigation links */
    .main-navigation a,
    .primary-menu a {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text-secondary);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition:
            color var(--duration-fast) var(--ease-out),
            background var(--duration-fast) var(--ease-out);
    }

    .main-navigation a:hover,
    .primary-menu a:hover {
        color: var(--hm-text);
        background: var(--hm-bg-subtle);
    }

    /* Current/active page */
    .main-navigation .current-menu-item > a,
    .primary-menu .current-menu-item > a {
        color: var(--hm-primary);
        font-weight: var(--font-semibold);
    }

    /* =========================================================================
       DROPDOWN ARROWS - Fix for BuddyX Theme
       The theme uses .dropdown-toggle button with .dropdown-symbol inside
       BuddyX hides these by default on desktop - components layer overrides this
       ========================================================================= */

    /* Hide broken Font Awesome pseudo-elements on menu items */
    .menu-item-has-children::after,
    .menu-item-has-children::before,
    .site-header .menu-item-has-children::after,
    .site-header .menu-item-has-children::before,
    #masthead .menu-item-has-children::after,
    #masthead .menu-item-has-children::before,
    nav .menu-item-has-children::after,
    nav .menu-item-has-children::before {
        display: none;
        content: none;
    }

    /* Menu items with children - ensure inline layout */
    .menu-item-has-children,
    .main-navigation .menu-item-has-children,
    #site-navigation .menu-item-has-children,
    .buddyx-desktop-menu .menu-item-has-children {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    /* Style the dropdown toggle button - small, inline */
    .dropdown-toggle,
    button.dropdown-toggle,
    .site-header .dropdown-toggle,
    #masthead .dropdown-toggle,
    .main-navigation .dropdown-toggle,
    #site-navigation .dropdown-toggle,
    .primary-menu .dropdown-toggle,
    .menu-item-has-children > .dropdown-toggle,
    nav .dropdown-toggle,
    header .dropdown-toggle,
    .menu .dropdown-toggle,
    ul.menu .dropdown-toggle,
    .buddyx-desktop-menu .dropdown-toggle,
    .site-header .menu-item-has-children > .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
        margin-left: 4px;
        cursor: pointer;
        vertical-align: middle;
        width: 12px;
        height: 12px;
        min-width: unset;
        min-height: unset;
        opacity: 0.6;
        visibility: visible;
        position: static;
        flex-shrink: 0;
    }

    .dropdown-toggle:hover,
    .menu-item-has-children:hover > .dropdown-toggle {
        opacity: 1;
    }

    /* Style the dropdown arrow symbol - small subtle chevron */
    .dropdown-symbol,
    i.dropdown-symbol,
    .dropdown-toggle .dropdown-symbol,
    .dropdown-toggle > .dropdown-symbol,
    .site-header .dropdown-symbol,
    #masthead .dropdown-symbol,
    .main-navigation .dropdown-symbol,
    #site-navigation .dropdown-symbol,
    .primary-menu .dropdown-symbol,
    nav .dropdown-symbol,
    header .dropdown-symbol,
    .buddyx-desktop-menu .dropdown-symbol {
        display: block;
        width: 5px;
        height: 5px;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
        position: relative;
        top: -1px;
        font-size: 0;
        line-height: 0;
        font-family: inherit;
        font-style: normal;
        -webkit-font-smoothing: auto;
        opacity: 1;
        visibility: visible;
    }

    /* Remove any ::before or ::after from the symbol that Font Awesome might add */
    .dropdown-symbol::before,
    .dropdown-symbol::after,
    i.dropdown-symbol::before,
    i.dropdown-symbol::after {
        display: none;
        content: none;
    }

    /* Hover state */
    .dropdown-toggle:hover .dropdown-symbol,
    .menu-item-has-children:hover .dropdown-symbol,
    .menu-item-has-children:hover > .dropdown-toggle .dropdown-symbol {
        border-color: var(--hm-primary, var(--hm-primary));
    }

    /* Active/current menu item */
    .current-menu-item .dropdown-symbol,
    .current-menu-ancestor .dropdown-symbol,
    .current-menu-item > .dropdown-toggle .dropdown-symbol,
    .current-menu-ancestor > .dropdown-toggle .dropdown-symbol {
        border-color: var(--hm-primary, var(--hm-primary));
    }

    /* When dropdown is expanded, rotate arrow up */
    .dropdown-toggle[aria-expanded="true"] .dropdown-symbol,
    .menu-item-has-children.open > .dropdown-toggle .dropdown-symbol {
        transform: rotate(-135deg);
        top: 2px;
    }

    /* Sub-menu dropdown arrows point right */
    .sub-menu .dropdown-symbol,
    .sub-menu .dropdown-toggle .dropdown-symbol {
        transform: rotate(-45deg);
    }

    /* =========================================================================
       DROPDOWN MENUS (Desktop)
       ========================================================================= */

    .main-navigation .sub-menu,
    .primary-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        min-width: 180px;
        max-width: 320px;
        padding: var(--space-2);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity var(--duration-fast) var(--ease-out),
            visibility var(--duration-fast) var(--ease-out),
            transform var(--duration-fast) var(--ease-out);
        z-index: var(--z-dropdown);
    }

    .main-navigation li:hover > .sub-menu,
    .primary-menu li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-navigation .sub-menu li,
    .primary-menu .sub-menu li {
        display: block;
    }

    .main-navigation .sub-menu a,
    .primary-menu .sub-menu a {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        white-space: nowrap;
    }

    /* =========================================================================
       MOBILE BOTTOM NAVIGATION
       ========================================================================= */

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--mobile-nav-height);
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        backdrop-filter: blur(12px) saturate(180%);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
        z-index: var(--z-fixed);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Fallback for browsers without backdrop-filter support */
    @supports not (backdrop-filter: blur(1px)) {
        .mobile-bottom-nav {
            background: var(--hm-bg-elevated);
            border-top: 1px solid var(--hm-border);
        }
    }

    /* Navigation items */
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-0-5);
        padding: var(--space-2);
        min-width: 60px;
        min-height: 48px;
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--hm-text-muted);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition:
            color var(--duration-fast) var(--ease-out),
            background var(--duration-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:active {
        color: var(--hm-text);
        background: var(--hm-bg-subtle);
    }

    .mobile-nav-item.active {
        color: var(--hm-primary);
    }

    /* Icon container */
    .mobile-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* SVG icon styling */
    .mobile-nav-icon .hm-icon,
    .mobile-menu-icon .hm-icon,
    .hm-icon {
        flex-shrink: 0;
        stroke-width: 2;
        transition: transform var(--duration-fast) var(--ease-out);
    }

    /* Touch feedback on icons */
    .mobile-nav-item:active .hm-icon {
        transform: scale(0.9);
    }

    /* Center "Post" button - elevated style */
    .mobile-nav-item.nav-post {
        position: relative;
        color: var(--hm-text-inverse);
        background: var(--hm-primary);
        border-radius: var(--radius-full);
        padding: var(--space-2) var(--space-4);
        margin-top: -12px;
        box-shadow: var(--shadow-md);
    }

    .mobile-nav-item.nav-post:hover,
    .mobile-nav-item.nav-post:active {
        background: var(--hm-primary-hover);
        color: var(--hm-text-inverse);
    }

    /* =========================================================================
       MOBILE MENU SHEET
       ========================================================================= */

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--duration-normal) var(--ease-out),
            visibility var(--duration-normal) var(--ease-out);
        z-index: var(--z-modal-backdrop);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .mobile-menu-backdrop.open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: var(--shadow-xl);
        transform: translateY(100%);
        transition: transform var(--duration-normal) var(--ease-out);
        z-index: var(--z-modal);
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Fallback for browsers without backdrop-filter support */
    @supports not (backdrop-filter: blur(1px)) {
        .mobile-menu-sheet {
            background: var(--hm-bg-elevated);
        }
        .mobile-menu-backdrop {
            background: rgba(0, 0, 0, 0.7);
        }
    }

    .mobile-menu-sheet.open {
        transform: translateY(0);
    }

    /* Sheet header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--hm-border);
    }

    .mobile-menu-title {
        font-family: var(--font-display);
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
        color: var(--hm-text);
    }

    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: var(--text-lg);
        color: var(--hm-text-muted);
        background: var(--hm-bg-subtle);
        border: none;
        border-radius: var(--radius-full);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .mobile-menu-close:hover {
        background: var(--hm-bg-muted);
    }

    /* Sheet content */
    .mobile-menu-content {
        padding: var(--space-3) var(--space-4);
        overflow-y: auto;
        max-height: calc(70vh - 60px);
    }

    /* Menu items */
    .mobile-menu-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        min-height: 48px; /* Touch target compliance */
        font-size: var(--text-base);
        font-weight: var(--font-medium);
        color: var(--hm-text);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition: background var(--duration-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation; /* Prevent double-tap zoom */
    }

    .mobile-menu-item:hover,
    .mobile-menu-item:active {
        background: var(--hm-bg-subtle);
    }

    .mobile-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        color: var(--hm-text-secondary);
    }

    /* Active state for menu items */
    .mobile-menu-item:active .hm-icon {
        transform: scale(0.9);
    }

    /* =========================================================================
       BREADCRUMBS
       ========================================================================= */

    .hm-breadcrumbs,
    .breadcrumbs {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2);
        font-size: var(--text-sm);
        color: var(--hm-text-muted);
        padding: var(--space-3) 0;
    }

    .hm-breadcrumbs a,
    .breadcrumbs a {
        color: var(--hm-text-secondary);
        text-decoration: none;
    }

    .hm-breadcrumbs a:hover,
    .breadcrumbs a:hover {
        color: var(--hm-primary);
    }

    .hm-breadcrumbs .separator,
    .breadcrumbs .separator {
        color: var(--hm-text-muted);
    }

    .hm-breadcrumbs .current,
    .breadcrumbs .current {
        color: var(--hm-text);
        font-weight: var(--font-medium);
    }

    /* =========================================================================
       PAGINATION
       ========================================================================= */

    .hm-pagination,
    .pagination,
    .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        padding: var(--space-6) 0;
    }

    .hm-pagination a,
    .hm-pagination span,
    .pagination a,
    .pagination span,
    .nav-links a,
    .nav-links span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text-secondary);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition:
            color var(--duration-fast) var(--ease-out),
            background var(--duration-fast) var(--ease-out),
            border-color var(--duration-fast) var(--ease-out);
    }

    .hm-pagination a:hover,
    .pagination a:hover,
    .nav-links a:hover {
        color: var(--hm-text);
        background: var(--hm-bg-subtle);
        border-color: var(--hm-border-strong);
    }

    .hm-pagination .current,
    .pagination .current,
    .nav-links .current {
        color: var(--hm-text-inverse);
        background: var(--hm-primary);
        border-color: var(--hm-primary);
    }

    /* =========================================================================
       BACK TO TOP BUTTON
       ========================================================================= */

    .hm-back-to-top,
    .back-to-top {
        position: fixed;
        bottom: calc(var(--mobile-nav-height) + var(--space-4) + env(safe-area-inset-bottom, 0));
        right: var(--space-4);
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-md);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px);
        transition:
            opacity var(--duration-normal) var(--ease-out),
            visibility var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-out),
            background var(--duration-fast) var(--ease-out);
        z-index: var(--z-fixed);
    }

    .hm-back-to-top.visible,
    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .hm-back-to-top:hover,
    .back-to-top:hover {
        background: var(--hm-bg-subtle);
    }

    /* =========================================================================
       TAB NAVIGATION (for content areas)
       ========================================================================= */

    .hm-tabs {
        display: flex;
        gap: var(--space-1);
        overflow-x: auto;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--hm-border);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hm-tabs::-webkit-scrollbar {
        display: none;
    }

    .hm-tab {
        flex-shrink: 0;
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text-secondary);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        white-space: nowrap;
        transition:
            color var(--duration-fast) var(--ease-out),
            border-color var(--duration-fast) var(--ease-out);
    }

    .hm-tab:hover {
        color: var(--hm-text);
    }

    .hm-tab.active {
        color: var(--hm-primary);
        border-bottom-color: var(--hm-primary);
    }

    /* Pill-style tabs */
    .hm-tabs--pills {
        border-bottom: none;
        gap: var(--space-2);
    }

    .hm-tabs--pills .hm-tab {
        background: var(--hm-bg-subtle);
        border: none;
        border-radius: var(--radius-full);
        padding: var(--space-2) var(--space-4);
    }

    .hm-tabs--pills .hm-tab:hover {
        background: var(--hm-bg-muted);
    }

    .hm-tabs--pills .hm-tab.active {
        background: var(--hm-primary);
        color: var(--hm-text-inverse);
    }

    /* =========================================================================
       RESPONSIVE - Tablet+ (min-width: 768px)
       ========================================================================= */

    @media (min-width: 768px) {
        /* Desktop: logo left, nav right */
        .site-header .container,
        .masthead-container {
            justify-content: space-between;
        }

        .site-branding {
            margin: 0;
        }

        .main-navigation,
        .primary-menu,
        #site-navigation {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .mobile-bottom-nav {
            display: none;
        }

        .hm-back-to-top,
        .back-to-top {
            bottom: var(--space-6);
        }
    }

} /* End @layer components */


/* ==========================================================================
   BUDDYX PARENT THEME OVERRIDE - Font Awesome Dropdown Arrows

   CRITICAL: These styles MUST be OUTSIDE @layer to override the parent theme.

   The BuddyX parent theme adds ::after pseudo-elements with Font Awesome icons
   (content: "\f107") to .menu-item-has-children. When Font Awesome is not loaded
   (dequeued for performance), these render as square boxes.

   Since parent theme styles are NOT in a CSS layer, layered styles cannot override
   them - unlayered CSS always wins over layered CSS in the cascade.

   @see https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#description
   @updated 2026-02-02
   ========================================================================== */

/* Hide the Font Awesome ::after pseudo-elements that show as squares */
.nav--toggle-sub li.menu-item-has-children::after,
.nav--toggle-sub li.menu-item--has-toggle::after,
.main-navigation li.menu-item-has-children::after,
.primary-menu-container li.menu-item-has-children::after,
#site-navigation li.menu-item-has-children::after,
.site-header .menu-item-has-children::after,
#masthead .menu-item-has-children::after {
    display: none !important;
    content: none !important;
}

/* Also hide in sub-menus */
.nav--toggle-sub li.menu-item-has-children .sub-menu li::after,
.main-navigation .sub-menu .menu-item-has-children::after {
    display: none !important;
    content: none !important;
}

/* Ensure the .dropdown span container is visible and properly positioned */
.nav--toggle-sub .dropdown,
.main-navigation .dropdown,
.menu-item-has-children > .dropdown {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static;
    margin-left: 4px;
    width: auto;
    height: auto;
}

/* Style the dropdown-symbol as a pure CSS chevron */
.nav--toggle-sub .dropdown-symbol,
.main-navigation .dropdown-symbol,
.menu-item-has-children .dropdown-symbol,
i.dropdown-symbol {
    display: block !important;
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    font-size: 0;
    line-height: 0;
    font-family: inherit;
    font-style: normal;
    /* Reset any Font Awesome styling */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* Remove any Font Awesome ::before from the symbol */
.dropdown-symbol::before,
i.dropdown-symbol::before {
    display: none !important;
    content: none !important;
}

/* Hover state for chevron */
.menu-item-has-children:hover .dropdown-symbol,
.menu-item-has-children:hover > .dropdown .dropdown-symbol {
    border-color: var(--hm-primary, var(--hm-primary));
}

/* Sub-menu arrows point right */
.sub-menu .dropdown-symbol,
.sub-menu .dropdown .dropdown-symbol {
    transform: rotate(-45deg);
}

/* Dropdown width: auto-size to content, no text wrapping */
.main-navigation .sub-menu,
.primary-menu .sub-menu {
    width: max-content !important;
    min-width: 180px !important;
    max-width: 320px !important;
}

.main-navigation .sub-menu a,
.primary-menu .sub-menu a {
    white-space: nowrap !important;
}


/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   Using !important here is appropriate as this is a user preference override
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .site-header,
    #masthead,
    .mobile-bottom-nav,
    .mobile-menu-sheet,
    .mobile-menu-backdrop,
    .mobile-nav-item,
    .dropdown-toggle,
    .hm-back-to-top,
    .back-to-top {
        transition: none !important;
    }

    .mobile-nav-item:active .hm-icon,
    .mobile-menu-item:active .hm-icon {
        transform: none !important;
    }
}


/* ==========================================================================
   PRINT STYLES
   Using !important here is appropriate for print media overrides
   ========================================================================== */

@media print {
    .mobile-bottom-nav,
    .mobile-menu-sheet,
    .mobile-menu-backdrop,
    .hm-back-to-top,
    .back-to-top {
        display: none !important;
    }

    .site-header,
    #masthead {
        position: static !important;
        box-shadow: none !important;
    }
}
} /* End @layer components */