/* Header, floating pill nav. Sync (render-blocking). Mobile-first: links behind a drawer. */
.nav-wrap{position:sticky;top:12px;z-index:50;padding:0 12px}
.nav{max-width:var(--maxw-nav);margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 12px}
.nav .brand{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.nav .wordmark{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-0.02em;color:var(--ink)}
.nav .wordmark .dot{color:var(--accent)}
.nav .tagline{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
/* The grey pill wraps only the link cluster, sits visibly shorter than the
   .cta button beside it (see .nav .cta's negative margins) so the CTA reads
   as the thing to look at, not the nav links. */
.nav .primary{display:none;gap:26px;margin-left:auto;margin-right:-58px;align-items:center;background:var(--nav-bg,var(--gray));border:1px solid var(--line);border-radius:999px;padding:5px 48px 5px 22px;position:relative;z-index:1}
.nav .primary a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--muted);transition:color .15s}
.nav .primary a:hover,.nav .primary a.on{color:var(--ink)}
.nav .primary a.on{font-weight:600}
.nav .primary > a .nav-ic,.nav .primary .sub-toggle .nav-ic{width:15px;height:15px;flex:none}
.nav .cta{margin-left:auto;padding:12px 22px;font-size:13.5px;background:var(--gray);color:var(--ink);box-shadow:0 10px 24px -6px rgba(23,33,46,0.35);position:relative;z-index:2}
.nav .cta:hover{background:var(--line)}
.nav .cta .nav-ic{width:15px;height:15px;flex:none}

/* Dropdown parent (e.g. "Media" > "Podcasts") inside the desktop pill nav.
   Toggle button (not a link, url is typically "#") + a floating card menu,
   opened by header.js on click/tap and as a hover/focus-within fallback. */
.nav .primary .has-sub{position:relative;display:flex;align-items:center}
.nav .primary .sub-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .15s}
.nav .primary .sub-toggle:hover,.nav .primary .sub-toggle.on{color:var(--ink)}
.nav .primary .sub-toggle.on{font-weight:600}
.nav .primary .chev{width:14px;height:14px;transition:transform .15s}
.nav .primary .has-sub.is-open .chev{transform:rotate(180deg)}
.nav .primary .sub-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:180px;background:var(--nav-bg,var(--gray));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 12px 28px rgba(23,33,46,0.16);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:20}
.nav .primary .has-sub.is-open .sub-menu,.nav .primary .has-sub:hover .sub-menu,.nav .primary .has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav .primary .sub-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink)}
.nav .primary .sub-menu a:hover,.nav .primary .sub-menu a.on{background:var(--blue)}
.nav .primary .sub-menu .sub-ic{width:16px;height:16px;flex:none;color:var(--accent-deep)}

/* Same dropdown markup inside the mobile drawer, behaves as an inline accordion. */
.nav-drawer__panel .has-sub{border-bottom:1px solid var(--line)}
.nav-drawer__panel .sub-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;font:inherit;font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--ink);padding:12px 0;cursor:pointer}
.nav-drawer__panel .has-sub .sub-menu{max-height:0;overflow:hidden;transition:max-height .25s ease}
.nav-drawer__panel .has-sub.is-open .sub-menu{max-height:320px}
.nav-drawer__panel .sub-menu a{display:flex;align-items:center;gap:10px;padding:10px 0 10px 16px;font-size:17px;font-weight:500;border-bottom:none;color:var(--muted)}
.nav-drawer__panel .sub-menu .sub-ic{width:18px;height:18px;flex:none;color:var(--accent-deep)}
.nav-drawer__panel .has-sub.is-open .chev{transform:rotate(180deg)}

/* mobile drawer toggle (hamburger) */
.nav-toggle{margin-left:8px;width:40px;height:40px;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;border-radius:12px}
.nav-toggle .line{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .line:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer panel */
.nav-drawer{position:fixed;inset:0;z-index:60;background:rgba(18,39,64,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.nav-drawer.is-open{opacity:1;visibility:visible}
.nav-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:var(--card);padding:80px 28px 32px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .25s}
.nav-drawer.is-open .nav-drawer__panel{transform:none}
.nav-drawer__panel a{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line)}
.nav-drawer__close{position:absolute;top:22px;right:22px;width:40px;height:40px;font-size:26px;line-height:1;color:var(--ink)}
body.is-locked{overflow:hidden}

/* .nav-on-dark: reusable modifier for a header instance that floats over a
   dark hero (transparent, no blur, white text) instead of sitting in normal
   flow on a light background. Takes the header OUT of flow with
   position:absolute so the section right after it in the DOM, typically a
   full-bleed dark hero, starts at y:0 and the header overlays its top edge,
   no negative-margin math needed. Used by both the Burhan Koca home page
   (header-bk-dark part) and the main site's own dark-hero page(s). */
.nav-wrap.nav-on-dark{position:absolute;top:0;left:0;right:0}
/* body.no-hero-photo: this template's hero renders nothing when the post has
   no featured image, so there's no tall photo for nav-on-dark to float over.
   Fall back to a plain solid-dark header bar in normal flow instead. */
body.no-hero-photo .nav-wrap.nav-on-dark{position:sticky;top:0;background:var(--ink);box-shadow:0 2px 16px rgba(10,13,18,0.25)}
.nav-wrap.nav-on-dark .nav .primary{background:rgba(148,153,166,0.22);border:1px solid rgba(237,241,246,0.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-wrap.nav-on-dark .nav .wordmark,
.nav-wrap.nav-on-dark .nav .primary a{color:#fff}
.nav-wrap.nav-on-dark .nav .tagline{color:rgba(237,241,246,0.62)}
.nav-wrap.nav-on-dark .nav .primary a:hover,
.nav-wrap.nav-on-dark .nav .primary a.on{color:#fff;font-weight:600}
.nav-wrap.nav-on-dark .nav-toggle .line{background:#fff}
.nav-wrap.nav-on-dark .nav .primary a{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:0.025em}

/* The dropdown toggle is a <button>, not an <a>, so it needs its own
   nav-on-dark color. The popover card itself matches the same translucent
   glass bg as .nav .primary, and its links share the exact same font style
   and color as the main nav links, so the dropdown reads as an extension of
   the pill rather than a separate light card. */
.nav-wrap.nav-on-dark .nav .primary .sub-toggle{color:rgba(237,241,246,0.82);font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:0.025em}
.nav-wrap.nav-on-dark .nav .primary .sub-toggle:hover,.nav-wrap.nav-on-dark .nav .primary .sub-toggle.on{color:#fff}
.nav-wrap.nav-on-dark .nav .primary .sub-menu{background:rgba(148,153,166,0.22);border:1px solid rgba(237,241,246,0.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-wrap.nav-on-dark .nav .primary .sub-menu a{color:#fff;font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:0.025em}
.nav-wrap.nav-on-dark .nav .primary .sub-menu a:hover,.nav-wrap.nav-on-dark .nav .primary .sub-menu a.on{color:#fff}
.nav-wrap.nav-on-dark .nav .primary .sub-menu a:hover,.nav-wrap.nav-on-dark .nav .primary .sub-menu a.on{background:rgba(255,255,255,0.12)}
.nav-wrap.nav-on-dark .nav .primary .sub-menu .sub-ic{color:currentColor}

/* Breadcrumb strip directly below the header (rendered via arnout_crumbs_bar(),
   shared by both page-head and masthead), lives here, always loaded, since
   it's not tied to either specific block's own stylesheet. */
.crumbs-bar{padding:10px 0;background:var(--blue);border-bottom:1px solid var(--line)}
.crumbs-bar .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.crumbs-bar .crumbs a{color:var(--muted);transition:color .15s;display:inline-flex;align-items:center}
.crumbs-bar .crumbs a:hover{color:var(--accent-deep)}
.crumbs-bar .crumbs .sep{color:var(--line)}
.crumbs-bar .crumbs .current{color:var(--ink);font-weight:500}
.crumbs-bar .crumbs .home svg{width:15px;height:15px;display:block}