/*
Theme Name:  Chronicle
Theme URI:   https://chronicle-theme.example.com
Author:      Chronicle Team
Author URI:  https://chronicle-theme.example.com
Description: A powerful magazine-style WordPress theme featuring an unlimited, fully customisable grid layout. Arrange posts from any category into columns and rows, control accent colours and titles via the WordPress Customiser, and give readers instant social sharing on every post. Built for publishers who need editorial flexibility without code.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chronicle
Tags: magazine, news, blog, custom-colors, custom-menu, featured-images, grid-layout, responsive-layout, rtl-language-support, sticky-post, three-columns, translation-ready
*/

/* ═══════════════════════════════════════════════════
   CHRONICLE THEME — CORE STYLESHEET
   ═══════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --ink:        #1a1a1a;
    --ink2:       #3d3d3d;
    --muted:      #888;
    --rule:       #d8d0c4;
    --bg:         #faf7f2;
    --surface:    #ffffff;
    --accent:     #c0392b;
    --gold:       #c9a84c;
    --radius:     4px;
    --shadow:     0 2px 12px rgba(0,0,0,.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.14);
    --max-width:  1400px;
}

html  { scroll-behavior: smooth; }
body  {
    font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    background:  var(--bg);
    color:       var(--ink);
    line-height: 1.6;
    font-size:   16px;
}

img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--accent); text-decoration: none; }
a:hover { opacity: .8; }
ul, ol { list-style: none; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    line-height: 1.25;
    color: var(--ink);
}

/* ── SCREEN-READER TEXT ── */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}

/* ── WRAPPER ── */
.chronicle-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }

/* ════════════════════════════════
   TOP BAR
   ════════════════════════════════ */
#topbar {
    background:   var(--ink);
    color:        #fff;
    font-size:    .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:      5px 0;
}
#topbar .chronicle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.topbar-date  { color: #aaa; }
.topbar-links { display: flex; gap: 1.2rem; }
.topbar-links a { color: #ccc; transition: color .15s; }
.topbar-links a:hover { color: #fff; opacity: 1; }

/* ════════════════════════════════
   SITE HEADER
   ════════════════════════════════ */
#masthead {
    background:   var(--surface);
    border-bottom: 3px double var(--rule);
    padding:      1.5rem 0 1rem;
}
.site-header-inner {
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           .5rem;
}
.site-title a {
    font-family:   'Libre Baskerville', Georgia, serif;
    font-size:     clamp(2.4rem, 6vw, 4.2rem);
    font-weight:   700;
    letter-spacing: -.04em;
    color:         var(--ink);
    line-height:   1;
}
.site-description {
    font-size:    .78rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color:        var(--muted);
    border-top:   1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding:      5px 2rem;
}

/* ════════════════════════════════
   PRIMARY NAV
   ════════════════════════════════ */
#site-navigation {
    background: var(--ink);
    position:   sticky;
    top:        0;
    z-index:    200;
}
#site-navigation .chronicle-wrap {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
#primary-menu {
    display: flex;
}
#primary-menu li > a {
    color:          #ddd;
    font-size:      .8rem;
    font-weight:    600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding:        12px 16px;
    display:        block;
    border-bottom:  3px solid transparent;
    transition:     all .15s;
    opacity:        1;
}
#primary-menu li > a:hover,
#primary-menu li.current-menu-item > a {
    color:        #fff;
    border-color: var(--gold);
}
.nav-extras {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 0;
}
.btn-customize {
    background:     var(--accent);
    color:          #fff !important;
    border:         none;
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        7px 14px;
    border-radius:  var(--radius);
    cursor:         pointer;
    transition:     all .2s;
    display:        flex;
    align-items:    center;
    gap:            6px;
    opacity:        1 !important;
}
.btn-customize:hover { background: #a93226; transform: translateY(-1px); }
.btn-add-row {
    background:     transparent;
    color:          #aaa;
    border:         1px solid #444;
    font-size:      .75rem;
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding:        6px 14px;
    border-radius:  var(--radius);
    cursor:         pointer;
    transition:     all .2s;
}
.btn-add-row:hover { border-color: var(--gold); color: var(--gold); }

/* ════════════════════════════════
   BREAKING NEWS TICKER
   ════════════════════════════════ */
#breaking-ticker {
    background:  var(--accent);
    color:       #fff;
    font-size:   .76rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    overflow:    hidden;
    height:      34px;
}
.ticker-label {
    background:     #900;
    padding:        0 14px;
    height:         100%;
    display:        flex;
    align-items:    center;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space:    nowrap;
    flex-shrink:    0;
}
.ticker-viewport { overflow: hidden; flex: 1; height: 100%; }
.ticker-track {
    display:   flex;
    animation: chronicle-ticker 40s linear infinite;
    white-space: nowrap;
    height:    100%;
    align-items: center;
}
.ticker-track span { padding: 0 2rem; }
@keyframes chronicle-ticker {
    from { transform: translateX(0);    }
    to   { transform: translateX(-50%); }
}

/* ════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════ */
#primary { padding: 1.5rem 0 2rem; }

/* ════════════════════════════════
   GRID — ROWS & COLUMNS
   ════════════════════════════════ */
.chronicle-grid { display: flex; flex-direction: column; gap: 0; }

.grid-row {
    display:              grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                  1.5rem;
    padding:              2rem 0;
    border-bottom:        2px solid var(--rule);
}
.grid-row:first-child { padding-top: 0; }
.grid-row:last-child  { border-bottom: none; }

/* ── COLUMN ── */
.grid-col {
    position: relative;
}
.col-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  .8rem;
    padding-bottom: .5rem;
    border-bottom:  3px solid var(--col-accent, var(--accent));
}
.col-title {
    font-family:    'Libre Baskerville', Georgia, serif;
    font-size:      1.05rem;
    font-weight:    700;
    letter-spacing: -.01em;
    font-style:     italic;
    text-transform: uppercase;
    color:          var(--col-accent, var(--accent));
}
.col-controls { display: flex; gap: 4px; }

.btn-col-edit,
.btn-col-loadmore {
    border:         1px solid var(--rule);
    border-radius:  3px;
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding:        3px 9px;
    cursor:         pointer;
    transition:     all .15s;
    line-height:    1.4;
}
.btn-col-edit {
    background: transparent;
    color:      var(--muted);
}
.btn-col-edit:hover {
    border-color: var(--col-accent, var(--accent));
    color:        var(--col-accent, var(--accent));
}
.btn-col-loadmore {
    background:   var(--col-accent, var(--accent));
    border-color: transparent;
    color:        #fff;
}
.btn-col-loadmore:hover { opacity: .85; }

/* ── INLINE EDIT PANEL ── */
.col-inline-edit {
    display:       none;
    background:    #fffbf5;
    border:        1px dashed var(--accent);
    border-radius: var(--radius);
    padding:       .75rem;
    margin-bottom: .75rem;
    animation:     chronicle-fadein .2s ease;
}
.col-inline-edit.is-open { display: block; }
@keyframes chronicle-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.ie-row {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    margin-bottom: .4rem;
}
.ie-row label {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--muted);
    width:          62px;
    flex-shrink:    0;
}
.ie-row input[type="text"],
.ie-row select {
    flex:           1;
    border:         1px solid var(--rule);
    border-radius:  3px;
    font-size:      .83rem;
    padding:        5px 8px;
    color:          var(--ink);
    background:     #fff;
    outline:        none;
    font-family:    inherit;
}
.ie-row input[type="text"]:focus,
.ie-row select:focus { border-color: var(--accent); }
.ie-row input[type="color"] {
    width: 30px; height: 30px;
    border: 1px solid var(--rule); border-radius: 3px;
    cursor: pointer; padding: 0; appearance: none;
}
.ie-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ie-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
.ie-actions { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .4rem; }
.btn-ie-apply, .btn-ie-cancel {
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border:         none;
    padding:        5px 12px;
    border-radius:  3px;
    cursor:         pointer;
    font-family:    inherit;
}
.btn-ie-apply  { background: var(--accent); color: #fff; }
.btn-ie-cancel { background: var(--rule);   color: var(--ink); }

/* ── POST LIST ── */
.post-list { display: flex; flex-direction: column; }

/* ── POST ITEM ── */
.post-item {
    padding:      .75rem 0;
    border-bottom: 1px solid var(--rule);
    position:     relative;
}
.post-item:last-child  { border-bottom: none; }
.post-item:first-child { padding-top: 0; }
.post-item.is-featured {
    border-left:  3px solid var(--col-accent, var(--accent));
    padding-left: .8rem;
    margin-left:  -3px;
}
.post-thumbnail {
    width:         100%;
    height:        145px;
    object-fit:    cover;
    border-radius: var(--radius);
    margin-bottom: .6rem;
}
.post-meta {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    flex-wrap:   wrap;
    margin-bottom: .3rem;
}
.cat-badge {
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #fff;
    background:     var(--col-accent, var(--accent));
    padding:        2px 7px;
    border-radius:  2px;
}
.post-date,
.post-author {
    font-size: .68rem;
    color:     var(--muted);
}
.post-author::before { content: 'by '; font-style: italic; }

.post-title-link {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size:   .97rem;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--ink);
    display:     block;
    margin-bottom: .3rem;
    transition:  color .15s;
}
.post-item.is-featured .post-title-link { font-size: 1.06rem; }
.post-title-link:hover { color: var(--col-accent, var(--accent)); opacity: 1; }

.post-excerpt {
    font-size:   .82rem;
    color:       var(--ink2);
    line-height: 1.6;
    margin-bottom: .5rem;
}

/* ── POST FOOTER ── */
.post-footer {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         .4rem;
    flex-wrap:   wrap;
}
.read-more {
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--col-accent, var(--accent));
    opacity:        1;
    transition:     opacity .15s;
}
.read-more:hover { opacity: .65; }

/* ── SHARE STRIP ── */
.share-strip {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.share-lbl {
    font-size:      .65rem;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight:    600;
}
.share-btn {
    width:         26px;
    height:        26px;
    border:        none;
    border-radius: 3px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    transform .15s, opacity .15s;
    text-decoration: none;
    color: #fff;
    opacity: 1;
}
.share-btn:hover { transform: translateY(-2px); opacity: .85; }
.share-btn svg { width: 13px; height: 13px; fill: #fff; }
.share-fb   { background: #1877f2; }
.share-tw   { background: #000;    }
.share-wa   { background: #25d366; }
.share-more { background: #777;    }

/* ── LOAD MORE (bottom of column) ── */
.col-load-more-wrap { text-align: center; padding: .6rem 0 0; }
.btn-load-more {
    background:     transparent;
    border:         1px solid var(--col-accent, var(--accent));
    color:          var(--col-accent, var(--accent));
    font-family:    inherit;
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        6px 18px;
    border-radius:  3px;
    cursor:         pointer;
    transition:     all .2s;
}
.btn-load-more:hover {
    background: var(--col-accent, var(--accent));
    color:      #fff;
}

/* ════════════════════════════════
   SHARE MODAL
   ════════════════════════════════ */
#chronicle-share-modal {
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,.5);
    z-index:        2000;
    display:        flex;
    align-items:    center;
    justify-content: center;
    opacity:        0;
    pointer-events: none;
    transition:     opacity .2s;
    backdrop-filter: blur(4px);
}
#chronicle-share-modal.is-open {
    opacity:        1;
    pointer-events: all;
}
.share-modal-inner {
    background:    var(--surface);
    border-radius: 8px;
    padding:       1.5rem;
    max-width:     380px;
    width:         90%;
    box-shadow:    var(--shadow-lg);
    transform:     scale(.95);
    transition:    transform .2s;
}
#chronicle-share-modal.is-open .share-modal-inner { transform: scale(1); }
.share-modal-headline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size:   1.05rem;
    font-weight: 700;
    margin-bottom: .3rem;
    color:       var(--ink);
}
.share-modal-url {
    font-size:   .72rem;
    color:       var(--muted);
    background:  #f5f0e8;
    border:      1px solid var(--rule);
    border-radius: 3px;
    padding:     5px 8px;
    margin-bottom: 1rem;
    word-break:  break-all;
    font-family: monospace;
}
.share-platform-grid {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   .6rem;
    margin-bottom:         1rem;
}
.btn-platform {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .3rem;
    border:         none;
    border-radius:  6px;
    padding:        .7rem .3rem;
    cursor:         pointer;
    font-family:    inherit;
    font-size:      .7rem;
    font-weight:    700;
    color:          #fff;
    transition:     transform .15s, opacity .15s;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
}
.btn-platform:hover { transform: translateY(-2px); opacity: .9; }
.btn-platform .ico  { font-size: 1.3rem; line-height: 1; }
.btn-modal-close {
    width:          100%;
    background:     var(--rule);
    color:          var(--ink);
    border:         none;
    border-radius:  4px;
    padding:        8px;
    font-family:    inherit;
    font-size:      .8rem;
    font-weight:    700;
    cursor:         pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition:     background .15s;
}
.btn-modal-close:hover { background: #ccc; }

/* ════════════════════════════════
   CUSTOMISER SIDEBAR
   (Front-end preview panel — 
    WP Customizer handles the real
    backend panel via customizer.php)
   ════════════════════════════════ */
#chronicle-customizer {
    position:   fixed;
    top:        0;
    right:      -430px;
    width:      400px;
    height:     100vh;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index:    1000;
    display:    flex;
    flex-direction: column;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    border-left: 1px solid var(--rule);
}
#chronicle-customizer.is-open { right: 0; }
.cust-head {
    background: var(--ink);
    color:      #fff;
    padding:    1rem 1.2rem;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.cust-head h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size:   1rem;
    font-weight: 700;
    font-style:  italic;
    color:       #fff;
}
.btn-cust-close {
    background: none;
    border:     none;
    color:      #aaa;
    font-size:  1.3rem;
    cursor:     pointer;
    line-height: 1;
    transition: color .15s;
    padding:    0 4px;
}
.btn-cust-close:hover { color: #fff; }
.cust-body {
    flex:       1;
    overflow-y: auto;
    padding:    1.2rem;
}
.cust-body::-webkit-scrollbar { width: 4px; }
.cust-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

.cust-section { margin-bottom: 1.5rem; }
.cust-section-title {
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  .8rem;
    padding-bottom: .4rem;
    border-bottom:  1px solid var(--rule);
}
.cust-col-block {
    background:    #faf7f2;
    border:        1px solid var(--rule);
    border-radius: var(--radius);
    padding:       .8rem;
    margin-bottom: .6rem;
}
.cust-col-block label {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--muted);
    display:        block;
    margin-bottom:  .3rem;
}
.cust-input, .cust-select {
    width:       100%;
    border:      1px solid var(--rule);
    border-radius: var(--radius);
    font-family: inherit;
    font-size:   .85rem;
    padding:     7px 10px;
    color:       var(--ink);
    background:  #fff;
    outline:     none;
    transition:  border-color .15s;
    margin-bottom: .5rem;
    cursor:      pointer;
}
.cust-input:focus, .cust-select:focus { border-color: var(--accent); }
.cust-color-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cust-color {
    width: 32px; height: 32px;
    border: 2px solid var(--rule); border-radius: 3px;
    cursor: pointer; appearance: none; padding: 0; outline: none;
}
.cust-color::-webkit-color-swatch-wrapper { padding: 0; }
.cust-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.cust-color-val { font-size: .72rem; color: var(--muted); font-family: monospace; }
.btn-cust-apply {
    width:          100%;
    background:     var(--accent);
    color:          #fff;
    border:         none;
    font-family:    inherit;
    font-size:      .82rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding:        9px;
    border-radius:  var(--radius);
    cursor:         pointer;
    transition:     background .2s;
    margin-top:     .4rem;
}
.btn-cust-apply:hover { background: #a93226; }
.btn-cust-add-row {
    width:          100%;
    background:     var(--ink);
    color:          #fff;
    border:         none;
    font-family:    inherit;
    font-size:      .82rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding:        9px;
    border-radius:  var(--radius);
    cursor:         pointer;
    transition:     background .2s;
}
.btn-cust-add-row:hover { background: #333; }

/* ════════════════════════════════
   TOAST
   ════════════════════════════════ */
#chronicle-toast {
    position:       fixed;
    bottom:         24px;
    left:           50%;
    transform:      translateX(-50%) translateY(80px);
    background:     var(--ink);
    color:          #fff;
    font-size:      .8rem;
    font-weight:    600;
    padding:        9px 22px;
    border-radius:  50px;
    z-index:        9999;
    transition:     transform .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
    white-space:    nowrap;
    border-left:    4px solid var(--accent);
}
#chronicle-toast.is-visible { transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════
   SINGLE POST
   ════════════════════════════════ */
.single-post-wrap { max-width: 780px; margin: 2rem auto; padding: 0 1.25rem; }
.single-cat-badge {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--accent);
    padding: 3px 10px; border-radius: 2px;
    margin-bottom: .8rem;
}
.single-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin-bottom: .8rem;
}
.single-meta {
    display: flex; gap: .8rem; flex-wrap: wrap;
    font-size: .8rem; color: var(--muted);
    padding: .8rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
}
.single-featured-image { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.5rem; }
.single-content { font-size: 1rem; line-height: 1.8; color: var(--ink2); }
.single-content p   { margin-bottom: 1.2rem; }
.single-content h2,
.single-content h3  { margin: 1.5rem 0 .6rem; color: var(--ink); }
.single-share-row {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: 1.5rem 0; border-top: 1px solid var(--rule); margin-top: 2rem;
}
.single-share-row .share-lbl { font-size: .75rem; }
.single-share-row .share-btn { width: 36px; height: 36px; border-radius: 4px; }
.single-share-row .share-btn svg { width: 16px; height: 16px; }

/* ════════════════════════════════
   SIDEBAR  (optional classic sidebar)
   ════════════════════════════════ */
.widget-area { padding: 1.5rem 0; }
.widget + .widget { margin-top: 2rem; }
.widget-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: .95rem; font-weight: 700; font-style: italic;
    text-transform: uppercase; letter-spacing: -.01em;
    color: var(--accent);
    border-bottom: 3px solid var(--accent);
    padding-bottom: .4rem; margin-bottom: .8rem;
}

/* ════════════════════════════════
   FOOTER
   ════════════════════════════════ */
#colophon {
    background: var(--ink);
    color:      #aaa;
    font-size:  .75rem;
    letter-spacing: .04em;
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid #333;
}
.footer-widgets .widget-title { color: #fff; border-color: var(--accent); }
.footer-widgets a { color: #aaa; transition: color .15s; }
.footer-widgets a:hover { color: #fff; opacity: 1; }
.footer-bottom {
    padding:    1rem 0;
    text-align: center;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:  wrap;
    gap:        .5rem;
}
.footer-bottom strong { color: #fff; }
.footer-social { display: flex; gap: .8rem; }
.footer-social a { color: #aaa; transition: color .15s; }
.footer-social a:hover { color: #fff; opacity: 1; }

/* ════════════════════════════════
   ADMIN BAR OFFSET
   ════════════════════════════════ */
.admin-bar #site-navigation { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #site-navigation { top: 46px; } }

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media (max-width: 1024px) {
    .footer-widgets { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
    .grid-row { grid-template-columns: 1fr 1fr; }
    #topbar   { display: none; }
}
@media (max-width: 580px) {
    .grid-row            { grid-template-columns: 1fr; }
    #chronicle-customizer{ width: 100%; }
    .footer-widgets      { grid-template-columns: 1fr; }
    #primary-menu        { display: none; } /* replace with hamburger in production */
}

/* ════════════════════════════════
   VIEWER PERMISSION LOCK
   These classes are added to <body> by WordPress
   for non-logged-in / non-admin users.
   Hide all editor chrome at the CSS layer
   (third layer after PHP + JS checks).
   ════════════════════════════════ */
body:not(.user-can-edit) .btn-col-edit,
body:not(.user-can-edit) .col-inline-edit,
body:not(.user-can-edit) .btn-add-row,
body:not(.user-can-edit) .btn-customize,
body:not(.user-can-edit) #chronicle-customizer,
body:not(.user-can-edit) .nav-extras {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ════════════════════════════════════════════════════
   CUSTOM HEADER IMAGE
   - Full width edge-to-edge, centred subject
   - Replaces logo/branding completely
   - Double-blink flash every 10 seconds
   ════════════════════════════════════════════════════ */

/* Step 1: Strip all masthead defaults when image is active */
body.has-header-image #masthead {
    padding:       0 !important;
    margin:        0 !important;
    border:        none !important;
    background:    none !important;
    line-height:   0 !important;
    display:       block !important;
    overflow:      hidden;
}

/* Step 2: The anchor wraps the full masthead — block, no gap */
.chronicle-header-image-link {
    display:    block;
    width:      100%;
    line-height: 0;
    font-size:  0;
    border:     none;
    padding:    0;
    margin:     0;
}

/* Step 3: Flash keyframe — 9 s idle, 1 s double-blink */
@keyframes chronicle-header-flash {
    0%,  87%  { opacity: 1;    }
    89%        { opacity: 0.1;  }
    92%        { opacity: 1;    }
    94%        { opacity: 0.1;  }
    97%, 100%  { opacity: 1;    }
}

/* Step 4: The image — full width, height auto, centred */
.chronicle-header-image {
    display:          block;
    width:            100% !important;   /* force full width */
    max-width:        100% !important;
    height:           auto !important;   /* keep natural proportions */
    min-height:       80px;
    max-height:       500px;
    object-fit:       contain;           /* show whole image, no crop */
    object-position:  center center;     /* centre horizontally & vertically */
    margin:           0 auto;
    padding:          0;
    animation:        chronicle-header-flash 10s ease-in-out infinite;
    transition:       opacity 0.3s ease;
}