/**
 * ============================================================================
 * SENTINEL COMMAND - CUSTOM OVERRIDES
 * ============================================================================
 * 
 * Use this file for your custom CSS overrides and additions.
 * This file loads LAST, so any styles here will override the base theme.
 * 
 * GUIDELINES:
 * - Keep overrides organized by section
 * - Use specific selectors when overriding base styles
 * - Document any significant changes
 * - Consider using CSS custom properties for consistency
 * 
 * SECTIONS:
 * 1. Color Overrides
 * 2. Typography Overrides
 * 3. Component Overrides
 * 4. Layout Overrides
 * 5. Page-Specific Styles
 * 6. WordPress-Specific Overrides
 * 7. Custom Additions
 * 
 * ============================================================================
 */

/* ============================================================================
 * 1. COLOR OVERRIDES
 * ============================================================================
 * 
 * Override theme colors by redefining CSS custom properties.
 * Example:
 * 
 * :root {
 *     --primary: 210 100% 50%;
 *     --sentinel-blue: hsl(210 100% 50%);
 * }
 * 
 * ============================================================================ */

/* Add your color overrides here */


/* ============================================================================
 * 2. TYPOGRAPHY OVERRIDES
 * ============================================================================
 * 
 * Override fonts, sizes, line heights, etc.
 * Example:
 * 
 * :root {
 *     --font-sans: 'Your Font', sans-serif;
 * }
 * 
 * h1 {
 *     font-size: 4rem;
 * }
 * 
 * ============================================================================ */

/* Add your typography overrides here */


/* ============================================================================
 * 3. COMPONENT OVERRIDES
 * ============================================================================
 * 
 * Override specific component styles.
 * Example:
 * 
 * .btn-sentinel-blue {
 *     border-radius: 0;
 * }
 * 
 * ============================================================================ */

/* Add your component overrides here */


/* ============================================================================
 * 4. LAYOUT OVERRIDES
 * ============================================================================
 * 
 * Override layout-related styles.
 * Example:
 * 
 * .container {
 *     max-width: 1200px;
 * }
 * 
 * ============================================================================ */

/* Add your layout overrides here */


/* ============================================================================
 * 5. PAGE-SPECIFIC STYLES
 * ============================================================================
 * 
 * Styles for specific pages using body classes.
 * Example:
 * 
 * .page-id-123 .hero {
 *     min-height: 50vh;
 * }
 * 
 * .home .hero {
 *     background-image: url('custom-bg.jpg');
 * }
 * 
 * ============================================================================ */

/* Add your page-specific styles here */


/* ============================================================================
 * 6. WORDPRESS-SPECIFIC OVERRIDES
 * ============================================================================
 * 
 * Override WordPress-generated styles (block editor, widgets, etc.)
 * 
 * ============================================================================ */

/* WordPress Admin Bar offset */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* Block Editor Alignment */
.alignwide {
    margin-left: -2rem;
    margin-right: -2rem;
    max-width: calc(100% + 4rem);
}

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

/* WordPress Image Classes */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.wp-block-image.aligncenter {
    text-align: center;
}

.wp-block-image.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.wp-block-image.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

/* WordPress Captions */
.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
figcaption {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.5rem;
}

/* WordPress Gallery */
.wp-block-gallery {
    display: grid;
    gap: 1rem;
}

/* Screen Reader Text (WordPress accessibility) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    background-color: hsl(var(--background));
    border-radius: var(--radius);
    box-shadow: 0 0 2px 2px hsl(var(--ring) / 0.5);
    clip: auto !important;
    color: hsl(var(--foreground));
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/* ============================================================================
 * 7. CUSTOM ADDITIONS
 * ============================================================================
 * 
 * Add any completely new styles here.
 * 
 * ============================================================================ */

/* Add your custom styles here */

/* ============================================================================
 * 8. MEGA MENU ENHANCEMENTS
 * ============================================================================
 * 
 * Enhanced mega menu styling to match the React original design.
 * Uses the same visual language: icons, descriptions, color-coded columns.
 * 
 * ============================================================================ */

/* Mega Menu Container - Positioned below button */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-10px);
    padding-top: 0.5rem;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-out;
    pointer-events: none;
}

.mega-menu.is-active,
.group:hover > .mega-menu,
.relative:hover > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Default: mega menu (Services) - 5 columns */
.mega-menu-content {
    min-width: 1100px;
    max-width: 1400px;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    box-shadow: 
        0 25px 50px -12px hsl(0 0% 0% / 0.5),
        0 0 1px hsl(var(--primary) / 0.1);
    padding: 2rem 2.5rem;
    backdrop-filter: blur(10px);
}

/* Grid layout for columns - 5 columns for Services */
.mega-menu-content > .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
}

/* 2-column layout for Education menu - WIDER */
.mega-menu.cols-2 .mega-menu-content {
    min-width: 650px;
    max-width: 800px;
}

.mega-menu.cols-2 .mega-menu-content > .grid {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 3rem;
}

/* Simple dropdown (Resources) - single column, stacked vertically */
.mega-menu.simple-dropdown .mega-menu-content {
    min-width: 300px;
    max-width: 360px;
    padding: 1rem 1.25rem;
}

.mega-menu.simple-dropdown .mega-menu-content > .grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* In simple dropdown, menu-column acts as a regular item */
.mega-menu.simple-dropdown .menu-column {
    display: block;
}

.mega-menu.simple-dropdown .mega-menu-footer {
    display: none;
}

/* Responsive: 3 columns on large screens */
@media (max-width: 1400px) {
    .mega-menu-content {
        min-width: 800px;
        max-width: 1000px;
    }
    
    .mega-menu-content > .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Responsive: 2 columns on medium screens */
@media (max-width: 1100px) {
    .mega-menu-content {
        min-width: 600px;
        max-width: 750px;
    }
    
    .mega-menu-content > .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Menu Column Container */
.mega-menu .menu-column {
    display: flex;
    flex-direction: column;
}

/* Hide ONLY column headers that have no sub-menu items */
/* This targets columns with a header but empty/missing menu-column-items */
.mega-menu .menu-column:has(.column-header-wrap):not(:has(.menu-column-items)) {
    display: none;
}

.mega-menu .menu-column:has(.column-header-wrap):has(.menu-column-items:empty) {
    display: none;
}

/* Menu Column Items Container */
.mega-menu .menu-column-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.5rem;
}

/* Hide empty menu-column-items */
.mega-menu .menu-column-items:empty {
    display: none;
}

/* Column Headers */
.mega-menu .column-header-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

/* Color-coded borders */
.mega-menu .column-header-wrap.color-red {
    border-color: hsl(357 90% 58% / 0.2);
}

.mega-menu .column-header-wrap.color-blue {
    border-color: hsl(196 68% 66% / 0.2);
}

.mega-menu .column-header-wrap.color-cyan {
    border-color: hsl(196 62% 54% / 0.2);
}

.mega-menu .column-header-wrap.color-primary {
    border-color: hsl(var(--primary) / 0.2);
}

/* Icon box in column header */
.mega-menu .column-header-icon {
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.mega-menu .color-red .column-header-icon {
    background-color: hsl(357 90% 58% / 0.1);
}

.mega-menu .color-blue .column-header-icon {
    background-color: hsl(196 68% 66% / 0.1);
}

.mega-menu .color-cyan .column-header-icon {
    background-color: hsl(196 62% 54% / 0.1);
}

.mega-menu .color-primary .column-header-icon {
    background-color: hsl(var(--primary) / 0.1);
}

/* Column header text */
.mega-menu .column-header-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mega-menu .color-red .column-header-text {
    color: hsl(357 90% 58%);
}

.mega-menu .color-blue .column-header-text {
    color: hsl(196 68% 66%);
}

.mega-menu .color-cyan .column-header-text {
    color: hsl(196 62% 54%);
}

.mega-menu .color-primary .column-header-text {
    color: hsl(var(--primary));
}

/* Menu Items */
.mega-menu .menu-item-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    text-decoration: none;
}

.mega-menu .menu-item-link:hover {
    background-color: hsl(var(--accent) / 0.5);
}

/* Ensure menu items fill available width */
.mega-menu .menu-column {
    min-width: 0;
}

/* Icon styling */
.mega-menu .menu-item-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1875rem;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s ease;
}

.mega-menu .menu-item-icon svg {
    width: 100%;
    height: 100%;
}

/* Hover icon colors */
.mega-menu .color-red .menu-item-link:hover .menu-item-icon,
.mega-menu .menu-item-link.hover-red:hover .menu-item-icon {
    color: hsl(357 90% 58%);
}

.mega-menu .color-blue .menu-item-link:hover .menu-item-icon,
.mega-menu .menu-item-link.hover-blue:hover .menu-item-icon {
    color: hsl(196 68% 66%);
}

.mega-menu .color-cyan .menu-item-link:hover .menu-item-icon,
.mega-menu .menu-item-link.hover-cyan:hover .menu-item-icon {
    color: hsl(196 62% 54%);
}

.mega-menu .color-primary .menu-item-link:hover .menu-item-icon,
.mega-menu .menu-item-link.hover-primary:hover .menu-item-icon {
    color: hsl(var(--primary));
}

/* Menu item content - BLOCK display for title/desc separation */
.mega-menu .menu-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mega-menu .menu-item-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    line-height: 1.3;
    transition: color 0.15s ease;
}

/* Hover title colors */
.mega-menu .color-red .menu-item-link:hover .menu-item-title {
    color: hsl(357 90% 58%);
}

.mega-menu .color-blue .menu-item-link:hover .menu-item-title {
    color: hsl(196 68% 66%);
}

.mega-menu .color-cyan .menu-item-link:hover .menu-item-title {
    color: hsl(196 62% 54%);
}

.mega-menu .color-primary .menu-item-link:hover .menu-item-title {
    color: hsl(var(--primary));
}

/* Menu item description - BLOCK display on new line */
.mega-menu .menu-item-desc {
    display: block;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Bottom CTA in mega menu */
.mega-menu-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mega-menu-footer-text {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.mega-menu-footer-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--primary));
    transition: text-decoration 0.15s ease;
}

.mega-menu-footer-link:hover {
    text-decoration: underline;
}

/* ============================================================================
 * 9. PORTAL DROPDOWN ENHANCEMENTS
 * ============================================================================ */

.portal-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
    pointer-events: none;
}

.group:hover .portal-dropdown-menu,
#portal-dropdown:hover .portal-dropdown-menu,
.portal-dropdown-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Portal item styling */
.portal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    transition: all 0.2s ease;
}

.portal-item:hover {
    transform: translateX(4px);
}

/* Portal item - Red Team */
.portal-item-red {
    border-color: hsl(357 90% 58% / 0.3);
    background-color: hsl(357 90% 58% / 0.1);
}

.portal-item-red:hover {
    background-color: hsl(357 90% 58% / 0.15);
}

.portal-item-red .portal-item-icon,
.portal-item-red .portal-item-title {
    color: hsl(357 90% 58%);
}

/* Portal item - Blue Team */
.portal-item-blue {
    border-color: hsl(196 68% 66% / 0.3);
    background-color: hsl(196 68% 66% / 0.1);
}

.portal-item-blue:hover {
    background-color: hsl(196 68% 66% / 0.15);
}

.portal-item-blue .portal-item-icon,
.portal-item-blue .portal-item-title {
    color: hsl(196 68% 66%);
}

/* Portal item - Cyan (Phish Enterprise) */
.portal-item-cyan {
    border-color: hsl(196 62% 54% / 0.3);
    background-color: hsl(196 62% 54% / 0.1);
}

.portal-item-cyan:hover {
    background-color: hsl(196 62% 54% / 0.15);
}

.portal-item-cyan .portal-item-icon,
.portal-item-cyan .portal-item-title {
    color: hsl(196 62% 54%);
}

/* Portal item - Primary (CyberEDU) */
.portal-item-primary {
    border-color: hsl(var(--primary) / 0.3);
    background-color: hsl(var(--primary) / 0.1);
}

.portal-item-primary:hover {
    background-color: hsl(var(--primary) / 0.15);
}

.portal-item-primary .portal-item-icon,
.portal-item-primary .portal-item-title {
    color: hsl(var(--primary));
}

/* Portal item inner elements */
.portal-item-icon-wrap {
    padding: 0.625rem;
    border-radius: 0.5rem;
    background-color: hsl(var(--background) / 0.5);
}

.portal-item-content {
    flex: 1;
}

.portal-item-title {
    font-size: 0.9375rem;
    font-weight: 500;
}

.portal-item-desc {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}

.portal-item-arrow {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.portal-item:hover .portal-item-arrow {
    opacity: 1;
}

/* ============================================================================
 * 10. NAV LINK ACTIVE STATE
 * ============================================================================ */

.nav-link.is-active,
.nav-link[aria-current="page"] {
    color: hsl(var(--foreground));
    background-color: hsl(var(--accent) / 0.5);
}

/* ============================================================================
 * 11. MOBILE MENU ENHANCEMENTS
 * ============================================================================ */

.mobile-menu {
    background-color: hsl(var(--background));
    border-top: 1px solid hsl(var(--border) / 0.5);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.mobile-nav-menu .menu-item {
    border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.mobile-nav-menu .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    font-weight: 500;
    color: hsl(var(--foreground));
    transition: color 0.15s ease;
}

.mobile-nav-menu .menu-item-has-children > a::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.mobile-nav-menu .menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
}

.mobile-nav-menu .sub-menu {
    padding-bottom: 0.75rem;
}

.mobile-nav-menu .sub-menu .menu-item {
    border-bottom: none;
}

.mobile-nav-menu .sub-menu .menu-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: hsl(var(--foreground) / 0.8);
}

.mobile-nav-menu .sub-menu .menu-item a:hover {
    color: hsl(var(--primary));
}

/* ============================================================================
 * 12. HEADER HEIGHT FIX
 * ============================================================================ */

/* Ensure header has proper height */
#site-header {
    transition: box-shadow 0.3s ease;
}

/* Content padding to account for fixed header */
/* .site-main {
    padding-top: 4.5rem; /* h-18 = 4.5rem 
} */

/* @media (min-width: 1024px) { */
    /* .site-main {
        padding-top: 6rem; /* h-24 = 6rem */
    /* } */ 
/* } */

/* Header height custom properties */
:root {
    --header-height: 4.5rem;
    --header-height-lg: 6rem;
}

@media (min-width: 1024px) {
    :root {
        --header-height: 6rem;
    }
}