/*
Theme Name: Tracenews
Theme URI: https://example.com/tracenews
Author: Your Name
Author URI: https://example.com
Description: A fast, responsive, magazine-style news-portal theme inspired by the dense layout of major Indian news sites — dark top bar, edition strip, centered serif masthead, white sticky category nav, breaking-news ticker, a three-column homepage (news rail + lead story & headline list + ad/video/poll rail), rich per-category section blocks, sponsored stories, trending-topic & popular-category link clouds, side-rail skyscraper ads, and full Adsterra integration via the Customizer. Everything is built from your Categories, Posts and Menus, so the whole site is managed from the WordPress admin. Rebrand freely — colours, logo and name are all configurable.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tracenews
*/

/* ============================================================= *
 *  Design tokens
 * ============================================================= */
:root {
  --bt-accent: #ec1c24;          /* primary red (configurable)            */
  --bt-accent-dark: #c10f16;
  --bt-accent-soft: #fdecec;
  --bt-topdark: #1f2024;         /* very top strip                        */
  --bt-ink: #15171a;
  --bt-ink-2: #393d44;
  --bt-muted: #62686f;
  --bt-faint: #9aa0a6;
  --bt-line: #e7e9ec;
  --bt-line-2: #f0f1f3;
  --bt-bg: #ffffff;
  --bt-bg-alt: #f3f4f6;
  --bt-bg-soft: #f9fafb;
  --bt-max: 1100px;              /* central content width                  */
  --bt-rail: 160px;              /* side skyscraper rail width             */
  --bt-radius: 4px;
  --bt-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --bt-head: "Libre Franklin", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bt-serif: Georgia, "Times New Roman", "Noto Serif", serif;
}

/* ============================================================= *
 *  Reset-ish
 * ============================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--bt-sans);
  color: var(--bt-ink);
  background: var(--bt-bg);
  line-height: 1.45;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bt-accent); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
/* All thumbnail wrappers must be block so aspect-ratio + crop apply (they are
   often <a>/<span>, which are inline by default and would overflow). */
.bt-thumb { display: block; position: relative; }
.bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; font-family: var(--bt-head); letter-spacing: -0.01em; line-height: 1.22; }
button { font-family: inherit; }
.bt-container { max-width: var(--bt-max); margin: 0 auto; padding: 0 16px; }
.screen-reader-text { position: absolute !important; left: -9999px; top: -9999px; }
.bt-hide { display: none !important; }

/* ============================================================= *
 *  Page shell + side rails (skyscraper ads)
 * ============================================================= */
.bt-shell {
  max-width: calc(var(--bt-max) + (var(--bt-rail) + 24px) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--bt-rail) minmax(0, 1fr) var(--bt-rail);
  gap: 24px;
  align-items: start;
}
.bt-rail { position: sticky; top: 64px; padding-top: 8px; }
.bt-rail .bt-ad { margin: 0 0 16px; }
.bt-shell-main { min-width: 0; }
@media (max-width: 1180px) {
  .bt-shell { grid-template-columns: 1fr; max-width: 100%; padding: 0 16px; }
  .bt-rail { display: none; }
}
@media (max-width: 480px) {
  .bt-shell { padding: 0 14px; }
}

/* ============================================================= *
 *  Top dark strip
 * ============================================================= */
.bt-topstrip { background: var(--bt-topdark); height: 30px; }

/* ============================================================= *
 *  Edition bar
 * ============================================================= */
.bt-edition { background: red; border-bottom: 1px solid var(--bt-line); font-size: 12px; color: var(--bt-muted); }
.bt-edition .bt-container { display: flex; align-items: center; gap: 14px; height: 38px; }
.bt-edition-date, .bt-edition .bt-hide-sm { white-space: nowrap; color: var(--bt-accent-soft); }
.bt-edition a { color: var(--bt-muted); }
.bt-edition a:hover { color: var(--bt-accent); }
.bt-edition .bt-edition-spacer { flex: 1; }
.bt-edition-meta { display: flex; align-items: center; gap: 14px; }
.bt-edition .bt-epaper { color: var(--bt-accent); font-weight: 700; }
.bt-edition .bt-subscribe { background: var(--bt-accent); color: #fff; padding: 5px 10px; border-radius: var(--bt-radius); font-weight: 700; }
.bt-edition .bt-subscribe:hover { background: var(--bt-accent-dark); color: #fff; }
.bt-social { display: flex; gap: 7px; align-items: center; }
.bt-social a {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bt-bg-alt);
  display: inline-flex; align-items: center; justify-content: center; color: var(--bt-ink-2);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.bt-social a svg { width: 14px; height: 14px; }
.bt-social a:hover { color: #fff; transform: translateY(-1px); }

/* Brand-colour hovers (used in edition bar + footer) */
.bt-soc-instagram:hover { background: #E4405F; }
.bt-soc-facebook:hover  { background: #1877F2; }
.bt-soc-whatsapp:hover  { background: #25D366; }
.bt-soc-pinterest:hover { background: #BD081C; }
.bt-soc-twitter:hover   { background: #000000; }
.bt-soc-linkedin:hover  { background: #0A66C2; }
.bt-soc-reddit:hover    { background: #FF4500; }
.bt-soc-youtube:hover   { background: #FF0000; }
.bt-soc-telegram:hover  { background: #229ED9; }

/* ============================================================= *
 *  Masthead
 * ============================================================= */
.bt-masthead { padding: 18px 0 12px; text-align: center; }
.bt-masthead .bt-logo-text {
  font-family: var(--bt-serif); font-weight: 700; font-size: 40px; letter-spacing: 0.2px;
  color: var(--bt-ink); line-height: 1; display: inline-block;
}
.bt-masthead .bt-logo-text span { color: var(--bt-accent); }
.bt-masthead img { max-height: 76px; width: auto; max-width: 100%; margin: 0 auto; }

/* ============================================================= *
 *  Primary navigation (white, sticky)
 * ============================================================= */
.bt-nav {
  background: #fff; border-top: 1px solid var(--bt-line); border-bottom: 1px solid var(--bt-line);
  position: sticky; top: 0; z-index: 60; box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.bt-nav .bt-container { display: flex; align-items: stretch; gap: 6px; height: 48px; }
.bt-nav-brand {
  font-family: var(--bt-head); font-weight: 800; font-size: 17px; color: #fff;
  background: var(--bt-accent); padding: 4px 9px; border-radius: 4px;
  margin-right: 10px; white-space: nowrap; letter-spacing: -0.01em;
}
.bt-nav-brand:hover { color: #fff; background: var(--bt-accent-dark); }
.bt-menu { display: flex; align-items: stretch; justify-content: center; flex: 1; overflow: hidden; }
.bt-menu > li { position: relative; display: flex; }
.bt-menu > li > a {
  display: flex; align-items: center; color: var(--bt-ink); padding: 0 12px; font-size: 13px; font-weight: 600;
  white-space: nowrap; letter-spacing: 0.01em; line-height: 1;
}
.bt-menu > li > a:hover,
.bt-menu > li.current-menu-item > a,
.bt-menu > li.current-menu-parent > a,
.bt-menu > li.current_page_item > a { color: var(--bt-accent); box-shadow: inset 0 -3px 0 var(--bt-accent); }

/* Dropdown submenus */
.bt-menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff;
  border: 1px solid var(--bt-line); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px 0; display: none; z-index: 70;
}
.bt-menu > li:hover > .sub-menu { display: block; }
.bt-menu .sub-menu li a { display: block; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--bt-ink-2); }
.bt-menu .sub-menu li a:hover { background: var(--bt-bg-alt); color: var(--bt-accent); }

.bt-nav-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bt-live {
  display: inline-flex; align-items: center; gap: 5px; background: var(--bt-accent); color: #fff;
  font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: var(--bt-radius); text-transform: uppercase;
}
.bt-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: bt-blink 1.2s infinite; }
@keyframes bt-blink { 50% { opacity: .25; } }
.bt-icon-btn { background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--bt-ink-2); padding: 6px 8px; }
.bt-icon-btn:hover { color: var(--bt-accent); }
.bt-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--bt-ink); padding: 6px 12px 6px 0; margin-right: 2px;
}
.bt-menu-toggle:hover { color: var(--bt-accent); }
.bt-menu-toggle[aria-expanded="true"] { color: var(--bt-accent); }

/* Search dropdown */
.bt-search-pop { display: none; position: absolute; right: 16px; top: 100%; background: #fff; border: 1px solid var(--bt-line); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 10px; z-index: 80; }
.bt-search-pop.is-open { display: block; }
.bt-search-pop input[type="search"] { border: 1px solid var(--bt-line); padding: 8px 10px; width: 240px; font-size: 14px; }
.bt-search-pop button { background: var(--bt-accent); color: #fff; border: 0; padding: 8px 12px; cursor: pointer; }

/* ============================================================= *
 *  In-the-news sub-nav (trending tags)
 * ============================================================= */
.bt-inthenews { border-bottom: 1px solid var(--bt-line); background: var(--bt-bg-soft); font-size: 12.5px; }
.bt-inthenews .bt-container { display: flex; align-items: center; gap: 10px; height: 36px; overflow: hidden; }
.bt-inthenews-label { color: var(--bt-accent); font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.bt-inthenews-list { display: flex; gap: 16px; overflow: hidden; }
.bt-inthenews-list a { color: var(--bt-ink-2); white-space: nowrap; font-weight: 600; }
.bt-inthenews-list a:hover { color: var(--bt-accent); }

/* ============================================================= *
 *  Breaking ticker
 * ============================================================= */
.bt-ticker { display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--bt-line); overflow: hidden; }
.bt-ticker-label { background: var(--bt-accent); color: #fff; font-weight: 800; font-size: 12px; text-transform: uppercase; padding: 9px 12px; white-space: nowrap; letter-spacing: .5px; }
.bt-ticker-track { overflow: hidden; flex: 1; }
.bt-ticker-list { display: flex; gap: 44px; white-space: nowrap; padding: 9px 16px; animation: bt-ticker 32s linear infinite; }
.bt-ticker-list a { font-size: 13px; font-weight: 600; }
.bt-ticker:hover .bt-ticker-list { animation-play-state: paused; }
@keyframes bt-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================= *
 *  Section titles (with arrow, like TOI)
 * ============================================================= */
.bt-sec-head { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--bt-line); position: relative; }
.bt-sec-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 46px; height: 3px; background: var(--bt-accent); }
.bt-sec-head h2, .bt-sec-head h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.bt-sec-head a { color: inherit; }
.bt-sec-head .bt-arrow { color: var(--bt-accent); font-size: 20px; font-weight: 800; line-height: 1; }
.bt-sec-head .bt-sec-tabs { margin-left: auto; display: flex; gap: 14px; font-size: 12.5px; }
.bt-sec-head .bt-sec-tabs a { color: var(--bt-muted); font-weight: 700; }
.bt-sec-head .bt-sec-tabs a:hover { color: var(--bt-accent); }
.bt-section { margin: 0 0 30px; }

/* ============================================================= *
 *  Homepage three-column hero
 * ============================================================= */
.bt-home { padding: 18px 0; }
.bt-home-top {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 300px;
  gap: 24px;
  margin-bottom: 26px;
}
@media (max-width: 980px) { .bt-home-top { grid-template-columns: 1fr; } }

/* Left news rail */
.bt-newsrail { border-right: 1px solid var(--bt-line); padding-right: 18px; }
@media (max-width: 980px) { .bt-newsrail { border-right: 0; padding-right: 0; } }
.bt-newsrail .bt-rail-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--bt-line-2); }
.bt-newsrail .bt-rail-item:first-child { padding-top: 0; }
.bt-newsrail .bt-rail-item .bt-thumb { flex: 0 0 84px; height: 58px; border-radius: var(--bt-radius); overflow: hidden; background: var(--bt-bg-alt); }
.bt-newsrail .bt-rail-text { flex: 1; min-width: 0; }
.bt-newsrail .bt-rail-kicker { color: var(--bt-accent); font-size: 10.5px; font-weight: 800; text-transform: uppercase; display: block; margin-bottom: 3px; }
.bt-newsrail .bt-rail-item h4 { font-size: 13.5px; line-height: 1.3; font-weight: 700; }

/* Center lead */
.bt-lead .bt-thumb { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--bt-radius); background: var(--bt-bg-alt); }
.bt-lead .bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-lead h2 { font-size: 27px; line-height: 1.16; margin: 12px 0 8px; font-weight: 800; letter-spacing: -0.02em; }
.bt-lead h2 a:hover { color: var(--bt-accent); }
.bt-lead .bt-excerpt { color: var(--bt-ink-2); font-size: 15px; line-height: 1.55; }
.bt-headline-list { margin-top: 16px; border-top: 1px solid var(--bt-line); }
.bt-headline-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bt-line-2); align-items: flex-start; }
.bt-headline-list .bt-hl-text { flex: 1; }
.bt-headline-list h4 { font-size: 15px; line-height: 1.3; font-weight: 600; }
.bt-headline-list .bt-thumb { flex: 0 0 96px; height: 64px; border-radius: var(--bt-radius); overflow: hidden; background: var(--bt-bg-alt); }
.bt-headline-list .bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-headline-list h4 a:hover { color: var(--bt-accent); }
.bt-headline-list .bt-bullet { position: relative; padding-left: 14px; }
.bt-headline-list .bt-bullet::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--bt-accent); }

/* Right rail (home) */
.bt-homerail .bt-ad { margin: 0 0 18px; }

/* Poll box */
.bt-poll { border: 1px solid var(--bt-line); border-radius: var(--bt-radius); padding: 14px; margin-bottom: 18px; }
.bt-poll h4 { font-size: 13px; color: var(--bt-accent); text-transform: uppercase; margin-bottom: 8px; }
.bt-poll p { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.bt-poll label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.bt-poll .bt-poll-submit { margin-top: 8px; background: var(--bt-accent); color: #fff; border: 0; padding: 7px 14px; border-radius: var(--bt-radius); font-weight: 700; cursor: pointer; }

/* Featured video card list (rail) */
.bt-vidlist .bt-vid { display: block; margin-bottom: 14px; }
.bt-vidlist .bt-vid .bt-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--bt-radius); background: var(--bt-bg-alt); }
.bt-vidlist .bt-vid .bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bt-play::after { content: "▶"; color: #fff; background: rgba(0,0,0,.55); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.bt-vidlist .bt-vid h4 { font-size: 14px; line-height: 1.3; margin-top: 6px; font-weight: 700; }

/* ============================================================= *
 *  Category SECTION BLOCK (lead + bullet list + thumb strip)
 *  This is the dense repeating unit across the TOI homepage.
 * ============================================================= */
.bt-block-body { display: grid; grid-template-columns: 300px minmax(0,1fr) 230px; gap: 22px; }
.bt-block-body.no-rail { grid-template-columns: 320px minmax(0,1fr); }
@media (max-width: 860px) { .bt-block-body, .bt-block-body.no-rail { grid-template-columns: 1fr; } }

.bt-block-lead .bt-thumb { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--bt-radius); position: relative; background: var(--bt-bg-alt); }
.bt-block-lead .bt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bt-block-lead:hover .bt-thumb img { transform: scale(1.04); }
.bt-block-lead .bt-overlay-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); font-size: 16px; font-weight: 700; line-height: 1.28;
  font-family: var(--bt-head);
}
.bt-block-lead h3 { font-size: 17px; line-height: 1.25; margin-top: 8px; font-weight: 800; }

.bt-block-list { border-top: 1px solid var(--bt-line); }
.bt-block-list li { padding: 8px 0; border-bottom: 1px solid var(--bt-line-2); font-size: 13.5px; line-height: 1.4; display: flex; gap: 7px; }
.bt-block-list li::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--bt-accent); }
.bt-block-list li a { font-weight: 600; }

.bt-block-thumbs { display: flex; flex-direction: column; gap: 12px; }
.bt-block-thumbs .bt-tcard .bt-thumb { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--bt-radius); background: var(--bt-bg-alt); }
.bt-block-thumbs .bt-tcard .bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-block-thumbs .bt-tcard h4 { font-size: 13px; line-height: 1.3; margin-top: 5px; font-weight: 700; }

/* In-focus tag strip under sections */
.bt-infocus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.bt-infocus .bt-infocus-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--bt-muted); }
.bt-infocus a { font-size: 12px; border: 1px solid var(--bt-line); padding: 4px 10px; border-radius: 20px; color: var(--bt-ink-2); font-weight: 600; }
.bt-infocus a:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

.bt-divider { border: 0; border-top: 1px dashed var(--bt-line); margin: 28px 0; }

/* ============================================================= *
 *  Generic news grid (archives / index / related)
 * ============================================================= */
.bt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .bt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .bt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .bt-grid { grid-template-columns: 1fr; } }
.bt-card .bt-thumb { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--bt-radius); background: var(--bt-bg-alt); }
.bt-card .bt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bt-card:hover .bt-thumb img { transform: scale(1.05); }
.bt-card h3 { font-size: 15px; line-height: 1.3; margin: 8px 0 4px; font-weight: 700; }
.bt-card h3 a:hover { color: var(--bt-accent); }
.bt-cat-tag { display: inline-block; color: var(--bt-accent); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.bt-meta { color: var(--bt-muted); font-size: 12px; margin-top: 4px; }
.bt-newsrail .bt-rail-item h4 a:hover,
.bt-block-list li a:hover,
.bt-block-thumbs .bt-tcard h4 a:hover { color: var(--bt-accent); }

/* ============================================================= *
 *  Sponsored stories carousel
 * ============================================================= */
.bt-sponsored { margin: 24px 0; }
.bt-sponsored-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
@media (max-width: 980px) { .bt-sponsored-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .bt-sponsored-strip { grid-template-columns: repeat(2, 1fr); } }
.bt-sponsored-strip .bt-tcard .bt-thumb { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--bt-radius); background: var(--bt-bg-alt); }
.bt-sponsored-strip .bt-tcard .bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-sponsored-strip .bt-tcard h4 { font-size: 12px; line-height: 1.3; margin-top: 6px; font-weight: 600; }

/* ============================================================= *
 *  Link clouds (Trending Topics / Popular Categories / Hot on Web)
 * ============================================================= */
.bt-cloud { border: 1px solid var(--bt-line); border-radius: var(--bt-radius); padding: 18px; margin: 22px 0; }
.bt-cloud h2 { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.bt-cloud-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 18px; }
@media (max-width: 860px) { .bt-cloud-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .bt-cloud-grid { grid-template-columns: repeat(2, 1fr); } }
.bt-cloud-grid a { font-size: 13px; color: var(--bt-ink-2); padding: 4px 0; }
.bt-cloud-grid a:hover { color: var(--bt-accent); }

/* ============================================================= *
 *  Ad slots
 * ============================================================= */
.bt-ad { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 18px auto; }
.bt-ad > * { max-width: 100%; }
.bt-ad--label::before { content: "Advertisement"; display: block; text-align: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #b5b5b5; margin-bottom: 5px; }
.bt-ad-placeholder { width: 100%; min-height: 90px; background: var(--bt-bg-alt); border: 1px dashed var(--bt-line); color: var(--bt-faint); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bt-ad-rail .bt-ad-placeholder { min-height: 600px; }
.bt-ad-sidebar .bt-ad-placeholder { min-height: 250px; }
.bt-ad-frame { background: transparent; }

/* Mobile sticky bottom ad bar */
.bt-mobile-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none; justify-content: center; align-items: center;
  background: #fff; border-top: 1px solid var(--bt-line); box-shadow: 0 -2px 10px rgba(0,0,0,.12);
  padding: 4px 0;
}
.bt-mobile-sticky.is-visible { display: flex; }
.bt-sticky-close {
  position: absolute; top: -22px; right: 8px; width: 24px; height: 22px; border: 1px solid var(--bt-line);
  border-bottom: 0; background: #fff; color: var(--bt-ink-2); font-size: 16px; line-height: 1; cursor: pointer;
  border-radius: 4px 4px 0 0;
}
@media (max-width: 600px) { .bt-mobile-sticky { display: flex; } }
@media (min-width: 601px) { .bt-mobile-sticky { display: none !important; } }

/* ============================================================= *
 *  Single article
 * ============================================================= */
.bt-single { padding: 22px 0; }
.bt-single-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 30px; }
@media (max-width: 900px) { .bt-single-layout { grid-template-columns: 1fr; } }
.bt-article { max-width: 720px; }
.bt-breadcrumb { font-size: 12px; color: var(--bt-muted); margin-bottom: 10px; }
.bt-breadcrumb a:hover { color: var(--bt-accent); }
.bt-article h1 { font-size: 32px; line-height: 1.18; margin: 6px 0 12px; font-weight: 800; }
.bt-article .bt-dek { font-size: 17px; color: var(--bt-ink-2); line-height: 1.5; margin: 0 0 14px; }
.bt-article .bt-meta { font-size: 13px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--bt-line); border-bottom: 1px solid var(--bt-line); padding: 10px 0; }
.bt-article .bt-share { display: flex; gap: 8px; margin-left: auto; }
.bt-article .bt-share a { width: 28px; height: 28px; border-radius: 50%; background: var(--bt-bg-alt); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.bt-article .bt-share a:hover { background: var(--bt-accent); color: #fff; }
.bt-article .bt-featured { border-radius: var(--bt-radius); overflow: hidden; margin-bottom: 8px; }
.bt-article .bt-featured-caption { font-size: 12px; color: var(--bt-muted); margin: 0 0 18px; }
.bt-article-body { font-size: 18px; line-height: 1.75; color: #222; }
.bt-article-body p { margin: 0 0 1.1em; }
.bt-article-body h2, .bt-article-body h3 { font-weight: 800; margin: 1.3em 0 .5em; }
.bt-article-body img { border-radius: var(--bt-radius); margin: 1em 0; }
.bt-article-body blockquote { border-left: 4px solid var(--bt-accent); margin: 1.2em 0; padding: .4em 1em; color: var(--bt-ink-2); font-style: italic; }
.bt-tags { margin: 22px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bt-tags a { font-size: 12px; border: 1px solid var(--bt-line); padding: 4px 10px; border-radius: 20px; }
.bt-tags a:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

/* ============================================================= *
 *  Sidebar
 * ============================================================= */
.bt-sidebar .widget,
.bt-sidebar .bt-widget { margin-bottom: 26px; }
.bt-sidebar .widget-title,
.bt-sidebar .bt-widget-title { font-size: 15px; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid var(--bt-accent); padding-bottom: 6px; margin: 0 0 12px; }
.bt-sidebar .bt-mostread li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bt-line-2); align-items: flex-start; }
.bt-sidebar .bt-mostread .bt-num { color: var(--bt-accent); font-weight: 800; font-size: 18px; line-height: 1; }
.bt-sidebar .bt-mostread h4 { font-size: 13.5px; line-height: 1.3; font-weight: 700; }
.bt-sidebar ul li { font-size: 14px; }

/* ============================================================= *
 *  Footer
 * ============================================================= */
.bt-footer { background: #f7f7f7; border-top: 3px solid var(--bt-accent); margin-top: 36px; }
.bt-footer-top { padding: 30px 0; }
.bt-footer-brand { text-align: center; margin-bottom: 22px; }
.bt-footer-brand .bt-logo-text { font-family: var(--bt-serif); font-weight: 800; font-size: 28px; color: var(--bt-ink); }
.bt-footer-brand .bt-logo-text span { color: var(--bt-accent); }
.bt-footer-widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 780px) { .bt-footer-widgets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .bt-footer-widgets { grid-template-columns: 1fr; } }
.bt-footer .widget-title,
.bt-footer .bt-fcol-title { color: var(--bt-ink); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 12px; }
.bt-footer ul li { padding: 4px 0; font-size: 13px; }
.bt-footer a { color: var(--bt-ink-2); }
.bt-footer a:hover { color: var(--bt-accent); }
.bt-footer-social { display: flex; gap: 10px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.bt-footer-social a { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--bt-line); color: var(--bt-ink-2); display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.bt-footer-social a svg { width: 16px; height: 16px; }
.bt-footer-social a:hover { color: #fff; border-color: transparent; transform: translateY(-1px); }
.bt-footer-bottom { border-top: 1px solid var(--bt-line); padding: 16px 0; font-size: 12px; color: var(--bt-muted); text-align: center; }

/* ============================================================= *
 *  Pagination
 * ============================================================= */
.bt-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin: 24px 0; }
.bt-pagination .page-numbers { padding: 8px 13px; border: 1px solid var(--bt-line); border-radius: var(--bt-radius); font-weight: 600; }
.bt-pagination .current { background: var(--bt-accent); color: #fff; border-color: var(--bt-accent); }
.bt-pagination a:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

/* ============================================================= *
 *  Page / generic content
 * ============================================================= */
.bt-page { padding: 24px 0; }
.bt-page .bt-page-body { font-size: 16px; line-height: 1.7; max-width: 860px; }
.bt-page .bt-page-body img { border-radius: var(--bt-radius); }
.bt-page .bt-page-body h2 { font-size: 22px; margin: 28px 0 12px; }
.bt-page .bt-page-body h3 { font-size: 17px; margin: 4px 0 6px; }
.bt-page .bt-page-body p { margin: 0 0 14px; }

/* Lead paragraph */
.bt-lead-text { font-size: 18px; line-height: 1.6; color: var(--bt-ink-2); border-left: 4px solid var(--bt-accent); padding: 4px 0 4px 16px; margin: 0 0 22px; }

/* Category chips */
.bt-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 24px; }
.bt-chip { background: var(--bt-bg-alt); border: 1px solid var(--bt-line); padding: 9px 16px; border-radius: 30px; font-weight: 600; font-size: 14px; }
.bt-chip:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

/* Callout box */
.bt-callout { background: var(--bt-accent-soft); border: 1px solid #f6d4d6; border-radius: 10px; padding: 20px 22px; margin: 24px 0; }
.bt-callout h2 { margin-top: 0; }
.bt-callout code { background: #fff; border: 1px solid var(--bt-line); padding: 3px 8px; border-radius: 4px; font-size: 14px; }

/* Card grid (values, contact info) */
.bt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 8px 0 26px; }
.bt-card-box { border: 1px solid var(--bt-line); border-radius: 10px; padding: 18px 20px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.bt-card-box h3 { font-size: 16px; margin: 0 0 8px; color: var(--bt-ink); }
.bt-card-box p { margin: 0 0 6px; font-size: 14.5px; color: var(--bt-ink-2); }
.bt-card-box a { color: var(--bt-accent); font-weight: 600; word-break: break-word; }

/* Checklist */
.bt-checklist { list-style: none; padding: 0; margin: 10px 0 22px; }
.bt-checklist.bt-checklist--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 24px; align-items: start; }
.bt-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; line-height: 1.4; }
.bt-checklist li::before { content: "✓"; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; background: var(--bt-accent); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* FAQ accordion */
.bt-faq { margin: 16px 0 26px; }
.bt-faq details { border: 1px solid var(--bt-line); border-radius: 8px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.bt-faq details[open] { border-color: var(--bt-accent); }
.bt-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-faq summary::-webkit-details-marker { display: none; }
.bt-faq summary::after { content: "+"; color: var(--bt-accent); font-size: 22px; font-weight: 700; line-height: 1; }
.bt-faq details[open] summary { color: var(--bt-accent); }
.bt-faq details[open] summary::after { content: "–"; }
.bt-faq .bt-faq-a { padding: 0 18px 16px; color: var(--bt-ink-2); }
.bt-faq .bt-faq-a p { margin: 0; }

/* Terms numbered list */
.bt-terms { list-style: none; counter-reset: bt-term; padding: 0; margin: 14px 0; }
.bt-terms > li { position: relative; padding: 0 0 18px 52px; margin-bottom: 18px; border-bottom: 1px solid var(--bt-line-2); counter-increment: bt-term; }
.bt-terms > li:last-child { border-bottom: 0; }
.bt-terms > li::before { content: counter(bt-term); position: absolute; left: 0; top: 0; width: 34px; height: 34px; background: var(--bt-accent); color: #fff; border-radius: 50%; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.bt-terms > li h3 { margin: 4px 0 6px; }
.bt-terms ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }

/* Map embed placeholder */
.bt-map-embed { background: var(--bt-bg-alt); border: 2px dashed var(--bt-line); border-radius: 10px; min-height: 280px; display: flex; align-items: center; justify-content: center; color: var(--bt-faint); font-size: 15px; text-align: center; padding: 20px; margin: 8px 0 16px; }
.bt-map-embed iframe { width: 100%; min-height: 320px; border: 0; border-radius: 10px; }

.bt-thanks { font-weight: 700; font-size: 16px; margin-top: 24px; }
.bt-404 { text-align: center; padding: 70px 16px; }
.bt-404 h1 { font-size: 90px; color: var(--bt-accent); line-height: 1; }
.bt-404 p { color: var(--bt-muted); font-size: 16px; margin: 10px 0 20px; }
.bt-btn { display: inline-block; background: var(--bt-accent); color: #fff; padding: 10px 18px; border-radius: var(--bt-radius); font-weight: 700; }
.bt-btn:hover { background: var(--bt-accent-dark); color: #fff; }

/* ============================================================= *
 *  Comments
 * ============================================================= */
.bt-comments { clear: both; margin: 40px 0 0; padding-top: 28px; border-top: 2px solid var(--bt-line); max-width: 720px; }
.bt-comments .comment-list { list-style: none; margin: 0 0 24px; }
.bt-comments .comment-list ul.children { list-style: none; margin-left: 28px; }
.bt-comments .comment-body { border-bottom: 1px solid var(--bt-line-2); padding: 14px 0; }
.bt-comments .comment-author { font-weight: 700; font-size: 14px; }
.bt-comments .comment-meta { font-size: 12px; color: var(--bt-muted); }
.bt-comments .comment-reply-title, .bt-comments h2, .bt-comments h3 { font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.bt-comments .logged-in-as { font-size: 13px; color: var(--bt-muted); margin: 0 0 14px; }
.bt-comments .comment-form-comment { margin-bottom: 14px; }
.bt-comments label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.bt-comments input[type="text"], .bt-comments input[type="email"], .bt-comments input[type="url"], .bt-comments textarea {
  width: 100%; max-width: 100%; border: 1px solid var(--bt-line); border-radius: var(--bt-radius);
  padding: 10px 12px; font: inherit; font-size: 14px; background: #fff;
}
.bt-comments .comment-form-author, .bt-comments .comment-form-email, .bt-comments .comment-form-url { margin-bottom: 14px; }
.bt-comments textarea { min-height: 130px; resize: vertical; }
.bt-comments .form-submit { margin-top: 6px; }
.bt-comments .submit, .bt-comments input[type="submit"] {
  background: var(--bt-accent); color: #fff; border: 0; border-radius: var(--bt-radius);
  padding: 11px 22px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.bt-comments .submit:hover, .bt-comments input[type="submit"]:hover { background: var(--bt-accent-dark); }

/* ============================================================= *
 *  Mobile navigation
 * ============================================================= */
@media (max-width: 900px) {
  /* Hamburger toggles a full-width dropdown of the category menu. */
  .bt-menu-toggle { display: inline-flex; align-items: center; }
  .bt-nav { position: relative; }
  .bt-nav .bt-container { gap: 6px; height: 44px; }

  /* Menu hidden by default; opens as a vertical dropdown panel. */
  .bt-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; flex: none;
    background: #fff; border-top: 1px solid var(--bt-line);
    box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 90;
    max-height: 80vh; overflow-y: auto;
  }
  .bt-menu.is-open { display: flex; }
  .bt-menu > li { flex: 0 0 auto; border-bottom: 1px solid var(--bt-line); }
  .bt-menu > li > a { padding: 13px 16px; font-size: 14px; border-bottom: 0; }
  .bt-menu > li > a:hover,
  .bt-menu > li.current-menu-item > a,
  .bt-menu > li.current-menu-parent > a,
  .bt-menu > li.current_page_item > a { border-bottom-color: transparent; }

  /* Submenus stack inline within the dropdown instead of floating. */
  .bt-menu .sub-menu {
    position: static; display: block; box-shadow: none; border: 0;
    min-width: 0; padding: 0 0 6px; background: var(--bt-bg-alt);
  }
  .bt-menu .sub-menu li a { padding-left: 30px; }

  .bt-nav-tools { flex: 0 0 auto; margin-left: auto; }
  .bt-nav-tools .bt-live { padding: 5px 8px; font-size: 11px; }
}
@media (max-width: 600px) {
  /* Tidy edition bar: drop the date/edition label, center the social row. */
  .bt-masthead .bt-logo-text { font-size: 30px; }
  .bt-masthead img { max-height: 52px; }
  .bt-edition .bt-container { flex-wrap: wrap; justify-content: center; height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; gap: 4px 12px; }
  .bt-edition-spacer { display: none; }
  .bt-edition-date, .bt-edition .bt-hide-sm { flex: 0 0 auto; }
  .bt-edition-meta { flex: 1 0 100%; gap: 6px; flex-wrap: nowrap; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .bt-edition-meta::-webkit-scrollbar { display: none; }
  .bt-edition-meta > * { flex: 0 0 auto; }
  .bt-article h1 { font-size: 26px; }
}

/* ============================================================= *
 *  Off-canvas drawer menu (hamburger — desktop + mobile)
 * ============================================================= */
.bt-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 300;
}
.bt-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.bt-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 340px; max-width: 88vw; background: #fff;
  z-index: 310; transform: translateX(-100%); transition: transform .28s ease;
  display: flex; flex-direction: column; overflow-y: auto; box-shadow: 2px 0 24px rgba(0,0,0,.22);
}
.bt-drawer.is-open { transform: translateX(0); }

.bt-drawer-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--bt-line); position: sticky; top: 0; background: #fff; z-index: 2;
}
.bt-drawer-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--bt-ink); }
.bt-drawer-close:hover { color: var(--bt-accent); }
.bt-drawer-logo { font-family: var(--bt-serif); font-weight: 700; font-size: 24px; color: var(--bt-ink); }
.bt-drawer-logo span { color: var(--bt-accent); }
.bt-drawer-head img { max-height: 40px; width: auto; }

.bt-drawer-welcome { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--bt-line); }
.bt-drawer-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--bt-bg-alt); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--bt-faint); }
.bt-drawer-welcome p { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.bt-drawer-signin { display: inline-block; background: var(--bt-accent); color: #fff; padding: 9px 18px; border-radius: var(--bt-radius); font-weight: 700; font-size: 13px; }
.bt-drawer-signin:hover { background: var(--bt-accent-dark); color: #fff; }

.bt-drawer-menu { flex: 1; padding: 4px 0; }
.bt-drawer-menu ul { list-style: none; margin: 0; padding: 0; }
.bt-drawer-menu li a {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; font-size: 15px; font-weight: 600;
  color: var(--bt-ink); border-bottom: 1px solid var(--bt-line-2);
}
.bt-drawer-menu li a::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--bt-accent); }
.bt-drawer-menu li a:hover { background: var(--bt-bg-alt); color: var(--bt-accent); }

.bt-drawer-social { padding: 16px; border-top: 1px solid var(--bt-line); background: var(--bt-bg-soft); text-align: center; }
.bt-drawer-social .bt-social-title { font-size: 13px; font-weight: 700; color: var(--bt-muted); margin-bottom: 12px; }
.bt-drawer-social .bt-social { justify-content: center; flex-wrap: wrap; gap: 10px; }
.bt-drawer-social .bt-social a { width: 38px; height: 38px; }
.bt-drawer-social .bt-social a svg { width: 18px; height: 18px; }

body.bt-drawer-open { overflow: hidden; }