/*
Theme Name: NOC Theme
Theme URI: https://nocsolutions.mobi
Author: NOC Solutions
Description: Financial news theme
Version: 1.0.0
Text Domain: noc-theme
*/

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --muted:#eef2f6;
  --text:#0e1726;
  --text-dim:#55637a;
  --brand:#1363df;
  --brand-2:#52b6ff;
  --up:#148a3b;
  --down:#cc2e34;
  --warning:#c48b00;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(2,12,27,.08);
  --max:1200px;
}
*{box-sizing:border-box}
html,body{height: auto;}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 60%, #f6f9fc 100%);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin-inline:auto; padding:0 20px}

/* Top utility bar */
.topbar{display:flex; align-items:center; gap:16px; padding:10px 0; color:var(--text-dim); justify-content:space-between}
.topbar .join--link{margin:0 10px; font-size:12px;}
.topbar .badge{background:#e6f2ff; color:#0b3b88; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #cfe5ff}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid #e5edf5}
.header-inner{display:flex; align-items:center; gap:20px; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo-mark{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 2px 14px rgba(19,99,223,.25)}
header .logo--img{width:250px}

/* Primary nav (desktop) */
nav.primary{margin-left:auto; display:none; gap:18px}
nav.primary a{padding:8px 10px; border-radius:10px; color:var(--text-dim)}
nav.primary a:hover{background:var(--muted); color:var(--text)}

/* Dropdown menu */
.menu{display:flex; gap:18px; align-items:center}
.has-dd{position:relative}
/* hover bridge so dropdown doesn't close when moving pointer */
.has-dd::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px}
.dd-toggle{display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px; color:var(--text-dim)}
.dd-toggle svg{transform:translateY(1px)}
.has-dd:hover .dd-toggle, .has-dd:focus-within .dd-toggle{background:var(--muted); color:var(--text)}
.dropdown{position:absolute; top:100%; margin-top:8px; left:0; background:#fff; border:1px solid #e5edf5; border-radius:12px; box-shadow:0 10px 30px rgba(2,12,27,.08); min-width:220px; padding:8px; display:none; z-index:60}
.has-dd:hover .dropdown, .has-dd:focus-within .dropdown{display:block}
.dropdown a{display:block; padding:10px 12px; border-radius:8px; color:var(--text)}
.dropdown a:hover{background:#f3f7ff}
/* end dropdown */

/* Search + buttons */
.search-form{display:flex; align-items:center; gap:8px; background:#ffffff; border:1px solid #d5e1ef; border-radius:12px; padding:8px 10px; min-width:220px}
.search-form input{background:transparent; border:0; outline:0; color:var(--text); width:100%}
.btn{border:1px solid #d5e1ef; background:#f3f8ff; color:#0b3b88; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); font-weight:600}
.btn.secondary{background:#ffffff; border-color:#d5e1ef; color:var(--brand)}

/* ===== Mobile hamburger nav ===== */
.hamburger{display:none; margin-left:auto; width:40px; height:40px; border:1px solid #d5e1ef; border-radius:10px; background:#fff; align-items:center; justify-content:center; cursor:pointer}
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; display:block; width:18px; height:2px; background:#2a3950; border-radius:2px; transition:transform .2s ease, opacity .2s ease
}
.hamburger span{transform:translateY(0)}
.hamburger::before{transform:translateY(-6px)}
.hamburger::after{transform:translateY(6px)}
/* animated state when body has .nav-open (JS toggles) */
body.nav-open .hamburger span{opacity:0}
body.nav-open .hamburger::before{transform:rotate(45deg)}
body.nav-open .hamburger::after{transform:rotate(-45deg)}

.breadcrumb ol {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.breadcrumb li {display:flex;align-items:center;white-space:nowrap;}
.breadcrumb li + li::before {content:"›"; margin:0 .5rem; opacity:.5;}
.breadcrumb a {text-decoration:none;}
.breadcrumb .current {opacity:.9;}


/* Off-canvas drawer using existing nav.primary (now targets #primaryNav too) */
@media (max-width: 900px){
  /* shrink brand, declutter actions/topbar */
  header .logo--img{width:180px}
  .actions{display:none} /* hide search/sign-in on small screens */
  .hamburger{display:flex}

  /* Drawer: ensure visible even if older rules set display:none */
  #primaryNav,
  nav.primary{
    display:block !important;           /* <-- key fix */
    position:fixed; top:0; right:0; bottom:0;
    width:min(86vw,360px);
    background:#fff;
    border-left:1px solid #e5edf5;
    box-shadow:0 10px 40px rgba(2,12,27,.18);
    transform:translateX(100%);
    transition:transform .25s ease;
    padding:16px; z-index:120;
  }
  body.nav-open #primaryNav,
  body.nav-open nav.primary{ transform:translateX(0) }

  /* scrim overlay */
  .nav-scrim{position:fixed; inset:0; background:rgba(2,12,27,.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:110}
  body.nav-open .nav-scrim{opacity:1; pointer-events:auto}

  /* stack items inside drawer */
  #primaryNav .menu,
  nav.primary .menu{flex-direction:column; align-items:stretch; gap:6px}
  #primaryNav .menu > a, #primaryNav .dd-toggle,
  nav.primary .menu > a,  nav.primary .dd-toggle{padding:12px 12px; border-radius:10px}

  /* Disable hover-open on mobile; JS toggles .open on parent */
  #primaryNav .has-dd::after,
  nav.primary .has-dd::after{display:none}
  #primaryNav .dropdown,
  nav.primary .dropdown{position:static; margin-top:6px; border:0; box-shadow:none; padding:0; display:none}
  #primaryNav .has-dd:hover .dropdown,
  nav.primary .has-dd:hover .dropdown{display:none}
  #primaryNav .has-dd.open .dropdown,
  nav.primary .has-dd.open .dropdown{display:block}
}

/* Market ticker */
.ticker{border-top:1px solid #e5edf5; border-bottom:1px solid #e5edf5; background:#f7fbff; overflow:hidden; position:relative; height: 44.8px;}
.ticker-inner{padding:0}
.ticker-track{display:inline-flex; gap:18px; padding:10px 0; will-change:transform; animation:scroll var(--ticker-speed, 40s) linear infinite}
.tick{display:flex; gap:8px; align-items:baseline; white-space:nowrap; background:#ffffff; padding:8px 12px; border-radius:12px; border:1px solid #e1eaf4; box-shadow:0 2px 10px rgba(2,12,27,.04)}
.tick .sym{font-weight:700}
.tick .chg.up{color:var(--up)}
.tick .chg.down{color:var(--down)}
@keyframes scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none } }

/* Hero grid */
.grid{display:grid; gap:20px}
.hero{padding:26px 0}
.hero-grid{display:grid; grid-template-columns:2fr 1fr; gap:20px}
.hero-left{display:grid; gap:20px}
.hero-support{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.hero-lead{grid-column:1 / -1}
.thumb.banner{aspect-ratio:21/9; background:linear-gradient(135deg,#eaf2ff,#f5f9ff); border-bottom:1px solid #e5edf5}
.card{background:var(--surface); border:1px solid #e5edf5; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card.media{display:grid; grid-template-rows:auto 1fr}
.card .meta{display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:13px}
.card .badge, .list .badge{font-size:12px; background:#e6f2ff; color:#0b3b88; padding:2px 8px; border-radius:999px; border:1px solid #cfe5ff}
.card .content{padding:18px}
.card h2{margin:0 0 8px; font-size:28px; line-height:1.2}
.card h3{margin:0 0 8px; font-size:18px; line-height:1.3}
/* Hero card — mobile-first fixes */
.hero-card { display:flex; gap:16px; padding:16px; border:1px solid #e5edf5; }
.hero-card .thumb img { width:100%; height:auto; display:block; object-fit:cover; }
.byline{font-size:13px; color:var(--text-dim)}
.excerpt{margin:6px 0 0; color:var(--text-dim)}
.clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.clamp-3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.subnav{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 16px}
.category .subnav{
	justify-content:center;
}
.subnav a{padding:8px 12px; border:1px solid #d5e1ef; border-radius:999px; color:#0b3b88; background:#f7fbff}
.subnav a.active{background:#e6f2ff; border-color:#cfe5ff}
.thumb{aspect-ratio:16/9; background:linear-gradient(135deg,#eaf2ff,#f5f9ff); max-width: 100%; OVERFLOW: HIDDEN;}
/* Image inside */
.thumb img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* crop from top */
  display: block;
}
.side-list{display:grid; gap:14px}
.side-item{display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:start}
.side-item .thumb{border-radius:12px}

/* === WP menu compatibility (uses your existing look) === */
nav.primary .menu{display:flex; gap:18px; align-items:center; margin:0; padding:0; list-style:none}
nav.primary .menu > li{list-style:none; position:relative}
nav.primary .menu a{padding:8px 10px; border-radius:10px; color:var(--text-dim); display:inline-flex; align-items:center; gap:6px}
nav.primary .menu a:hover{background:var(--muted); color:var(--text)}

/* Parents mirror your previous .has-dd / .dd-toggle styles */
nav.primary .menu > li.has-dd > a.dd-toggle svg{transform:translateY(1px)}
nav.primary .menu > li.has-dd:hover > a.dd-toggle,
nav.primary .menu > li.has-dd:focus-within > a.dd-toggle{background:var(--muted); color:var(--text)}

/* Submenu adopts your .dropdown visual */
nav.primary .menu .dropdown{
  position:absolute; top:100%; left:0; margin-top:8px;
  background:#fff; border:1px solid #e5edf5; border-radius:12px;
  box-shadow:0 10px 30px rgba(2,12,27,.08);
  min-width:220px; padding:8px; display:none; z-index:60;
  list-style:none; margin-left:0;
}
nav.primary .menu li.has-dd:hover > .dropdown,
nav.primary .menu li.has-dd:focus-within > .dropdown{display:block}
nav.primary .menu .dropdown li{list-style:none}
nav.primary .menu .dropdown a{display:block; padding:10px 12px; border-radius:8px; color:var(--text)}
nav.primary .menu .dropdown a:hover{background:#f3f7ff}


/* Sections */
.section{margin:10px 0 30px}
.section h4{margin:0 0 12px; color:var(--text-dim); font-size:14px; letter-spacing:.12em; text-transform:uppercase}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cards-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

/* Block layout utilities */
.grid-2{display:grid; grid-template-columns:2fr 1fr; gap:20px}
.grid-1{display:grid; grid-template-columns:1fr; gap:16px}
.flow{display:grid; gap:16px}
.media-inline{display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:start}
.media-inline .thumb{aspect-ratio:16/10; border-radius:12px}
.feature .thumb{aspect-ratio:16/9}
.kicker{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#0b3b88}
.home--markets .media-inline{
	grid-template-columns: unset;
}

/* Asides & sticky */
.aside-sticky{position:sticky; top:84px}

/* Calculator card */
.calc-card{padding:16px; border:1px solid #e5edf5; border-radius:16px; background:#ffffff; box-shadow:0 2px 10px rgba(2,12,27,.04)}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.calc-card label{font-size:13px; color:var(--text-dim)}
.calc-card input,.calc-card select{width:100%; padding:10px 12px; border:1px solid #d5e1ef; border-radius:10px; background:#fff}
.calc-card .btn{width:100%}
.calc-note{font-size:12px; color:var(--text-dim)}

/* FAQ */
.faq details{border:1px solid #e5edf5; border-radius:12px; padding:12px 14px; background:#fff}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:600}
.faq p{color:var(--text-dim); margin:8px 0 0}

/* Trending & Latest */
.split{display:grid; grid-template-columns:1.5fr 1fr; gap:20px}
.list{display:grid; gap:10px}
.list .row{display:grid; grid-template-columns:1fr auto; align-items:center; background:#ffffff; border:1px solid #e5edf5; border-radius:12px; padding:12px 14px; box-shadow:0 2px 10px rgba(2,12,27,.04)}
.rank{width:28px; height:28px; border-radius:8px; background:#e6f2ff; display:grid; place-items:center; color:#0b3b88; font-weight:700}

/* Newsletter */
.cta{display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:center; background:linear-gradient(90deg, rgba(19,99,223,.06), rgba(82,182,255,.05)); border:1px solid #d5e1ef; border-radius:var(--radius); padding:20px}
.cta form{display:flex; gap:10px}
.cta input{flex:1; background:#ffffff; border:1px solid #d5e1ef; border-radius:12px; padding:12px 14px; color:var(--text)}

/* SMS CTA */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sms-cta.sms-compact{
  display:grid; gap:10px; padding:14px; border:1px solid #d5e1ef; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,99,223,.04), rgba(82,182,255,.05)); box-shadow:var(--shadow);
}
.sms-head{margin:0}
.sms-title{margin:0 0 2px; font-size:20px; line-height:1.2; color:var(--text)}
.sms-subtitle{margin:0 0 4px; color:var(--text-dim); font-size:14px}
.sms-row{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.sms-field.inline{flex:1 1 0; min-width:0; display:block}
.sms-field.inline input{height:44px; width:100%; border:1px solid #d5e1ef; border-radius:10px; padding:8px 12px; background:#fff; color:var(--text); outline:0}
.sms-field.inline input:focus{border-color:#bcd3f5; box-shadow:0 0 0 3px rgba(19,99,223,.14)}
.sms-phone{flex:0 1 240px}
.sms-submit{height:44px; padding:0 16px; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 6px 14px rgba(19,99,223,.22); white-space:nowrap; cursor:pointer}
.sms-submit:hover{filter:brightness(1.03)}
.sms-submit:active{transform:translateY(1px)}
.policy-inline{display:flex; gap:8px; align-items:flex-start; color:var(--text-dim); font-size:12px; line-height:1.4; margin-top:2px}
.policy-inline input{width:16px; height:16px; margin-top:2px; accent-color:var(--brand)}
.policy-inline a{color:var(--brand)}
.policy-box{grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:14px; border:1px solid #d5e1ef; border-radius:12px; background:#ffffff; box-shadow:0 2px 10px rgba(2,12,27,.04); color:var(--text-dim); font-size:14px; line-height:1.5}
.policy-box input{width:18px; height:18px; margin-top:3px; accent-color:var(--brand)}
.policy-box a{color:var(--brand)}

/* Footer */
footer{margin-top:40px; padding:28px 0 50px; border-top:1px solid #e5edf5; color:var(--text-dim)}
footer .logo--img{width:150px}
.footer-grid{display:grid; grid-template-columns:2fr repeat(4,1fr); gap:20px}
.ft-col a{display:block; padding:6px 0; color:var(--text-dim)}
.copyright{margin-top:14px; font-size:13px; color:#7a8aa3}

/* Responsive */
@media (max-width: 1100px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  /* removed: nav.primary{display:none} — this was hiding the drawer */
}
/* Show desktop nav above this width */
@media (min-width: 900px){
  nav.primary{display:flex}
}
/* Mobile tweaks */
@media (max-width: 720px){
  .wrap{padding:10px 14px}
  .topbar{display:none}

  /* ALL post grids collapse to one column */
  .hero-grid,
  .hero-support,
  .grid-2,
  .cards-2,
  .cards-3,
  .cards-4,
  .split {
    grid-template-columns:1fr !important;
  }

  /* Story rows stay single */
  .list .row{grid-template-columns:1fr}

  /* Inline/media cards: image above text on mobile */
  .media-inline{grid-template-columns:1fr}
  .side-item{grid-template-columns:1fr}

  /* Hero banner aspect for small screens */
  .thumb.banner{aspect-ratio:16/9}

  /* Footer single column for clarity */
  .footer-grid{grid-template-columns:1fr}
}

/* SMS: stack inputs on mobile */
@media (max-width: 720px){
  .sms-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .sms-field.inline{flex: 1 1 auto !important; min-width: 0}
  .sms-phone{flex: 1 1 auto !important}
  .sms-submit{width: 100%; height: 44px}

  .sms-cta.sms-compact{padding: 12px}

  .policy-inline{flex-wrap: wrap; align-items: flex-start}
  .policy-inline input{margin-top: 2px}

  /* Fallbacks if older markup is present */
  .sms-phone-row{grid-template-columns: 1fr !important; gap: 10px !important}
  .sms-grid{grid-template-columns: 1fr !important}
	.hero-card { flex-direction:column !important; gap:12px !important; padding:12px !important; }
  .hero-card .thumb { 
    flex:0 0 auto !important; 
    max-width:100% !important; 
    width:100% !important; 
  }
  .hero-card h2 { font-size:22px; line-height:1.3; }
}

/* Small tablet tweaks */
@media (max-width: 900px){
  .topbar .badge{font-size:11px; padding:3px 8px}
  .search{min-width:0}
}

/* Mobile drawer: show all submenus expanded, static */
@media (max-width: 900px){
  nav.primary .menu{flex-direction:column; align-items:stretch}
  nav.primary .menu > li > a{padding:12px 12px}
  nav.primary .menu .dropdown{
    position:static; display:block; border:0; box-shadow:none; padding:4px 0; margin:0;
  }
  nav.primary .menu .dropdown a{padding:10px 12px}
}

/* --- FIX: layering + mobile dropdown inside drawer --- */

/* Raise the whole header above the scrim */
header{ z-index: 1200; }

/* Scrim sits below header/drawer */
.nav-scrim{ z-index: 1100; }

/* Drawer above scrim (works whether you target #primaryNav or nav.primary) */
#primaryNav, nav.primary{ z-index: 1201; }

/* ===== Single Article ===== */
.post-wrap{max-width: 780px; margin: 24px auto;}
.post-hero{display:grid; gap:10px; margin:10px 0 16px; text-align:center; position: unset;}
.post-hero .badge{font-size:12px; background:#e6f2ff; color:#0b3b88; padding:2px 8px; border-radius:999px; border:1px solid #cfe5ff; display:inline-block; width: 150px; margin:0 auto;}
.post-hero h1{margin:0; font-size:34px; line-height:1.2; padding-bottom:10px;}
.post-meta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; color:var(--text-dim); font-size:14px}
.post-meta a{color:var(--text-dim)}
.post-figure{margin:14px 0 6px; border:1px solid #e5edf5; border-radius:12px; overflow:hidden; background:#fff}
.post-figure .thumb{aspect-ratio:16/9; background:linear-gradient(135deg,#eaf2ff,#f5f9ff)}
.post-figure figcaption{padding:8px 12px; color:var(--text-dim); font-size:13px}

/* readable content */
.prose{color:var(--text); line-height:1.75}
.single-post .post-wrap .prose > figure:first-of-type,
.single-post .post-wrap .prose > img:first-of-type,
.single-post .post-wrap .prose img:first-of-type  {
  display: none;
}
.prose > *+*{margin-top:1em}
.prose h2{font-size:24px; line-height:1.3; margin-top:1.4em}
.prose h3{font-size:20px; line-height:1.3; margin-top:1.2em}
.prose img{border-radius:12px}
.prose blockquote{margin:12px 0; padding:10px 14px; border-left:4px solid #d5e1ef; background:#fafcff; color:#2a3950}
.prose ul, .prose ol{padding-left:1.2em}
.prose code{background:#f4f7fc; padding:.15em .35em; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}

/* post footer */
.post-foot{margin:24px 0 6px; padding: 0px !Important;}
.post-tags{display:flex; gap:8px; flex-wrap:wrap}
.post-tags a{padding:6px 10px; border:1px solid #e5edf5; border-radius:999px; color:#0b3b88; background:#f7fbff; font-size:13px}

/* author card */
.author-card{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; padding:14px; border:1px solid #e5edf5; border-radius:16px; background:#fff; box-shadow:0 2px 10px rgba(2,12,27,.04)}
.author-card img{width:64px; height:64px; border-radius:50%; object-fit:cover}
.author-card .name{font-weight:700}
.author-card .bio{color:var(--text-dim); font-size:14px; margin-top:4px}

/* prev/next */
.post-nav{display:flex; justify-content:space-between; gap:10px; margin-top:16px}
.post-nav a{flex:1; display:block; padding:12px 14px; border:1px solid #e5edf5; border-radius:12px; background:#fff; color:var(--text-dim)}
.post-nav a strong{display:block; color:var(--text); margin-bottom:4px}

/* related */
.related .cards-3{margin-top:10px}


/* In-article widgets */
.key-points{margin:20px 0; padding:14px; border:1px solid #e5edf5; border-radius:14px; background:#ffffff; box-shadow:0 2px 10px rgba(2,12,27,.04)}
.key-points .kicker{margin-bottom:6px}
.key-points ul{margin:6px 0 0; padding-left:1.1em}

.share-row{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0}
.share-row .btn{padding:8px 12px; border-radius:10px}

.tags{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0}
.tags a{padding:6px 10px; border:1px solid #d5e1ef; border-radius:999px; color:#0b3b88; background:#f7fbff; font-size:13px}

/* Author card */
.author-card{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start; padding:14px; border:1px solid #e5edf5; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(2,12,27,.04); margin:22px 0}
.author-card .avatar{width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#eaf2ff,#f5f9ff)}

/* Prev/Next */
.article-nav{display:grid; gap:10px; margin:24px 0}
.article-nav .row{display:grid; grid-template-columns:1fr; background:#fff; border:1px solid #e5edf5; border-radius:12px; padding:12px 14px}

/* Related */
.related .cards-3{grid-template-columns:repeat(3,1fr)}

/* ===== Category page ===== */
.category-wrap{max-width:1100px; margin-inline:auto}
.category--title{margin:0 0 8px; font-size:28px; line-height:1.2; text-align:center;}
/* Head */
.cat-head{padding:12px 0 14px; border-bottom:1px solid #e5edf5; position:unset;}
.breadcrumbs{font-size:13px; color:var(--text-dim); margin:0 0 6px}
.breadcrumbs a{color:var(--brand)}
.cat-title{margin:0; font-size:32px; line-height:1.2}
.cat-desc{color:var(--text-dim); margin:6px 0 0}

/* Toolbar: subnav + sort */
.cat-toolbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin:12px 0 16px;
}
.cat-toolbar .subnav{margin:0}
.cat-sort{display:flex; gap:10px; align-items:center}
.cat-sort label{font-size:13px; color:var(--text-dim)}
.cat-sort select{
  height:38px; padding:6px 10px; border:1px solid #d5e1ef; border-radius:10px; background:#fff; color:var(--text);
}

/* Featured */
.cat-feature{margin:14px 0 18px}

/* Grid of posts */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.post-grid .card.media .thumb{aspect-ratio:16/9}

/* Pagination */
.pager{display:flex; gap:8px; justify-content:center; margin:18px 0 0}
.pager a, .pager span{
  display:inline-block; min-width:36px; height:36px; padding:0 10px;
  border:1px solid #d5e1ef; border-radius:10px; background:#fff;
  display:grid; place-items:center; color:var(--text);
}
.pager .current{background:#e6f2ff; border-color:#cfe5ff; color:#0b3b88; font-weight:700}

/* Compact list rows (aside) */
.list.compact .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.ga-ticker-wrap{position:relative;overflow:hidden;white-space:nowrap;border-top:1px solid var(--border,#e5e7eb);border-bottom:1px solid var(--border,#e5e7eb);padding:8px 0;}
  .ga-ticker-track{
	  display:inline-flex;
	  will-change: transform;
	  animation-name: ga-ticker-scroll;
	  animation-duration: 120s !important; /* force it */
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
	  /* optional to avoid the “stuck at left” look */
	  animation-delay: -0.5s;
	}

	@keyframes ga-ticker-scroll{
	  from { transform: translate3d(0,0,0); }
	  to   { transform: translate3d(-50%,0,0); } /* because content is duplicated once */
	}
  .ga-ticker-item{display:inline-flex;align-items:center;gap:.5rem;margin-right:2rem;font-size:.95rem}
  .ga-ticker-sym{font-weight:600;}
  .ga-up{color:#059669;}
  .ga-down{color:#dc2626;}

   /* ================================
   GrowAnalytica Login Form Styling
   ================================ */

.card form#ga-loginform {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card form#ga-loginform p {
  margin: 0;
  padding: 0;
}

.card form#ga-loginform label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #334155; /* slate-700 */
}

.card form#ga-loginform input[type="text"],
.card form#ga-loginform input[type="password"] {
  width: 100%;
  border: 1px solid #d5e1ef;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.4;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card form#ga-loginform input[type="text"]:focus,
.card form#ga-loginform input[type="password"]:focus {
  outline: none;
  border-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.card form#ga-loginform .forgetmenot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-top: -4px;
}

.card form#ga-loginform .forgetmenot label {
  font-weight: normal;
  margin: 0;
  color: #475569; /* slate-600 */
}

.card form#ga-loginform input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6; /* modern browsers */
}

.card form#ga-loginform .submit {
  margin-top: 8px;
}

.card form#ga-loginform input[type="submit"] {
  width: 100%;
  background: #1e40af; /* blue-800 */
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.card form#ga-loginform input[type="submit"]:hover {
  background: #1d4ed8; /* blue-700 */
}

.card form#ga-loginform input[type="submit"]:active {
  transform: scale(0.98);
}

.card .login p a {
  color: #1e40af;
  text-decoration: none;
}

.card .login p a:hover {
  text-decoration: underline;
}

/* Lost password link */
.card .login p a {
  color: #1e40af;
  font-weight: 500;
}

.btn.btn-login{
	background: transparent;
    border: none;
    box-shadow: none;
}

/* Responsive rules to keep ONE column on mobile */
@media (max-width: 900px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .cat-title{font-size:26px}
  .post-grid{grid-template-columns:1fr !important}
  .cat-toolbar{flex-direction:column; align-items:stretch}
  .cat-sort{justify-content:flex-start}
  .post-wrap{max-width: 100%; padding:0 2px}
  .post-hero h1{font-size:28px}
  .post-meta{font-size:13px}
}


/* Mobile */
@media (max-width:720px){
  .article{margin-top:12px}
  .article-title{font-size:28px}
  .article-dek{font-size:16px}
  .related .cards-3{grid-template-columns:1fr}
}


/* Mobile: dropdown is part of the drawer flow, not an absolute overlay */
@media (max-width: 900px){
  #primaryNav{
    min-height: 300px;
  }
  #primaryNav .dropdown,
  nav.primary .dropdown{
    position: static !important;
    z-index: auto !important;
    display: none;           /* toggled by .has-dd.open */
    margin-top: 6px;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  #primaryNav .has-dd.open .dropdown,
  nav.primary .has-dd.open .dropdown{
    display: block !important;
  }
}

/* If you still have an old rule hiding the nav on mobile, neutralize it */
@media (max-width: 1100px){
  #primaryNav, nav.primary{ display: block !important; }
}

/* ---- Mobile drawer: full height, scroll, expanded submenus ---- */
@media (max-width: 900px){
  /* Keep the whole header above the scrim; drawer above scrim */
  header{ z-index: 1200; }
  .nav-scrim{ z-index: 1100; }
  #primaryNav, nav.primary{ z-index: 1201; }

  /* Drawer sizing + scrolling */
  #primaryNav,
  nav.primary{
    display:block !important;
    position:fixed; top:0; right:0; bottom:0;
    width:min(66vw, 360px);
    /* full viewport height with iOS-safe fallback */
    height:100dvh;                /* modern browsers */
    height:100vh;                 /* fallback */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    background:#fff;
    border-left:1px solid #e5edf5;
    box-shadow:0 10px 40px rgba(2,12,27,.18);
    transform:translateX(100%);
    transition:transform .25s ease;
  }
  body.nav-open #primaryNav,
  body.nav-open nav.primary{ transform:translateX(0) }

  /* Lock page scroll when drawer is open */
  body.nav-open{ overflow:hidden; }

  /* Drawer content layout */
  #primaryNav .menu,
  nav.primary .menu{ flex-direction:column; align-items:stretch; gap:6px }

  /* Always show ALL dropdown menus expanded on mobile */
  #primaryNav .has-dd::after,
  nav.primary .has-dd::after{ display:none }

  #primaryNav .dd-toggle,
  nav.primary .dd-toggle{
    cursor:default;               /* no need to click on mobile */
  }
  #primaryNav .dd-toggle svg,
  nav.primary .dd-toggle svg{ display:none } /* hide chevron */

  #primaryNav .dropdown,
  nav.primary .dropdown{
    position:static !important;   /* flow inside drawer */
    display:block !important;     /* expanded by default */
    margin-top:6px;
    border:0; box-shadow:none; padding:0;
    z-index:auto !important;
  }
}