/* Header, floating pill nav. Sync (render-blocking). Mobile-first: links behind a drawer. */
.nav-wrap{position:sticky;top:12px;z-index:50;padding:0 0}
.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:22px;letter-spacing:-0.02em;color:var(--ink)}
.nav .wordmark .dot{color:var(--accent)}
.nav .tagline{font-family:var(--f-mono);font-size:10.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:5px 12px;font-size:13.5px;gap:0;white-space:nowrap;flex-shrink:0;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. Renders pre-expanded (the
   "is-open" class is added server-side in render.php for the drawer instance)
   and is styled as a nested submenu, not a flat list of equal-weight items:
   smaller, indented, muted-colored sub-items under a centered "Speaking"
   heading. Still toggleable (header.js keeps working) if someone taps it shut. */
.nav-drawer__panel .has-sub{width:100%;display:flex;flex-direction:column;align-items:center;border-bottom:1px solid var(--line)}
.nav-drawer__panel .sub-toggle{width:auto;display:inline-flex;align-items:center;gap:6px;justify-content:center;background:none;border:0;font:inherit;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:0.01em;color:var(--ink);padding:12px 0;cursor:pointer}
.nav-drawer__panel .has-sub .chev{width:16px;height:16px;flex:none;transition:transform .2s}
.nav-drawer__panel .has-sub .sub-menu{width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column;align-items:center}
.nav-drawer__panel .has-sub.is-open .sub-menu{max-height:320px;padding-bottom:8px}
.nav-drawer__panel .has-sub.is-open .chev{transform:rotate(180deg)}
.nav-drawer__panel .sub-menu a{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 0;font-family:var(--f-body,inherit);font-size:15px;font-weight:500;border-bottom:none;color:var(--muted)}
.nav-drawer__panel .sub-menu a:hover,.nav-drawer__panel .sub-menu a.on{color:var(--accent-deep)}
.nav-drawer__panel .sub-menu .sub-ic{width:16px;height:16px;flex:none;color:var(--accent-soft)}

/* mobile drawer toggle (hamburger) */
.nav-toggle{margin-left:8px;width:44px;height:44px;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: full-viewport-width, drops down from the top (not a right-side
   slide-in). .nav-drawer is just the click-to-close scrim behind the panel;
   the panel itself carries the blur+tint so the page content stays visible
   (but blurred) across the ENTIRE width, not only a thin strip beside it. */
.nav-drawer{position:fixed;inset:0;z-index:60;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.nav-drawer.is-open{opacity:1;visibility:visible}
.nav-drawer__panel{position:absolute;top:0;left:0;right:0;width:100%;max-height:100vh;overflow-y:auto;background:linear-gradient(180deg,rgba(18,39,64,0.62),rgba(18,39,64,0.7));backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:0 24px 48px -12px rgba(10,13,18,0.35);padding:96px 28px 40px;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateY(-100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav-drawer.is-open .nav-drawer__panel{transform:translateY(0)}
.nav-drawer__panel a{width:100%;text-align:center;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:0.01em;color:rgba(237,241,246,0.66);padding:14px 0;border-bottom:1px solid rgba(237,241,246,0.16);position:relative}
.nav-drawer__panel a.on,
.nav-drawer__panel .sub-toggle.on{color:#fff}
.nav-drawer__panel .has-sub{border-bottom:1px solid rgba(237,241,246,0.16)}
.nav-drawer__panel .sub-toggle{color:rgba(237,241,246,0.66);position:relative}
.nav-drawer__panel .sub-menu a{color:rgba(237,241,246,0.66);border-bottom:none;font-weight:500}
.nav-drawer__panel .sub-menu a:hover,.nav-drawer__panel .sub-menu a.on{color:#fff}
.nav-drawer__panel a.btn{width:auto;border-bottom:0;text-align:center;padding:14px 28px;margin-top:12px}
.nav-drawer__panel .drawer-cta{padding-top:9px;padding-bottom:9px;background:var(--gray);color:var(--ink);box-shadow:0 10px 24px -6px rgba(23,33,46,0.35)}
.nav-drawer__panel .drawer-cta:hover{background:var(--line)}
.nav-drawer__close{position:absolute;top:20px;right:20px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(237,241,246,0.12);color:#fff;transition:background .15s,transform .15s}
.nav-drawer__close svg{width:18px;height:18px}
.nav-drawer__close:hover{background:rgba(237,241,246,0.22)}
.nav-drawer__close:active{transform:scale(0.92)}
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:linear-gradient(rgba(148,153,166,0.5),rgba(148,153,166,0.5)),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{color:#fff}
.nav-wrap.nav-on-dark .nav .primary a{color:rgba(237,241,246,0.66)}
.nav-wrap.nav-on-dark .nav .tagline{color:rgba(237,241,246,0.62)}
.nav-wrap.nav-on-dark .nav .primary a:hover{color:#fff}
.nav-wrap.nav-on-dark .nav .primary a.on,
.nav-wrap.nav-on-dark .nav .primary .sub-toggle.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.66);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:rgba(237,241,246,0.66);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}