/* ==========================================================================
   1. GLOBAL RESETS & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}

/* Common Layout Container Layout */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overflow-hidden {
    overflow: hidden;
    width: 100%;
}


/* ==========================================================================
   2. DESKTOP INTERFACE LAYOUT (Default Behavior)
   ========================================================================== */
.site-header {
    width: 100%;
    position: relative;
    z-index: 1000;
}

/* --- Top Utility Bar --- */
.top-bar {
    background-color: #222222;
    color: #bbbbbb;
    font-size: 0.85rem;
}

.top-bar .container {
    padding: 8px 8px 8px 8px; 
}

.top-bar-left, 
.top-bar-right {
    display: flex;
    gap: 24px;
}

.top-bar a {
    color: #bbbbbb;
    text-decoration: none;
    transition: color 0.2s ease;
}

.top-bar a:hover {
    color: #ffffff;
}

/* Completely hide mobile header labels/rows on desktop screens */
.top-header-row {
    display: none;
}

/* --- Bottom Main Navigation Bar (Crimson Red #DC143C) --- */
.main-bar {
    background-color: #DC143C; /* Swapped out the green theme for clean Crimson */
    color: #ffffff;
}

.main-bar .container {
    flex-direction: row; 
}

.logo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0; 
}

/* Brand Anchor Block Container */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Responsive Rules specialized for your Wide Logo format */
.logo-img {
    max-height: 40px;      /* Safeguards vertical proportions on desktop layout models */
    width: auto;           /* Solves aspect-ratio calculations natively for a wide footprint */
    max-width: 220px;      /* Keeps extra wide horizontal layouts from pushing desktop links out of bounds */
    display: block;        
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 24px;
}

.nav-list a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 0;
    transition: opacity 0.2s ease;
}

.nav-list a:hover {
    opacity: 0.8;
}

/* Desktop defaults: override mobile collapse and keep navigation links open */
.nav-collapse-wrapper {
    display: block;
    width: auto;
}

.top-toggle,
.main-toggle {
    display: none;
}


/* ==========================================================================
   3. RESPONSIVE MOBILE OVERRIDES (Viewport under 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .container {
        width: 88%;
    }

    /* Core Height Accordion Layout Mechanics for both menus */
    .nav-collapse-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        width: 100%;
        transition: grid-template-rows 0.35s ease-in-out;
    }

    /* Activated via JS class toggles */
    .nav-collapse-wrapper.show {
        grid-template-rows: 1fr;
    }

    /* --- Top Utility Bar Mobile Adjustments --- */
    .top-header-row {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        width: 100% !important;
        padding: 22px 0; 
    }

    .top-mobile-label {
        display: block !important;
        font-size: 0.9rem;
        font-weight: bold;
        color: #ffffff;
    }

    .top-bar .container {
        padding: 0;
        flex-direction: column;
        gap: 16px;
    }

    /* Padding added INSIDE the expanding wrapper content for a clean look */
    .top-bar .top-collapse.show .container {
        padding-top: 10px;
        padding-bottom: 24px;
    }

    .top-bar-left, 
    .top-bar-right {
        flex-direction: column;
        align-items: center;
        gap: 16px; 
        width: 100%;
    }

    /* --- Bottom Main Navigation Mobile Adjustments --- */
    .main-bar .container {
        flex-direction: column;
        align-items: stretch;
    }

    .logo-row {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        width: 100% !important;
        padding: 15px 0; 
    }

    /* Slightly compress the wide asset profile limit on compact viewports */
    .logo-img {
        max-height: 35px;
        max-width: 180px; 
    }

    /* --- Shared Toggle Configuration --- */
    .top-toggle,
    .main-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 24px;  
        height: 18px;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        padding: 0 !important;
    }

    /* Shared Toggle Line Styles */
    .top-toggle span,
    .main-toggle span {
        width: 100%;
        height: 3px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        display: block;
    }

    /* Top Button Transform 'X' States */
    .top-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .top-toggle.open span:nth-child(2) { opacity: 0; }
    .top-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Main Button Transform 'X' States */
    .main-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .main-toggle.open span:nth-child(2) { opacity: 0; }
    .main-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Mobile Vertical Link Formatting inside main navigation drop-down */
    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding: 10px 0 25px 0;
    }
}


/* ==========================================================================
   4. SAMPLE CORE PAGE CONTENT
   ========================================================================== */
.content-area {
    padding: 60px 0;
    text-align: center;
}

.content-area h1 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.content-area p {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}


/* ==========================================================================
   ADDITIONAL MOBILE COMFORT PADDING
   ========================================================================== */
@media (max-width: 768px) {
    /* Safely increases row height without overriding your layout grid balances */
    .top-header-row {
		padding-left: 10px !important;
		padding-right: 10px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

/* ==========================================================================
   COLOR OVERRIDES FOR THE MAIN NAVIGATION & HAMBURGER
   ========================================================================== */

/* 1. Force the Main Navigation Bar background to White */
.main-bar {
    background-color: #ffffff !important;
}

/* 2. Change the Desktop & Mobile Links inside the Main Bar to Dark Gray/Black for contrast */
.main-bar .logo,
.main-bar .nav-list a {
    color: #333333 !important;
}

/* 3. Force the Main Hamburger Menu Lines to Blue */
.main-toggle span {
    background-color: #0066cc !important; /* Adjust this hex code to match your preferred shade of blue */
}

/* ==========================================================================
   GLOBAL PAGE BODY BACKGROUND IMAGE OVERRIDE
   ========================================================================== */
body {
    /* 1. Sets your image from the images folder as the full page background */
    background-image: url('../images/meeting4_2.png') !important;
    
    /* 2. Keeps the image centered and pinned to the screen as you scroll */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    
    /* 3. A fallback color matching the main layout theme */
    background-color: #f9f9f9 !important; 
}

/* 4. Keep your Main Navbar White and Hamburger Blue as requested previously */
.main-bar {
    background-color: #ffffff !important;
    background-image: none !important; /* Clears the previous test */
}

.main-bar .logo,
.main-bar .nav-list a {
    color: #333333 !important;
}

.main-toggle span {
    background-color: #0066cc !important;
}


/* ==========================================================================
   BODY BACKGROUND RESPONSIVE CALIBRATION
   ========================================================================== */
body {
    /* Changes attachment to scroll so it responds perfectly to mobile viewport resizing */
    background-attachment: scroll !important;
    background-position: top center !important;
}

/* ==========================================================================
   CONTENT AREA READABILITY BOX (Glassmorphism Card Effect)
   ========================================================================== */
.content-area {
    /* 1. Sets up a comfortable reading width on large screens */
    width: 90%;
    max-width: 800px; 
    margin: 1px auto !important;
    
    /* 2. Generates a cozy, spacious padding grid inside the text block */
    padding: 40px !important;
    
    /* 3. A semi-transparent white backdrop that allows the photo to peek through slightly */
    background-color: rgba(255, 255, 255, 0.92) !important;
    
    /* 4. Modern styling features: soft rounded corners and a subtle drop shadow */
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    
    /* 5. Sharp text contrast settings */
    text-align: left !important; /* Changes text to left-aligned for easier reading */
}

/* Fixes internal typography scaling for headings and paragraphs */
.content-area h1 {
    font-size: 2.4rem !important;
    color: #111111 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #0066cc !important; /* Adds a clean blue accent line under titles */
    padding-bottom: 10px !important;
}

.content-area p {
    font-size: 1.1rem !important;
    color: #222222 !important;
    line-height: 1.8 !important;
}

/* Responsive adjustments for the reading card on small viewports */
@media (max-width: 768px) {
    .content-area {
        padding: 25px !important;
        margin: 30px auto !important;
    }
    
    .content-area h1 {
        font-size: 1.8rem !important;
    }
}

/* ==========================================================================
   PREVENT NAVIGATION BARS FROM CLIPPING THE BACKGROUND IMAGE
   ========================================================================== */
body {
    /* 1. Forces the image's top edge to align perfectly beneath the desktop nav height */
    background-position: center 80px !important;
}

@media (max-width: 768px) {
    body {
        /* 2. Adjusts the alignment value to match your mobile utility layout spacing */
        background-position: center 95px !important;
    }
}

/* ==========================================================================
   REMOVE THE BLUE UNDERLINE FROM THE HEADER H1 TITLE
   ========================================================================== */
.content-area h1 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   MOBILE CONTENT STACKING ORDER ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Turns the content card container into a vertical flex stack */
    .content-area {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Forces your welcome title header element to always jump to the top slot */
    .content-area h1 {
        order: 1 !important;
        width: 100% !important;
    }

    /* 3. Assigns secondary paragraphs or other content elements below it */
    .content-area p {
        order: 2 !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   CONTENT AREA SEPARATION & MOBILE STACKING COMPLIANCE
   ========================================================================== */
.content-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* Unified internal spacing separation layer */
}

/* --- Mobile Specific Ordering Calibration Rules --- */
@media (max-width: 768px) {
    /* 1. Forces your welcome title header element to lock into slot number 1 */
    .welcome-title {
        order: 1 !important;
    }

    /* 2. Forces secondary copy, paragraphs, and lists to move to slot number 2 */
    .secondary-content {
        order: 2 !important;
    }

    /* 3. Forces the newly added icon framework to drop into slot number 3 */
    .icon-grid {
        order: 3 !important;
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   AUTO-SIZING RESPONSIVE ICON GRID SYSTEM
   ========================================================================== */
.icon-grid {
    display: grid !important;
    /* Auto-fit and minmax tell the browser to make columns dynamically based on layout math */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 30px;
}

/* Individual Icon Box Card Styling */
.icon-card {
    background-color: rgba(0, 0, 0, 0.03) !important; /* Extremely soft shadow tint */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

/* Light lift animation when hover styling is activated on desktops */
.icon-card:hover {
    transform: translateY(-4px) !important;
    background-color: rgba(0, 102, 204, 0.04) !important; /* Soft blue tint highlight matching your hamburger */
    border-color: rgba(0, 102, 204, 0.2) !important;
}

/* Image element rules to prevent bloating or asset warping */
.grid-icon {
    width: 50px !important;    /* Forces icon graphics to standard desktop boundaries */
    height: 50px !important;   
    object-fit: contain !important; /* Ensures the graphic proportions do not skew or stretch */
    margin-bottom: 12px !important;
}

.icon-card h3 {
    font-size: 1rem !important;
    color: #333333 !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   FORCE ICONS SIDE-BY-SIDE (HORIZONTAL SYSTEM OVERRIDE)
   ========================================================================== */
.icon-grid {
    display: flex !important;
    flex-direction: row !important;       /* Forces row layout on all viewports */
    flex-wrap: nowrap !important;         /* Prevents icons from snapping to a new line */
    justify-content: space-between !important; /* Spreads cards out evenly */
    gap: 12px !important;                 /* Snug spacing to fit small screens */
    width: 100% !important;
    margin-top: 30px !important;
    overflow-x: auto !important;          /* Safeguard: enables swipe scrolling if viewport gets extremely tiny */
}

/* Individual Icon Box Card Proportions */
.icon-card {
    flex: 1 1 0% !important;              /* Forces cards to scale down symmetrically and share space equally */
    min-width: 0 !important;              /* Allows the box container to shrink safely without clipping */
    background-color: rgba(0, 0, 0, 0.03) !important; 
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 15px 8px !important;         /* Slightly optimized internal breathing room for side-by-side viewports */
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Image element auto-scaling parameters */
.grid-icon {
    width: 35px !important;               /* Scaled down slightly to fit narrow smartphone layouts side-by-side */
    height: 35px !important;   
    object-fit: contain !important; 
    margin-bottom: 8px !important;
}

.icon-card h3 {
    font-size: 0.85rem !important;        /* Clean, legible text footprint that avoids word wrapping */
    color: #333333 !important;
    font-weight: 600 !important;
    word-break: break-word !important;
}

/* Ensure the cards look balanced if hover rules are triggered */
.icon-card:hover {
    transform: translateY(-4px) !important;
    background-color: rgba(0, 102, 204, 0.04) !important; 
    border-color: rgba(0, 102, 204, 0.2) !important;
}

/* ==========================================================================
   TIGHTEN GAP BETWEEN WELCOME TITLE AND PARAGRAPH
   ========================================================================== */
/* 1. Strips out the bottom spacing margin from the main title */
.content-area h1.welcome-title {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
}

/* 2. Overrides the large parent gap specifically for the secondary content block */
.secondary-content {
    margin-top: -15px !important; /* Pulls the paragraph up closer to the title line */
}

/* 3. Ensures internal paragraphs within the block stay snug */
.secondary-content p {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Standard paragraph line spacing */
}


/* ==========================================================================
   PREVENT ICON TEXT FROM WRAPPING ON MOBILE SCREENS
   ========================================================================== */
.icon-card h3 {
    /* 1. Forces the text to lock onto a single line and never split */
    white-space: nowrap !important;
    word-break: normal !important;

    /* 2. Drops the font size slightly for mobile proportions */
    font-size: 0.8rem !important;
}

@media (max-width: 480px) {
    /* 3. Extra scale-down for extremely narrow mobile screens */
    .icon-card h3 {
        font-size: 0.7rem !important;
    }
    
    /* 4. Reduces padding on tight screens to give text more horizontal room */
    .icon-card {
        padding: 12px 4px !important;
    }
}

/* ==========================================================================
   INDEPENDENT OUTSIDE ICON CONTAINER STYLES
   ========================================================================== */
/* 1. Aligns the external independent icon box with your site's grid edges */
.independent-icon-wrapper {
    margin-top: -30px !important; /* Reduces vertical spacing gap below the white card */
    margin-bottom: 60px !important; /* Adds breathing room below the icons row */
}

/* 2. Style individual independent floating cards so they look structured on your backdrop */
.independent-icon-wrapper .icon-card {
    /* Gives cards their own independent semi-transparent white look */
    background-color: rgba(255, 255, 255, 0.92) !important; 
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    
    /* Adds a modern, subtle floating depth drop shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    
    /* Ensures cozy vertical spacing properties inside the individual cards */
    padding: 16px 8px !important;
}

/* Optional hover polish: lift the independent card slightly when mouse-hovered */
.independent-icon-wrapper .icon-card:hover {
    transform: translateY(-5px) !important;
    background-color: #ffffff !important; /* Goes solid bright white on hover */
    border-color: rgba(0, 102, 204, 0.3) !important; /* Highlights borders with your hamburger blue */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* --- Mobile Device Alignment Adjustments --- */
@media (max-width: 768px) {
    .independent-icon-wrapper {
        margin-top: -10px !important; /* Brings them tighter to the main text card on phones */
        margin-bottom: 40px !important;
        width: 88% !important; /* Matches mobile grid width boundaries */
    }
}

/* ==========================================================================
   DESKTOP ICON RESIZING GRAPHICS UPGRADES
   ========================================================================== */
@media (min-width: 769px) {
    /* 1. Increases vertical padding inside the desktop floating card squares */
    .independent-icon-wrapper .icon-card {
        padding: 30px 15px !important;
        border-radius: 12px !important; /* Softens corners on larger screens */
    }

    /* 2. Sizes up the icon graphics cleanly on desktop layouts */
    .independent-icon-wrapper .grid-icon {
        width: 65px !important;
        height: 65px !important;
        margin-bottom: 16px !important; /* Adds proportional space below the image */
    }

    /* 3. Increases text headings size slightly to match the larger icons */
    .independent-icon-wrapper .icon-card h3 {
        font-size: 1.1rem !important;
        font-weight: bold !important;
    }

    /* 4. Optimizes the horizontal spacing gap between your desktop cards */
    .independent-icon-wrapper .icon-grid {
        gap: 24px !important;
        margin-top: 40px !important;
    }
}

/* ==========================================================================
   LINK WRAPPERS & SHADOW GLOW MOUSE HOVER EFFECTS
   ========================================================================== */
/* 1. Normalizes the new link containers so they behave like standard block components */
.icon-link-wrapper {
    text-decoration: none !important; /* Strips away standard blue hyperlinks underlines */
    display: block !important;
    flex: 1 1 0% !important;           /* Preserves your perfect side-by-side horizontal scaling */
    min-width: 0 !important;
    color: inherit !important;        /* Prevents the browser from turning text purple or blue */
}

/* 2. Controls the smooth transitions for the desktop interaction glow */
.independent-icon-wrapper .icon-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* 3. The Shadow Glow Mouse Over Action (Optimized for Desktops) */
@media (min-width: 769px) {
    .icon-link-wrapper:hover .icon-card {
        /* Gently lifts the card box upward */
        transform: translateY(-6px) !important;
        
        /* Generates a soft, ambient blue glow matching your main hamburger theme color */
        box-shadow: 0 12px 30px rgba(0, 102, 204, 0.25) !important;
        
        /* Subtle borders tint shift to highlight the selection border bounds */
        border-color: rgba(0, 102, 204, 0.4) !important;
        background-color: #ffffff !important;
    }
}


/* ==========================================================================
   REMOVE THE GREY SPACE BELOW THE LOGO & HAMBURGER BAR
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Forces the main branding bar background container to be transparent */
    .main-bar {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* 2. Locks the white background exclusively onto the logo header row panel */
    .logo-row {
        background-color: #ffffff !important;
        width: 100% !important;
        margin: 0 !important;
        
        /* Adjusts internal margins to prevent any background color leaks */
        padding-left: 6% !important;
        padding-right: 6% !important;
    }

    /* 3. Forces the hidden dropdown drawer links to carry its own separate background style rules */
    .main-collapse {
        background-color: #ffffff !important;
        width: 100% !important;
        margin: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important; /* Elegant subtle divider line */
    }
}

/* ==========================================================================
   MOBILE LOGO ROW PADDING ADJUSTMENT
   ========================================================================== */
@media (max-width: 768px) {
    /* Tightens the bottom padding to pull the white bar flush against the logo image */
    .logo-row {
        padding-top: 15px !important;
        padding-bottom: 15px !important; /* Forces top and bottom padding to be perfectly identical */
        margin-bottom: 0 !important;
    }
}


/* ==========================================================================
   6. SITE FOOTER BANNER STYLES
   ========================================================================== */
.site-footer {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    display: block !important; /* Overrides global container flex defaults safely */
}

/* Semitransparent white background matching your icon cards */
.footer-content {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 20px 30px !important;
    
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.footer-content p {
    font-size: 0.9rem !important;
    color: #444444 !important;
    margin: 0 !important;
}

.footer-links {
    display: flex !important;
    gap: 20px !important;
}

.footer-links a {
    font-size: 0.9rem !important;
    color: #0066cc !important; /* Blue accent color matching your hamburger lines */
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: opacity 0.2s ease !important;
}

.footer-links a:hover {
    opacity: 0.7 !important;
    text-decoration: underline !important;
}

/* --- Mobile Responsive Stack Rule --- */
@media (max-width: 768px) {
    .site-footer {
        width: 88% !important; /* Matches your mobile layout boundaries */
        margin-top: 20px !important;
        margin-bottom: 30px !important;
    }
    
    .footer-content {
        flex-direction: column !important; /* Stacks text vertically on phones */
        gap: 12px !important;
        text-align: center !important;
        padding: 20px !important;
    }
}