/*
Theme Name: Bornholm247
Theme URI: https://bornholm247.dk
Author: ØI Development Team
Author URI: https://øi.dk
Description: A modern local newspaper theme focused on news and events on Bornholm
Version: 1.0.5
Requires at least: 6.9
Tested up to: 6.9.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bornholm-nyt
Tags: news, blog, grid-layout, custom-menu, featured-images, rtl-language-support
*/

/* =========================
   Tokens / Base
========================= */
:root{
  --bn-max: 1160px;
  --bn-gap: 18px;

  /* Updated type scale: slightly smaller 0-3 + new larger step-4 */
  --bn-step-0: clamp(1.00rem, 0.96rem + 0.25vw, 1.12rem);
  --bn-step-1: clamp(1.12rem, 1.02rem + 0.45vw, 1.32rem);
  --bn-step-2: clamp(1.32rem, 1.14rem + 0.85vw, 1.72rem);
  --bn-step-3: clamp(1.62rem, 1.28rem + 1.35vw, 2.25rem);
  --bn-step-4: clamp(2.05rem, 1.55rem + 2.25vw, 3.20rem);

  --bn-radius: 16px;
  --bn-shadow: 0 10px 30px rgba(0,0,0,.08);
  --bn-border: 1px solid rgba(0,0,0,.10);

  --bn-bg: #ffffff;
  --bn-text: #111111;
  --bn-muted: rgba(0,0,0,.62);
  --bn-surface: #fafafa;
  --bn-accent: #0f4c81;

  /* Header */
  --bn-header-h: 56px;
  --bn-header-logo-h: 26px;

  /* Drawer */
  --bn-drawer-w: min(420px, 88vw);
  --bn-overlay-dim: rgba(0,0,0,.55);
  --bn-overlay-blur: 12px;

  /* Fonts */
  --bn-title-font: "Saira Semi Condensed", "Saira Condensed", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --bn-body-font: "Merriweather", Georgia, "Times New Roman", serif;
  --bn-ui-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bn-bg);
  color:var(--bn-text);
  font-family: var(--bn-body-font);
  font-size: var(--bn-step-0);
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; height:auto; display:block; }

.bn-container{ width:min(var(--bn-max), calc(100% - 2rem)); margin-inline:auto; }

.bn-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* UI font (header + drawer + navigation) */
.bn-topbar,
.bn-nav,
.bn-action,
.bn-drawer,
.bn-drawer-list a,
.bn-search-input,
.bn-search-btn,
.bn-menu-toggle{
  font-family: var(--bn-ui-font);
}

/* Title font */
h1,h2,h3,.bn-headline,.bn-lead-title,.bn-rail-title,.bn-mid-title,.bn-card-title{
  font-family: var(--bn-title-font);
  letter-spacing: .01em;
}

/* =========================
   Header (desktop + mobile)
========================= */
.bn-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--bn-border);
  background: rgba(255,255,255,.96);
}

.bn-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  height: var(--bn-header-h);
}

/* Left: hamburger + logo */
.bn-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}

/* Hamburger visible on desktop too */
.bn-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  color: rgba(0,0,0,.88);
  cursor:pointer;
}
.bn-menu-toggle:hover{ background: rgba(0,0,0,.06); }

/* Logo */
.bn-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none;
}
.bn-site-logo{
  height: var(--bn-header-logo-h);
  width:auto;
  max-width: 220px;
}

/* Right: desktop nav + actions */
.bn-menu-panel--desktop{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width:0;
}

.bn-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.bn-nav ul{
  list-style:none;
  display:flex;
  gap: 18px;
  padding:0;
  margin:0;
  flex-wrap:nowrap;
  align-items:center;
}
.bn-nav a{
  display:inline-block;
  padding: 10px 0;
  font-size: calc(var(--bn-step-0)/1.2);
  font-weight: 600;
  color: rgba(0,0,0,.72);
  text-decoration:none;
  white-space:nowrap;
}
.bn-nav a:hover{ color: rgba(0,0,0,.92); text-decoration:none; }
.bn-nav .current-menu-item > a,
.bn-nav .current_page_item > a{
  color: rgba(0,0,0,.92);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}

.bn-actions{
  display:flex;
  align-items:center;
  gap: 14px;
}
.bn-action{
  font-size: var(--bn-step-0);
  font-weight:700;
  color: rgba(0,0,0,.72);
  text-decoration:none;
  white-space:nowrap;
}
.bn-action:hover{ color: rgba(0,0,0,.92); text-decoration:none; }

/* Mobile: hide top nav/actions (drawer replaces them) */
@media (max-width: 860px){
  :root{
    --bn-header-h: 54px;
    --bn-header-logo-h: 24px;
  }
  .bn-menu-panel--desktop{ display:none; }
}

/* =========================
   Drawer (off-canvas)
========================= */
.bn-drawer-overlay{
  position: fixed;
  inset: 0;
  background: var(--bn-overlay-dim);
  backdrop-filter: blur(var(--bn-overlay-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--bn-overlay-blur)) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}

.bn-drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--bn-drawer-w);
  background: #fff;
  transform: translateX(-100%);
  transition: transform .22s ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  will-change: transform;
}
.bn-drawer.is-open{ transform: translateX(0); }
.bn-drawer-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Lock scroll + prevent interaction behind */
html.bn-drawer-open,
body.bn-drawer-open{ overflow:hidden; }
html.bn-drawer-open body{ pointer-events:none; }
html.bn-drawer-open .bn-drawer,
html.bn-drawer-open .bn-drawer *,
html.bn-drawer-open .bn-drawer-overlay{ pointer-events:auto; }

/* Blur ONLY the page behind (NOT the drawer) */
html.bn-drawer-open .bn-main,
html.bn-drawer-open .bn-footer{
  filter: blur(10px);
  opacity: .65;
  transform: translateZ(0);
}
/* Safety: keep drawer crisp */
html.bn-drawer-open .bn-drawer,
html.bn-drawer-open .bn-drawer *{
  filter: none !important;
  opacity: 1 !important;
}

/* Drawer head */
.bn-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 18px 10px;
}
.bn-drawer-logo{
  height: 26px;
  width:auto;
  max-width: 220px;
}
.bn-drawer-close{
  border:0;
  background:transparent;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  cursor:pointer;
}
.bn-drawer-close:hover{ background: rgba(0,0,0,.06); }

/* Drawer search */
.bn-drawer-search{ padding: 10px 18px 6px; }
.bn-search-form{
  display:flex;
  align-items:center;
  gap: 10px;
  border-bottom: 1px solid rgba(0,0,0,.25);
  padding-bottom: 10px;
}
.bn-search-input{
  width:100%;
  border:0;
  outline:none;
  font-size: var(--bn-step-1);
  padding: 12px 0;
}
.bn-search-btn{
  border:0;
  background:transparent;
  font-size: var(--bn-step-1);
  padding: 10px;
  border-radius: 10px;
  cursor:pointer;
}
.bn-search-btn:hover{ background: rgba(0,0,0,.06); }

/* Drawer nav list */
.bn-drawer-nav{
  padding: 8px 18px 18px;
  overflow:auto;
}
.bn-drawer-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
}
.bn-drawer-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,.10);
  font-weight:600;
  font-size: var(--bn-step-2);
  text-decoration:none;
}
.bn-drawer-list a::after{
  content:"›";
  color: rgba(0,0,0,.45);
  font-weight:900;
}

/* Admin bar safety */
#wpadminbar{ z-index: 9997 !important; }

/* =========================
   Ads
========================= */
.bn-ad{
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: var(--bn-radius);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  padding: 14px;
  color: rgba(0,0,0,.60);
  font-size: var(--bn-step-0);
}
.bn-ad strong{ color: rgba(0,0,0,.75); }
.bn-ad--desktop{ display:block; }
.bn-ad--mobile{ display:none; }
@media (max-width: 860px){
  .bn-ad--desktop{ display:none; }
  .bn-ad--mobile{ display:block; }
}

/* =========================
   Front page (IndyStar-like)
========================= */
.bn-front{
  padding: 18px 0 44px;
}

.bn-front-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr .70fr;
  gap: 28px;
  align-items:start;
}

/* LEFT: Lead (FIXED: no absolute overlap) */
.bn-lead{
  display:flex;
  flex-direction:column;
  gap: 0;
}

.bn-lead-media{
  position: relative;
  overflow:hidden;
  background: rgba(0,0,0,.06);
  aspect-ratio: 16/9;
}

.bn-lead-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Card is now in normal flow (no overlap) */
.bn-lead-card{
  background:#fff;
  padding: 18px 18px 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Optional: slight "IndyStar" lift without breaking layout */
@media (min-width: 741px){
  .bn-lead-card{
    margin-top: -22px;          /* gentle overlap */
    margin-left: 18px;
    margin-right: 18px;
  }
}

/* Title: clamp + size limit */
.bn-lead-title{
  margin: 0 0 10px 0;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.0rem); /* smaller max than before */
  line-height: .95;
  display: -webkit-box;
  -webkit-line-clamp: 3;        /* limit title lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Excerpt: clamp + size */
.bn-lead-excerpt{
  margin: 0;
  color: rgba(0,0,0,.70);
  font-size: var(--bn-step-1);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;        /* limit excerpt lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* MIDDLE stack */
.bn-mid{
  display:flex;
  flex-direction:column;
  gap: 22px;
}
.bn-mid-item{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.bn-mid-media{
  overflow:hidden;
  background: rgba(0,0,0,.06);
  aspect-ratio: 16/9;
}
.bn-mid-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.bn-mid-title{
  margin: 0;
  font-size: var(--bn-step-2);
  line-height: 1.05;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bn-mid-title a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* RIGHT rail */
.bn-rail{
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.bn-rail-item{
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.bn-rail-item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.bn-rail-title{
  margin: 0 0 8px 0;
  font-size: var(--bn-step-2);
  line-height: 1.05;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bn-rail-meta{
  color: rgba(0,0,0,.58);
  font-family: var(--bn-ui-font);
  font-weight: 600;
  font-size: var(--bn-step-0);
}
.bn-rail-meta b{ color: rgba(0,0,0,.68); font-weight: 800; }

/* Responsive */
@media (max-width: 1100px){
  .bn-front-grid{ grid-template-columns: 1fr 1fr; }
  .bn-rail{ grid-column: 1 / -1; }
}
@media (max-width: 740px){
  .bn-front-grid{ grid-template-columns: 1fr; gap: 22px; }
  .bn-lead-card{
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}