/*
============================================================
 Planet Eaglercraft Stylesheet
============================================================
This CSS file defines the layout, color palette, and UI elements for the Planet Eaglercraft website, inspired by Planet Minecraft.
Each section and class is documented below for clarity and maintainability.

Quick Reference:
  - Responsive, mobile-first design
  - Color palette: Blue (#3c5a99), Green (#7bb661), Dark (#222), Light (#fafafa, #fff, #e6e6e6)
  - Main layout: Header, Navigation, Main Content, Cards, Footer
  - Utility classes: .pmc-btn, .pmc-card, .pmc-grid, .pmc-main, .pmc-footer, .warning-page
  - See /doc/styles.md for a full guide
============================================================
*/

/*
----------------------
  Base & Body Styles
----------------------
body, html: Sets up the base font, background, and minimum height for the site.
*/

body, html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Open Sans', Arial, sans-serif;
    background: #e6e6e6;
    color: #222;
}


/*
----------------------
  Header
----------------------
.pmc-header: Main site header bar, dark background, flex layout.
.pmc-logo: Logo image in the header.
.pmc-title: Site title next to the logo.
*/
.pmc-header {
    display: flex;
    align-items: center;
    background: #222;
    color: #fff;
    padding: 1.2rem 2rem;
    border-bottom: 4px solid #3c5a99;
}
.pmc-logo {
    height: 48px;
    margin-right: 1.2rem;
}
.pmc-title {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1px;
}


/*
----------------------
  Navigation Bar
----------------------
.pmc-nav: Main navigation bar, blue background.
.pmc-nav-toggle: Hamburger button for mobile nav.
.pmc-nav ul: Navigation links container.
.pmc-nav ul li a: Navigation links, with hover and active states.
*/
.pmc-nav {
    background: #3c5a99;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}
.pmc-nav .pmc-nav-toggle {
    display: none;
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}
.pmc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.pmc-nav ul li {
    margin: 0 1.5rem;
}
.pmc-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 1rem 0;
    display: block;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
    border-radius: 6px 6px 0 0;
}
.pmc-nav ul li a:hover, .pmc-nav ul li a.active {
    color: #7bb661;
    border-bottom: 3px solid #7bb661;
    background: #4a6ea9;
}


/*
----------------------
  Main Content Area
----------------------
.pmc-main: Main content container, white card with shadow.
*/
.pmc-main {
    max-width: 1100px;
    margin: 2rem auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.09);
    padding: 2.5rem 2.5rem 2rem 2.5rem;
}


/*
----------------------
  Grid & Cards
----------------------
.pmc-grid: CSS grid for featured cards.
.pmc-card: Card container for featured content.
.pmc-card a: Card links, with hover effect.
*/
.pmc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    padding: 0;
    list-style: none;
}
.pmc-card {
    background: #fafafa;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 1.2rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, border 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pmc-card:hover {
    box-shadow: 0 4px 16px rgba(60,90,153,0.10);
    border: 1px solid #3c5a99;
}

/*
  Card links: Only style non-button links inside cards. Prevents conflict with .pmc-btn.
*/
.pmc-card a:not(.pmc-btn) {
    color: #3c5a99;
    font-weight: 600;
    text-decoration: none;
}
.pmc-card a:not(.pmc-btn):hover {
    color: #7bb661;
    text-decoration: underline;
}


/*
----------------------
  Buttons
----------------------
.pmc-btn: Main action buttons (Browse, Download, etc). Green text, blue background. On hover, blue text, green background.
*/
.pmc-btn {
    background: #3c5a99;
    color: #7bb661;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 0.5rem;
}
.pmc-btn:hover {
    background: #7bb661;
    color: #3c5a99;
}


/*
----------------------
  Footer
----------------------
.pmc-footer: Site footer, dark background, white text.
*/
.pmc-footer {
    text-align: center;
    color: #fff;
    background: #222;
    padding: 1.2rem 0 0.5rem 0;
    margin-top: 2rem;
    font-size: 1rem;
    border-top: 4px solid #3c5a99;
}


/*
----------------------
  Headings
----------------------
h1, h2, h3, h4, h5: Blue headings, bold, consistent font.
h2: Section heading with green underline.
*/
h1, h2, h3, h4, h5 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: bold;
    color: #3c5a99;
    margin-top: 0;
}
h2 {
    border-bottom: 2px solid #7bb661;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}


/*
----------------------
  Responsive Navigation
----------------------
@media (max-width: 700px): Stacks nav links, shows hamburger, adjusts padding for mobile.
*/
@media (max-width: 700px) {
    .pmc-header, .pmc-main {
        padding: 1rem;
    }
    .pmc-nav ul {
        flex-direction: column;
        align-items: flex-start;
        background: #3c5a99;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .pmc-nav ul.pmc-nav-open {
        display: flex;
    }
    .pmc-nav .pmc-nav-toggle {
        display: block;
    }
    .pmc-nav ul li {
        margin: 0.5rem 1rem;
    }
    .pmc-main {
        padding: 1rem;
    }
}


/*
----------------------
  Warning Page
----------------------
.warning-page: Special layout for warning pages, centered content, yellow background.
*/
.warning-page, body.warning-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #fffbe6;
}