/*
  index.css: Core Stylesheet
  Defines global variables, resets, base typography, and primary layout structure.
  Updated for ADA Compliance (Skip Links, Focus States) & Social Icons.
*/

/*
|--------------------------------------------------------------------------
| GOOGLE FONTS IMPORTS
|--------------------------------------------------------------------------
| Poppins (Sans-serif) for Headings
| Merriweather (Serif) for Body Text
*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* |--------------------------------------------------------------------------
| ACCESSIBILITY (ADA) STYLES - NEW
|--------------------------------------------------------------------------
*/

/* GLOBAL FOCUS STATES - Essential for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--color-primary-red);
    outline-offset: 2px;
}

/* SKIP LINK - Hidden until focused, allows jumping past nav */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary-red);
    color: white;
    padding: 1rem 2rem;
    z-index: 9999;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 8px 8px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: none; 
}

/* |--------------------------------------------------------------------------
| GLOBAL VARIABLES
|--------------------------------------------------------------------------
*/
:root {
  /* Spacing Units */
  --padding-sm: 1rem;
  --padding: 1.5rem;
  --padding-lg: 2.5rem;

  /* Header Height for Layout Shift Prevention - ADJUSTED FOR LARGER LOGO */
  --header-height-mobile: 140px; /* Increased from 120px for 100px logo on mobile */
  --header-height-tablet: 180px;
  --header-height-desktop: 200px; /* Increased from 180px to accommodate the 160px logo */

  /* Core Color Palette */
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #a0aec0; /* Lighter grey for secondary text */
  --color-light: #efefef;

  /* Brand Colors (Viking/Esports Theme) */
  --color-primary-red: #d2232a; /* Primary accent color */
  --color-mh-dark-red: #a51a20; /* Darker red for hover/active states (Added for Buttons) */
  --color-red-on-dark: #e16e72; /* Brand red lightened to pass WCAG AA (4.5:1) for small text on the dark backgrounds */
  --color-process-black: #020202; /* Very dark background */
  --color-dark-grey: #1a1a1a; /* Main background color */
  --color-medium-grey: #333; /* Border/Divider color */
  --color-text-dark: #121212; /* Color for text on light backgrounds */
  
  /* Missing colors used in main.css - NOW DEFINED */
  --color-mh-light-grey: #e0e0e0;
  --color-mh-dark-grey: #2a2a2a;

  /* Code Syntax Highlighting */
  --color-code-bg: #2d2d2d;
  --color-code-text: #cccccc;
  --color-code-keyword: #e3a95d;
  --color-code-string: #90ee90;
  --color-code-comment: #888888;

  /* Typography */
  --font-body: 'Merriweather', serif;
  --font-heading: 'Poppins', sans-serif;
  --font-viking-rune: 'Futhark', sans-serif; /* Placeholder for a rune-like font */
}

/* Base Typography */
body {
  font-family: var(--font-body);
  color: var(--color-white);
  background-color: var(--color-dark-grey);
  line-height: 1.7;
}

a {
  color: var(--color-primary-red);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-white);
  text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| GLOBAL CONTENT WRAPPER (CRITICAL FIX)
|--------------------------------------------------------------------------
*/
/* This definition was missing, causing layout width issues */
.main-content-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--padding);
}

/* Main Content Area */
main.main {
  /* Padding top to clear the fixed header */
  padding-top: var(--header-height-mobile);
  min-height: calc(100vh - var(--header-height-mobile));
  flex-grow: 1; /* Pushes the footer down */
}


@media (min-width: 48em) {
  main.main {
    padding-top: 150px; /* FIX: Set to 150px */
    min-height: calc(100vh - var(--header-height-tablet));
  }
}

@media (min-width: 64em) {
  main.main {
    padding-top: 150px; /* FIX: Set to 150px */
    min-height: calc(100vh - var(--header-height-desktop));
  }
}

/* |--------------------------------------------------------------------------
| HEADER SOCIAL ICONS (NEW - For Header Snippet)
|--------------------------------------------------------------------------
*/
.header-social {
    display: none; /* Hidden on mobile by default to save space */
    align-items: center;
    gap: 1rem;
    margin-left: 1.5rem;
}

.header-social a {
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.header-social a:hover {
    color: var(--color-primary-red);
}

@media (min-width: 64em) {
    /* Show on desktop */
    .header-social {
        display: flex;
    }
}

/* |--------------------------------------------------------------------------
| GENERAL TEXT AND HEADING STYLES
|--------------------------------------------------------------------------
*/
.intro {
  text-align: center;
  margin-bottom: var(--padding);
}

.text {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--padding);
}

.text h1,
.text h2,
.text h3,
.text h4,
.text h5,
.text h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white);
}

.text h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--color-primary-red);
}

.text h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-white);
}

.text h3 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--color-primary-red);
}

.text h4 {
  font-size: 1.25rem;
  color: var(--color-white);
}

p {
  margin-bottom: 1rem;
}

.text ul, .text ol {
  margin: 1rem 0 1rem 1.5rem;
}

.text li {
  margin-bottom: 0.5rem;
}

.text blockquote {
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background-color: var(--color-medium-grey);
  font-style: italic;
  color: var(--color-light);
}

.text hr {
  border: none;
  border-top: 1px solid var(--color-medium-grey);
  margin: 2rem 0;
}


/* |--------------------------------------------------------------------------
| CODE BLOCK STYLES (for KQL/MQL examples)
|--------------------------------------------------------------------------
| Styles for code presented in the main content area.
*/
.kql-code-block,
.mql-code-block {
    background-color: var(--color-code-bg);
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    color: var(--color-code-text);
    overflow-x: auto;
    margin: 1.5rem 0;
    white-space: pre-wrap; /* Ensure wrapping for long lines */
    word-break: break-all;
}

.kql-code-block code,
.mql-code-block code {
    display: block; /* Ensures padding and background apply to the entire code block */
    white-space: pre; /* Preserve whitespace inside code */
}

/* Syntax highlighting classes */
.token.keyword { color: var(--color-code-keyword); }
.token.string { color: var(--color-code-string); }
.token.comment { color: var(--color-code-comment); }
.token.number { color: #ADD8E6; } /* Light Blue */
.token.punctuation { color: #ffffff; }

/*
|--------------------------------------------------------------------------
| CONTENT GRID COLUMN STYLES (REVISED)
|--------------------------------------------------------------------------
*/

.column-structure-block {
    padding-top: var(--padding);
    padding-bottom: var(--padding-lg);
    /* Max width is now handled by .main-content-wrapper */
}

.column-section-heading {
    text-align: center;
    margin-bottom: var(--padding-lg);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-white);
}

.column-layout-container {
    display: flex;
    flex-wrap: wrap; 
    /* Use a negative margin to counteract the padding on the items, for perfect alignment */
    /* This calculation uses your global --padding variable (1.5rem) */
    margin: calc(-1 * var(--padding) / 2); 
}

.column-item {
    /* Base style: columns take up full width on small screens */
    flex-basis: 100%;
    max-width: 100%;
    /* Apply padding to the item itself, which is counteracted by the container's negative margin */
    padding: calc(var(--padding) / 2);
    /* Ensure flex properties for height matching */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Ensures padding is included in width calculation */
    
    /* 💥 CRITICAL FIX: Add flex-grow to make columns stretch and fill the row */
    flex-grow: 1;
}

.column-content-inner {
    display: flex; /* Use flex to make the card fill height */
    flex-direction: column;
    padding: 0; 
    background-color: var(--color-mh-dark-grey); /* Use defined dark grey */
    border: 1px solid var(--color-medium-grey);
    border-radius: 8px;
    height: 100%; /* Make card fill the column-item wrapper */
    overflow: hidden; 
    text-decoration: none; 
    color: inherit; 
    transition: all 0.3s ease; 
}

.feature-card:hover {
    box-shadow: 0 0 25px rgba(210, 35, 42, 0.5); /* Primary red glow on hover */
    transform: translateY(-5px);
    border-color: var(--color-primary-red);
}

.feature-image-wrapper {
    width: 100%;
    height: 200px; /* Fixed height for consistent image size */
    overflow: hidden;
    margin: 0;
    background-color: var(--color-process-black);
    /* Added styles for placeholder text */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-grey);
}

.feature-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    transition: transform 0.4s ease;
}
.feature-card:hover .feature-image-wrapper img {
    transform: scale(1.05);
}

.feature-text-content {
    padding: 1.5rem;
    flex-grow: 1; /* Ensures text content fills remaining space */
}

.column-item-heading {
    margin-top: 0 !important; 
    margin-bottom: var(--padding-sm);
    color: var(--color-white);
    font-weight: 600;
}
.feature-item-text {
    color: var(--color-grey); 
    font-size: 0.95rem;
}


/* Desktop Breakpoint (or tablet/desktop) */
@media (min-width: 768px) {
    .column-layout-container {
        align-items: stretch; /* Make all items in a row the same height */
    }
    
    /* 1/1 (Full Width) */
    .column-item.col-1-1 {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* 1/2 (Half Width) */
    .column-item.col-1-2 {
        /* FIX: Correct math. The padding is handled by box-sizing. */
        flex-basis: 50%;
        max-width: 50%;
    }

    /* 1/3 (Third Width) */
    .column-item.col-1-3 {
        /* FIX: Correct math. */
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }
    
    /* 1/4 (Quarter Width) */
    .column-item.col-1-4 {
        /* FIX: Correct math. */
        flex-basis: 25%;
        max-width: 25%;
    }
}


/*
|--------------------------------------------------------------------------
| GALLERY/ALBUM SPECIFIC STYLES
|--------------------------------------------------------------------------
*/
.photo-grid {
    display: grid;
    /* Mobile: 1 column */
    grid-template-columns: repeat(1, 1fr); 
    gap: var(--padding);
    margin: 0 auto;
    padding: var(--padding);
}

@media (min-width: 640px) {
    .photo-grid {
        /* Tablet: 2 columns */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .photo-grid {
        /* Desktop: 3 columns */
        grid-template-columns: repeat(3, 1fr);
    }
}

.photo-grid-item img {
    /* Base style for grid item image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border: 3px solid var(--color-medium-grey);
}
/* Text for screen readers only (e.g. "opens in a new tab") */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}