/* ========================================================================== 
   ClimateClicker – News (v3.6.3)
   - Opaque mobile drawer with gradient, edge shadow, and safe-area padding
   - Accordion-style Topics on small screens with chevron + indentation
   - Submenu bullets are UNDER the "Topics" label (stacked column layout)
   - No extra space under Topics when collapsed (padding moved to open state)
   - Drawer owns its scroll; background is locked; no overscroll chaining
   - Close (X) button hidden on desktop, visible only inside mobile drawer
   - FIX: Backdrop sits BELOW drawer, links clickable (z-index adjustments)
   - FIX: No horizontal scrollbar or sideways swipe when drawer is closed or open
   - NEW: Cards are nearly full width on narrow screens; capped width on wide
   ========================================================================== */

/* JS toggle: elements that only show when JS runs */
.js-only { display: none !important; }
.js .js-only { display: revert !important; }

/* Base variables */
:root{
  --primary-color:#1e6f5c;
  --primary-light:#29bb89;
  --primary-dark:#134e4a;

  --secondary-color:#5eaaa8;
  --accent-color:#f05945;

  --success-color:#4caf50;
  --warning-color:#ff9800;
  --error-color:#f44336;

  --background-color:#f7f8fa;
  --surface-color:#fff;

  --text-primary:#1c1f24;
  --text-secondary:#4d5661;
  --text-tertiary:#748091;
  --border-color:#e5e9ef;

  --card-shadow:0 8px 20px rgba(16,24,40,.08);
  --hover-shadow:0 12px 28px rgba(16,24,40,.12);
  --header-shadow:0 8px 24px rgba(16,24,40,.12);

  --font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --font-family-headings:"Montserrat","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --line-height:1.6;
  --line-height-headings:1.2;

  --space-unit:.25rem;
  --space-xs:calc(var(--space-unit)*2);
  --space-sm:calc(var(--space-unit)*4);
  --space-md:calc(var(--space-unit)*8);
  --space-lg:calc(var(--space-unit)*12);
  --space-xl:calc(var(--space-unit)*16);

  --container-width:1200px;

  --transition-fast:150ms ease;
  --transition-normal:300ms ease;

  --radius-sm:.325rem;
  --radius-md:.6rem;
  --radius-lg:1.1rem;
  --radius-full:9999px;

  --ring-color:rgba(30,111,92,.45);

  --nav-item-height:40px;
  --nav-gap:1.1rem;

  --search-min-w:90px;
  --search-max-w:320px;

  /* Drawer theme */
  --drawer-bg:#0e3a33;
  --drawer-grad:linear-gradient(180deg,#0f3b34 0%,#134e4a 100%);
  --drawer-border:1px solid rgba(255,255,255,.14);
  --drawer-shadow:-24px 0 60px rgba(0,0,0,.35);
  --drawer-text:#eafff8;
  --drawer-muted:#cfeee7;

  /* Mobile submenu indent (for bullets under Topics) */
  --submenu-indent: 1.25rem;

  /* Card sizing */
  --card-max-w: 840px;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* NEW: prevent any accidental horizontal scrolling */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip){
  html, body { overflow-x: hidden; }
}

/* Allow normal vertical panning by default */
html, body { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font-family);line-height:var(--line-height);color:var(--text-primary);
  background:
    radial-gradient(1200px 600px at 80% -20%,#c8efe4 0%,transparent 60%) no-repeat,
    radial-gradient(800px 400px at -10% 20%,#e6fff7 0%,transparent 60%) no-repeat,
    var(--background-color);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary-dark)}
button,.button{
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-color);color:#fff;border:1px solid transparent;
  border-radius:var(--radius-md);padding:.6rem 1rem;font-weight:600;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)
}
button:hover,.button:hover{background:var(--primary-dark);transform:translateY(-1px)}
button:focus-visible,.button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring-color)}
input,select{
  font:inherit;color:inherit;background:#fff;border:1px solid var(--border-color);padding:.55rem .75rem;border-radius:var(--radius-md);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)
}
input:focus-visible,select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px var(--ring-color)}
::selection{background:rgba(41,187,137,.25)}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-family-headings);line-height:var(--line-height-headings);color:var(--text-primary);
  margin:0 0 var(--space-sm);font-weight:750;letter-spacing:-.01em
}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,4vw,2.25rem);color:var(--primary-dark)}
h3{font-size:clamp(1.25rem,3vw,1.6rem)}
p{margin:0 0 var(--space-md);color:var(--text-secondary)}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* ===== Header & Nav ===== */
.site-header{
  background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);
  color:#fff;position:sticky;top:0;
  z-index:2000;
  box-shadow:var(--header-shadow);backdrop-filter:blur(8px)
}
.header-inner{
  display:grid;
  grid-template-columns: auto auto auto auto auto;
  align-items:center;gap:var(--space-md);padding:.9rem var(--space-md);
  max-width:var(--container-width);margin:0 auto;
  position:relative;
}
.header-inner > h1{ grid-column:1; }
.header-inner > #nav-toggle{ grid-column:2; }
.header-inner > nav.main-nav{ grid-column:3; }
.header-inner > .nav-search-form{ grid-column:4; }
.header-inner > .region-switcher{ grid-column:5; justify-self:end; }

.site-header h1{color:#fff;margin:0;font-size:clamp(1.25rem,4vw,1.6rem);font-weight:800}

#nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.6rem;padding:.25rem .5rem}

.main-nav > .nav-list{
  display:flex; align-items:center; gap:var(--nav-gap);
  list-style:none; margin:0; padding:0;
}
.main-nav .dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-.5rem;
  height:.5rem;
  pointer-events:auto;
}
.main-nav li{display:flex;align-items:center;position:relative}

/* Make Topics <button> typographically identical to links */
.main-nav button.nav-link{
  font-family:inherit;font-size:inherit;font-weight:700;color:inherit;background:transparent;border:0;
  padding:0 .1rem;height:var(--nav-item-height);line-height:1;display:inline-flex;align-items:center;letter-spacing:.01em;
  -webkit-appearance:none;appearance:none;
}
.main-nav .nav-link .nav-text{ font-weight:inherit; }

.nav-item{ position:relative; display:flex; align-items:center; }

.nav-link{
  appearance:none; background:none; border:0; color:#fff;
  display:inline-flex; align-items:center; gap:.4rem;
  height:var(--nav-item-height); padding:0 .1rem;
  font-weight:700; line-height:1; letter-spacing:.01em;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

/* animated underline (desktop) */
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-3px;
  height:2px; width:0; background:#fff; transition:width .25s ease, background-color var(--transition-fast);
}
.nav-item.active .nav-link::after,
.nav-link:hover::after,
.dropdown.open > .nav-link::after{ width:100%; }

/* Brighter green on hover / focus / open */
.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible,
.main-nav .dropdown.open > .nav-link{ color: var(--primary-light); }
.main-nav .nav-link:hover::after,
.main-nav .dropdown.open > .nav-link::after{ background: var(--primary-light); }

/* Dropdown panel (desktop) */
.dropdown-menu{
  position:absolute; left:0; top:100%;
  min-width:240px; padding:.4rem;
  background:#0f3b34; border:1px solid rgba(255,255,255,.15);
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.25);
  display:none; z-index:1001;
}
.dropdown-menu a{display:block;color:#cff7ee;padding:.55rem .7rem;border-radius:.6rem}
.dropdown-menu a:hover{ background:rgba(255,255,255,.1); color:#fff; }

@media (hover:hover) and (pointer:fine){
  .topics:hover > .dropdown-menu{ display:block; }
}

/* small chevron icon (hidden on desktop) */
.nav-link .chevron{ display:none; width:18px; height:18px }

/* ===== Nav Search ===== */
.nav-search-form{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.nav-search-input{
  width:clamp(var(--search-min-w), 34vw, var(--search-max-w));
  min-width:var(--search-min-w);
  max-width:var(--search-max-w);
  background:#fff; color:#000;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:.5rem .9rem; line-height:1.1;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.nav-search-input::placeholder{ color:#333; opacity:.9; }
.nav-search-input:focus-visible{
  outline:none; border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);
}

/* ===== Feed toolbar ===== */
.feed-toolbar{
  position:relative; z-index:900;
  background:linear-gradient(90deg,#f2faf7,#ffffff);
  border-bottom:1px solid var(--border-color);
}
.feed-toolbar-inner{
  width:min(90vw, var(--container-width));
  margin:0 auto;
  padding:.6rem 0;
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
}
.feed-toolbar-select{
  min-width:180px;
  background:#fff; color:var(--text-primary);
}

/* ===== Feed ===== */
.feed{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  width:100%;
  margin:0 auto;
  padding:0 0 var(--space-xl);
}

.feed-layout{
  width:100%;
  margin:0 auto;
  padding:var(--space-lg) 0 var(--space-xl);
  display:grid;
  gap:var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}

.feed-layout>.feed{
  padding-bottom:0;
}

@media (min-width: 1100px){
  .feed-layout{
    /* Keep main column perfectly centered; place sidebar in right gutter */
    grid-template-columns: 1fr minmax(0, var(--card-max-w)) 1fr;
    grid-template-areas: ". main .";
    align-items:start;
  }
  .feed-layout > .feed{ grid-area: main; }
  .feed-layout > .feed-sidebar{
    grid-column: 3;
    justify-self: start;
    width: clamp(260px, 28vw, 320px);
  }
}

@media (max-width: 1099px){
  .feed-layout{
    grid-template-columns:minmax(0,1fr);
  }
}

.feed-sidebar{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

.feed-sidebar:empty{
  display:none;
}

.most-viewed{
  position:sticky;
  top:6.5rem;
  background:var(--surface-color);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
  padding:var(--space-sm);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}

@media (max-width: 1099px){
  .most-viewed{
    position:static;
  }
}

.most-viewed-title{
  margin:0 0 var(--space-sm);
  font-size:1.2rem;
  color:var(--primary-dark);
}

.most-viewed-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:most-viewed;
  display:grid;
  gap:var(--space-sm);
}

.most-viewed-item{
  counter-increment:most-viewed;
  padding-left:2.25rem;
  position:relative;
}

.most-viewed-item::before{
  content:counter(most-viewed);
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.15rem;
  width:1.6rem;
  height:1.6rem;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  box-shadow:0 4px 12px rgba(16,24,40,.18);
}

.most-viewed-link{
  font-weight:650;
  color:var(--text-primary);
  line-height:1.4;
}

.most-viewed-link:hover{
  color:var(--primary-color);
}

.most-viewed-meta{
  display:block;
  font-size:.92rem;
  color:var(--text-tertiary);
}

.most-viewed-status{
  margin:0;
  font-size:.95rem;
  color:var(--text-tertiary);
}

/* ===== Cards ===== */
.card{
  width: min(75vw, var(--card-max-w));
  max-width: var(--card-max-w);
  margin:0 auto;
  background:var(--surface-color);border:1px solid var(--border-color);border-radius:14px;padding:1.1rem 1.1rem .9rem;
  box-shadow:var(--card-shadow);transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-fast);
  position:relative;overflow:hidden;display:flex;flex-direction:column
}
@media (max-width: 900px){
  .card{ width: min(92vw, var(--card-max-w)); }
}
@media (max-width: 520px){
  .card{ width: 96vw; border-radius:12px; padding:1rem; }
}

.card:hover{transform:translateY(-4px);box-shadow:var(--hover-shadow)}
.card:focus-within{border-color:var(--primary-light);box-shadow:0 0 0 4px var(--ring-color)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--primary-light),transparent 60%)}

/* Header grid with actions on the right */
.card-header{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title actions"
    "meta  actions";
  gap:.45rem .6rem;
}
.card-headline{ grid-area: title; font-size:1.25rem; margin:0; color:var(--primary-dark) }
.card-headline a{color:inherit}
.card-headline a:hover{color:var(--primary-color)}

.header-actions{ grid-area: actions; align-self:start; display:flex; gap:.4rem; }
.header-actions .share-btn{
  background:#f2faf7;color:var(--primary-dark);
  border:1px solid #d7eee5;padding:.45rem .7rem;border-radius:var(--radius-md);
}
.header-actions .share-btn:hover{ background:#e7f7f0; }

/* Meta line */
.card-meta{
  grid-area: meta;
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:.65rem; row-gap:.2rem;
  color:var(--text-tertiary); font-size:.92rem; line-height:1.35;
}
.card-meta .sep{opacity:.5}
.meta-label{ font-weight:700; color:var(--text-tertiary); margin-right:.25rem; }

@media (max-width:520px){
  .card-meta{ column-gap:.5rem; row-gap:.15rem; font-size:.9rem; line-height:1.28; }
  .card-meta .sep{ display:none; }
}

/* Media */
.card-media{margin:.6rem -.1rem .6rem;border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:#f1f4f8}
.card-thumb{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Body */
.card-summary{color:var(--text-secondary);margin:.25rem 0 .5rem}
details summary{list-style:none;cursor:pointer;color:var(--primary-color);font-weight:700;margin:.25rem 0;padding:.2rem 0;outline:none}
details summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:.35rem}
details .card-body{color:var(--text-secondary)}

/* Icons + meta line */
.with-icon{ display:inline-flex; align-items:center; gap:.35rem; }
.icon{
  width:16px; height:16px; display:inline-block; flex:0 0 16px;
  color:var(--text-tertiary);
}
.card-meta .with-icon .card-date,
.card-meta .with-icon .card-readmins{ color:var(--text-tertiary); }

/* Keep labels for screen readers only */
.card-meta .meta-label{
  position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0; border:0;
  height:1px; width:1px; overflow:hidden;
}

/* Author icon styling */
.icon-author{
  width:16px; height:16px;
  color: var(--text-tertiary);
  flex: 0 0 16px;
  display:inline-block;
  vertical-align:middle;
}
.card-author.with-icon{ display:inline-flex; align-items:center; gap:.35rem; color: var(--text-tertiary); }

/* Clickable headline cue */
.card-headline.is-clickable,
.card-headline.is-clickable * { cursor: pointer; }
.card:hover .card-headline.is-clickable {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px;
}

/* (Optional) Also make the media feel clickable */
.card-media { cursor: pointer; }

/* Footer */
.card-footer{
  margin-top:auto;padding-top:.7rem;border-top:1px dashed var(--border-color);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap
}
/* DROP-IN: Topics/Tags row (between meta and image) */
.card-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .45rem;
  list-style:none;
  padding:0;
  margin:.35rem 0 .5rem; /* t: a bit under meta, b: a bit above image */
}

/* Each tag “pill” with icon + dashed accent border */
.card-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .6rem;
  border:1.5px dashed var(--primary-light); /* shared accent color */
  border-radius:999px;
  background:#f6fbfa;                        /* soft background */
  color:var(--primary-dark);
  font-weight:700;
  line-height:1;
  font-size:.82rem;
  white-space:nowrap;
}

/* Tag icon before the name */
.icon-tag{
  width:14px; height:14px; flex:0 0 14px;
  color:var(--primary-light);
  display:inline-block;
}

/* Optional: keep tags full-width on tiny screens without squishing text */
@media (max-width:520px){
  .card-tags{ gap:.35rem; }
  .card-tag{ font-size:.8rem; padding:.26rem .55rem; }
}

.card-actions{display:flex;gap:.5rem}
.card-actions .open-source{color:#2e7d79;font-weight:700;padding:.45rem .2rem}

.card-date,.card-readtime{color:var(--text-tertiary);font-size:inherit}

/* ===== States & Pagination ===== */
.loading,.empty,.error{color:var(--text-tertiary);text-align:center;margin:1.25rem auto;padding:1rem;width:min(560px,100%)}
.loading::after{content:"";width:28px;height:28px;display:inline-block;vertical-align:middle;border:2px solid rgba(0,0,0,.08);border-top-color:var(--primary-color);border-radius:50%;margin-left:.6rem;animation:spin 1s linear infinite}
.load-more{display:inline-flex;align-items:center;justify-content:center;margin:1rem auto 0;padding:.6rem 1rem;border:1px solid #c7d6d2;border-radius:var(--radius-md);background:#f6fbfa;color:#2e7d79;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}
.load-more:hover{background:#eef8f5;transform:translateY(-1px)}
.card[data-hidden="true"]{display:none!important}

/* ===== Footer ===== */
.site-footer{background:var(--primary-dark);color:#e7fff7;margin-top:auto}
.footer-grid{max-width:var(--container-width);margin:0 auto;padding:var(--space-lg) var(--space-md);display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.footer-col h3{color:#fff;margin:.15rem 0 .6rem;font-size:1.05rem;letter-spacing:.01em}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.45rem}
.site-footer a{color:#b7ffee}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:.9rem clamp(16px, 4vw, 48px);
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:space-between;
  width:100%; max-width:none; margin:0;
}

.footer-bottom p{color:rgba(255,255,255,.8);margin:0}

/* Social links */
.social-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.social-links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);color:#eafff8;line-height:0;padding:0;font-size:0;
  transition:transform var(--transition-fast),background-color var(--transition-fast)
}
.social-links a:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.social-links svg{width:16px;height:16px;display:block;flex:0 0 16px}

/* ===== Animations ===== */
.fade-in{animation:fadeIn .7s ease-out both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Mobile drawer defaults (desktop: inline via display: contents) --- */
.mobile-drawer{
  grid-column: 3 / span 3;
  display: contents;
}

.region-switcher{
  position:relative;
}

.region-nav{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .5rem;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(10,30,26,.25);
  backdrop-filter:blur(6px);
  transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.region-switcher:hover .region-nav{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 10px 28px rgba(10,30,26,.32);
}

.region-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:#fff;
  opacity:.9;
}
.region-icon svg{width:20px;height:20px;display:block;}

.region-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35rem .8rem;
  border-radius:var(--radius-full);
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  transition:background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.region-link:hover,
.region-link:focus-visible{
  background:rgba(255,255,255,.22);
  color:var(--primary-dark);
  outline:none;
}

.region-link.is-active{
  background:#fff;
  color:var(--primary-dark);
  box-shadow:0 10px 24px rgba(12,49,42,.3);
}

.region-link.is-active:hover,
.region-link.is-active:focus-visible{
  color:var(--primary-dark);
}

/* ===== Off-canvas Backdrop ===== */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  z-index:1500;
  display:none;
}
@media (max-width: 900px){
  .drawer-backdrop{ display:block; }
  .drawer-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }
}

/* Prevent background scroll when menu open (and block horizontal panning) */
html.menu-open,
html.menu-open body{
  overflow: hidden;            /* blocks both axes */
  overscroll-behavior: contain;
  touch-action: none;          /* disable gestures on the page */
}

/* Close button is mobile-only: hide by default */
.drawer-close{ display:none; }

/* --- Drawer styles for small screens --- */
@media (max-width: 900px){
  .header-inner{ grid-template-columns: auto 1fr auto; }
  .header-inner > h1{ grid-column:1; }
  #nav-toggle{
    display:inline-flex;
    grid-column:3;
    justify-self:end;
  }

  .mobile-drawer{
    position: fixed;
    inset: 0 0 0 auto;          /* pin to right side */
    width: min(88vw, 420px);
    max-width: 100%;
    /* Fallback first for older browsers; dvh will override when supported */
    height: 100vh;              /* own scroll area */
    height: 100dvh;             /* dynamic viewport on mobile */
    overflow: auto;             /* vertical scroll lives here */
    overflow-x: hidden;         /* hard stop for horizontal overflow */
    overscroll-behavior: contain;
    background:
      var(--drawer-grad),
      var(--drawer-bg);
    color:#fff;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: var(--drawer-shadow);
    border-left: var(--drawer-border);
    transform: translateX(100%); /* fully offscreen by default */
    transition: transform var(--transition-normal);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index:2100;
    will-change: transform;
    contain: layout paint;       /* isolate layout + paint to avoid page-wide effects */

    /* When closed, be inert for layout/scroll & a11y */
    visibility: hidden;
    pointer-events: none;

    /* Allow vertical scroll while blocking horizontal gestures on the drawer itself */
    touch-action: pan-y;
  }
  .mobile-drawer.open{
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Safety net: if any upstream CSS interferes with media queries,
     force a viewport-bound drawer while the menu is open. */
  html.menu-open .mobile-drawer{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    /* Fallback + dynamic viewport heights */
    height: 100vh;
    height: 100dvh;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    display: flex;
  }

  .region-switcher{
    width:100%;
    margin-top:.5rem;
  }

  .region-nav{
    display:grid;
    grid-template-columns:auto 1fr 1fr;
    align-items:center;
    gap:.45rem;
    width:100%;
    padding:.65rem .75rem;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.12);
    box-shadow:none;
  }

  .region-icon{
    justify-self:flex-start;
    opacity:1;
  }

  .region-link{
    padding:.55rem .65rem;
    font-size:1rem;
  }

  .region-link.is-active{
    box-shadow:0 0 0 1px rgba(13,51,45,.25);
  }

  /* Close button (mobile drawer only) */
  .drawer-close{
    display:inline-flex;
    align-self:flex-end;
    background:transparent;border:0;color:#fff;opacity:.9;
    padding:.5rem;border-radius:.5rem;line-height:0;
  }
  .drawer-close:hover{ opacity:1 }
  .drawer-close:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
  .drawer-close svg{ width:22px; height:22px }

  /* Drawer-specific nav styling */
  .mobile-drawer .nav-list{
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
  }
  .mobile-drawer .nav-link,
  .mobile-drawer button.nav-link{
    color: #eafff8;
    height: auto;
    padding: .7rem .25rem;
    font-size: 1.05rem;
    justify-content: flex-start;
    text-align: left;
  }
  .mobile-drawer .nav-link::after{ display: none; }

  /* Chevron animation */
  .nav-link .chevron{ display:block; transform:rotate(0deg); transition:transform var(--transition-fast); }
  .mobile-drawer .dropdown.open .chevron{ transform: rotate(180deg); }

  /* Vertical stacking for dropdown */
  .mobile-drawer .dropdown{
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
  }
  .mobile-drawer .dropdown .nav-link{ width: 100%; }

  /* Accordion container */
  .mobile-drawer .dropdown-menu{
    position: static;
    display: block;
    width: 100%;
    margin-left: var(--submenu-indent);
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      max-height var(--transition-normal),
      opacity var(--transition-fast);
  }
  .mobile-drawer .dropdown.open > .dropdown-menu{
    max-height: 600px;
    padding: .25rem 0 .4rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Indented bullets under the label */
  .mobile-drawer .dropdown-menu a{
    color:#cfeee7;
    padding:.45rem 0 .45rem 1rem;
    position: relative;
  }
  .mobile-drawer .dropdown-menu a::before{
    content:"";
    position:absolute;
    left:0; top:50%; transform:translateY(-50%);
    width:.4rem; height:.4rem; border-radius:50%;
    background:rgba(255,255,255,.35);
  }

  /* Drawer search */
  .mobile-drawer .nav-search-form{ width: 100%; }
  .mobile-drawer .nav-search-input{ width: 100%; background:#fff; color:#000; }

  /* Optional: tone down hover on dark bg */
  .mobile-drawer .nav-link:hover,
  .mobile-drawer .dropdown.open > .nav-link{ color: var(--primary-light); }
}

/* Desktop only */
@media (min-width: 901px){
  #nav-toggle{ display:none; }
  .mobile-drawer{ display: contents; }   /* nav + form flow inline */
  .drawer-backdrop{ display:none !important; }
  .drawer-close{ display:none !important; }

  /* Desktop header uses a flexible row so the search compresses first */
  .site-header .header-inner{
    display:flex;
    align-items:center;
    gap:var(--space-md);
    padding:.9rem var(--space-md);
  }

  .site-header h1{ flex:0 0 auto; }
  .site-header nav.main-nav{ flex:0 1 auto; white-space:nowrap; }
  .site-header .nav-search-form{ flex:1 1 280px; min-width:0; }
  .site-header .nav-search-input{ width:auto; flex:1 1 auto; }
  .site-header .region-switcher{ flex:0 0 auto; margin-left:auto; position:static; }
}

/* ===== Article page (no card frame) ===== */
.article-page{
  max-width: var(--container-width);
  width: 100%;
  align-items: stretch;
  padding-bottom: var(--space-xl);
}

/* Align article width with card max */
.post{
  width: min(75vw, var(--card-max-w));
  margin: 1rem auto;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.2rem;
  box-shadow: var(--card-shadow);
}
@media (max-width: 900px){
  .post{ width: min(92vw, var(--card-max-w)); }
}
@media (max-width: 520px){
  .post{ width: 96vw; border-radius:12px; padding:1rem; }
}

.post-header{ margin-bottom: .6rem; }
.post-title{ margin: .1rem 0 0; color: var(--primary-dark); }
.post .card-meta{ margin-top: .35rem; }

.post-summary{
  margin: var(--space-md) 0;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.55;
}
.post-summary p{
  margin: 0 0 .6rem;
}
.post-summary p:last-child{
  margin-bottom: 0;
}

.post-media{
  margin: .6rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #f1f4f8;
}
.post-image{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.article-body{ color: var(--text-secondary); }

/* Reuse iconography styles */
.post .with-icon{ display:inline-flex; align-items:center; gap:.35rem; }
.post .icon{ width:16px; height:16px; color: var(--text-tertiary); flex:0 0 16px; }

/* Story stream ads */
.stream-ad{
  width: min(75vw, var(--card-max-w));
  max-width: var(--card-max-w);
  margin: 1.5rem auto;
  display: flex;
  justify-content: center;
}
.stream-ad--initial{
  margin-top: 0.75rem;
}
.stream-ad ins{
  display: block;
  width: 100%;
}
@media (max-width: 900px){
  .stream-ad{ width: min(92vw, var(--card-max-w)); }
}
@media (max-width: 520px){
  .stream-ad{ width: 96vw; }
}

/* “More stories” */
.more{
  width: min(75vw, var(--card-max-w));
  margin: 1.25rem auto 0;
}
@media (max-width: 900px){
  .more{ width: min(92vw, var(--card-max-w)); }
}
@media (max-width: 520px){
  .more{ width: 96vw; }
}
.more-title{
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.more-list{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .5rem;
}
.more-list a{ font-weight: 650; }

/* Image credit (cards + article page) */
.card-media { position: relative; }
.img-credit{
  position: absolute; right: 8px; bottom: 8px;
  max-width: 75%; padding: 2px 6px; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; line-height: 1.25;
  pointer-events: none;
}
.post-media { position: relative; }
.post-media .img-credit{
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,.55); color:#fff;
  font-size: 12px; padding: 3px 8px; border-radius: 6px;
}

/* --- RSS copy toast --- */
.copy-toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(16px);
  background: #0f3b34;               /* matches header/drawer palette */
  color: #eafff8;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: .6rem .9rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 4000;
}
.copy-toast.open{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* --- Desktop layout cleanup: region switcher participates in flex flow --- */
@media (min-width: 901px){
  .site-header .header-inner{ padding-right: var(--space-md); }
}