/*
Theme Name: FastDaily Child
Theme URI: https://fastdaily.com/
Author: FastD
Author URI: https://fastdaily.com/
Description: Child theme of GeneratePress 3.6.1 for FastDaily.com. Implements the "hubahu" design system from design-spec-hubahu.md: navy top bar, logo + promo banner header, blue-pill navigation, canonical hub template for category archives, full article template, inline SVG line icons (no emoji), and the full colour/typography system. Free only — no plugins, no premium features. v3: category archives fetch posts with a fresh WP_Query (the main query returns NULL posts on archives), hub-page emoji are swapped for SVG icons by a content filter, and the header stacks cleanly at 360px.
Template: generatepress
Version: 3.0.0
Requires at least: 6.5
Tested up to: 6.9
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: fastdaily-child
Tags: two-columns, right-sidebar, blog, news, magazine
*/

/* ==========================================================================
   PART 1 — Parent Additional CSS, VERBATIM.
   Copied unchanged from parent-additional-css-2026-11-12.css (215 lines),
   extracted from the live parent GeneratePress theme on 2026-11-12. This
   is what makes the homepage render correctly. Do NOT edit these rules
   here — edit the live Additional CSS instead, and keep both in sync.
   v3 exception (one line only): the 🔥 in the "Trending Now" heading was
   removed (content:"Trending Now"), matching the live Additional CSS
   edit — a reinstall must not bring the flame back.
   ========================================================================== */
/* FastDaily design system (spec §4) */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0F172A;background:#fff}
h1,h2,h3{color:#0F172A}
/* Top navy bar */
.top-bar{background:#0A1130}
.inside-top-bar{font-size:12px;color:#fff}
.fd-topbar{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:12px;color:#fff}
.fd-topbar a{color:#fff;text-decoration:none}
.fd-topbar-links a{margin-left:20px}
/* Header */
.site-header .site-logo img{max-height:56px;width:auto}
/* Main nav: semibold dark items, chevron, blue active pill, search at right */
.main-navigation .main-nav ul li a{font-size:15px;font-weight:600;color:#0F172A;padding:8px 12px}
.main-navigation .main-nav ul li:not(:first-child)>a:after{content:" ⌄";font-size:11px}
.main-navigation .main-nav ul li.current-menu-item>a,.main-navigation .main-nav ul li.current_page_item>a,.main-navigation .main-nav ul li.current_page_parent>a{background:#0B63E5;color:#fff;border-radius:999px}
.main-navigation .main-nav ul li a:hover{color:#0B63E5}
.main-navigation .main-nav ul li.current-menu-item>a:hover,.main-navigation .main-nav ul li.current_page_item>a:hover{color:#fff}
/* Hide author byline (spec §6: no author names, date only) */
.entry-meta .byline,.entry-header .byline{display:none!important}
/* Footer: navy */
.site-footer{background:#0A1130;color:#fff}
.site-footer a{color:#fff}
/* Promo banner (in-page, per page copy) */
.fd-promo{background:linear-gradient(90deg,#0A2E7A,#155EEF);border-radius:12px;color:#fff;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.fd-promo h2{color:#fff;font-size:24px;font-weight:800;margin:0 0 6px;line-height:1.25}
.fd-promo p{color:#DBEAFE;margin:0;font-size:14px}
.fd-cta{display:inline-block;background:#FFC107;color:#111827;font-weight:700;font-size:14px;padding:11px 18px;border-radius:8px;text-decoration:none;white-space:nowrap}
.fd-cta-blue{display:inline-block;background:#0B63E5;color:#fff;font-weight:700;font-size:14px;padding:11px 18px;border-radius:8px;text-decoration:none;white-space:nowrap}
/* BREAKING ticker */
.fd-ticker{display:flex;align-items:center;gap:14px;border:1px solid #E5EAF1;border-radius:8px;padding:9px 14px;background:#fff}
.fd-ticker-badge{background:#E11D2E;color:#fff;font-weight:700;font-size:12px;padding:5px 10px;border-radius:6px;white-space:nowrap}
.fd-ticker-items{display:flex;gap:14px;overflow:hidden;flex:1}
.fd-ticker-items a{color:#0F172A;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-ticker-items a:not(:last-child):after{content:"•";color:#E11D2E;margin-left:14px}
.fd-ticker-arrows{margin-left:auto;white-space:nowrap}
.fd-ticker-arrows span{border:1px solid #E5EAF1;border-radius:4px;padding:2px 8px;color:#5B6472}
/* Section heading with blue bar */
.fd-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #E5EAF1;padding-bottom:10px;margin-bottom:16px}
.fd-sec h2{font-size:20px;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.fd-sec h2:before{content:"";width:5px;height:20px;background:#0B63E5;border-radius:3px;display:inline-block}
.fd-viewall{color:#0B63E5;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
/* Hero overlay cards */
.fd-hero-card{position:relative;border-radius:12px;overflow:hidden;background:#0F172A}
.fd-hero-card figure{margin:0}
.fd-hero-card img{width:100%;height:100%;object-fit:cover;display:block}
.fd-hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff}
.fd-hero-overlay h3,.fd-hero-overlay h2{margin:0 0 6px;color:#fff;font-weight:800;line-height:1.25}
.fd-hero-overlay h3{font-size:26px}
.fd-hero-overlay h2{font-size:16px}
.fd-hero-overlay p{color:#E5EAF1;font-size:13px;margin:0}
.fd-hero-overlay .wp-block-post-date,.fd-hero-overlay time{color:#CBD5E1;font-size:12px}
.fd-hero-overlay a{color:#fff;text-decoration:none}
.fd-badge{position:absolute;top:12px;left:12px;z-index:2}
.fd-badge a{background:#0B63E5;color:#fff;text-transform:uppercase;font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px;text-decoration:none}
.fd-badge-red a{background:#E11D2E}
/* Post cards */
.fd-card{border:1px solid #E5EAF1;border-radius:12px;overflow:hidden;background:#fff}
.fd-card figure{margin:0}
.fd-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.fd-card-body{padding:14px 16px}
.fd-card-body h3{font-size:16px;font-weight:700;margin:0 0 6px;line-height:1.35}
.fd-card-body h3 a{color:#0F172A;text-decoration:none}
.fd-card-body .wp-block-post-date,.fd-card-body time{font-size:12px;color:#5B6472}
/* Horizontal list items */
.fd-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #E5EAF1;list-style:none}
.fd-list li:last-child{border-bottom:0}
.fd-list figure{flex:0 0 96px;margin:0}
.fd-list img{width:96px;height:72px;object-fit:cover;border-radius:8px;display:block}
.fd-list h3{font-size:14px;font-weight:700;margin:0 0 4px;line-height:1.35}
.fd-list h3 a{color:#0F172A;text-decoration:none}
.fd-list .wp-block-post-date,.fd-list time{font-size:12px;color:#5B6472}
.fd-bullets{list-style:none;margin:0;padding:0}
.fd-bullets li{padding:8px 0;border-bottom:1px solid #E5EAF1;font-weight:600;font-size:14px}
.fd-bullets li:before{content:"•";color:#0B63E5;margin-right:8px}
.fd-bullets li a{color:#0F172A;text-decoration:none}
/* Icon row */
.fd-icons{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.fd-icon{background:#F4F7FC;border-radius:10px;padding:14px 4px;text-align:center;font-size:12px;font-weight:600;color:#0F172A;text-decoration:none;display:block}
.fd-icon span{font-size:22px;display:block;margin-bottom:6px}
.fd-icon.on{background:#0B63E5;color:#fff}
/* Deals banner */
.fd-deals{background:linear-gradient(90deg,#0A2E7A,#155EEF);border-radius:12px;color:#fff;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.fd-deals h2{color:#fff;font-size:22px;font-weight:800;margin:0}
.fd-deals h2 .y{color:#FFC107}
.fd-deals p{color:#DBEAFE;margin:4px 0 0;font-size:14px}
/* Sidebar boxes */
.fd-box{background:#F4F7FC;border-radius:12px;padding:20px;margin-bottom:24px}
.fd-box h3{font-size:18px;font-weight:700;margin:0 0 8px}
.fd-newsletter input{width:100%;padding:11px 12px;border:1px solid #E5EAF1;border-radius:8px;margin:8px 0}
.fd-newsletter button{width:100%;background:#0B63E5;color:#fff;border:0;border-radius:8px;padding:11px;font-weight:700;font-size:14px;cursor:pointer}
.fd-promo-purple{background:linear-gradient(135deg,#6D28D9,#9333EA);border-radius:12px;padding:22px;color:#fff;margin-bottom:24px}
.fd-promo-purple h3{color:#fff;font-size:20px;font-weight:800;margin:0 0 10px;line-height:1.3}
.fd-promo-purple ul{list-style:none;margin:0 0 14px;padding:0;font-size:13px}
.fd-promo-purple li{padding:3px 0}
.fd-promo-btn{display:inline-block;background:#fff;color:#111827;font-weight:700;font-size:14px;padding:10px 16px;border-radius:8px;text-decoration:none}
/* Numbered trending (in-page query loops + sidebar Latest Posts) */
.fd-trend,.widget-area .wp-block-latest-posts{counter-reset:fdn;list-style:none;margin:0;padding:0}
.fd-trend li,.widget-area .wp-block-latest-posts li{counter-increment:fdn;display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #E5EAF1}
.fd-trend li:last-child,.widget-area .wp-block-latest-posts li:last-child{border-bottom:0}
.fd-trend li:before,.widget-area .wp-block-latest-posts li:before{content:counter(fdn);flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#E5EAF1;color:#0F172A;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fd-trend li:nth-child(-n+3):before,.widget-area .wp-block-latest-posts li:nth-child(-n+3):before{background:#0B63E5;color:#fff}
.fd-trend h3,.widget-area .wp-block-latest-posts a{font-size:14px;font-weight:700;line-height:1.35;color:#0F172A;text-decoration:none}
.fd-trend .wp-block-post-date,.widget-area .wp-block-latest-posts time{font-size:12px;color:#5B6472;display:block}
.widget-area .wp-block-latest-posts:before{content:"Trending Now";display:block;font-size:18px;font-weight:700;margin-bottom:8px}
.is-right-sidebar .widget_block{background:#F4F7FC;border-radius:12px;padding:20px;margin-bottom:24px}
.is-right-sidebar .widget_block.fd-newsletter,.is-right-sidebar .widget_block.fd-promo-purple{margin-bottom:0}
/* Explore strip */
.fd-explore{background:#EAF2FE;border-radius:12px;padding:28px}
.fd-explore-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.fd-explore h2{font-size:20px;font-weight:700;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.fd-explore h2:before{content:"";width:5px;height:20px;background:#0B63E5;border-radius:3px}
.fd-explore-col{text-align:left}
.fd-explore-col span{font-size:20px;display:block;margin-bottom:6px}
.fd-explore-col h3{font-size:14px;font-weight:700;margin:0 0 4px}
.fd-explore-col p{font-size:12px;color:#5B6472;margin:0;line-height:1.5}
.fd-explore-col a{color:#0F172A;text-decoration:none}
/* Hub H1 with blue bar */
.fd-hubh1{font-size:30px;font-weight:800;display:flex;align-items:center;gap:12px;margin:0 0 6px}
.fd-hubh1:before{content:"";width:6px;height:28px;background:#0B63E5;border-radius:3px}
.fd-hubsub{font-size:14px;color:#5B6472;margin:0 0 20px}
.fd-crumb{font-size:13px;color:#5B6472;margin:0 0 8px}
.fd-crumb a{color:#5B6472;text-decoration:none}
/* Category tiles */
.fd-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fd-tile{background:#F4F7FC;border-radius:10px;padding:16px;text-decoration:none;display:block}
.fd-tile span{font-size:20px;display:block;margin-bottom:6px}
.fd-tile h3{font-size:14px;font-weight:700;margin:0 0 4px;color:#0F172A}
.fd-tile p{font-size:12px;color:#5B6472;margin:0;line-height:1.5}
/* Subcategory pills */
.fd-pills{display:flex;flex-wrap:wrap;gap:8px}
.fd-pills a{background:#fff;border:1px solid #E5EAF1;border-radius:999px;padding:6px 14px;font-size:13px;color:#0F172A;text-decoration:none}
.fd-pills a.on{background:#0B63E5;color:#fff;border-color:#0B63E5}
/* Empty state */
.fd-empty{background:#F4F7FC;border:1px solid #E5EAF1;border-radius:12px;padding:36px 20px;text-align:center;color:#5B6472}
/* Single post */
.single .entry-content{font-size:17px;line-height:1.75;color:#1F2937}
.single .entry-content h2{font-size:24px;font-weight:700}
/* Mobile */
@media (max-width:900px){.fd-icons{grid-template-columns:repeat(5,1fr)}.fd-explore-grid{grid-template-columns:repeat(3,1fr)}.fd-promo,.fd-deals{flex-direction:column;align-items:flex-start}.fd-hero-overlay h3{font-size:20px}.fd-ticker-items a:nth-child(n+2){display:none}}
@media (max-width:600px){.fd-icons{grid-template-columns:repeat(3,1fr)}.fd-explore-grid{grid-template-columns:repeat(2,1fr)}.fd-tiles{grid-template-columns:repeat(2,1fr)}.fd-topbar{flex-wrap:wrap}}
/* Nav pill sizing */
.main-navigation .main-nav ul li a{line-height:1.4;padding:9px 13px}
.main-navigation .main-nav ul{margin:0}

/* Homepage fixes */
.fd-ticker{overflow:hidden;max-width:100%}
.fd-ticker .wp-block-query,.fd-ticker-q{flex:1;min-width:0}
.fd-ticker-items{margin:0;padding:0}
.fd-ticker-items li{flex:1 1 0;min-width:0;overflow:hidden}
.fd-ticker-items h2{margin:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-ticker-items h2 a{color:#0F172A;text-decoration:none}
.fd-hero-card{padding:0!important}
.fd-hero-card figure{margin:0!important;height:100%!important;width:100%!important}
.fd-hero-card .wp-block-post-featured-image{margin:0!important}
.fd-hero-card img{width:100%!important;height:100%!important;object-fit:cover!important}
.fd-hero-overlay h3,.fd-hero-overlay h2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fd-badge a:not(:first-of-type){display:none}
.fd-badge .wp-block-post-terms__separator{display:none}
.fd-icon{font-size:11px}
.fd-trend h3 a{color:#0F172A;text-decoration:none}
.fd-list.wp-block-group,.fd-trend.wp-block-group{min-width:0}
.fd-bullets{list-style:none;margin:0;padding:0}
.fd-bullets li{display:flex;align-items:baseline}
.fd-bullets h3{font-size:14px;margin:0;font-weight:600}
.fd-bullets li a{color:#0F172A;text-decoration:none}
.fd-card{position:relative}
/* Hero image must fill its card */
.fd-hero-card figure a,.fd-card figure a{display:block;width:100%;height:100%}
.fd-hero-card .wp-block-post-featured-image,.fd-card .wp-block-post-featured-image{width:100%}

/* Hero fixed image heights */
.fd-hero-card img{height:340px!important}
.fd-hero-card-sm img{height:158px!important}
.fd-hero-card-sm h3{font-size:16px!important}
.fd-hero-card-sm .fd-hero-overlay{padding:14px}
/* Trending: absolute numbers, full-width text */
.fd-trend li,.widget-area .wp-block-latest-posts li{position:relative;display:block!important;padding-left:38px}
.fd-trend li:before,.widget-area .wp-block-latest-posts li:before{position:absolute;left:0;top:10px}
.fd-trend.wp-block-group{width:100%}
.fd-icon{overflow-wrap:normal;word-break:normal}
/* Title width/clamp hardening */
.fd-hero-overlay h2{font-size:15px!important;line-height:1.35!important;max-height:61px!important;overflow:hidden}
.fd-hero-overlay h3{max-height:98px!important;overflow:hidden}

/* Figure/content width fixes */
.fd-hero-card figure{display:contents}
.fd-hero-card .wp-block-group__inner-container{width:100%!important;max-width:none!important}
.fd-trend .wp-block-group__inner-container{width:100%!important;max-width:none!important}
.fd-trend h3{width:100%!important;max-width:none!important}
.fd-trend li{width:100%!important}
/* Use full width for post titles (override text-wrap:balance) */
.fd-trend h3,.fd-hero-overlay h2,.fd-hero-overlay h3,.fd-list h3,.fd-card-body h3,.fd-bullets h3{text-wrap:wrap!important}

/* Group inner containers must not inset content */
.fd-hero-card .wp-block-group__inner-container,.fd-hero-overlay .wp-block-group__inner-container,.fd-card .wp-block-group__inner-container,.fd-card-body .wp-block-group__inner-container,.fd-box .wp-block-group__inner-container,.fd-trend .wp-block-group__inner-container,.fd-list .wp-block-group__inner-container,.fd-ticker .wp-block-group__inner-container{padding:0!important;margin:0!important}
/* Hub icon rows and explore strips adapt to 4-7 tiles */
.fd-icons-auto{grid-template-columns:repeat(auto-fit,minmax(105px,1fr))!important}
.fd-explore-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
/* Stronger hero overlay so white titles stay readable on light photos */
.fd-hero-overlay{background:linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.55) 45%,rgba(2,6,23,.88) 100%)!important}
.fd-hero-overlay h3,.fd-hero-overlay h2,.fd-hero-overlay .wp-block-post-date{text-shadow:0 1px 8px rgba(0,0,0,.65)}
/* Stacked hero cards: smaller title, 3 lines max */
.fd-hero-card-sm .fd-hero-overlay h3{font-size:14px!important;line-height:1.35;max-height:57px!important}

/* Hub card titles (h2 in hub grids): dark, compact, clamped */
.fd-card-body h2,.fd-card-body h2 a{font-size:16px!important;line-height:1.35!important;color:#0f172a!important;max-height:66px!important;overflow:hidden}
.fd-card-body h2 a:hover{color:#0b63e5!important}
/* Hub icon row: single flexible row */
.fd-icons-auto{display:flex!important;gap:10px}
.fd-icons-auto .fd-icon{flex:1 1 0!important;min-width:0}
/* Tiles and explore columns: dark labels, no underline, compact tile labels */
.fd-tile,.fd-explore-col{color:#0f172a!important;text-decoration:none!important}
.fd-tile>div:nth-child(2){font-size:12px!important;line-height:1.3}
/* Hub category tiles: 2 columns so long subcategory names fit without breaking */
.fd-tiles{grid-template-columns:repeat(2,1fr)!important}

/* ==========================================================================
   FastDaily Child v2 — child-only rules (scoped to the child templates).
   The complete parent Additional CSS sits ABOVE this section, verbatim.
   These rules target ONLY classes used by archive.php / single.php /
   header.php chrome (.fd-tbar, .fd-hpromo, .fd-nav-wrap, .fd-layout,
   .fd-ccard, .fd-itile, .fd-ctiles, .fd-cexplore, .fd-cbox, .fd-cpromo,
   .fd-cempty, .fd-ic, ...). They never touch the homepage / hub-page
   classes (.fd-hero-card, .fd-ticker, .fd-card, .fd-list, .fd-trend,
   .fd-icons, .fd-deals, .fd-box, .fd-explore, .fd-promo, .fd-badge,
   .fd-tile, .fd-tiles, .fd-icon, .fd-empty, .fd-promo-purple) — those
   are styled by the parent CSS above, exactly as on the live site.
   ========================================================================== */

/* Design tokens (spec §4). */
:root {
	--fd-navy: #0A1130;
	--fd-blue: #0B63E5;
	--fd-banner-blue-1: #0A2E7A;
	--fd-banner-blue-2: #155EEF;
	--fd-red: #E11D2E;
	--fd-yellow: #FFC107;
	--fd-yellow-text: #111827;
	--fd-purple-1: #6D28D9;
	--fd-purple-2: #9333EA;
	--fd-strip: #EAF2FE;
	--fd-box: #F4F7FC;
	--fd-heading: #0F172A;
	--fd-grey: #5B6472;
	--fd-border: #E5EAF1;
	--fd-body: #1F2937;
}

/* Inline SVG icons (fastdaily_icon()). Never the .fd-icon tile class. */
.fd-ic { display: inline-block; vertical-align: middle; flex: none; }

/* Never break words mid-word in titles / tile labels. */
.fd-ccard-title,
.fd-itile-label,
.fd-cexplore-label,
.fd-hitem-title,
.fd-trend-title,
.fd-hero-title {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Line clamps */
.fd-clamp-2, .fd-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fd-clamp-2 { -webkit-line-clamp: 2; }
.fd-clamp-3 { -webkit-line-clamp: 3; }

/* ==========================================================================
   1. Top navy bar (spec §1.1)
   ========================================================================== */
.fd-tbar {
	background: var(--fd-navy);
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1.5;
}
.fd-tbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 6px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.fd-tbar-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #FFFFFF;
}
.fd-tbar-date .fd-ic { color: #FFD166; }
.fd-tbar-links { display: flex; align-items: center; gap: 18px; }
.fd-tbar-links a {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 500;
}
.fd-tbar-links a:hover { text-decoration: underline; }

/* ==========================================================================
   2. Header row — logo + promo banner side by side (spec §1.2)
   ========================================================================== */
.fd-site-header {
	background: #FFFFFF;
	border-bottom: 1px solid var(--fd-border);
}
.fd-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.fd-logo { flex: none; }
.fd-logo a { text-decoration: none; display: inline-flex; align-items: flex-start; gap: 8px; }
.fd-logo .fd-logo-bolt { color: var(--fd-blue); margin-top: 2px; }
.fd-logo-wordmark {
	font-size: 30px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--fd-heading);
}
.fd-logo-wordmark .fd-daily { color: var(--fd-blue); }
.fd-logo-wordmark .fd-com { color: var(--fd-grey); font-size: 20px; font-weight: 700; }
.fd-logo-tagline {
	font-size: 12px;
	color: var(--fd-grey);
	margin-top: 2px;
	letter-spacing: 0.2px;
}
.fd-logo img { max-height: 56px; width: auto; }

/* Header promo banner. NOT the in-page .fd-promo — that is parent CSS. */
.fd-hpromo {
	flex: 1 1 auto;
	max-width: 640px;
	margin-left: auto;
	background: linear-gradient(90deg, var(--fd-banner-blue-1), var(--fd-banner-blue-2));
	border-radius: 8px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 18px;
	color: #FFFFFF;
}
.fd-hpromo-text {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 800;
	flex: 1 1 auto;
}
.fd-hpromo-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--fd-yellow);
	color: var(--fd-yellow-text);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}
.fd-hpromo-btn.fd-hpromo-btn-blue { background: var(--fd-blue); color: #FFFFFF; }
.fd-hpromo-btn:hover { opacity: 0.92; }
.fd-hpromo-art {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
}

/* ==========================================================================
   3. Main navigation wrapper only. Link, pill, chevron and hover rules
   come from the parent CSS above — do NOT redefine them here.
   ========================================================================== */
.fd-nav-wrap { background: #FFFFFF; border-bottom: 1px solid var(--fd-border); }
.fd-nav-wrap .main-navigation { background: transparent; }

/* ==========================================================================
   4. Hub / archive chrome — breadcrumb, H1 + blue bar, subtitle (spec §1.4)
   .fd-crumb itself is parent CSS; only the child-only separators and
   current-item styles are added here.
   ========================================================================== */
.fd-crumb .fd-crumb-sep { margin: 0 6px; color: #9AA3B2; }
.fd-crumb .fd-crumb-current { color: var(--fd-heading); font-weight: 600; }
.fd-crumb a:hover { color: var(--fd-blue); }

.fd-h1 {
	font-size: 30px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--fd-heading);
	border-left: 6px solid var(--fd-blue);
	border-radius: 3px;
	padding-left: 12px;
	margin: 0 0 8px;
}
.fd-subtitle {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fd-grey);
	margin: 0 0 24px;
	max-width: 720px;
}

/* Two-column hub/article layout: main ~2/3 + sidebar ~1/3 */
.fd-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.fd-main-col { min-width: 0; }

/* ==========================================================================
   5. Hero — big card + 2 stacked cards (spec §2.5 / §3.1)
   ========================================================================== */
.fd-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}
.fd-hero-big,
.fd-hero-small {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: var(--fd-navy);
	text-decoration: none;
}
.fd-hero-big { aspect-ratio: 16 / 9; }
.fd-hero-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.fd-hero-small { aspect-ratio: auto; min-height: 0; }
.fd-hero-big img,
.fd-hero-small img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fd-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 17, 48, 0) 40%, rgba(10, 17, 48, 0.82) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px;
	color: #FFFFFF;
}
.fd-hero-title {
	color: #FFFFFF;
	font-weight: 800;
	line-height: 1.3;
	margin: 0;
}
.fd-hero-big .fd-hero-title { font-size: 26px; }
.fd-hero-small .fd-hero-title { font-size: 16px; }
.fd-hero-excerpt {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	margin: 6px 0 0;
}
.fd-hero-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

/* Category badge on child-template images (NOT the parent .fd-badge). */
.fd-cbadge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--fd-blue);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	line-height: 1.4;
	max-width: calc(100% - 24px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fd-cbadge-red { background: var(--fd-red); }
.fd-cbadge-static { position: static; display: inline-block; margin-bottom: 12px; }

/* ==========================================================================
   6. Icon filter row + pill filter row (spec §3.1 / §3.3)
   ========================================================================== */
.fd-icon-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-bottom: 8px;
}
.fd-itile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #FFFFFF;
	border: 1px solid var(--fd-border);
	border-radius: 10px;
	padding: 14px 8px 12px;
	text-decoration: none;
	text-align: center;
	min-height: 84px;
}
.fd-itile .fd-ic { color: var(--fd-blue); width: 26px; height: 26px; }
.fd-itile-label {
	font-size: 12px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--fd-heading);
}
.fd-itile:hover { border-color: var(--fd-blue); }
.fd-itile-all { background: var(--fd-blue); border-color: var(--fd-blue); }
.fd-itile-all .fd-ic { color: #FFFFFF; }
.fd-itile-all .fd-itile-label { color: #FFFFFF; }
.fd-itile-more { cursor: default; }
.fd-itile-more:hover { border-color: var(--fd-border); }

.fd-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}
.fd-pill {
	display: inline-flex;
	align-items: center;
	background: #FFFFFF;
	border: 1px solid var(--fd-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fd-heading);
	text-decoration: none;
	line-height: 1.3;
}
.fd-pill:hover { border-color: var(--fd-blue); color: var(--fd-blue); }
.fd-pill-all { background: var(--fd-blue); border-color: var(--fd-blue); color: #FFFFFF; }
.fd-pill-all:hover { color: #FFFFFF; }

/* ==========================================================================
   7. Section headings with blue bar + View All (spec §4.1)
   ========================================================================== */
.fd-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 28px 0 16px;
}
.fd-section-head h2 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--fd-heading);
	margin: 0;
	border-left: 5px solid var(--fd-blue);
	border-radius: 3px;
	padding-left: 10px;
}
.fd-view-all {
	font-size: 13px;
	font-weight: 600;
	color: var(--fd-blue);
	text-decoration: none;
	white-space: nowrap;
}
.fd-view-all:hover { text-decoration: underline; }

/* ==========================================================================
   8. Post cards + grids (spec §4)
   ========================================================================== */
.fd-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.fd-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.fd-ccard {
	background: #FFFFFF;
	border: 1px solid var(--fd-border);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.fd-ccard-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fd-box); }
.fd-ccard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-ccard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.fd-ccard-title { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--fd-heading); margin: 0; }
.fd-ccard-title a { color: var(--fd-heading); text-decoration: none; }
.fd-ccard-title a:hover { color: var(--fd-blue); }
.fd-ccard-meta {
	font-size: 12px;
	color: var(--fd-grey);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: auto;
}
.fd-ccard-meta .fd-ic { width: 14px; height: 14px; }
.fd-ccard-meta .fd-meta-sep { color: #9AA3B2; }

/* Lower two-column area: guides list + category tiles */
.fd-lower {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.fd-hitem {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--fd-border);
}
.fd-hitem:first-of-type { padding-top: 0; }
.fd-hitem:last-child { border-bottom: 0; }
.fd-hitem-thumb { flex: none; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--fd-box); }
.fd-hitem-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-hitem-title { font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--fd-heading); margin: 0 0 4px; }
.fd-hitem-title a { color: var(--fd-heading); text-decoration: none; }
.fd-hitem-title a:hover { color: var(--fd-blue); }
.fd-hitem-meta { font-size: 12px; color: var(--fd-grey); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fd-hitem-meta .fd-ic { width: 13px; height: 13px; }

/* Category tiles — real 3×2 grid (spec §3.1) */
.fd-ctiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.fd-ctile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	background: #FFFFFF;
	border: 1px solid var(--fd-border);
	border-radius: 10px;
	padding: 16px 14px;
	text-decoration: none;
}
.fd-ctile .fd-ic { color: var(--fd-blue); width: 24px; height: 24px; }
.fd-ctile-label { font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--fd-heading); }
.fd-ctile-desc { font-size: 12px; line-height: 1.5; color: var(--fd-grey); }
.fd-ctile:hover { border-color: var(--fd-blue); }

/* ==========================================================================
   9. Sidebar — Trending, newsletter, purple promo, topics (spec §4.4–4.6)
   ========================================================================== */
.fd-sidebar { min-width: 0; }
.fd-sidebar > * { margin-bottom: 24px; }
.fd-cbox {
	background: var(--fd-box);
	border-radius: 12px;
	padding: 20px;
}
.fd-cbox-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.fd-cbox-head .fd-ic { color: var(--fd-blue); width: 20px; height: 20px; }
.fd-cbox-head h3 {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--fd-heading);
	margin: 0;
}
.fd-cbox-head .fd-ic-flame { color: #F97316; }

/* Trending numbered rows — 1–3 blue, 4–5 grey; dates, never view counts */
.fd-trend-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fd-border); }
.fd-trend-row:first-of-type { padding-top: 0; }
.fd-trend-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fd-trend-num {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fd-blue);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fd-trend-row:nth-child(n+4) .fd-trend-num { background: var(--fd-border); color: var(--fd-grey); }
.fd-trend-title { font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--fd-heading); margin: 0 0 3px; }
.fd-trend-title a { color: var(--fd-heading); text-decoration: none; }
.fd-trend-title a:hover { color: var(--fd-blue); }
.fd-trend-date { font-size: 12px; color: var(--fd-grey); }
.fd-trend-empty { font-size: 13px; color: var(--fd-grey); margin: 0; }

/* Newsletter box (static markup — no backend, see README) */
.fd-news-desc { font-size: 13px; line-height: 1.6; color: var(--fd-grey); margin: 0 0 14px; }
.fd-news-form { display: flex; flex-direction: column; gap: 10px; }
.fd-news-form input[type="email"] {
	width: 100%;
	background: #FFFFFF;
	border: 1px solid var(--fd-border);
	border-radius: 8px;
	padding: 11px 12px;
	font-size: 14px;
	color: var(--fd-heading);
}
.fd-news-form input[type="email"]:focus { border-color: var(--fd-blue); outline: none; }
.fd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--fd-blue);
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.fd-btn:hover { opacity: 0.92; color: #FFFFFF; }
.fd-btn-block { width: 100%; }
.fd-btn-white { background: #FFFFFF; color: var(--fd-heading); }
.fd-btn-white:hover { color: var(--fd-heading); }
.fd-btn-yellow { background: var(--fd-yellow); color: var(--fd-yellow-text); }
.fd-btn-yellow:hover { color: var(--fd-yellow-text); }

/* Purple promo box */
.fd-cpromo {
	background: linear-gradient(135deg, var(--fd-purple-1), var(--fd-purple-2));
	border-radius: 12px;
	padding: 22px 20px;
	color: #FFFFFF;
}
.fd-cpromo h3 {
	font-size: 20px;
	line-height: 1.35;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0 0 14px;
}
.fd-cpromo ul { list-style: none; margin: 0 0 18px; padding: 0; }
.fd-cpromo li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #FFFFFF;
	padding: 4px 0;
}
.fd-cpromo li .fd-ic { color: var(--fd-yellow); width: 16px; height: 16px; margin-top: 2px; }

/* Popular Topics / Tags pills */
.fd-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-topic {
	background: #FFFFFF;
	border: 1px solid var(--fd-border);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fd-heading);
	text-decoration: none;
}
.fd-topic:hover { border-color: var(--fd-blue); color: var(--fd-blue); }

/* ==========================================================================
   10. Explore strip (spec §3.1) — light blue, full width below main+sidebar
   ========================================================================== */
.fd-cexplore {
	background: var(--fd-strip);
	border-radius: 12px;
	padding: 28px;
	margin-top: 36px;
}
.fd-cexplore h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--fd-heading);
	margin: 0 0 20px;
	border-left: 5px solid var(--fd-blue);
	border-radius: 3px;
	padding-left: 10px;
}
.fd-cexplore-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
}
.fd-cexplore-col {
	text-decoration: none;
	padding: 0 4px;
}
.fd-cexplore-col .fd-ic { color: var(--fd-blue); width: 26px; height: 26px; margin-bottom: 8px; }
.fd-cexplore-label { font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--fd-heading); margin-bottom: 4px; }
.fd-cexplore-desc { font-size: 12px; line-height: 1.5; color: var(--fd-grey); }

/* ==========================================================================
   11. Pagination (spec §4 — real page count only, never hardcoded)
   ========================================================================== */
.fd-pagination { margin: 32px 0 8px; }
.fd-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--fd-border);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--fd-heading);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.fd-pagination .page-numbers.current { background: var(--fd-blue); border-color: var(--fd-blue); color: #FFFFFF; }
.fd-pagination a.page-numbers:hover { border-color: var(--fd-blue); color: var(--fd-blue); }
.fd-pagination .page-numbers.dots { border: 0; background: transparent; min-width: 0; }

/* ==========================================================================
   12. Empty state (Biography — 0 published posts, spec §3.6 / §6)
   ========================================================================== */
.fd-cempty {
	background: var(--fd-box);
	border: 1px dashed var(--fd-border);
	border-radius: 12px;
	padding: 32px 24px;
	text-align: center;
	color: var(--fd-grey);
	margin-bottom: 20px;
}
.fd-cempty h3 { font-size: 18px; color: var(--fd-heading); margin: 0 0 8px; }
.fd-cempty p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ==========================================================================
   13. Single article (spec §7)
   ========================================================================== */
.fd-article-h1 {
	font-size: 32px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--fd-heading);
	margin: 0 0 12px;
}
.fd-article-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--fd-grey);
	margin-bottom: 20px;
}
.fd-article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.fd-article-meta .fd-ic { width: 15px; height: 15px; }
.fd-featured {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
	aspect-ratio: 16 / 9;
	background: var(--fd-box);
}
.fd-featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-article-body { font-size: 17px; line-height: 1.8; color: var(--fd-body); }
.fd-article-body p { margin: 0 0 1.2em; }
.fd-article-body h2, .fd-article-body h3, .fd-article-body h4 {
	color: var(--fd-heading);
	font-weight: 700;
	line-height: 1.4;
	margin: 1.4em 0 0.6em;
}
.fd-article-body h2 { font-size: 24px; }
.fd-article-body h3 { font-size: 20px; }
.fd-article-body h4 { font-size: 18px; }
.fd-article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.fd-article-body a { color: var(--fd-blue); }

/* ==========================================================================
   14. .fd-full-bleed — INTENTIONALLY INERT (v2).
   The deals banner sits inside the 66% content column, so no 100vw
   margin math can make it full page width from there (v1's
   `width:100vw; margin-left:calc(50% - 50vw)` pulled it half a
   viewport left, off-screen, with a horizontal scrollbar). Do NOT
   re-add width/margin rules here. Move the banner block out of the
   66% column to a top-level full-width position instead — see README.
   ========================================================================== */
.fd-full-bleed {}

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 1020px) {
	.fd-layout { grid-template-columns: minmax(0, 1fr); }
	.fd-hero { grid-template-columns: minmax(0, 1fr); }
	.fd-hero-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.fd-hero-small { aspect-ratio: 16 / 9; }
	.fd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fd-lower { grid-template-columns: minmax(0, 1fr); }
	.fd-header-inner { flex-wrap: wrap; }
	.fd-hpromo { max-width: none; margin-left: 0; }
}
@media (max-width: 640px) {
	.fd-grid-3, .fd-grid-2 { grid-template-columns: minmax(0, 1fr); }
	.fd-ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fd-hero-stack { grid-template-columns: minmax(0, 1fr); }
	.fd-hero-big .fd-hero-title { font-size: 20px; }
	.fd-h1, .fd-article-h1 { font-size: 26px; }
	.fd-hpromo { flex-wrap: wrap; }
	.fd-hpromo-text { font-size: 15px; }
	.fd-hpromo-art { display: none; }
	.fd-tbar-inner { flex-wrap: wrap; gap: 4px; }
	.fd-cexplore { padding: 20px; }
}

/* v3 — mobile header at 360px: stack logo above the promo banner.
   Live at 360px the custom logo image (1024px-wide logo.webp, rendered
   at 56px height ≈ 323px wide) was wider than the 320px content box
   and, with .fd-logo { flex: none }, it could not shrink — "Fast Dail"
   with a horizontal scrollbar. The 1020px rule above already wraps the
   header row; this 600px rule stacks it, caps the logo, and makes the
   promo full-width with reduced padding. Scoped to the child's own
   header classes only; no overflow-x:hidden on body. */
@media (max-width: 600px) {
	.fd-header-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 16px; }
	.fd-logo { flex: 1 1 auto; min-width: 0; }
	.fd-logo img, .fd-site-header .site-logo img { max-width: 100%; height: auto; max-height: 44px; width: auto; }
	.fd-logo-wordmark { font-size: 26px; }
	.fd-hpromo { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; margin-left: 0; padding: 10px 12px; gap: 10px; }
	.fd-hpromo-text { min-width: 0; }
	.fd-hpromo-btn { padding: 8px 12px; }
	.fd-tbar-inner { flex-wrap: wrap; gap: 4px; }
}