/*
 * _about.css: Styles specific to The Longhouse Saga (About Page)
 * This file is loaded conditionally via header.php only when the 'about' template is used.
 */

/* === GLOBAL PAGE CONTAINER & TYPOGRAPHY SETTINGS === */
article {
    /* Center the content on the page and prevent it from getting too wide for reading */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem var(--padding);
    text-align: center; /* Ensures the H1 and top content are centered */
}

/* === MAIN TITLES AND HEADERS === */
article h1 {
    /* Ensure the page title is distinct and aligned */
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--color-white);
    margin-bottom: 2rem;
}

/* Sub-headlines (like "The Code of the Shieldwall") */
article h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-primary-red);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Section Headings (like "The Hall of Wits" and "The Jarl's Roll") */
article h3 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-light);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* === MISSION SECTION (The Code of the Shieldwall) === */
.code-of-shieldwall {
    padding: var(--padding);
    background-color: var(--color-dark-grey); /* Dark background for distinction */
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.mission-text {
    /* Text inside mission needs to be easily readable */
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-mh-light-grey);
}
/* Style the strong tags (Honor, Kinship, etc.) */
.mission-text strong {
    color: var(--color-primary-red);
    font-weight: 900;
}

/* === LOCATION & HOURS SECTIONS (The Hall of Wits / The Hours of the Raven) === */
.hall-of-wits,
.hours-of-raven {
    padding: var(--padding);
    background-color: var(--color-medium-grey); /* Slightly lighter dark background */
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: left; /* Align text left for better readability on long content */
}

.hall-of-wits p,
.hours-of-raven p {
    color: var(--color-light);
    line-height: 1.6;
}
/* Style the important themed words (Jarl's Screen, etc.) */
.hall-of-wits strong {
    color: var(--color-primary-red);
    font-weight: bold;
}

/* === CONTACT SECTION (The Jarl's Roll) === */
.contact-messenger {
    /* Updated for Flexbox to center content vertically */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content along the vertical axis */
    min-height: 400px; /* Give the container a reasonable minimum height to show centering */
    
    padding: var(--padding);
    margin-top: 2rem;
    border: 2px solid var(--color-primary-red);
    border-radius: 8px;
    text-align: center; 
}

/* Reset margin for the H3 inside the contact box to prevent excessive top spacing */
.contact-messenger h3 {
    margin-top: 0;
    margin-bottom: 1.5rem; /* Keep a decent gap between the headline and the first contact item */
    color: var(--color-white); /* Ensure the contact headline remains white */
}

/* The contact-block is the wrapper for EACH pair (Label + Value) */
.contact-messenger .contact-block {
    /* The PHP template uses 'mb-6' for spacing between blocks, so we don't need padding here */
    padding: 0;
}

/* 1. Style the Red Label (Line 1: THE RAVEN'S WHISPER, etc.) */
.contact-messenger .contact-label-viking {
    /* The core styling you requested: Red, Uppercase, and Large */
    display: block; 
    font-size: 1.5rem; 
    font-weight: 800;
    color: var(--color-primary-red); 
    margin-bottom: 0.25rem; /* Small space below the label, before the value */
    text-transform: uppercase; 
    line-height: 1.2;
}

/* 2. Style the White Value Container (Line 2: Email: esports@...) */
.contact-messenger .contact-value-detail {
    /* Ensures the entire value line is a block, centered, and white */
    display: block; 
    font-size: 1.1rem; /* Smaller font than the label */
    color: var(--color-white); /* Ensures the whole block defaults to white */
    /* Remove any conflicting margin from old classes */
    margin-top: 0;
}

/* 3. Style the actual email/phone/address value (text and link) */
/* The 'a' tag for email needs its color forced to white as well */
.contact-messenger .contact-value-detail a,
.contact-messenger .contact-value-detail span {
    display: inline;
    color: var(--color-white);
    text-decoration: none;
    /* We assume the student will fix the casing in about.txt */
    /* text-transform: lowercase; */ 
}

.contact-messenger .contact-value-detail a:hover {
    text-decoration: underline;
    color: var(--color-primary-red);
}

/* --- DELETED OLD CONFLICTING RULES ---
   Removed: .contact-messenger .contact-detail (replaced by .contact-block + .contact-label-viking + .contact-value-detail)
   Removed: .contact-messenger .contact-label (replaced by .contact-label-viking)
   Removed: .contact-messenger .contact-value (replaced by .contact-value-detail)
   Removed: .contact-messenger .contact-value strong (no longer needed, the prefix is now plain text)
--------------------------------------- */

/* Horizontal Rule Styling */
article hr {
    border: none;
    border-top: 1px solid var(--color-dark-grey);
    margin: 3rem auto;
    width: 80%;
}

/* REMOVING/ADJUSTING RESPONSIVENESS THAT CAUSED ISSUES IN PREVIOUS VERSIONS */
@media (min-width: 600px) {
    /* Removing the previous media query block entirely to prevent conflicts */
}