/* ================================================================
   assets/css/style.css  — Public site styles
   Aesthetic: Editorial Magazine — Playfair Display + Source Serif 4
   ================================================================ */

/* ── Google Fonts already loaded via <link> in header ─────── */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --ink:        #1a1208;
    --ink-soft:   #4a3f30;
    --ink-muted:  #8a7b6a;
    --paper:      #faf8f4;
    --paper-warm: #f4f0e8;
    --paper-dark: #ede8df;
    --accent:     #b5451b;       /* warm terracotta */
    --accent-lt:  #e8c4b0;
    --gold:       #c9922a;
    --gold-lt:    #f5e6c8;
    --rule:       #d8d0c4;
    --white:      #ffffff;
    --shadow-sm:  0 1px 3px rgba(26,18,8,.08);
    --shadow-md:  0 4px 16px rgba(26,18,8,.12);
    --shadow-lg:  0 8px 32px rgba(26,18,8,.16);

    /* Layout */
    --sidebar-w:  240px;
    --gap:        1.75rem;
    --radius:     3px;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Source Serif 4', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-align: justify; /* ADDED */
}
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ink); text-decoration: underline; }
ul,ol { padding-left: 1.5rem; margin-bottom: 1rem; }
p { margin-bottom: 1rem; }
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: .6rem;
}

/* ── Container ─────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* ═══════════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════════ */
.site-header {
    background: var(--ink);
    color: var(--paper);
    position: sticky; top: 0; z-index: 200;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 64px; padding: 0 1.5rem; gap: 1rem;
}

/* Brand */
.header-brand { flex-shrink: 0; }
.brand-link { display: flex; flex-direction: column; text-decoration: none; }
.brand-name {
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 900;
    color: var(--white); letter-spacing: -.5px;
    line-height: 1;
}
.brand-tag {
    font-family: var(--font-mono);
    font-size: .65rem; color: var(--accent-lt);
    letter-spacing: 2px; text-transform: uppercase; margin-top: .1rem;
}

/* Top nav */
.site-nav { display: flex; align-items: center; }
.nav-list { list-style: none; display: flex; align-items: center; gap: .1rem; padding: 0; margin: 0; }
.nav-item > a {
    display: flex; align-items: center; gap: .3rem;
    padding: .55rem .9rem;
    color: #ccc;
    font-family: var(--font-mono); font-size: .78rem; letter-spacing: .5px; text-transform: uppercase;
    border-radius: 2px;
    transition: background .2s, color .2s;
    text-decoration: none;
}
.nav-item > a:hover,
.nav-item > a.active { background: rgba(255,255,255,.1); color: var(--white); }
.nav-item.nav-admin-link > a { color: var(--gold); }
.nav-item.nav-admin-link > a:hover { background: var(--gold); color: var(--ink); }
.caret { font-size: .6rem; opacity: .7; }

/* Dropdown */
.has-drop { position: relative; }
.dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--ink); border: 1px solid rgba(255,255,255,.12);
    border-top: 2px solid var(--accent); border-radius: 0 0 4px 4px;
    min-width: 200px; list-style: none; padding: .4rem 0; z-index: 300;
    box-shadow: var(--shadow-lg);
}
.has-drop:hover .dropdown { display: block; }
.dropdown li a {
    display: block; padding: .5rem 1.1rem;
    color: #bbb; font-size: .82rem;
    transition: background .15s, color .15s; text-decoration: none;
}
.dropdown li a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Hamburger */
.nav-hamburger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: .4rem;
}
.nav-hamburger span { display: block; width: 24px; height: 2px; background: #ccc; border-radius: 1px; transition: .3s; }

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER BANNER
═══════════════════════════════════════════════════════════ */
.page-header-banner {
    background: var(--paper-warm);
    border-bottom: 3px double var(--rule);
    padding: 2rem 0 1.5rem;
}
.page-header-default { background: linear-gradient(135deg, var(--ink) 0%, #3d2b1a 100%); }
.page-header-default .page-banner-title {
    color: var(--white);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════ */
.breadcrumb-bar {
    background: var(--paper-dark);
    border-bottom: 1px solid var(--rule);
    padding: .45rem 0;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--ink-muted); letter-spacing: .3px;
}
.breadcrumb a { color: var(--accent); }
.bc-sep { margin: 0 .5rem; }
.bc-current { color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════
   CONTENT GRID  (Left Sidebar | Main | Right Sidebar)
═══════════════════════════════════════════════════════════ */
.site-wrapper { padding: 2rem 0 3rem; }

.content-grid {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w);
    grid-template-areas: "left main right";
    gap: var(--gap);
    align-items: start;
}
.content-grid.no-left  { grid-template-columns: 1fr var(--sidebar-w); grid-template-areas: "main right"; }
.content-grid.no-right { grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "left main"; }
.content-grid.no-left.no-right { grid-template-columns: 1fr; grid-template-areas: "main"; }

/* ── Main content area ─────────────────────────────────────── */
.site-main { grid-area: main; min-width: 0; }

/* ── Sidebar shared ─────────────────────────────────────────── */
.sidebar { min-width: 0; }
.sidebar-left  { grid-area: left; }
.sidebar-right {
    grid-area: right;
    text-align: left; /* ADDED — override body justify for right sidebar */
}

.sidebar-section-title {
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: .5rem; margin-bottom: 1rem;
}

/* Widget */
.widget {
    background: var(--white);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    text-align: justify;
}
.widget-title {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: var(--ink); margin-bottom: .75rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--paper-dark);
}
.widget-body { font-size: .9rem; color: var(--ink-soft); line-height: 1.65; text-align: justify;}
.widget-body a { color: var(--accent); }

/* Sidebar nav */
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { border-bottom: 1px solid var(--paper-dark); }
.sidebar-nav li:last-child { border: none; }
.sidebar-nav a {
    display: block; padding: .45rem .2rem;
    color: var(--ink-soft); font-size: .88rem;
    transition: color .2s, padding-left .2s; text-decoration: none;
    text-align: left; /* ADDED — nav links should never be justified */
}
.sidebar-nav a:hover { color: var(--accent); padding-left: .4rem; }
.sub-nav { padding-left: 1rem; }
.sub-nav a { font-size: .82rem; color: var(--ink-muted); }

/* Recent list */
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li { border-bottom: 1px solid var(--paper-dark); padding: .35rem 0; font-size: .85rem; }
.recent-list li:last-child { border: none; }
.recent-list a { color: var(--ink-soft); text-decoration: none; }
.recent-list a:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   PAGE CONTENT TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
.page-content h1 { font-size: 2.1rem; margin-bottom: 1rem; }
.page-content h2 { font-size: 1.6rem; margin: 1.5rem 0 .75rem; border-bottom: 1px solid var(--rule); padding-bottom: .4rem; }
.page-content h3 { font-size: 1.25rem; margin: 1.2rem 0 .5rem; }
.page-content p {
    margin-bottom: 1.1rem;
    color: var(--ink-soft);
    text-align: justify;
}
.page-content blockquote {
    border-left: 4px solid var(--accent); padding: .75rem 1.25rem;
    background: var(--paper-warm); margin: 1.5rem 0;
    font-style: italic; color: var(--ink-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.page-content img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin: 1.25rem 0;
}
.page-content table {
    width: 100%; border-collapse: collapse; margin: 1.5rem 0;
    font-size: .9rem; box-shadow: var(--shadow-sm);
}
.page-content th, .page-content td {
    border: 1px solid var(--rule); padding: .65rem 1rem; text-align: left;
}
.page-content th {
    background: var(--ink); color: var(--white);
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .5px; font-weight: 600;
}
.page-content tr:nth-child(even) td { background: var(--paper-warm); }
.page-content tr:hover td { background: var(--gold-lt); }
.page-content code {
    font-family: var(--font-mono); font-size: .82em;
    background: var(--paper-dark); padding: .1em .4em; border-radius: 2px;
    color: var(--accent);
}
.page-content pre { background: var(--ink); color: #e8e0d5; padding: 1.25rem; border-radius: var(--radius); overflow-x: auto; margin: 1rem 0; }
.page-content pre code { background: none; color: inherit; padding: 0; }
.page-content a { border-bottom: 1px solid var(--accent-lt); }
.page-content a:hover { border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   PAGE FOOTER ZONE
═══════════════════════════════════════════════════════════ */
.page-footer-zone {
    background: var(--paper-dark);
    border-top: 2px solid var(--rule);
    padding: 1.5rem 0;
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL SITE FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--ink);
    color: #9a8f82;
    border-top: 4px solid var(--accent);
}
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.5rem 1.5rem; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-col h4 { font-family: var(--font-display); font-size: 1rem; color: var(--white); margin-bottom: .75rem; }
.footer-col p  { font-size: .85rem; line-height: 1.6; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: .35rem; }
.footer-col a  { color: #7a7068; font-size: .85rem; text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 1.25rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem;
    font-size: .8rem; color: #5a5248;
}
.footer-credit { font-family: var(--font-mono); font-size: .72rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; transition: none; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE HERO
═══════════════════════════════════════════════════════════ */
.hero {
    background: linear-gradient(135deg, var(--ink) 0%, #3a2512 60%, #1a1208 100%);
    padding: 5rem 0 4rem; text-align: center;
    position: relative; overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,.015) 40px, rgba(255,255,255,.015) 41px);
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--white); margin-bottom: .75rem; font-weight: 900; }
.hero-sub { font-size: 1.15rem; color: var(--accent-lt); max-width: 520px; margin: 0 auto 2rem; line-height: 1.6; }
.btn-hero {
    display: inline-block; padding: .8rem 2rem;
    background: var(--accent); color: var(--white);
    font-family: var(--font-mono); font-size: .85rem; letter-spacing: 1px; text-transform: uppercase;
    border-radius: var(--radius); text-decoration: none;
    transition: background .2s, transform .2s;
}
.btn-hero:hover { background: #d4561f; transform: translateY(-2px); text-decoration: none; color: var(--white); }

/* ── Alert / messages ─────────────────────────────────────── */
.alert { padding: .85rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: .9rem; border: 1px solid transparent; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    :root { --sidebar-w: 200px; }
}

@media (max-width: 860px) {
    .content-grid,
    .content-grid.no-left,
    .content-grid.no-right { grid-template-columns: 1fr; grid-template-areas: "main" "left" "right"; }
    .sidebar-left, .sidebar-right { display: flex; flex-wrap: wrap; gap: 1rem; }
    .sidebar-left .widget, .sidebar-right .widget { flex: 1 1 260px; }
}

@media (max-width: 640px) {
    html { font-size: 15px; }
    .nav-hamburger { display: flex; }
    .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--ink); padding: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
    .site-nav.open { display: block; }
    .nav-list { flex-direction: column; align-items: flex-start; gap: 0; }
    .nav-item > a { width: 100%; }
    .dropdown { position: static; border: none; box-shadow: none; padding-left: 1rem; }
    .has-drop:hover .dropdown { display: none; }
    .has-drop.open .dropdown { display: block; }
    .footer-bottom { flex-direction: column; text-align: center; }
}