/*
Theme Name: Digital Decay Theme
Theme URI: https://coastlinehub.com/digitaldecay
Author: Coastline Hub
Version: 1.0.0
Description: Early-2000s black + blue blog look, minimal, accessible, jQuery-free.
Text Domain: digital-decay-theme
*/

/* Basic reset and layout */
html,body{height:100%;}
*{box-sizing:border-box}
/* Design tokens */
:root{
    --color-bg: #000000;
    --color-panel: #071427; /* deep panel background used for posts */
    --color-text: #e6e6e6;
    --color-accent: #ff6600; /* primary orange */
    --color-accent-strong: #e55a00;
    --color-accent-border: #331a00;
}

body{margin:0;background:var(--color-bg);color:var(--color-text);font-family: 'Verdana', Arial, Helvetica, sans-serif;line-height:1.45}

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

/* Header and navbar */
#header{background:var(--color-bg);padding:18px 12px;border-bottom:4px solid var(--color-accent)}
#header h1{margin:0;font-size:1.6rem}
#header .description{color:#ccc}

/* Navbar container */
#navbar{background:var(--color-bg);padding:8px 12px;position:relative}
.menu-toggle{background:var(--color-accent);color:#1a1a1a;border:2px solid var(--color-accent-strong);padding:10px 14px;font-weight:bold;border-radius:4px}
.menu-toggle:focus{outline:3px solid rgba(255,102,0,0.32)}

/* Primary nav menu (single consolidated block) */
.nav-menu{transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .18s ease;overflow:hidden;max-height:none;opacity:0;background:var(--color-bg)}
.nav-menu.open{opacity:1}
.nav-menu ul{list-style:none;margin:0;padding:8px;display:flex;gap:.5rem;align-items:center}
.nav-menu li{padding:8px 0}
.nav-menu a{display:inline-block;padding:12px 16px}

/* Mobile: present the nav as a fixed full-width panel above the overlay */
@media (max-width:768px) {
    .nav-menu {
        position: fixed;
        top: 72px; /* below header */
        left: 0;
        right: 0;
        z-index: 160;
        transform: translateY(-8px) scaleY(.98);
        border-top: 1px solid rgba(255,255,255,0.04);
        box-shadow: 0 8px 30px rgba(0,0,0,0.6);
        padding: 12px 14px;
        border-radius: 0 0 6px 6px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        will-change: transform, opacity;
    }
    .nav-menu.closed { transform: translateY(-12px) scaleY(.98); pointer-events: none; }
    .nav-menu.open { transform: translateY(0) scaleY(1); pointer-events: auto; }
    .nav-menu ul { flex-direction: column; gap: 0.75rem; align-items: stretch; }
    .nav-menu a { display:block; padding:14px 16px; border:1px solid rgba(255,255,255,0.04); border-radius:6px; }
    .menu-toggle { margin-left: 6px; }
}

/* Ensure the navbar and nav menu sit above the mobile overlay when opened */
#navbar{z-index:140}
.nav-menu{position:relative;z-index:150}

/* Layout */
#wrapper{max-width:960px;margin:20px auto;padding:0 12px}
#main{display:flex;gap:20px}
#content{flex:1}
#sidebar{width:300px}

.post{background:var(--color-panel);padding:14px;border:1px solid var(--color-accent-border);margin-bottom:18px;transform:translateY(10px);opacity:0;transition:transform .4s ease,opacity .4s ease}
.post.revealed{transform:none;opacity:1}
.post-title a{color:#ff6600}
.post-meta{font-size:.9rem;color:#bfbfbf;margin-bottom:8px}

/* Footer */
#footer{padding:14px;color:var(--color-text);background:var(--color-bg);border-top:3px solid var(--color-accent);margin-top:24px}

/* Overlay for mobile menu */
.mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:150;opacity:0;transition:opacity .18s ease;pointer-events:none}
body.menu-open .mobile-nav-overlay{opacity:1;pointer-events:auto}

/* Close button inside the nav for clarity */
.nav-close{position:absolute;right:14px;top:8px;background:transparent;border:0;color:var(--color-accent);font-weight:bold;padding:8px 10px;border-radius:6px}
.nav-close:focus{outline:3px solid rgba(255,102,0,0.32)}

/* Mobile adjustments */
@media (max-width:768px){
    #main{flex-direction:column}
    #sidebar{width:100%}
    .menu-toggle{display:inline-block}
}

/* Desktop: show the nav by default and hide the mobile toggle */
@media (min-width:769px) {
    .menu-toggle { display: none; }
    .nav-menu { max-height: none; opacity: 1; overflow: visible; }
    /* make list horizontal */
    .nav-menu ul { display: flex; gap: 0.5rem; align-items: center; margin: 0; padding: 8px 0; }
    .nav-menu li { display: inline-block; float: none; }
    .nav-menu a { display: block; padding: 8px 12px; }
}

/* Accessibility helpers */
.screen-reader-text{position:absolute;left:-9999px}

/* -----------------------------
   Aggressive header/nav cleanup
   High-specificity overrides to remove legacy/duplicated rules and
   enforce a consistent centered layout for header, navbar and wrapper
   across viewports. Safe: uses only overrides and doesn't remove
   historical rules so rollback is quick.
   ----------------------------- */

/* Normalize container sizing so header and navbar match #wrapper */
#header-inner, #navbar, #navbar .nav-menu, #header-inner > * {
    max-width: 960px;
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Force navbar layout: desktop horizontal, tablet wrapable */
/* Ensure nav displays as a horizontal list on larger viewports */
.nav-menu { display: block !important; }
.nav-menu ul { display: flex !important; gap: 0.5rem; align-items: center; margin: 0; padding: 8px 0; flex-wrap: nowrap; }
.nav-menu li { display: inline-block; }
.nav-menu a { display: block; padding: 8px 12px; }

@media (max-width: 768px) {
    /* allow menu items to wrap on medium screens to avoid overflow */
    .nav-menu ul { flex-wrap: wrap; justify-content: center; }
}

/* Treat <=768px as stacked layout: prevent sidebar from squeezing main content */
@media (max-width: 768px) {
    #main { flex-direction: column !important; }
    #content { flex: none; width: 100%; }
    #sidebar { width: 100%; float: none; margin-top: 18px; }
    /* ensure header/nav remain centered */
    #header-inner, #navbar { width: calc(100% - 24px); max-width:960px; }
}

/* Ensure header sections don't use floats that can break centering */
#wrapper, #header-inner, #navbar, #main { overflow: visible; }

/* Consolidated legacy cleanup
   Removed duplicated 2006-era CSS and kept compact, modern
   equivalents below. The goal is to reduce duplication while
   preserving the early-2000s aesthetic where desired. */

/* Base adjustments retained from legacy where they still apply */
body { background: var(--color-bg); }

/* Layout: prefer a responsive wrapper and flexible main area */
#wrapper { max-width: 960px; margin: 20px auto; }
#main { display:flex; gap:20px; }
#content { flex:1; }
#sidebar { width:300px; }

/* Sidebar boxes and post basics retained */
.sidebar-box { background:#222; border:1px solid #444; margin-bottom:15px; }
.post { margin-bottom:18px; padding:14px; background:var(--color-panel); border:1px solid var(--color-accent-border); }

/* Buttons, widgets, and accents use the primary orange token */
.button, button, input[type="button"], input[type="submit"], input.search-submit {
    background: var(--color-accent);
    color: #1a1a1a;
    border: 1px solid var(--color-accent-strong);
    padding: 6px 10px;
    cursor: pointer;
}
.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background: var(--color-accent-strong);
}

/* Sidebar / widget heading accents */
.sidebar-box h3, .widgettitle {
    background: var(--color-accent);
    color: #1a1a1a;
    padding: 6px 10px;
    font-size: 12px;
    margin: 0 0 8px 0;
}

/* Focus outlines use orange with good contrast */
a:focus, .menu-toggle:focus, .button:focus, input[type="submit"]:focus {
    outline: 3px solid rgba(255,102,0,0.32);
    outline-offset: 2px;
}

/* Keep responsive helpers from legacy, simplified */
@media (max-width:800px) {
    #wrapper { width: calc(100% - 20px); margin: 0 10px; }
    #main { flex-direction: column; }
    #sidebar{ width:100%; margin-top:18px; }
}