/* =========================================
   1. GLOBAL & ROOT 
   ========================================= */
:root {
    --bg-main: #F4F4F4;
    --bg-dark: #161413;
    --bg-light: #FFFFFF;
    --accent-red: #e52935;
    --text-on-dark: #FFFFFF;
    --text-on-light: #161413;
    --border-color: #DDDDDD;
    --radius: 8px;
    --transition: 0.3s ease;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg:24px;
    --padding-main: 75px;
    
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: var(--bg-main);
    
}

/* =========================================
   2. HEADER & NAV & TEXT
   ========================================= */
.navbar {
    padding: 10px 20px;
    background: var(--text-on-dark); 
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--accent-red);
}

.logo {
    height: 40px; 
}

.header {
    text-align: center;
    padding: 40px var(--padding-main);
    background: var(--bg-dark);
    color: var(--text-on-dark);
    border-bottom: 1px solid var(--border-color);
}

.header h1, 
.header p {
    margin: 0;
    color: var(--text-on-dark); 
}



/* =========================================
   4. LAYOUT (THE HUB GRID)
   ========================================= */
.container {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
   padding: var(--spacing-md);
   width: 100%;
   box-sizing: border-box;
}

.top-row-item {
    width: 100%;
    justify-self: center;
    max-width: 1200px;
    margin: 0 auto;  
}

/* =========================================
   5. SECTIONS & SPECIFIC PATTERN MATRICES
   ========================================= */
.section {
    min-width: 25px;
    background-color: transparent;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    border: 2px solid var(--bg-dark);
    border-radius: 20px; 
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    margin: 0 auto 20px auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.section h2 {
    color: var(--text-on-light);
    margin: 0;        
    font-size: 1.4rem;
    font-weight: bold;
    width: 15%;
            
}



/* =========================================
   6. RESPONSIVE BREAKPOINTS 
   ========================================= */
/* Tablet View */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Mobile View */
@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
    }
    .atlas {
        letter-spacing: 10px; /* Reduces spacing so title fits on phones */
    }
}

/* =========================================
   7. BUTTON GRIDS 
   ========================================= */
.button-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    flex-grow: 1;
}

.button-matrix .card {
    width: 100%;

}


.grid {
    display: flex;
    flex-direction: column;
    width: 75%; 
    gap: 10px;
    align-items: flex-start; /* Ensures buttons start at the left edge */
}

/* =========================================
   8. MASTER CARD BUTTONS
   ========================================= */
.card {
    background-color: var(--bg-light);
    color: var(--bg-dark);
    padding: 12px 18px;
    border-radius: 6px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    border: none;
    transition: all var(--transition); 
    border-left: 4px solid transparent; 
    cursor: pointer;
}

/* THE HOVER EFFECT (The "Nudge") */
.card:hover, 
.grid a.card:hover, 
.grid button.card:hover,
.dropdown:hover  .card { 
    background-color: var(--bg-main); 
    color: var(--accent-red);
    padding-left: 25px;
    border-left: 8px solid var(--accent-red);
    transform: translateX(5px);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.1); 
}

/* =========================================
   9. SPECIAL CARD SIZES (GRID OVERRIDES)
   ========================================= */
/* These only apply if the cards are direct children of a grid container */
.card.wide {
   grid-column: span 2;
}

.card.tall {
   grid-row: span 2;
}

/* =========================================
   10. NAVIGATION DROPDOWNS
   ========================================= */
/* =========================================
   10. NAVIGATION DROPDOWNS
   ========================================= */
.dropdown {
   position: relative;
   display: inline-block; /* Keeps dropdown container bound to its content */
}

/* Hide the dropdown content by default */
.dropdown-content {
   display: none; 
   position: absolute; /* Floats menu over other elements */
   top: 100%;          /* Appears directly below the trigger */
   left: 0;
   min-width: 160px;
   background: var(--bg-dark);
   padding: 0;         /* Clear padding here, let links handle padding */
   z-index: 10;
   box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

/* Show the menu on hover OR when .open class is active */
.dropdown:hover .dropdown-content, 
.dropdown.open .dropdown-content {
    display: block;
}

/* Sub-menu links styling */
.dropdown-content a {
    color: var(--bg-main);
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Makes the entire row clickable */
    font-size: 0.9rem;
    text-align: left;
    border-left: 3px solid transparent; 
    transition: all 0.2s ease;
}

/* Sub-menu hover effect (The "Nudge") */
.dropdown-content a:hover {
    color: var(--accent-red);
    background-color: var(--bg-main); /* Makes link visible against dark menu */
    border-left: 3px solid var(--accent-red);
    padding-left: 24px; /* The Nudge */
}




/* =========================================
   11. ATLAS BRAND TITLE 
   ========================================= */
.atlas {
   font-size: clamp(40px, 8vw, 100px);
   letter-spacing: clamp(4px, 2vw, 16px);
   text-align: center;
   color: var(--accent-red);
}

/* =========================================
   12. SEARCH RESULTS (THE PUSH-DOWN)
   ========================================= */
.results-container {
    background: var(--bg-main);
    border-bottom: 4px solid var(--accent-red);
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: slideDown 0.4s ease-out; /* Smooth entrance */
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Detailed Store Output Layout */
.store-details-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--bg-main);
    padding: 10px;
    color: var(--text-on-light);
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent-red);
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.store-results.hidden {
   display: none;
}



/* =========================================
   13. STORE DETAILS OUTPUT
   ========================================= */
.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent-red);
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two-column layout like the official form */
    gap: 15px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--bg-main);
}

.detail-item label {
    font-size: 0.75rem;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
}

.detail-item.wide {
     grid-column: span 1;
 } /* Full width for the address */

.close-btn {
    background: var(--bg-dark);
    color: var(--bg-main);
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s;
}

.close-btn:hover {
    background: var(--accent-red);
}

/* =========================================
   14. DEPOT KPI RIBBON (SNOW Metrics)
   ========================================= */
.kpi-container {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 20px;
    padding: 30px;
}

.kpi-box {
    background: var(--bg-dark);
    padding: 20px;
    border-radius: 6px;
    min-width: 180px;
    text-align: center;
    border-top: 4px solid var(--accent-red);
    transition: transform 0.3s ease, border-color 0.3s;
}

.kpi-box:hover {
    transform: translateY(-5px); /* Gentle lift effect */
    border-color: var(--accent-red);
}

.kpi-box label {
    display: block;
    color: #aaa;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.kpi-box .number {
    color: var(--text-on-dark);
    font-size: 2.2rem;
    font-weight: bold;
    display: block;
}

.kpi-box .number.highlight {
    color: var(--accent-red); 
}





.section:last-child, .dropdown-content a {
    text-align: right;
    padding-right: 20px;
}


/* Specifically for the Contact Info in the Team section */
.contact-info p {
    color: var(--text-on-light); 
    margin: 5px 0 15px 0;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
}

.contact-info, .accent-text {
    color: var(--accent-red);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-size: 1rem;
}

.contact-info small {
    font-size: 1rem;
    color: var(--accent-red); 
}

.section, .grid, 
.section, .contact-info { 
    background-color: var(--bg-main);
    border-radius: var(--radius);
    padding: 20px;
    /*width: 50%; */               
    box-sizing: border-box;    
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer {
    text-align: center;
    padding: 20px;
    background: var(--bg-dark);
    color: var(--text-on-dark);
    font-size: 0.8rem;
}