/*
Theme Name: TurquoiseUFO
Description: TurquoiseUFO organism dispatch theme — child of GeneratePress
Template: generatepress
Version: 1.1.0
*/

/* ========================================
   ROOT — WARM COSMIC COLOR SYSTEM
   Desert night sky: deep amber, warm void, turquoise signal
   ======================================== */
:root {
    --bg-void: #0a0804;
    --bg-deep: #100c07;
    --bg-main: #140f09;
    --bg-card: #1e1610;
    --bg-widget: #1a1209;
    --border: #3a2a18;
    --border-light: #4d3a22;
    --turquoise: #2dd4c8;
    --turquoise-bright: #6ee8e0;
    --turquoise-dim: #1a9e94;
    --turquoise-glow: rgba(45,212,200,0.10);
    --orange: #d4742d;
    --orange-bright: #f0963a;
    --orange-dim: #a85a1e;
    --orange-glow: rgba(212,116,45,0.14);
    --terracotta: #c47a3a;
    --terracotta-light: #d4956a;
    --sand: #c9a96e;
    --beige: #d4b896;
    --text-primary: #e8d5b0;
    --text-secondary: #9a8060;
    --text-muted: #5a4535;
    --text-heading: #f0e4c8;
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: Georgia, 'Times New Roman', serif;
    --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --container-width: 1100px;
    --sidebar-width: 210px;
    --gap: 1.5rem;
}

/* ========================================
   GLOBAL RESET & BASE
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    background-color: var(--bg-void) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    padding: 0;
}

/* GeneratePress color override */
body,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .site-content,
.inside-page-header {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

a { color: var(--turquoise); text-decoration: none; }
a:hover, a:focus { color: var(--orange-bright); text-decoration: none; }

/* ========================================
   OUTER CONTAINER — fixed 1100px, centered
   ======================================== */
#page.site {
    max-width: var(--container-width);
    margin: 0 auto;
    background: var(--bg-main);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding: 0;
    width: 100%;
    box-shadow: 0 0 60px rgba(212,116,45,0.06);
}

/* GeneratePress grid override */
.grid-container {
    max-width: var(--container-width) !important;
}

/* ========================================
   HEADER — warm desert void
   ======================================== */
.site-header,
.site-header .inside-header {
    background-color: var(--bg-void) !important;
    border-bottom: 2px solid var(--turquoise);
    padding: 0;
    width: 100%;
}

.site-header {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Warm star field — amber/orange dust on deep dark */
    background-image:
        radial-gradient(ellipse at 20% 40%, rgba(212,116,45,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 60%, rgba(45,212,200,0.05) 0%, transparent 50%),
        radial-gradient(circle at 12% 20%, rgba(240,150,58,0.9) 0%, transparent 0.4%),
        radial-gradient(circle at 88% 15%, rgba(45,212,200,0.7) 0%, transparent 0.3%),
        radial-gradient(circle at 35% 75%, rgba(240,150,58,0.6) 0%, transparent 0.3%),
        radial-gradient(circle at 62% 30%, rgba(255,255,255,0.5) 0%, transparent 0.25%),
        radial-gradient(circle at 78% 80%, rgba(240,150,58,0.8) 0%, transparent 0.35%),
        radial-gradient(circle at 50% 55%, rgba(255,255,255,0.4) 0%, transparent 0.2%),
        radial-gradient(circle at 25% 50%, rgba(45,212,200,0.5) 0%, transparent 0.3%),
        radial-gradient(circle at 92% 45%, rgba(255,255,255,0.6) 0%, transparent 0.25%),
        radial-gradient(circle at 5% 85%, rgba(240,150,58,0.7) 0%, transparent 0.35%) !important;
}

.site-header .inside-header {
    background: transparent !important;
    text-align: center;
    z-index: 2;
}

.site-title,
.site-title a,
.site-title a:hover {
    font-family: var(--font-heading) !important;
    font-size: 2.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: var(--turquoise) !important;
    text-shadow: 0 0 18px rgba(45,212,200,0.4), 0 0 40px rgba(45,212,200,0.15);
    text-decoration: none !important;
}

.site-description {
    font-family: var(--font-ui) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--orange) !important;
    margin-top: 0.4rem;
    opacity: 0.85;
}

/* ========================================
   NAVIGATION
   ======================================== */
.main-navigation,
.main-navigation .inside-navigation {
    background-color: var(--bg-deep) !important;
    border-bottom: 1px solid var(--border);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
    color: var(--text-secondary) !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--turquoise) !important;
}

/* ========================================
   THREE-COLUMN LAYOUT
   #page is flex parent (set above)
   Secondary sidebar injected via generate_after_primary_content_area
   with order: -1 to appear left
   ======================================== */

/* Main content column */
#content.site-content {
    flex: 1;
    min-width: 0;
    order: 0;
    background: var(--bg-main);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* LEFT sidebar — injected after content, repositioned via order */
.secondary-sidebar-area {
    width: var(--sidebar-width);
    flex-shrink: 0;
    order: -1;
    background: var(--bg-deep);
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    min-height: 400px;
}

/* RIGHT sidebar — GP uses id="right-sidebar" with class is-right-sidebar */
#right-sidebar,
#secondary.widget-area,
.is-right-sidebar {
    width: var(--sidebar-width) !important;
    flex-shrink: 0;
    order: 1;
    background: var(--bg-deep);
    border-left: 1px solid var(--border);
    padding: 1.5rem 0;
    min-height: 400px;
}

/* GP inline style overrides */
.site-content .content-area { width: 100% !important; }
.site-content .content-area { width: 100% !important; }

/* ========================================
   WIDGETS — old-school with warm borders
   ======================================== */
.widget-area .widget,
.sidebar .widget {
    background: transparent !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0;
    border-top: 2px solid var(--orange-dim);
    border-radius: 0;
}

.widget-area .widget + .widget {
    border-top: 1px solid var(--border);
}

.widget-area .widget:first-child {
    border-top: 2px solid var(--turquoise);
}

.widget-title,
.widget-area .widget-title {
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--orange) !important;
    margin: 0 0 0.75rem 0 !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.widget-area .widget-title:first-child {
    color: var(--turquoise) !important;
}

.widget-area p,
.widget-area li,
.widget-area .textwidget {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.widget-area a {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.widget-area a:hover { color: var(--turquoise); }

.widget-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-area ul li {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(58,42,24,0.5);
    font-size: 0.82rem;
}

.widget-area ul li:last-child { border-bottom: none; }

/* ========================================
   MAIN CONTENT AREA
   ======================================== */
.site-main {
    background: var(--bg-main);
    padding: 0;
}

.inside-article {
    background: var(--bg-card) !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 2px;
}

.entry-header { margin-bottom: 1.25rem; }

.entry-title,
.entry-title a {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    line-height: 1.3;
    text-decoration: none !important;
}

.entry-title a:hover { color: var(--turquoise) !important; }

.entry-meta,
.entry-meta a {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}

.entry-content {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary) !important;
}

.entry-content p { margin-bottom: 1.25rem; }

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--font-heading) !important;
    color: var(--text-heading) !important;
}

/* Dispatch / agent byline badge */
.dispatch-source {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--turquoise);
    background: rgba(45,212,200,0.08);
    border: 1px solid rgba(45,212,200,0.25);
    padding: 0.15rem 0.6rem;
    border-radius: 2px;
    margin-bottom: 1rem;
}

/* ========================================
   SEPARATORS & HR
   ======================================== */
hr,
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

/* ========================================
   CONTENT PADDING
   ======================================== */
#main.site-main {
    padding: 1.5rem;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer,
.site-info {
    background: var(--bg-deep) !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--border);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 1.25rem !important;
}

.site-info a { color: var(--orange-dim) !important; }
.site-info a:hover { color: var(--turquoise) !important; }

/* ========================================
   SEARCH FORM
   ======================================== */
.search-form input[type="search"] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    border-radius: 2px;
}

.search-form button,
.search-form input[type="submit"] {
    background: var(--orange-dim);
    color: var(--text-heading);
    border: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    margin-top: 0.4rem;
    width: 100%;
}

.search-form button:hover { background: var(--orange); }

/* ========================================
   NO RESULTS
   ======================================== */
.no-results.not-found .entry-header h1 {
    font-family: var(--font-heading);
    color: var(--text-heading);
}

/* ========================================
   CONTENT DEPLOYMENT GATE
   Blocks wrapped in .hidden-until-ready never render publicly.
   Nathan removes the class to flip live. No placeholder leaks.
   ======================================== */
.hidden-until-ready { display: none !important; }

/* ========================================
   RESPONSIVE — single column below 800px
   ======================================== */
@media (max-width: 800px) {
    #page.site {
        flex-direction: column;
        max-width: 100%;
    }

    .secondary-sidebar-area,
    #secondary.widget-area,
    .sidebar-area {
        width: 100% !important;
        order: 0;
        border: none;
        border-top: 1px solid var(--border);
    }

    #content.site-content {
        border: none;
    }

    .site-title { font-size: 1.8rem !important; }
}