/*
* FishUSA Content Hub — Spring Walleye Jigging Setup
* All classes prefixed with "content-hub-", scoped under .content-hub-page
* Upload to BigCommerce via Storefront > Script Manager or Theme Files
* Then in the page template
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Flex:opsz,wght@8..144,100..900&display=swap');
/* ── CSS Variables ── */
:root {
--fish-navy: 240.59 100% 20%;
--fish-navy-light: 240.59 60% 30%;
--fish-navy-dark: 240.59 100% 12%;
--fish-red: 0 100% 37.65%;
--fish-red-hover: 0 100% 32%;
--fish-red-glow: 0 100% 45%;
--fish-white: 0 0% 100%;
--fish-gray-50: 230 20% 97%;
--fish-gray-100: 230 15% 94%;
--fish-gray-200: 230 15% 88%;
--fish-gray-300: 230 12% 78%;
--fish-gray-500: 230 10% 50%;
--fish-gray-700: 230 15% 30%;
--border: 230 15% 88%;
--hub-callout-bg: 220 30% 97%;
--hub-surface: 220 14% 97%;
--hub-surface-alt: 220 14% 95%;
--primary: 240.59 100% 20%;
--primary-foreground: 0 0% 100%;
--card: 0 0% 100%;
--background: 0 0% 100%;
--foreground: 237 100% 20%;
--ring: 237 100% 20%;
--cta: 0 100% 38%;
--cta-foreground: 0 0% 100%;
--cta-hover: 0 100% 32%;
--fish-card-shadow: 0 1px 3px 0 hsl(237 100% 20% / 0.04), 0 2px 8px -2px hsl(237 100% 20% / 0.06);
--fish-card-shadow-hover: 0 8px 25px -5px hsl(237 100% 20% / 0.12), 0 4px 10px -3px hsl(237 100% 20% / 0.06);
}
/* ── Full-bleed breakout (escapes BC's .wrapper max-width) ──
scrollbar-gutter: stable ensures the scrollbar gutter is always reserved,
so 100vw and 50% of body agree — fixes the ~8px left-clip on Windows. */
html:has(.content-hub-page) {
scrollbar-gutter: stable;
}
/* Hide BC theme's native breadcrumbs on content hub pages */
body:has(.content-hub-page) .breadcrumbs {
display: none;
}
/* Hide BC blog title and meta on content hub pages */
body:has(.content-hub-page) .blog-title,
body:has(.content-hub-page) .blog-meta-container {
display: none;
}
/* Reset BC theme's ul padding on content hub pages */
body:has(.content-hub-page) ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
body:has(.content-hub-page) li {
padding: 0;
}
/* Reset inherited text-align from BC's .blog-header */
body:has(.content-hub-page) .blog-post-content {
text-align: left;
}
/* Override BC's .blog-single .blog-post-content ul rule */
body:has(.content-hub-page) .blog-post-content ul { margin-left: 0; }
/* BC theme resets — grouped by shared property */
h4.content-hub-callout-title,
h3.content-hub-merch-title,
h4.content-hub-label.content-hub-mb-1,
h4.content-hub-label.content-hub-mb-2,
h3.content-hub-label.content-hub-mb-2,
h3.content-hub-label.content-hub-mb-3,
h3.content-hub-card-title.content-hub-phase-title,
h3.content-hub-card-title.content-hub-card-title-inline,
h3.content-hub-card-title.content-hub-mb-3,
h3.content-hub-checklist-title { padding-top: 0 !important; }
ul.content-hub-space-y-1, ul.content-hub-space-y-2 { margin-bottom: 0 !important; }
h4.content-hub-callout-title { margin-bottom: 0.25rem !important; }
h3.content-hub-merch-title,
h3.content-hub-card-title.content-hub-card-title-inline { margin-bottom: 0 !important; }
p.content-hub-merch-subtitle { margin-bottom: 0 !important; }
h4.content-hub-label.content-hub-mb-1 { margin-bottom: 0.25rem !important; }
p.content-hub-card-text.content-hub-text-xs { margin-bottom: 0; }
h3.content-hub-label.content-hub-mb-3 { margin-bottom: 0.75rem !important; }
h3.content-hub-card-title.content-hub-phase-title { margin-bottom: 1rem !important; }
h4.content-hub-label.content-hub-mb-2,
h3.content-hub-label.content-hub-mb-2 { margin-bottom: 0.5rem !important; }
h3.content-hub-checklist-title { margin-bottom: 0.125rem !important; }
h3.content-hub-card-title.content-hub-mb-3 { margin-bottom: 0.75rem !important; }
.content-hub-page .content-hub-section-title { padding-top: 0 !important; margin-bottom: 0.5rem !important; }
ul.content-hub-space-y-1.content-hub-callout-text { margin-bottom: 0; }
/* Override BC's .blog-single .blog-post-content a rule */
body:has(.content-hub-page) .blog-post-content a { color: inherit; text-decoration: none; }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-primary { color: hsl(var(--fish-white)); }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-outline-white { color: hsl(var(--fish-white)); }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-outline-white:hover { color: hsl(var(--fish-navy)); }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-secondary { color: hsl(var(--fish-navy)); }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-secondary:hover { color: hsl(var(--fish-white)); }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-hub-primary { color: hsl(var(--cta-foreground)); }
body:has(.content-hub-page) .blog-post-content .content-hub-btn-tertiary { color: hsl(var(--fish-navy)); text-decoration: underline; }
/* ── Reset ── */
.content-hub-page *, .content-hub-page *::before, .content-hub-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.content-hub-page {
font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 1rem;
line-height: 1.6;
color: hsl(var(--foreground));
background: hsl(var(--background));
width: 100vw;
margin-left: calc(50% - 50vw);
overflow-x: clip;
}
.content-hub-page a { text-decoration: none; color: inherit; }
.content-hub-page ul { list-style: none; }
.content-hub-page button { cursor: pointer; font-family: inherit; }
.content-hub-page img { max-width: 100%; display: block; }
.content-hub-page table { border-collapse: collapse; }
.content-hub-page ::selection { background: hsl(var(--fish-red) / 0.15); color: hsl(var(--fish-navy)); }
.content-hub-page h1, .content-hub-page h2, .content-hub-page h3, .content-hub-page h4, .content-hub-page h5, .content-hub-page h6 { font-weight: 800; letter-spacing: -0.03em; color: hsl(var(--fish-navy)); line-height: 1.15; }
.content-hub-page h1 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; }
.content-hub-page h2 { font-weight: 700; }
.content-hub-page h3 { font-size: 1rem; }
.content-hub-page p, .content-hub-page li, .content-hub-page a,
.content-hub-page span, .content-hub-page button, .content-hub-page label,
.content-hub-page td, .content-hub-page th, .content-hub-page input,
.content-hub-page select, .content-hub-page textarea {
font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif;
}
/* ── Layout ── */
.content-hub-page .content-hub-container { max-width: 72rem; margin: 0 auto; padding: 0; }
.content-hub-page .content-hub-section { padding: 4rem 1rem; position: relative; }
.content-hub-page .content-hub-section-alt { padding: 4rem 1rem; position: relative; background: linear-gradient(180deg, hsl(var(--fish-gray-50)) 0%, hsl(var(--fish-gray-100) / 0.5) 100%); }
@media (min-width: 640px) { .content-hub-page .content-hub-section, .content-hub-page .content-hub-section-alt { padding: 4rem 1.5rem; } }
@media (min-width: 768px) { .content-hub-page .content-hub-section, .content-hub-page .content-hub-section-alt { padding: 6rem 1.5rem; } }
.content-hub-page .content-hub-section-title {
font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: capitalize;
letter-spacing: -0.03em; color: hsl(var(--fish-navy)); position: relative; display: inline-block;
}
@media (min-width: 768px) { .content-hub-page .content-hub-section-title { font-size: 1.875rem; } }
.content-hub-page .content-hub-section-title + ul,
.content-hub-page .content-hub-section-title + ol { margin-top: 1.25rem; }
.content-hub-page .content-hub-container > ol { list-style: decimal; padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.content-hub-page .content-hub-container > ol li { font-size: 1rem; line-height: 1.7; color: hsl(var(--fish-gray-700)); padding-left: 0.25rem; }
.content-hub-page .content-hub-container > ol li strong { color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-container > ol li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; }
.content-hub-page .content-hub-container > ol li a:hover { color: hsl(var(--fish-red)); }
.content-hub-page .content-hub-section-title::after {
content: ''; position: absolute; bottom: -4px; left: 0; height: 4px; width: 48px;
border-radius: 9999px; background: hsl(var(--fish-red));
}
.content-hub-page .content-hub-section-intro { font-size: 1rem; margin-bottom: 3rem; max-width: 42rem; padding-top: 0.75rem; color: hsl(var(--fish-gray-500)); line-height: 1.75; }
/* ── Cards ── */
.content-hub-page .content-hub-card {
border-radius: 0.5rem; padding: 1.5rem; position: relative; overflow: hidden;
background: hsl(var(--card)); box-shadow: var(--fish-card-shadow);
border: 1px solid hsl(var(--fish-gray-200)); transition: all 0.2s;
}
.content-hub-page .content-hub-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0;
background: linear-gradient(90deg, hsl(var(--fish-navy)), hsl(var(--fish-red))); transition: opacity 0.2s;
}
.content-hub-page .content-hub-card:hover { box-shadow: var(--fish-card-shadow-hover); border-color: hsl(var(--fish-gray-300)); transform: translateY(-2px); }
.content-hub-page .content-hub-card:hover::before { opacity: 1; }
/* Shared title/heading size — 1rem 700 navy */
.content-hub-page .content-hub-card-title,
.content-hub-page .content-hub-merch-title,
.content-hub-page .content-hub-card-title-inline,
.content-hub-page .content-hub-phase-title,
.content-hub-page .content-hub-checklist-title { font-size: 1rem; font-weight: 700; color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-card-title { margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: -0.03em; }
.content-hub-page .content-hub-card-text { font-size: 0.875rem; line-height: 1.625; color: hsl(240, 100%, 15.69%); }
/* ── Buttons ── */
/* Shared base */
.content-hub-page .content-hub-btn-primary,
.content-hub-page .content-hub-btn-secondary,
.content-hub-page .content-hub-btn-outline-white {
display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem;
border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase;
letter-spacing: 0.05em; transition: all 0.2s;
}
.content-hub-page .content-hub-btn-primary {
border: none; position: relative; overflow: hidden;
background: linear-gradient(135deg, hsl(var(--fish-red)) 0%, hsl(var(--fish-red-hover)) 100%);
color: hsl(var(--fish-white)); box-shadow: 0 2px 8px -2px hsl(var(--fish-red) / 0.4);
}
.content-hub-page .content-hub-btn-primary:hover { box-shadow: 0 4px 16px -3px hsl(var(--fish-red) / 0.5); transform: translateY(-1px); }
.content-hub-page .content-hub-btn-secondary {
border: 2px solid hsl(var(--fish-navy)); color: hsl(var(--fish-navy)); background: transparent;
}
.content-hub-page .content-hub-btn-secondary:hover { background: hsl(var(--fish-navy)); color: hsl(var(--fish-white)); transform: translateY(-1px); }
.content-hub-page .content-hub-btn-outline-white {
border: 2px solid hsl(var(--fish-white) / 0.5); color: hsl(var(--fish-white)); background: transparent;
}
.content-hub-page .content-hub-btn-outline-white:hover { background: hsl(var(--fish-white)); color: hsl(var(--fish-navy)); border-color: hsl(var(--fish-white)); }
.content-hub-page .content-hub-btn-tertiary {
display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem;
border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; color: hsl(var(--fish-navy));
text-decoration: underline; text-underline-offset: 3px; background: none; border: none; transition: color 0.15s;
}
.content-hub-page .content-hub-btn-tertiary:hover { color: hsl(var(--fish-red)); }
.content-hub-page .content-hub-btn-hub-primary {
display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem;
border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; background: hsl(var(--cta)); color: hsl(var(--cta-foreground));
border: none; transition: background 0.15s;
}
.content-hub-page .content-hub-btn-hub-primary:hover { background: hsl(var(--cta-hover)); }
.content-hub-page .content-hub-btn-sm { font-size: 0.8125rem; }
.content-hub-page .content-hub-btn-full { width: 100%; text-align: center; margin-top: auto; }
/* ── Tags / Chips / Pills ── */
.content-hub-page .content-hub-tag {
display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 0.25rem 0.625rem; border-radius: 0.375rem;
background: hsl(var(--fish-red) / 0.08); color: hsl(var(--fish-red));
border: 1px solid hsl(var(--fish-red) / 0.15);
}
.content-hub-page .content-hub-tag-sm { font-size: 0.5625rem; }
.content-hub-page .content-hub-chip {
display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.375rem;
font-size: 0.875rem; font-weight: 500; border: 1px solid hsl(var(--fish-gray-200));
color: hsl(var(--fish-navy)); background: hsl(var(--fish-white)); transition: all 0.15s;
}
.content-hub-page .content-hub-chip:hover { background: hsl(var(--fish-navy)); color: hsl(var(--fish-white)); border-color: hsl(var(--fish-navy)); transform: translateY(-1px); }
.content-hub-page .content-hub-pill {
display: inline-block; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;
font-weight: 500; border: 1px solid hsl(var(--border)); background: hsl(var(--hub-surface));
color: hsl(var(--foreground)); transition: all 0.15s; cursor: pointer;
}
.content-hub-page .content-hub-pill:hover { background: hsl(var(--fish-red)); border-color: hsl(var(--fish-red)); color: white; }
.content-hub-page .content-hub-pill.content-hub-active { background: hsl(var(--fish-navy)); border-color: hsl(var(--fish-navy)); color: white; }
.content-hub-page .content-hub-bundle-item-price { font-size: 0.625rem; font-weight: 600; color: hsl(var(--fish-navy)); margin-left: 4px; }
.content-hub-page .content-hub-variant-pill {
display: inline-block; font-size: 0.625rem; font-weight: 500; padding: 0.125rem 0.5rem;
border-radius: 9999px; white-space: nowrap; background: hsl(var(--fish-gray-100));
border: 1px solid hsl(var(--fish-gray-200)); color: hsl(var(--fish-gray-500)); line-height: 1.4;
}
.content-hub-page .content-hub-label { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); }
/* ── Grids ── */
.content-hub-page .content-hub-grid-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.content-hub-page .content-hub-grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.content-hub-page .content-hub-grid-4 { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .content-hub-page .content-hub-grid-3 { grid-template-columns: repeat(2,1fr); } .content-hub-page .content-hub-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .content-hub-page .content-hub-grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .content-hub-page .content-hub-grid-3 { grid-template-columns: repeat(3,1fr); } .content-hub-page .content-hub-grid-4 { grid-template-columns: repeat(4,1fr); } }
/* ── Dot (bullet) ── */
.content-hub-page .content-hub-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--fish-red)); flex-shrink: 0; margin-top: 6px; }
.content-hub-page .content-hub-dot-sm { width: 4px; height: 4px; margin-top: 7px; }
.content-hub-page .content-hub-dot-inline { margin-top: 0; }
/* ── List items ── */
.content-hub-page .content-hub-list-item,
.content-hub-page .content-hub-list-item-xs { font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.5rem; color: hsl(var(--fish-navy)); }
/* ── Sticky Nav ── */
.content-hub-page .content-hub-sticky-nav {
position: sticky; top: 0; z-index: 50; background: white; border-bottom: 1px solid hsl(var(--fish-gray-200));
box-shadow: 0 1px 3px hsl(0 0% 0% / 0.05);
}
.content-hub-page .content-hub-sticky-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; }
@media (min-width: 640px) { .content-hub-page .content-hub-sticky-nav-inner { padding: 0.625rem 1.5rem; } }
.content-hub-page .content-hub-nav-brand { display: flex; align-items: center; gap: 0.75rem; }
.content-hub-page .content-hub-nav-brand-logo { height: 2.25rem; }
@media (min-width: 640px) { .content-hub-page .content-hub-nav-brand-logo { height: 2.5rem; } }
.content-hub-page .content-hub-nav-brand-divider { display: none; color: hsl(var(--fish-gray-300)); font-weight: 300; }
@media (min-width: 640px) { .content-hub-page .content-hub-nav-brand-divider { display: inline; } }
.content-hub-page .content-hub-nav-brand-title { display: none; font-weight: 600; font-size: 0.875rem; color: hsl(var(--fish-navy)); }
@media (min-width: 640px) { .content-hub-page .content-hub-nav-brand-title { display: inline; } }
.content-hub-page .content-hub-nav-links { display: none; align-items: center; gap: 0.125rem; }
@media (min-width: 1024px) { .content-hub-page .content-hub-nav-links { display: flex; } }
.content-hub-page .content-hub-nav-link { padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--fish-gray-500)); transition: all 0.15s; }
.content-hub-page .content-hub-nav-link:hover { color: hsl(237,100%,20%); background: hsl(230,20%,97%); }
.content-hub-page .content-hub-mobile-toggle { display: block; padding: 0.5rem; border-radius: 0.375rem; background: none; border: none; color: hsl(var(--fish-navy)); }
@media (min-width: 1024px) { .content-hub-page .content-hub-mobile-toggle { display: none; } }
.content-hub-page .content-hub-mobile-menu { display: none; border-top: 1px solid hsl(var(--fish-gray-200)); padding: 0.5rem 1rem 1rem; background: white; }
.content-hub-page .content-hub-mobile-menu.content-hub-open { display: block; }
@media (min-width: 1024px) { .content-hub-page .content-hub-mobile-menu { display: none !important; } }
.content-hub-page .content-hub-mobile-menu a { display: block; padding: 0.625rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--fish-gray-500)); }
.content-hub-page .content-hub-mobile-menu a:hover { background: hsl(var(--fish-gray-50)); }
/* ── Gradient bar ── */
.content-hub-page .content-hub-gradient-bar { height: 4px; background: linear-gradient(90deg, hsl(var(--fish-navy)), hsl(var(--fish-red)), hsl(var(--fish-navy))); }
/* ── Hero ── */
.content-hub-page .content-hub-hero {
position: relative; overflow: hidden; padding: 2.5rem 1rem;
background: linear-gradient(135deg, hsl(237,100%,12%) 0%, hsl(237,100%,20%) 50%, hsl(237,60%,30%) 100%);
}
@media (min-width: 768px) { .content-hub-page .content-hub-hero { padding: 3.5rem 1.5rem; } }
.content-hub-page .content-hub-hero-dot-overlay {
position: absolute; inset: 0; opacity: 0.035;
background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
background-size: 28px 28px;
}
.content-hub-page .content-hub-hero-red-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: hsl(var(--fish-red)); }
/* ── Hero content classes ── */
.content-hub-page .content-hub-hero-breadcrumb { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem !important; color: hsl(0 0% 100% / 0.7); }
.content-hub-page .content-hub-hero-breadcrumb a { color: inherit; }
.content-hub-page .content-hub-hero-breadcrumb-sep { margin: 0 0.375rem; }
.content-hub-page .content-hub-hero-breadcrumb-current { color: hsl(0 0% 100% / 0.9); }
.content-hub-page .content-hub-hero-eyebrow-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.content-hub-page .content-hub-hero-accent-line { height: 1px; width: 2.5rem; background: hsl(var(--fish-red)); }
.content-hub-page .content-hub-hero-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--fish-red-glow)); }
.content-hub-page .content-hub-hero-h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: white; text-transform: capitalize; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .content-hub-page .content-hub-hero-h1 { font-size: 1.875rem; } }
@media (min-width: 768px) { .content-hub-page .content-hub-hero-h1 { font-size: 2.25rem; } }
.content-hub-page .content-hub-hero-h1-sub { font-size: 0.72em; opacity: 0.82; font-weight: 600; text-transform: none; }
.content-hub-page .content-hub-hero .content-hub-container { position: relative; z-index: 10; }
.content-hub-page .content-hub-text-link { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; }
.content-hub-page .content-hub-hero-desc { font-size: 1rem; line-height: 1.625; color: hsl(0 0% 100% / 0.92); margin-bottom: 0.5rem !important; max-width: 32rem; }
@media (min-width: 768px) { .content-hub-page .content-hub-hero-desc { font-size: 1rem; } }
.content-hub-page .content-hub-hero-meta { font-size: 0.9375rem; color: hsl(0 0% 80% / 0.85); font-weight: 500; margin-bottom: 1.5rem !important; }
.content-hub-page .content-hub-hero-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.25rem; }
.content-hub-page .content-hub-hero-nav-list { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; padding: 0; margin: 0 0 0.5rem; }
.content-hub-page .content-hub-hero-nav-list li { list-style: none; padding: 0; margin: 0; }
.content-hub-page .content-hub-hero-updated { font-size: 0.875rem; color: hsl(0 0% 100% / 0.75); font-style: italic; line-height: 1.625; margin-top: 0.5rem; }
/* ── Quick nav pills in hero ── */
.content-hub-page .content-hub-hero-pill {
display: inline-block; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.6875rem;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
border: 1px solid hsl(0 0% 100% / 0.2); color: white !important; transition: all 0.15s;
}
.content-hub-page .content-hub-hero-pill:hover { background: hsl(var(--fish-red)); border-color: hsl(var(--fish-red)); color: white !important; }
/* ── Step card ── */
.content-hub-page .content-hub-step-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.content-hub-page .content-hub-card-title-inline { margin-bottom: 0; }
/* ── Kit card ── */
.content-hub-page .content-hub-kit-card { display: flex; flex-direction: column; }
.content-hub-page .content-hub-kit-card.content-hub-selected { border-color: hsl(var(--fish-navy)); box-shadow: 0 0 0 2px hsl(var(--fish-navy) / 0.2); }
.content-hub-page .content-hub-kit-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.content-hub-page .content-hub-kit-desc { font-size: 0.875rem; line-height: 1.625; color: hsl(var(--fish-gray-700)); margin-bottom: 0.75rem; }
.content-hub-page .content-hub-kit-desc strong { color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-kit-list { flex: 1; }
/* ── Accordion ── */
.content-hub-page .content-hub-accordion-panel { border: 1px solid hsl(var(--border)); border-radius: 0.375rem; margin-bottom: 0.5rem; }
.content-hub-page .content-hub-accordion-summary {
display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; cursor: pointer;
font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); background: hsl(var(--hub-surface));
list-style: none; user-select: none; border-radius: 0.375rem;
}
.content-hub-page .content-hub-accordion-summary::-webkit-details-marker { display: none; }
.content-hub-page .content-hub-accordion-summary:hover { background: hsl(var(--hub-surface-alt)); }
.content-hub-page .content-hub-accordion-chevron { flex-shrink: 0; transition: transform 0.15s; color: hsl(var(--fish-gray-500)); }
.content-hub-page details[open] > .content-hub-accordion-summary .content-hub-accordion-chevron { transform: rotate(180deg); }
.content-hub-page .content-hub-accordion-badge { font-size: 0.8125rem; font-weight: 500; padding: 0.125rem 0.375rem; border-radius: 0.375rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.content-hub-page .content-hub-accordion-body { padding: 0.5rem 0.75rem 0.75rem; }
.content-hub-page .content-hub-accordion-label { flex: 1; }
/* ── Tabs ── */
.content-hub-page .content-hub-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 1rem; }
.content-hub-page .content-hub-tab-btn {
padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: hsl(var(--fish-gray-500)); background: none; border: none;
border-bottom: 2px solid transparent; transition: color 0.15s; cursor: pointer;
}
.content-hub-page .content-hub-tab-btn.content-hub-active { color: hsl(var(--fish-navy)); border-bottom-color: hsl(var(--fish-red)); }
/* ── Merch module ── */
.content-hub-page .content-hub-merch-module { border: 1px solid hsl(var(--border)); border-radius: 0.375rem; padding: 1rem; margin-top: 1.5rem; background: hsl(var(--card)); }
.content-hub-page .content-hub-merch-header { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid hsl(var(--border)); }
@media (min-width: 768px) { .content-hub-page .content-hub-merch-header { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.content-hub-page .content-hub-merch-title { margin-top: 0; }
.content-hub-page .content-hub-merch-subtitle { font-size: 0.875rem; margin-top: 0.25rem; color: hsl(var(--fish-gray-500)); }
.content-hub-page .content-hub-merch-item {
display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; border-radius: 0.375rem;
border: 1px solid hsl(var(--border)); background: hsl(var(--background)); transition: all 0.1s; margin-bottom: 0.375rem;
}
@media (min-width: 640px) { .content-hub-page .content-hub-merch-item { flex-direction: row; align-items: center; justify-content: space-between; } }
.content-hub-page .content-hub-merch-item.content-hub-active { border-color: hsl(var(--primary)); background: hsl(var(--hub-callout-bg)); }
.content-hub-page .content-hub-merch-item-info { display: flex; align-items: flex-start; gap: 0.5rem; }
.content-hub-page .content-hub-merch-item-name { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); }
.content-hub-page .content-hub-merch-item-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.125rem; flex-wrap: wrap; }
.content-hub-page .content-hub-merch-item-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.content-hub-page .content-hub-merch-qty-label { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.content-hub-page .content-hub-merch-qty-text { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--fish-gray-500)); font-weight: 600; }
.content-hub-page .content-hub-merch-qty-input {
width: 3rem; height: 1.75rem; text-align: center; font-size: 0.875rem; border-radius: 0.375rem;
border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
}
.content-hub-page .content-hub-merch-btn-sm {
font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 0.625rem; border-radius: 0.375rem;
border: 1px solid hsl(var(--primary)); color: hsl(var(--primary)); background: transparent; transition: all 0.1s; cursor: pointer;
}
.content-hub-page .content-hub-merch-btn-sm:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.content-hub-page .content-hub-merch-btn-link {
font-size: 0.8125rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: underline;
text-underline-offset: 2px; background: none; border: none; cursor: pointer; padding: 0.375rem 0.625rem;
}
.content-hub-page .content-hub-merch-btn-link:hover { color: hsl(var(--fish-red)); }
.content-hub-page .content-hub-merch-footer { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 768px) { .content-hub-page .content-hub-merch-footer { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.content-hub-page .content-hub-merch-footer-summary { font-size: 0.875rem; color: hsl(var(--foreground)); }
.content-hub-page .content-hub-merch-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* ── Checkbox ── */
.content-hub-page .content-hub-checkbox {
width: 16px; height: 16px; border-radius: 2px; border: 1px solid hsl(var(--fish-gray-300));
display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
background: transparent; transition: all 0.1s; margin-top: 2px;
}
.content-hub-page .content-hub-checkbox.content-hub-checked { background: hsl(var(--fish-navy)); border-color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-checkbox svg { display: none; }
.content-hub-page .content-hub-checkbox.content-hub-checked svg { display: block; }
/* ── Callout ── */
/* Shared callout font-size */
.content-hub-page .content-hub-callout,
.content-hub-page .content-hub-callout-title,
.content-hub-page .content-hub-callout-text { font-size: 0.875rem; }
.content-hub-page .content-hub-callout { border-radius: 0.375rem; padding: 0.75rem; background: hsl(var(--hub-callout-bg)); border: 1px solid hsl(var(--border)); }
.content-hub-page .content-hub-callout-title { font-weight: 700; margin-bottom: 0.25rem; color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-callout-text { color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-callout-text strong { color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-callout-left-accent { border-left: 3px solid hsl(var(--fish-navy)); }
.content-hub-page .content-hub-callout-left-red { border-left: 3px solid hsl(var(--fish-red)); }
/* ── Sticky bottom bar ── */
.content-hub-page .content-hub-sticky-bottom {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
background: white; border-top: 1px solid hsl(var(--fish-gray-200));
box-shadow: 0 -4px 16px hsl(var(--fish-navy) / 0.08);
}
.content-hub-page .content-hub-sticky-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; gap: 1rem; }
@media (min-width: 640px) { .content-hub-page .content-hub-sticky-bottom-inner { padding: 0.75rem 1.5rem; } }
.content-hub-page .content-hub-sticky-kit-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-sticky-kit-value { font-weight: 400; color: hsl(var(--fish-gray-500)); }
.content-hub-page .content-hub-sticky-bar-info { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; min-width: 0; }
/* ── Rigging diagram ── */
.content-hub-page .content-hub-rig-diagram {
display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap;
padding: 1rem; border-radius: 0.375rem; font-family: monospace; font-size: 0.8125rem;
background: hsl(var(--fish-gray-50)); border: 1px solid hsl(var(--fish-gray-200)); color: hsl(var(--fish-navy));
margin-bottom: 1rem; text-align: center;
}
.content-hub-page .content-hub-rig-node { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
.content-hub-page .content-hub-rig-node-navy { background: hsl(var(--fish-navy)); color: white; }
.content-hub-page .content-hub-rig-node-red { background: hsl(var(--fish-red)); color: white; }
.content-hub-page .content-hub-rig-node-outline { border: 1px solid hsl(var(--fish-gray-300)); }
.content-hub-page .content-hub-rig-arrow { padding: 0 0.25rem; }
/* ── Product card (parts list) ── */
.content-hub-page .content-hub-product-card { padding: 1rem; display: flex; flex-direction: column; }
.content-hub-page .content-hub-product-img { border-radius: 0.375rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; background: white; }
.content-hub-page .content-hub-product-img img { width: 100%; height: 100%; object-fit: contain; }
.content-hub-page .content-hub-product-img-placeholder { border-radius: 0.375rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; height: 120px; background: hsl(var(--fish-gray-100)); }
.content-hub-page .content-hub-product-img-placeholder span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: hsl(var(--fish-gray-300)); }
.content-hub-page .content-hub-product-name { font-size: 0.8125rem; font-weight: 700; color: hsl(var(--fish-navy)); margin-bottom: 0.25rem; }
.content-hub-page .content-hub-product-price { font-size: 0.6875rem; color: hsl(var(--fish-gray-500)); margin: 0.25rem 0; }
.content-hub-page .content-hub-product-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.75rem; }
/* ── Number circle ── */
.content-hub-page .content-hub-num-circle {
display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
border-radius: 50%; font-size: 0.8125rem; font-weight: 900; flex-shrink: 0;
background: hsl(var(--fish-navy)); color: hsl(var(--fish-white));
}
.content-hub-page .content-hub-num-circle-sm { width: 1.75rem; height: 1.75rem; }
/* ── Parts recommended ── */
.content-hub-page .content-hub-parts-rec { font-size: 0.875rem; font-style: italic; margin-bottom: 0.75rem; color: hsl(var(--fish-gray-500)); }
.content-hub-page .content-hub-parts-rec strong { font-style: normal; font-weight: 700; color: hsl(var(--fish-navy)); }
/* ── Category subheading ── */
.content-hub-page .content-hub-category-heading { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); margin-bottom: 0.75rem; }
/* ── Profile sidebar ── */
.content-hub-page .content-hub-profile-sidebar { width: 100%; flex-shrink: 0; }
@media (min-width: 1024px) { .content-hub-page .content-hub-profile-sidebar { width: 16rem; } }
.content-hub-page .content-hub-profile-rules { border-radius: 0.375rem; padding: 1rem; background: hsl(var(--hub-callout-bg)); border: 1px solid hsl(var(--border)); }
/* ── Tag chips (jig head filters) ── */
.content-hub-page .content-hub-filter-tag {
font-size: 0.5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
padding: 0.125rem 0.375rem; border-radius: 0.375rem; background: hsl(var(--fish-gray-100)); color: hsl(var(--fish-gray-500));
}
/* ── Kit tag labels in bundle builder ── */
.content-hub-page .content-hub-kit-tag { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.content-hub-page .content-hub-kit-tag--budget { color: hsl(var(--fish-gray-500)); }
.content-hub-page .content-hub-kit-tag--core { color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-kit-tag--premium { color: hsl(var(--fish-red)); }
.content-hub-page .content-hub-kit-tag-sm { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.0625rem 0.25rem; border-radius: 0.25rem; background: hsl(var(--hub-surface)); }
/* ── Bundle Builder Rows (matches React merch-item layout) ── */
.content-hub-page .content-hub-bundle-row {
display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; border-radius: 0.375rem;
border: 1px solid hsl(var(--border)); background: hsl(var(--background)); transition: all 0.1s; margin-bottom: 0.375rem;
}
@media (min-width: 640px) { .content-hub-page .content-hub-bundle-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.content-hub-page .content-hub-bundle-row.content-hub-active { border-color: hsl(var(--primary)); background: hsl(var(--hub-callout-bg)); }
.content-hub-page .content-hub-bundle-main { display: flex; align-items: flex-start; gap: 0.5rem; flex: 1; min-width: 0; }
.content-hub-page .content-hub-bundle-cb-btn {
width: 16px; height: 16px; border-radius: 2px; border: 1px solid hsl(var(--fish-gray-300));
display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
background: transparent; transition: all 0.1s; margin-top: 2px; padding: 0;
}
.content-hub-page .content-hub-bundle-cb-btn.content-hub-checked { background: hsl(var(--fish-navy)); border-color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-bundle-cb-btn svg { display: none; }
.content-hub-page .content-hub-bundle-cb-btn.content-hub-checked svg { display: block; }
.content-hub-page .content-hub-bundle-product-name {
font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground));
text-decoration: none; cursor: pointer;
}
.content-hub-page .content-hub-bundle-product-name:hover { text-decoration: underline; }
.content-hub-page .content-hub-bundle-item-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.125rem; flex-wrap: wrap; }
.content-hub-page .content-hub-bundle-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.content-hub-page .content-hub-bundle-qty-label { display: flex; align-items: center; gap: 0.25rem; }
.content-hub-page .content-hub-bundle-qty-text { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--fish-gray-500)); font-weight: 600; }
.content-hub-page .content-hub-bundle-qty-input {
width: 3rem; height: 1.75rem; text-align: center; font-size: 0.875rem; border-radius: 0.375rem;
border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
}
.content-hub-page .content-hub-btn-xs { font-size: 0.875rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.content-hub-page .content-hub-kit-tag--optional { color: hsl(var(--fish-gray-500)); }
/* ── Table ── */
.content-hub-page .content-hub-data-table { width: 100%; font-size: 0.875rem; color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-data-table th {
text-align: left; padding: 0.75rem; font-weight: 700; font-size: 0.875rem;
text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy));
}
.content-hub-page .content-hub-data-table th.content-hub-muted { color: hsl(var(--fish-gray-500)); }
.content-hub-page .content-hub-data-table thead tr { border-bottom: 2px solid hsl(var(--fish-gray-200)); }
.content-hub-page .content-hub-data-table tbody tr { border-bottom: 1px solid hsl(var(--fish-gray-200)); }
.content-hub-page .content-hub-data-table tbody tr:last-child { border-bottom: none; }
.content-hub-page .content-hub-data-table td { padding: 0.75rem; }
.content-hub-page .content-hub-data-table td.content-hub-muted { font-size: 0.875rem; color: hsl(var(--fish-gray-500)); }
/* ── Phase card content ── */
.content-hub-page .content-hub-phase-title { margin-bottom: 1rem; }
.content-hub-page .content-hub-phase-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .content-hub-page .content-hub-phase-grid { grid-template-columns: repeat(3,1fr); } }
/* ── Troubleshoot checklist item ── */
.content-hub-page .content-hub-checklist-item { display: flex; align-items: flex-start; gap: 1rem; }
.content-hub-page .content-hub-checklist-title { margin-bottom: 0.125rem; }
/* ── Read next link ── */
.content-hub-page .content-hub-read-next-link {
display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0;
font-size: 1rem; font-weight: 500; color: hsl(var(--fish-navy)); transition: color 0.15s;
}
.content-hub-page .content-hub-read-next-link:hover { color: hsl(var(--fish-red)); text-decoration: underline; text-underline-offset: 3px; }
.content-hub-page .content-hub-read-next-item { border-bottom: 1px solid hsl(var(--fish-gray-200)); }
.content-hub-page .content-hub-read-next-item:last-child { border-bottom: none; }
.content-hub-page .read-next-icon { color: hsl(var(--fish-red)); flex-shrink: 0; }
/* ── FAQ ── */
.content-hub-page .content-hub-faq-item-border { border-bottom: 1px solid hsl(var(--fish-gray-200)); }
.content-hub-page .content-hub-faq-item-border:last-child { border-bottom: none; }
.content-hub-page .content-hub-faq-question-btn {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 1rem 0; text-align: left; font-size: 1rem; font-weight: 700;
color: hsl(var(--fish-navy)); background: none; border: none; cursor: pointer;
}
.content-hub-page .content-hub-faq-chevron { flex-shrink: 0; margin-left: 1rem; transition: transform 0.2s; }
.content-hub-page .content-hub-faq-answer { display: none; padding-bottom: 1rem; font-size: 0.875rem; line-height: 1.625; color: hsl(var(--fish-gray-500)); }
/* ── Utilities ── */
.content-hub-page .content-hub-flex { display: flex; }
.content-hub-page .content-hub-flex-col { flex-direction: column; }
.content-hub-page .content-hub-flex-wrap { flex-wrap: wrap; }
.content-hub-page .content-hub-items-center { align-items: center; }
.content-hub-page .content-hub-items-start { align-items: flex-start; }
.content-hub-page .content-hub-justify-between { justify-content: space-between; }
.content-hub-page .content-hub-justify-center { justify-content: center; }
.content-hub-page .content-hub-gap-1 { gap: 0.25rem; }
.content-hub-page .content-hub-gap-2 { gap: 0.5rem; }
.content-hub-page .content-hub-gap-3 { gap: 0.75rem; }
.content-hub-page .content-hub-gap-4 { gap: 1rem; }
.content-hub-page .content-hub-gap-5 { gap: 1.25rem; }
.content-hub-page .content-hub-mb-1 { margin-bottom: 0.25rem; }
.content-hub-page .content-hub-mb-2 { margin-bottom: 0.5rem; }
.content-hub-page .content-hub-mb-3 { margin-bottom: 0.75rem; }
.content-hub-page .content-hub-mb-4 { margin-bottom: 1rem; }
.content-hub-page .content-hub-mb-5 { margin-bottom: 1.25rem; }
.content-hub-page .content-hub-mb-6 { margin-bottom: 1.5rem; }
.content-hub-page .content-hub-mb-8 { margin-bottom: 2rem; }
.content-hub-page .content-hub-mb-10 { margin-bottom: 2.5rem; }
.content-hub-page .content-hub-mt-1 { margin-top: 0.25rem; }
.content-hub-page .content-hub-mt-2 { margin-top: 0.5rem; }
.content-hub-page .content-hub-mt-3 { margin-top: 0.75rem; }
.content-hub-page .content-hub-mt-4 { margin-top: 1rem; }
.content-hub-page .content-hub-mt-6 { margin-top: 1.5rem; }
.content-hub-page .content-hub-ml-1 { margin-left: 0.25rem; }
.content-hub-page .content-hub-mr-1 { margin-right: 0.25rem; }
.content-hub-page .content-hub-pt-3 { padding-top: 0.75rem; }
.content-hub-page .content-hub-pb-16 { padding-bottom: 4rem; }
.content-hub-page .content-hub-p-3 { padding: 0.75rem; }
.content-hub-page .content-hub-p-4 { padding: 1rem; }
.content-hub-page .content-hub-p-5 { padding: 1.25rem; }
.content-hub-page .content-hub-text-xs { font-size: 1rem; }
.content-hub-page .content-hub-text-sm { font-size: 0.875rem; }
.content-hub-page .content-hub-text-base { font-size: 1rem; }
.content-hub-page .content-hub-font-bold { font-weight: 700; }
.content-hub-page .content-hub-font-black { font-weight: 900; }
.content-hub-page .content-hub-font-medium { font-weight: 500; }
.content-hub-page .content-hub-font-semibold { font-weight: 600; }
.content-hub-page .content-hub-uppercase { text-transform: uppercase; }
.content-hub-page .content-hub-tracking-wide { letter-spacing: 0.05em; }
.content-hub-page .content-hub-tracking-wider { letter-spacing: 0.08em; }
.content-hub-page .content-hub-leading-relaxed { line-height: 1.625; }
.content-hub-page .content-hub-w-full { width: 100%; }
.content-hub-page .content-hub-max-w-2xl { max-width: 42rem; }
.content-hub-page .content-hub-max-w-3xl { max-width: 48rem; }
.content-hub-page .content-hub-max-w-lg { max-width: 32rem; }
.content-hub-page .content-hub-text-center { text-align: center; }
.content-hub-page .content-hub-text-left { text-align: left; }
.content-hub-page .content-hub-shrink-0 { flex-shrink: 0; }
.content-hub-page .content-hub-flex-1 { flex: 1; }
.content-hub-page .content-hub-block { display: block; }
.content-hub-page .content-hub-inline-block { display: inline-block; }
.content-hub-page .content-hub-hidden { display: none; }
.content-hub-page .content-hub-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-hub-page .content-hub-overflow-x-auto { overflow-x: auto; }
.content-hub-page .content-hub-self-start { align-self: flex-start; }
.content-hub-page .content-hub-space-y-1 > * + * { margin-top: 0.25rem; }
.content-hub-page .content-hub-space-y-1-5 > * + * { margin-top: 0.375rem; }
.content-hub-page .content-hub-space-y-2 > * + * { margin-top: 0.5rem; }
.content-hub-page .content-hub-space-y-3 > * + * { margin-top: 0.75rem; }
.content-hub-page .content-hub-space-y-6 > * + * { margin-top: 1.5rem; }
.content-hub-page .content-hub-italic { font-style: italic; }
.content-hub-page .content-hub-relative { position: relative; }
.content-hub-page .content-hub-z-10 { z-index: 10; }
@media (min-width: 640px) { .content-hub-page .content-hub-sm-inline { display: inline; } .content-hub-page .content-hub-sm-hidden { display: none; } .content-hub-page .content-hub-sm-flex-row { flex-direction: row; } .content-hub-page .content-hub-sm-items-center { align-items: center; } .content-hub-page .content-hub-sm-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { .content-hub-page .content-hub-md-grid-2 { grid-template-columns: repeat(2,1fr); } .content-hub-page .content-hub-md-grid-3 { grid-template-columns: repeat(3,1fr); } .content-hub-page .content-hub-md-flex-row { flex-direction: row; } .content-hub-page .content-hub-md-items-start { align-items: flex-start; } .content-hub-page .content-hub-md-items-end { align-items: flex-end; } .content-hub-page .content-hub-md-justify-between { justify-content: space-between; } }
.content-hub-page .content-hub-hidden-mobile { display: none; }
@media (min-width: 640px) { .content-hub-page .content-hub-hidden-mobile { display: inline; } }
/* ── Parts List Tab Bar ── */
.content-hub-page .content-hub-parts-tab-bar { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
.content-hub-page .content-hub-parts-tab { padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-gray-500)); border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.content-hub-page .content-hub-parts-tab:hover { color: hsl(var(--fish-navy)); }
.content-hub-page .content-hub-parts-tab.content-hub-active { color: hsl(var(--fish-navy)); border-bottom-color: hsl(var(--fish-red)); }
/* ── Hub supplemental: two-column grid ── */
.content-hub-page .two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 640px) { .content-hub-page .two-col { grid-template-columns: 1fr 1fr; } }
/* ── Hub supplemental: cadence table ── */
.content-hub-page .table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); }
.content-hub-page .trigger-table { width: 100%; font-size: 0.875rem; }
.content-hub-page .trigger-table th { padding: 0.75rem 1rem; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); background: hsl(var(--fish-gray-50)); text-align: left; border-bottom: 2px solid hsl(var(--fish-gray-200)); white-space: nowrap; }
.content-hub-page .trigger-table td { padding: 0.75rem 1rem; font-size: 0.875rem; color: hsl(var(--fish-gray-700)); border-bottom: 1px solid hsl(var(--fish-gray-200)); vertical-align: top; line-height: 1.55; }
.content-hub-page .trigger-table tbody tr:last-child td { border-bottom: none; }
.content-hub-page .trigger-table tbody tr:nth-child(even) td { background: hsl(220 20% 98%); }
.content-hub-page .trigger-table td strong { color: hsl(var(--fish-navy)); font-weight: 700; }
/* ── Hub supplemental: callout-tips variant ── */
.content-hub-page .callout-tips { background: hsl(var(--fish-navy) / 0.025); border: 1px solid hsl(var(--fish-gray-200)); }
/* ── Hub supplemental: learn-section typography ── */
.content-hub-page .learn-section > p { font-size: 1rem; line-height: 1.75; color: hsl(var(--fish-gray-700)); margin-bottom: 1.25rem; }
.content-hub-page .learn-section > p strong { color: hsl(var(--fish-navy)); }
.content-hub-page .learn-section > ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.content-hub-page .learn-section > ul > li { font-size: 1rem; line-height: 1.7; color: hsl(var(--fish-gray-700)); padding-left: 1.125rem; position: relative; }
.content-hub-page .learn-section > ul > li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
.content-hub-page .learn-section > ul > li strong { color: hsl(var(--fish-navy)); }
.content-hub-page .learn-section > ul > li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; }
.content-hub-page .learn-section > ul > li a:hover { color: hsl(var(--fish-red)); }
.content-hub-page .learn-section h3.section-subhead { font-size: 1rem; font-weight: 700; color: hsl(var(--fish-navy)); margin-top: 1.75rem; margin-bottom: 0.625rem; text-transform: capitalize; letter-spacing: 0.04em; }
.content-hub-page .learn-section h3.section-subhead:first-child { margin-top: 0; }
/* ════════════════════════════════════════════════════════════════════
CONTENT BLOG ARTICLES
All blog/supporting articles (walleye jig weight chart, spring walleye
water temp triggers, cold-water jig cadence, pre-spawn staging map)
share this stylesheet. Wrap all page content in a .
CSS is scoped under .content-blog-page — no class renaming needed.
════════════════════════════════════════════════════════════════════ */
/* ── BC theme overrides for blog pages ── */
html:has(.content-blog-page) { scrollbar-gutter: stable; }
body:has(.content-blog-page) .breadcrumbs { display: none; }
body:has(.content-blog-page) .blog-title,
body:has(.content-blog-page) .blog-meta-container { display: none; }
body:has(.content-blog-page) .blog-container { display: none; }
body:has(.content-hub-page) .blog-container { display: none; }
body:has(.content-blog-page) ul { padding-left: 0; margin-bottom: 0; }
body:has(.content-blog-page) .blog-post-content { text-align: left; }
body:has(.content-blog-page) .blog-post-content a { color: inherit; text-decoration: none; }
/* ── BC theme isolation — neutralize blog-post-content rules that bleed in ──
BC's .blog-single .blog-post-content rules have specificity (0,2,1), beating
our (0,1,1) rules. Using .blog-post-content .content-blog-page matches that
specificity and wins by source order since we load after the theme. ── */
.blog-post-content .content-blog-page ul { list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; }
.blog-post-content .content-blog-page ol { margin-left: 0; }
.blog-post-content .content-blog-page li { margin-bottom: 0; padding-left: 0; }
.blog-post-content .content-blog-page p { margin-bottom: 0; }
.blog-post-content .content-blog-page h1,
.blog-post-content .content-blog-page h2,
.blog-post-content .content-blog-page h3,
.blog-post-content .content-blog-page h4 { margin-top: 0; margin-bottom: 0; border: none; padding: 0; }
.blog-post-content .content-blog-page img { max-width: 100%; display: block; }
.blog-post-content .content-blog-page table { border-collapse: collapse; }
/* ── Full-bleed breakout ── */
.content-blog-page {
width: 100vw;
margin-left: calc(50% - 50vw);
overflow-x: clip;
text-align: left;
}
/* ── Base / reset ── */
.content-blog-page {
font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 1rem;
line-height: 1.6;
color: hsl(240, 100%, 15.69%);
background: hsl(var(--background));
}
.content-blog-page *, .content-blog-page *::before, .content-blog-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.content-blog-page a { text-decoration: none; color: inherit; }
.content-blog-page ul { list-style: none; }
.content-blog-page ol { padding-left: 1.25rem; }
.content-blog-page button { cursor: pointer; font-family: inherit; }
.content-blog-page img { max-width: 100%; display: block; }
.content-blog-page table { border-collapse: collapse; }
.content-blog-page h1, .content-blog-page h2, .content-blog-page h3,
.content-blog-page h4, .content-blog-page h5, .content-blog-page h6 {
font-weight: 800; letter-spacing: -0.03em; color: hsl(var(--fish-navy)); line-height: 1.15;
}
.content-blog-page h1 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; }
.content-blog-page h2 { font-weight: 700; }
.content-blog-page p, .content-blog-page li, .content-blog-page a,
.content-blog-page span, .content-blog-page button, .content-blog-page label,
.content-blog-page td, .content-blog-page th, .content-blog-page input,
.content-blog-page select, .content-blog-page textarea {
font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif;
}
/* ── Layout ── */
.content-blog-page .container { max-width: 72rem; margin: 0 auto; padding: 0; }
.content-blog-page .section { padding: 4rem 1rem; position: relative; }
.content-blog-page .section-alt { padding: 4rem 1rem; position: relative; background: linear-gradient(180deg, hsl(var(--fish-gray-50)) 0%, hsl(var(--fish-gray-100) / 0.5) 100%); }
@media (min-width: 640px) { .content-blog-page .section, .content-blog-page .section-alt { padding: 4rem 1.5rem; } }
@media (min-width: 768px) { .content-blog-page .section, .content-blog-page .section-alt { padding: 5rem 1.5rem; } }
.content-blog-page .section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: capitalize; letter-spacing: -0.03em; color: hsl(var(--fish-navy)); position: relative; display: inline-block; }
@media (min-width: 768px) { .content-blog-page .section-title { font-size: 1.875rem; } }
.content-blog-page .section-title::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 4px; width: 48px; border-radius: 9999px; background: hsl(var(--fish-red)); }
.content-blog-page .section-intro { font-size: 1rem; margin-bottom: 2.5rem; max-width: 48rem; padding-top: 0.75rem; color: hsl(var(--fish-gray-500)); line-height: 1.75; }
/* ── Gradient bar ── */
.content-blog-page .gradient-bar { height: 4px; background: linear-gradient(90deg, hsl(var(--fish-navy)), hsl(var(--fish-red)), hsl(var(--fish-navy))); }
/* ── Sticky nav ── */
.content-blog-page .sticky-nav { position: sticky; top: 0; z-index: 50; background: white; border-bottom: 1px solid hsl(var(--fish-gray-200)); box-shadow: 0 1px 3px hsl(0 0% 0% / 0.05); }
.content-blog-page .sticky-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; }
@media (min-width: 640px) { .content-blog-page .sticky-nav-inner { padding: 0.625rem 1.5rem; } }
.content-blog-page .nav-brand { display: flex; align-items: center; gap: 0.75rem; }
.content-blog-page .nav-brand-logo { height: 2.25rem; }
@media (min-width: 640px) { .content-blog-page .nav-brand-logo { height: 2.5rem; } }
.content-blog-page .nav-brand-divider { display: none; color: hsl(var(--fish-gray-300)); font-weight: 300; }
@media (min-width: 640px) { .content-blog-page .nav-brand-divider { display: inline; } }
.content-blog-page .nav-brand-title { display: none; font-weight: 600; font-size: 0.875rem; color: hsl(var(--fish-navy)); }
@media (min-width: 640px) { .content-blog-page .nav-brand-title { display: inline; } }
.content-blog-page .nav-links { display: none; align-items: center; gap: 0.125rem; }
@media (min-width: 1024px) { .content-blog-page .nav-links { display: flex; } }
.content-blog-page .nav-link { padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--fish-gray-500)); transition: all 0.15s; }
.content-blog-page .nav-link:hover { color: hsl(237,100%,20%); background: hsl(230,20%,97%); }
.content-blog-page .mobile-toggle { display: block; padding: 0.5rem; border-radius: 0.375rem; background: none; border: none; color: hsl(var(--fish-navy)); cursor: pointer; }
@media (min-width: 1024px) { .content-blog-page .mobile-toggle { display: none; } }
.content-blog-page .mobile-menu { display: none; border-top: 1px solid hsl(var(--fish-gray-200)); padding: 0.5rem 1rem 1rem; background: white; }
.content-blog-page .mobile-menu.open { display: block; }
@media (min-width: 1024px) { .content-blog-page .mobile-menu { display: none !important; } }
.content-blog-page .mobile-menu a { display: block; padding: 0.625rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--fish-gray-500)); }
.content-blog-page .mobile-menu a:hover { background: hsl(var(--fish-gray-50)); }
/* ── Buttons ── */
.content-blog-page .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; border: none; transition: all 0.2s; background: linear-gradient(135deg, hsl(var(--fish-red)) 0%, hsl(var(--fish-red-hover)) 100%); color: hsl(var(--fish-white)) !important; box-shadow: 0 2px 8px -2px hsl(var(--fish-red) / 0.4); }
.content-blog-page .btn-primary:hover { box-shadow: 0 4px 16px -3px hsl(var(--fish-red) / 0.5); transform: translateY(-1px); }
.content-blog-page .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid hsl(var(--fish-navy)); color: hsl(var(--fish-navy)); background: transparent; transition: all 0.2s; }
.content-blog-page .btn-secondary:hover { background: hsl(var(--fish-navy)); color: hsl(var(--fish-white)); transform: translateY(-1px); }
.content-blog-page .btn-outline-white { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid hsl(var(--fish-white) / 0.5); color: hsl(var(--fish-white)) !important; background: transparent; transition: all 0.2s; }
.content-blog-page .btn-outline-white:hover { background: hsl(var(--fish-white)); color: hsl(var(--fish-navy)) !important; border-color: hsl(var(--fish-white)); }
.content-blog-page .btn-sm { font-size: 0.75rem; padding: 0.5rem 1.125rem; }
/* ── Tags / pills ── */
.content-blog-page .tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 0.625rem; border-radius: 0.375rem; background: hsl(var(--fish-red) / 0.08); color: hsl(var(--fish-red)); border: 1px solid hsl(var(--fish-red) / 0.15); }
.content-blog-page .tag-navy { background: hsl(var(--fish-navy) / 0.08); color: hsl(var(--fish-navy)); border-color: hsl(var(--fish-navy) / 0.15); }
.content-blog-page .tag-green { background: hsl(142 60% 40% / 0.1); color: hsl(142 60% 30%); border: 1px solid hsl(142 60% 40% / 0.2); }
/* ── Hero ── */
.content-blog-page .hero { position: relative; overflow: hidden; padding: 2.5rem 1rem; background: linear-gradient(135deg, hsl(237,100%,12%) 0%, hsl(237,100%,20%) 50%, hsl(237,60%,30%) 100%); }
@media (min-width: 768px) { .content-blog-page .hero { padding: 3.5rem 1.5rem; } }
.content-blog-page .hero-dot-overlay { position: absolute; inset: 0; opacity: 0.035; background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 28px 28px; }
.content-blog-page .hero-red-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: hsl(var(--fish-red)); }
.content-blog-page .hero-breadcrumb { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem !important; color: hsl(0 0% 100% / 0.7); }
.content-blog-page .hero-breadcrumb a { color: inherit; }
.content-blog-page .hero-breadcrumb-sep { margin: 0 0.375rem; }
.content-blog-page .hero-breadcrumb-current { color: hsl(0 0% 100% / 0.9); }
.content-blog-page .hero-eyebrow-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.content-blog-page .hero-accent-line { height: 1px; width: 2.5rem; background: hsl(var(--fish-red)); }
.content-blog-page .hero-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--fish-red-glow)); }
.content-blog-page .hero-h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: white; text-transform: capitalize; margin-bottom: 0.75rem !important; }
@media (min-width: 640px) { .content-blog-page .hero-h1 { font-size: 1.875rem; } }
@media (min-width: 768px) { .content-blog-page .hero-h1 { font-size: 2.25rem; } }
.content-blog-page .hero-desc { font-size: 1rem; line-height: 1.625; color: hsl(0 0% 100% / 0.75); margin-bottom: 0.5rem !important; max-width: 36rem; }
@media (min-width: 768px) { .content-blog-page .hero-desc { font-size: 1rem; } }
.content-blog-page .hero-meta { font-size: 0.9375rem; color: hsl(0 0% 80% / 0.85); font-weight: 500; margin-bottom: 1.5rem !important; }
.content-blog-page .hero-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.25rem; }
.content-blog-page .hero-nav-list { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.content-blog-page .hero-updated { font-size: 0.875rem; color: hsl(0 0% 100% / 0.75); font-style: italic; line-height: 1.625; }
.content-blog-page .hero-pill { display: inline-block; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid hsl(0 0% 100% / 0.2); color: white !important; transition: all 0.15s; }
.content-blog-page .hero-pill:hover { background: hsl(var(--fish-red)); border-color: hsl(var(--fish-red)); color: white !important; }
.content-blog-page .hero--has-image .hero-pill { background: hsl(0 0% 100% / 0.12); border-color: hsl(0 0% 100% / 0.35); }
.content-blog-page .hero--has-image .hero-pill:hover { background: hsl(var(--fish-red)); border-color: hsl(var(--fish-red)); }
.content-blog-page .hero-trust { margin-top: 1rem; padding: 0.75rem 1rem; background: hsl(var(--fish-red) / 0.15); border-left: 3px solid hsl(var(--fish-red)); border-radius: 0 0.375rem 0.375rem 0; font-size: 0.9rem; color: hsl(0 0% 100% / 0.85); max-width: 36rem; line-height: 1.6; }
.content-blog-page .hero-trust strong { color: white; }
/* ── Cards (water temp triggers) ── */
.content-blog-page .card { border-radius: 0.5rem; padding: 1.5rem; position: relative; overflow: hidden; background: hsl(var(--card)); box-shadow: var(--fish-card-shadow); border: 1px solid hsl(var(--fish-gray-200)); transition: all 0.2s; }
.content-blog-page .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; background: linear-gradient(90deg, hsl(var(--fish-navy)), hsl(var(--fish-red))); transition: opacity 0.2s; }
.content-blog-page .card:hover { box-shadow: var(--fish-card-shadow-hover); border-color: hsl(var(--fish-gray-300)); transform: translateY(-2px); }
.content-blog-page .card:hover::before { opacity: 1; }
.content-blog-page .card-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: -0.03em; color: hsl(var(--fish-navy)); }
.content-blog-page .card-text { font-size: 0.875rem; line-height: 1.625; color: hsl(var(--fish-gray-500)); }
/* ── Article layout with sidebar TOC ── */
.content-blog-page .article-layout { display: flex; gap: 2.5rem; align-items: flex-start; }
.content-blog-page .article-body { flex: 1; min-width: 0; }
.content-blog-page .article-toc { width: 14rem; flex-shrink: 0; position: sticky; top: 5rem; display: none; }
@media (min-width: 1024px) { .content-blog-page .article-toc { display: block; } }
.content-blog-page .toc-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.75rem; }
.content-blog-page .toc-list { list-style: none; padding: 0; margin: 0; }
.content-blog-page .toc-list li + li { margin-top: 0.125rem; }
.content-blog-page .toc-link { display: block; font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 0.25rem; color: hsl(var(--fish-gray-500)) !important; transition: all 0.15s; border-left: 2px solid transparent; }
.content-blog-page .toc-link:hover { color: hsl(var(--fish-navy)) !important; background: hsl(var(--fish-gray-50)); }
.content-blog-page .toc-link.active { color: hsl(var(--fish-navy)) !important; border-left-color: hsl(var(--fish-red)); background: hsl(var(--hub-callout-bg)); font-weight: 600; }
/* ── Article sections ── */
.content-blog-page .article-section { margin-bottom: 3.5rem; }
.content-blog-page .article-section p { font-size: 1rem; line-height: 1.75; color: hsl(240, 100%, 15.69%); margin-bottom: 1rem; }
.content-blog-page .article-section p strong { color: hsl(var(--fish-navy)); }
.content-blog-page .article-section h2 { font-size: 1.875rem; font-weight: 700; text-transform: capitalize; letter-spacing: -0.02em; color: hsl(var(--fish-navy)); margin-bottom: 1rem; position: relative; display: inline-block; }
@media (min-width: 768px) { .content-blog-page .article-section h2 { font-size: 1.875rem; } }
.content-blog-page .article-section h2::after { content: ''; position: absolute; bottom: -3px; left: 0; height: 3px; width: 36px; border-radius: 9999px; background: hsl(var(--fish-red)); }
.content-blog-page .article-section .intro { font-size: 1rem; line-height: 1.75; color: hsl(240, 100%, 15.69%); margin-bottom: 1.5rem; padding-top: 0.5rem; max-width: 48rem; }
.content-blog-page .article-section h3 { font-size: 1rem; font-weight: 700; text-transform: capitalize; letter-spacing: -0.01em; margin-bottom: 0.5rem; margin-top: 1.5rem; color: hsl(var(--fish-navy)); }
.content-blog-page .article-section ol { font-size: 1rem; color: hsl(240, 100%, 15.69%); line-height: 1.75; }
.content-blog-page .article-section ol li { margin-bottom: 0.75rem; padding-left: 0.25rem; }
.content-blog-page .article-section ol li strong { color: hsl(var(--fish-navy)); }
.content-blog-page .article-section ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; font-size: 1rem; color: hsl(240, 100%, 15.69%); line-height: 1.75; }
.content-blog-page .article-section ul li { margin-bottom: 0.5rem; }
.content-blog-page .article-section ul li strong { color: hsl(var(--fish-navy)); }
.content-blog-page .article-section ul li strong a,
.content-blog-page .article-section ol li strong a,
.content-blog-page .article-section p strong a { font-weight: 700; }
.content-blog-page .article-section figure { margin: 1rem 0 1.5rem; border-radius: 0.5rem; overflow: hidden; }
.content-blog-page .article-section figure img:not(.exclusive-badge) { width: 100%; display: block; border-radius: 0.5rem; }
.content-blog-page .article-section figure.figure-sm { max-width: 300px; margin-left: auto; margin-right: auto; position: relative; overflow: visible; }
.content-blog-page .article-section figure.figure-sm img:not(.exclusive-badge) { width: 100%; }
.content-blog-page .figure-sm .exclusive-badge { position: absolute; top: 6px; right: 6px; width: 80px; height: auto; z-index: 1; display: block; }
.content-blog-page .article-section figcaption { font-size: 0.75rem; color: hsl(var(--fish-gray-500)); margin-top: 0.5rem; line-height: 1.5; }
.content-blog-page .article-section p a,
.content-blog-page .article-section ul li a,
.content-blog-page .article-section ol li a,
.content-blog-page .article-section td a,
.content-blog-page .article-section .callout a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.content-blog-page .article-section p a:hover,
.content-blog-page .article-section ul li a:hover,
.content-blog-page .article-section ol li a:hover,
.content-blog-page .article-section td a:hover,
.content-blog-page .article-section .callout a:hover { color: hsl(var(--fish-red)); }
/* ── Callout ── */
.content-blog-page .callout { border-radius: 0.375rem; padding: 1rem; font-size: 0.875rem; background: hsl(var(--hub-callout-bg)); border: 1px solid hsl(var(--border)); margin-bottom: 1.5rem; }
.content-blog-page .callout-title { font-weight: 700; margin-bottom: 0.375rem; color: hsl(var(--fish-navy)); font-size: 0.875rem; }
.content-blog-page .callout-text { color: hsl(var(--fish-navy)); line-height: 1.625; font-size: 0.875rem; }
.content-blog-page .callout-text strong { color: hsl(var(--fish-navy)); }
.content-blog-page .callout-left-accent { border-left: 3px solid hsl(var(--fish-navy)); }
.content-blog-page .callout .list-item .dot { display: none; }
.content-blog-page .callout-left-red { border-left: 3px solid hsl(var(--fish-red)); }
.content-blog-page .callout ul { list-style: none; padding: 0; margin: 0; }
.content-blog-page .callout ul li { font-size: 1rem; color: hsl(240, 100%, 15.69%); line-height: 1.625; padding: 0.25rem 0; }
.content-blog-page .callout ul li + li { border-top: 1px solid hsl(var(--border)); }
.content-blog-page .callout ul li strong { color: hsl(var(--fish-navy)); }
.content-blog-page .callout ol { padding-left: 1.25rem; margin-top: 0.5rem; }
.content-blog-page .callout ol li { font-size: 0.875rem; color: hsl(var(--fish-gray-700)); line-height: 1.625; margin-bottom: 0.375rem; }
.content-blog-page .callout ol li strong { color: hsl(var(--fish-navy)); }
/* ── Weight chart table ── */
.content-blog-page .chart-table-wrap { overflow-x: auto; margin-bottom: 1rem; border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); }
.content-blog-page .chart-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; min-width: 600px; }
.content-blog-page .chart-table th { padding: 0.75rem 1rem; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); background: hsl(var(--fish-gray-50)); text-align: left; }
.content-blog-page .chart-table th.col-calm { background: hsl(200 60% 96%); color: hsl(200 80% 25%); }
.content-blog-page .chart-table th.col-mod { background: hsl(45 80% 95%); color: hsl(45 60% 28%); }
.content-blog-page .chart-table th.col-wind { background: hsl(0 70% 96%); color: hsl(0 65% 30%); }
.content-blog-page .chart-table thead tr { border-bottom: 2px solid hsl(var(--fish-gray-200)); }
.content-blog-page .chart-table tbody tr { border-bottom: 1px solid hsl(var(--fish-gray-200)); transition: background 0.1s; }
.content-blog-page .chart-table tbody tr:last-child { border-bottom: none; }
.content-blog-page .chart-table tbody tr:hover { background: hsl(var(--hub-callout-bg)); }
.content-blog-page .chart-table td { padding: 0.75rem 1rem; line-height: 1.5; vertical-align: top; }
.content-blog-page .chart-table td.depth-cell { font-weight: 700; font-size: 0.875rem; color: hsl(var(--fish-navy)); white-space: nowrap; }
.content-blog-page .chart-table td.calm-cell { font-weight: 700; color: hsl(200 80% 30%); }
.content-blog-page .chart-table td.mod-cell { font-weight: 700; color: hsl(45 60% 30%); }
.content-blog-page .chart-table td.wind-cell { font-weight: 700; color: hsl(0 65% 35%); }
.content-blog-page .chart-table td.notes-cell { font-size: 0.75rem; color: hsl(var(--fish-gray-500)); }
/* ── Temperature table ── */
.content-blog-page .temp-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); }
.content-blog-page .temp-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
.content-blog-page .temp-table th { padding: 0.75rem 1rem; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); background: hsl(var(--fish-gray-50)); text-align: left; white-space: nowrap; }
.content-blog-page .temp-table thead tr { border-bottom: 2px solid hsl(var(--fish-gray-200)); }
.content-blog-page .temp-table tbody tr { border-bottom: 1px solid hsl(var(--fish-gray-200)); transition: background 0.1s; }
.content-blog-page .temp-table tbody tr:last-child { border-bottom: none; }
.content-blog-page .temp-table tbody tr:hover { background: hsl(var(--hub-callout-bg)); }
.content-blog-page .temp-table td { padding: 0.75rem 1rem; line-height: 1.5; vertical-align: top; }
.content-blog-page .temp-range { font-size: 0.875rem; font-weight: 800; color: hsl(var(--fish-navy)); white-space: nowrap; }
.content-blog-page .td-muted { font-size: 0.75rem; color: hsl(var(--fish-gray-500)); }
.content-blog-page .td-emphasis { font-weight: 600; color: hsl(var(--fish-navy)); }
/* ── Cheat sheet table (cold water cadence) ── */
.content-blog-page .cheat-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); }
.content-blog-page .cheat-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; min-width: 560px; }
.content-blog-page .cheat-table th { padding: 0.75rem 1rem; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); background: hsl(var(--fish-gray-50)); text-align: left; }
.content-blog-page .cheat-table th.col-cond { background: hsl(var(--fish-navy) / 0.07); color: hsl(var(--fish-navy)); }
.content-blog-page .cheat-table th.col-cadence { background: hsl(200 60% 96%); color: hsl(200 80% 25%); }
.content-blog-page .cheat-table th.col-change { background: hsl(45 80% 95%); color: hsl(45 60% 28%); }
.content-blog-page .cheat-table th.col-notes { background: hsl(var(--fish-gray-50)); color: hsl(var(--fish-gray-500)); }
.content-blog-page .cheat-table thead tr { border-bottom: 2px solid hsl(var(--fish-gray-200)); }
.content-blog-page .cheat-table tbody tr { border-bottom: 1px solid hsl(var(--fish-gray-200)); transition: background 0.1s; }
.content-blog-page .cheat-table tbody tr:last-child { border-bottom: none; }
.content-blog-page .cheat-table tbody tr:hover { background: hsl(var(--hub-callout-bg)); }
.content-blog-page .cheat-table td { padding: 0.75rem 1rem; line-height: 1.5; vertical-align: top; }
.content-blog-page .cheat-table td.cond-cell { font-weight: 700; font-size: 0.8125rem; color: hsl(var(--fish-navy)); }
.content-blog-page .cheat-table td.cadence-cell { font-weight: 700; color: hsl(200 80% 30%); white-space: nowrap; }
.content-blog-page .cheat-table td.change-cell { font-size: 0.75rem; color: hsl(45 60% 30%); font-weight: 600; }
.content-blog-page .cheat-table td.notes-cell { font-size: 0.75rem; color: hsl(var(--fish-gray-500)); }
/* ── Trigger table (article variant — full grid borders) ── */
.content-blog-page .table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); }
.content-blog-page .trigger-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.content-blog-page .trigger-table th { padding: 0.75rem 1rem; font-weight: 700; font-size: 0.6875rem; text-transform: capitalize; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); background: hsl(var(--fish-gray-50)); text-align: left; border-bottom: 2px solid hsl(var(--fish-gray-200)); border-right: 1px solid hsl(var(--fish-gray-200)); white-space: nowrap; }
.content-blog-page .trigger-table th:last-child { border-right: none; }
.content-blog-page .trigger-table td { padding: 0.75rem 1rem; font-size: 0.875rem; color: hsl(240, 100%, 15.69%); border-bottom: 1px solid hsl(var(--fish-gray-200)); border-right: 1px solid hsl(var(--fish-gray-200)); vertical-align: top; line-height: 1.55; }
.content-blog-page .trigger-table td:last-child { border-right: none; }
.content-blog-page .trigger-table tbody tr:last-child td { border-bottom: none; }
.content-blog-page .trigger-table tbody tr:nth-child(even) td { background: hsl(220 20% 98%); }
.content-blog-page .trigger-table td strong { color: hsl(var(--fish-navy)); font-weight: 700; }
/* ── Temperature badges ── */
.content-blog-page .temp-badge { display: inline-block; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: 0.25rem; white-space: nowrap; }
.content-blog-page .temp-badge--cold { background: hsl(200 80% 92%); color: hsl(200 80% 25%); }
.content-blog-page .temp-badge--cool { background: hsl(170 60% 90%); color: hsl(170 60% 22%); }
.content-blog-page .temp-badge--transition { background: hsl(45 90% 92%); color: hsl(45 80% 28%); }
.content-blog-page .temp-badge--warm { background: hsl(25 85% 92%); color: hsl(25 80% 30%); }
.content-blog-page .temp-badge--active { background: hsl(0 80% 93%); color: hsl(0 65% 30%); }
.content-blog-page .temp-badge--problem { background: hsl(0 70% 93%); color: hsl(0 65% 30%); }
/* ── Dot list ── */
.content-blog-page .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--fish-red)); flex-shrink: 0; margin-top: 7px; }
.content-blog-page .dot-sm { width: 4px; height: 4px; margin-top: 8px; }
.content-blog-page .dot-navy { background: hsl(var(--fish-navy)); }
.content-blog-page .list-item { font-size: 1rem; color: hsl(240, 100%, 15.69%); line-height: 1.7; padding: 0.125rem 0; }
.content-blog-page .list-item strong { color: hsl(var(--fish-navy)); }
/* ── Inline rule pills (jig weight chart) ── */
.content-blog-page .rule-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; align-items: flex-start; }
.content-blog-page .rule-pill { flex: 1; min-width: 10rem; border-radius: 0.375rem; padding: 0.625rem 0.875rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--hub-surface)); }
.content-blog-page .rule-pill-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.25rem; }
.content-blog-page .rule-pill-value { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--fish-navy)); }
/* ── Rule card grid (water temp triggers) ── */
.content-blog-page .rule-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .content-blog-page .rule-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .content-blog-page .rule-grid { grid-template-columns: repeat(3, 1fr); } }
.content-blog-page .rule-card { border-radius: 0.5rem; padding: 1rem 1.125rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); position: relative; overflow: hidden; }
.content-blog-page .rule-card-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; }
.content-blog-page .rule-card-accent--cold { background: hsl(200 80% 55%); }
.content-blog-page .rule-card-accent--cool { background: hsl(170 60% 45%); }
.content-blog-page .rule-card-accent--transition { background: hsl(45 85% 50%); }
.content-blog-page .rule-card-accent--warm { background: hsl(25 80% 52%); }
.content-blog-page .rule-card-accent--active { background: hsl(var(--fish-red)); }
.content-blog-page .rule-card-range { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.375rem; }
.content-blog-page .rule-card-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.5rem; }
.content-blog-page .rule-card-body { font-size: 0.8125rem; line-height: 1.625; color: hsl(var(--fish-gray-700)); }
.content-blog-page .rule-card-body strong { color: hsl(var(--fish-navy)); }
/* ── Decision cards (cold water cadence) ── */
.content-blog-page .decision-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .content-blog-page .decision-grid { grid-template-columns: repeat(3, 1fr); } }
.content-blog-page .decision-card { border-radius: 0.5rem; padding: 1.125rem 1.25rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); position: relative; overflow: hidden; }
.content-blog-page .decision-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.content-blog-page .decision-card-bar--blue { background: hsl(200 80% 45%); }
.content-blog-page .decision-card-bar--teal { background: hsl(175 60% 38%); }
.content-blog-page .decision-card-bar--red { background: hsl(var(--fish-red)); }
.content-blog-page .decision-card-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.375rem; margin-top: 0.25rem; }
.content-blog-page .decision-card-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.625rem; }
.content-blog-page .decision-card-trigger { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: hsl(var(--fish-red)); margin-bottom: 0.5rem; }
.content-blog-page .decision-card-body { font-size: 0.8125rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); }
.content-blog-page .decision-card-body strong { color: hsl(var(--fish-navy)); }
.content-blog-page .decision-card-body ul { list-style: none; padding: 0; margin: 0.375rem 0 0; }
.content-blog-page .decision-card-body ul li { padding: 0.2rem 0 0.2rem 0.875rem; position: relative; font-size: 1rem; }
.content-blog-page .decision-card-body ul li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
/* ── Profile cards (cold water cadence) ── */
.content-blog-page .profile-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .content-blog-page .profile-grid { grid-template-columns: repeat(3, 1fr); } }
.content-blog-page .profile-card { border-radius: 0.5rem; padding: 1.125rem 1.25rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); position: relative; overflow: hidden; }
.content-blog-page .profile-card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.content-blog-page .profile-card-bar--navy { background: hsl(var(--fish-navy)); }
.content-blog-page .profile-card-bar--teal { background: hsl(175 60% 38%); }
.content-blog-page .profile-card-bar--red { background: hsl(var(--fish-red)); }
.content-blog-page .profile-card-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.25rem; }
.content-blog-page .profile-card-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.5rem; }
.content-blog-page .profile-card-cadence { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: hsl(var(--fish-red)); margin-bottom: 0.5rem; }
.content-blog-page .profile-card-body { font-size: 0.8125rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); }
.content-blog-page .profile-card-body strong { color: hsl(var(--fish-navy)); }
.content-blog-page .profile-card-body ul { list-style: none; padding: 0; margin: 0.375rem 0 0; }
.content-blog-page .profile-card-body ul li { padding: 0.2rem 0 0.2rem 0.875rem; position: relative; }
.content-blog-page .profile-card-body ul li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
/* ── How-to steps (cold water cadence) ── */
.content-blog-page .howto-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .content-blog-page .howto-grid { grid-template-columns: repeat(3, 1fr); } }
.content-blog-page .howto-card { border-radius: 0.5rem; padding: 1.125rem 1.25rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--hub-surface)); }
.content-blog-page .howto-card-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-red)); margin-bottom: 0.375rem; }
.content-blog-page .howto-card-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.625rem; }
.content-blog-page .howto-steps { list-style: none; padding: 0; margin: 0; counter-reset: step-ct; }
.content-blog-page .howto-steps li { counter-increment: step-ct; display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); margin-bottom: 0.625rem; }
.content-blog-page .howto-steps li::before { content: counter(step-ct); display: flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: 0.625rem; font-weight: 900; flex-shrink: 0; background: hsl(var(--fish-navy)); color: white; margin-top: 1px; }
.content-blog-page .howto-steps li strong { color: hsl(var(--fish-navy)); }
.content-blog-page .howto-card-note { font-size: 0.75rem; line-height: 1.6; color: hsl(var(--fish-gray-500)); margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid hsl(var(--fish-gray-200)); }
/* ── Feature cards (pre-spawn staging map) ── */
.content-blog-page .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .content-blog-page .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.content-blog-page .feature-card { border-radius: 0.5rem; padding: 1.125rem 1.25rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); position: relative; overflow: hidden; }
.content-blog-page .feature-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.content-blog-page .feature-card-bar--navy { background: hsl(var(--fish-navy)); }
.content-blog-page .feature-card-bar--red { background: hsl(var(--fish-red)); }
.content-blog-page .feature-card-bar--teal { background: hsl(175 60% 40%); }
.content-blog-page .feature-card-bar--gold { background: hsl(42 80% 48%); }
.content-blog-page .feature-card-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.375rem; margin-top: 0.25rem; }
.content-blog-page .feature-card-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.5rem; }
.content-blog-page .feature-card-body { font-size: 0.8125rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); }
.content-blog-page .feature-card-body strong { color: hsl(var(--fish-navy)); }
/* ── Checklist (pre-spawn staging map) ── */
.content-blog-page .checklist { margin-bottom: 1.5rem; }
.content-blog-page .check-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-bottom: 1px solid hsl(var(--fish-gray-200)); font-size: 1rem; line-height: 1.65; color: hsl(240, 100%, 15.69%); }
.content-blog-page .check-item:last-child { border-bottom: none; }
.content-blog-page .check-item strong { color: hsl(var(--fish-navy)); display: block; margin-bottom: 0.1rem; font-size: 1rem; }
.content-blog-page .check-icon { flex-shrink: 0; margin-top: 2px; color: hsl(var(--fish-navy)); font-size: 0.875rem; font-weight: 900; }
/* ── Angle cards (pre-spawn staging map) ── */
.content-blog-page .angle-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0 1.5rem; }
@media (min-width: 640px) { .content-blog-page .angle-grid { grid-template-columns: repeat(2, 1fr); } }
.content-blog-page .angle-card { border-radius: 0.5rem; padding: 1rem 1.125rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--hub-surface)); }
.content-blog-page .angle-card-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-red)); margin-bottom: 0.375rem; }
.content-blog-page .angle-card-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.625rem; }
.content-blog-page .angle-card-body { font-size: 0.8125rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); }
.content-blog-page .angle-card-body strong { color: hsl(var(--fish-navy)); }
/* ── Rotation pills (pre-spawn staging map) ── */
.content-blog-page .rotation-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1rem 0 1.5rem; }
@media (min-width: 640px) { .content-blog-page .rotation-grid { grid-template-columns: repeat(3, 1fr); } }
.content-blog-page .rotation-pill { border-radius: 0.5rem; padding: 1rem 1.125rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); position: relative; overflow: hidden; }
.content-blog-page .rotation-pill-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.content-blog-page .rotation-pill-bar--1 { background: hsl(var(--fish-navy)); }
.content-blog-page .rotation-pill-bar--2 { background: hsl(175 60% 40%); }
.content-blog-page .rotation-pill-bar--3 { background: hsl(var(--fish-red)); }
.content-blog-page .rotation-step { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-gray-500)); margin-bottom: 0.25rem; }
.content-blog-page .rotation-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); margin-bottom: 0.375rem; }
.content-blog-page .rotation-body { font-size: 0.8125rem; line-height: 1.6; color: hsl(var(--fish-gray-700)); }
.content-blog-page .rotation-body strong { color: hsl(var(--fish-navy)); }
/* ── Mistake list (shared across articles) ── */
.content-blog-page .mistake-list { border: 1px solid hsl(var(--fish-gray-200)); border-radius: 0.5rem; overflow: hidden; margin-bottom: 1.5rem; }
.content-blog-page .mistake-item { display: flex; gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid hsl(var(--fish-gray-200)); align-items: flex-start; }
.content-blog-page .mistake-item:last-child { border-bottom: none; }
.content-blog-page .mistake-x { font-size: 0.75rem; font-weight: 900; color: hsl(var(--fish-red)); flex-shrink: 0; margin-top: 2px; }
.content-blog-page .mistake-body { font-size: 0.875rem; line-height: 1.7; color: hsl(var(--fish-gray-700)); }
.content-blog-page .mistake-body strong { color: hsl(var(--fish-navy)); display: block; margin-bottom: 0.1rem; }
.content-blog-page .mistake-text { font-size: 1rem; line-height: 1.7; color: hsl(240, 100%, 15.69%); }
.content-blog-page .mistake-text strong { color: hsl(var(--fish-navy)); display: block; margin-bottom: 0.1rem; }
.content-blog-page .mistake-fix { font-size: 0.875rem; color: hsl(var(--fish-gray-500)); margin-top: 0.2rem; }
.content-blog-page .mistake-fix strong { color: hsl(175 60% 30%); display: inline; }
/* ── Troubleshoot cards ── */
.content-blog-page .trouble-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .content-blog-page .trouble-grid { grid-template-columns: repeat(2, 1fr); } }
.content-blog-page .trouble-card { border-radius: 0.5rem; padding: 1rem 1.125rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); display: flex; flex-direction: column; gap: 0.375rem; }
.content-blog-page .trouble-problem { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--fish-red)); margin-bottom: 0.25rem; }
.content-blog-page .trouble-title { font-size: 0.875rem; font-weight: 700; color: hsl(var(--fish-navy)); margin-bottom: 0.25rem; }
.content-blog-page .trouble-fix { font-size: 0.8125rem; line-height: 1.625; color: hsl(var(--fish-gray-700)); }
.content-blog-page .trouble-fix strong { color: hsl(var(--fish-navy)); }
.content-blog-page .trouble-fix ul { list-style: none; padding: 0; margin: 0.25rem 0 0; }
.content-blog-page .trouble-fix ul li { padding: 0.2rem 0 0.2rem 0.875rem; position: relative; }
.content-blog-page .trouble-fix ul li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
/* ── Next steps box ── */
.content-blog-page .next-steps-box { border-radius: 0.5rem; border: 1px solid hsl(var(--fish-navy) / 0.15); background: hsl(var(--fish-navy) / 0.03); padding: 1.25rem; margin-bottom: 2.5rem; }
.content-blog-page .next-steps-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); margin-bottom: 0.75rem; }
.content-blog-page .next-steps-list { display: flex; flex-direction: column; gap: 0; }
.content-blog-page .next-steps-link { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 500; color: hsl(var(--fish-navy)); padding: 0.25rem 0.625rem; border-radius: 0.375rem; transition: background 0.15s; }
.content-blog-page .next-steps-link:hover { background: hsl(var(--fish-navy) / 0.06); }
.content-blog-page .next-steps-link-arrow { color: hsl(var(--fish-red)); flex-shrink: 0; }
/* ── Read next ── */
.content-blog-page #read-next ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.content-blog-page .read-next-item { border-bottom: 1px solid hsl(var(--fish-gray-200)); }
.content-blog-page .read-next-item:last-child { border-bottom: none; }
.content-blog-page .read-next-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0; font-size: 1rem; font-weight: 500; color: hsl(var(--fish-navy)); text-decoration: none !important; transition: color 0.15s; }
.content-blog-page .read-next-link:hover { color: hsl(var(--fish-red)); text-decoration: underline !important; text-underline-offset: 3px; }
.content-blog-page .read-next-icon { color: hsl(var(--fish-red)); flex-shrink: 0; }
/* ── FAQ accordion ── */
.content-blog-page .faq-item-border { border-bottom: 1px solid hsl(var(--fish-gray-200)); }
.content-blog-page .faq-item-border:last-child { border-bottom: none; }
.content-blog-page .faq-question-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; text-align: left; font-size: 1rem; font-weight: 700; color: hsl(var(--fish-navy)); background: none; border: none; cursor: pointer; }
.content-blog-page .faq-chevron { flex-shrink: 0; margin-left: 1rem; transition: transform 0.2s; color: hsl(var(--fish-gray-500)); }
.content-blog-page .faq-answer { display: none; padding-bottom: 1rem; font-size: 0.875rem; line-height: 1.7; color: hsl(var(--fish-gray-700)); }
.content-blog-page .faq-answer strong { color: hsl(var(--fish-navy)); }
.content-blog-page .faq-answer ul { list-style: none; padding: 0; margin: 0.375rem 0; }
.content-blog-page .faq-answer ul li { padding: 0.2rem 0 0.2rem 0.875rem; position: relative; }
.content-blog-page .faq-answer ul li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
/* ── Article merch module ── */
.content-blog-page .art-merch { border: 1px solid hsl(var(--fish-gray-200)); border-radius: 0.5rem; padding: 1.25rem; margin: 2rem 0; background: hsl(var(--card)); }
.content-blog-page .art-merch-hd { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
@media (min-width: 640px) { .content-blog-page .art-merch-hd { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.content-blog-page .art-merch-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-red)); display: block; margin-bottom: 0.25rem; }
.content-blog-page .art-merch-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); letter-spacing: -0.02em; }
.content-blog-page .art-merch-sub { font-size: 0.75rem; color: hsl(var(--fish-gray-500)); margin-top: 0.25rem; line-height: 1.5; }
.content-blog-page .art-merch-all { font-size: 0.75rem; font-weight: 600; color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; flex-shrink: 0; margin-top: 0.25rem; transition: color 0.15s; }
.content-blog-page .art-merch-all:hover { color: hsl(var(--fish-red)); }
.content-blog-page .art-merch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .content-blog-page .art-merch-grid { grid-template-columns: repeat(4, 1fr); } }
.content-blog-page .art-prod { border-radius: 0.375rem; border: 1px solid hsl(var(--fish-gray-200)); padding: 0.75rem; display: flex; flex-direction: column; background: hsl(var(--background)); transition: all 0.15s; }
.content-blog-page .art-prod:hover { border-color: hsl(var(--fish-gray-300)); box-shadow: var(--fish-card-shadow); }
.content-blog-page .art-prod-img { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.625rem; overflow: hidden; }
.content-blog-page .art-prod-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.content-blog-page .art-prod-img-ph { height: 84px; background: hsl(var(--fish-gray-100)); border-radius: 0.25rem; margin-bottom: 0.625rem; display: flex; align-items: center; justify-content: center; }
.content-blog-page .art-prod-img-ph span { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: hsl(var(--fish-gray-300)); }
.content-blog-page .art-prod-name { font-size: 0.875rem; font-weight: 700; color: hsl(var(--fish-navy)); margin-bottom: 0.25rem; line-height: 1.4; flex: 1; }
.content-blog-page .art-prod-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.content-blog-page .art-prod-var { font-size: 0.6875rem !important; color: hsl(var(--fish-gray-500)); margin-bottom: 0.5rem; }
.content-blog-page .art-prod-btn { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.5rem; border-radius: 0.25rem; text-align: center; border: 1px solid hsl(var(--fish-navy)); color: hsl(var(--fish-navy)); transition: all 0.15s; margin-top: auto; display: block; }
.content-blog-page .art-prod-btn:hover { background: hsl(var(--fish-navy)); color: white; }
/* ── Number circle ── */
.content-blog-page .num-circle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.75rem; font-weight: 900; flex-shrink: 0; background: hsl(var(--fish-navy)); color: hsl(var(--fish-white)); }
/* ── Merch placeholder ── */
.content-blog-page .merch-placeholder { border: 2px dashed hsl(var(--fish-gray-200)); border-radius: 0.5rem; padding: 1.25rem; margin: 2rem 0; background: hsl(var(--hub-surface)); display: flex; align-items: center; gap: 0.75rem; color: hsl(var(--fish-gray-500)); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
/* ── Utilities ── */
.content-blog-page .flex { display: flex; }
.content-blog-page .flex-col { flex-direction: column; }
.content-blog-page .flex-wrap { flex-wrap: wrap; }
.content-blog-page .items-center { align-items: center; }
.content-blog-page .items-start { align-items: flex-start; }
.content-blog-page .justify-between { justify-content: space-between; }
.content-blog-page .gap-2 { gap: 0.5rem; }
.content-blog-page .gap-3 { gap: 0.75rem; }
.content-blog-page .gap-4 { gap: 1rem; }
.content-blog-page .mb-2 { margin-bottom: 0.5rem; }
.content-blog-page .mb-3 { margin-bottom: 0.75rem; }
.content-blog-page .mb-4 { margin-bottom: 1rem; }
.content-blog-page .mb-6 { margin-bottom: 1.5rem; }
.content-blog-page .mt-2 { margin-top: 0.5rem; }
.content-blog-page .mt-4 { margin-top: 1rem; }
.content-blog-page .mt-6 { margin-top: 1.5rem; }
.content-blog-page .pb-16 { padding-bottom: 4rem; }
.content-blog-page .text-xs { font-size: 0.8125rem; }
/* ══════════════════════════════════════════════════════════════
LEARN-HUB PAGE
Wrapper class: .learn-hub (on )
Used for seasonal/technique hub pages (not articles, not money pages)
══════════════════════════════════════════════════════════════ */
/* ── BC theme overrides ── */
html:has(.learn-hub) { scrollbar-gutter: stable; }
body:has(.learn-hub) .breadcrumbs { display: none; }
body:has(.learn-hub) .blog-title,
body:has(.learn-hub) .blog-meta-container { display: none; }
body:has(.learn-hub) .blog-container { display: none; }
body:has(.learn-hub) ul { padding-left: 0; margin-bottom: 0; }
body:has(.learn-hub) .blog-post-content { text-align: left; }
body:has(.learn-hub) .blog-post-content a { color: inherit; text-decoration: none; }
.blog-post-content .learn-hub ul { list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; }
.blog-post-content .learn-hub li { margin-bottom: 0; padding-left: 0; }
.blog-post-content .learn-hub p { margin-bottom: 0; }
.blog-post-content .learn-hub h1,
.blog-post-content .learn-hub h2,
.blog-post-content .learn-hub h3,
.blog-post-content .learn-hub h4 { margin-top: 0; border: none; padding: 0; }
.blog-post-content .learn-hub img { max-width: 100%; display: block; }
.blog-post-content .learn-hub ol { margin-left: 0; }
.blog-post-content .learn-hub table { border-collapse: collapse; }
/* ── Base / reset ── */
.learn-hub {
font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 1rem;
line-height: 1.6;
color: hsl(var(--foreground));
background: hsl(var(--background));
width: 100vw;
margin-left: calc(50% - 50vw);
overflow-x: clip;
text-align: left;
}
.learn-hub *, .learn-hub *::before, .learn-hub *::after { box-sizing: border-box; margin: 0; padding: 0; }
.learn-hub a { text-decoration: none; color: inherit; }
.learn-hub ul { list-style: none; }
.learn-hub button { cursor: pointer; font-family: inherit; }
.learn-hub img { max-width: 100%; display: block; }
.learn-hub table { border-collapse: collapse; }
.learn-hub h1, .learn-hub h2, .learn-hub h3, .learn-hub h4 { font-weight: 800; letter-spacing: -0.03em; color: hsl(var(--fish-navy)); line-height: 1.15; }
.learn-hub h1 { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.learn-hub h2 { font-weight: 700; }
.learn-hub h3 { font-size: 1rem; }
.learn-hub p, .learn-hub li, .learn-hub a, .learn-hub span, .learn-hub td, .learn-hub th { font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif; }
/* ── Inner container (max-width + padding) ── */
.learn-hub .learn-section-inner { max-width: 72rem; margin: 0 auto; }
.learn-hub .learn-hero-inner { max-width: 72rem; margin: 0 auto; position: relative; z-index: 1; }
/* ── Hero ── */
.learn-hub .learn-hero {
position: relative; overflow: hidden; padding: 2.5rem 1rem;
background: linear-gradient(135deg, hsl(237,100%,12%) 0%, hsl(237,100%,20%) 50%, hsl(237,60%,30%) 100%);
}
@media (min-width: 768px) { .learn-hub .learn-hero { padding: 4rem 1.5rem; } }
.learn-hub .learn-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: hsl(var(--fish-red)); z-index: 2; }
.learn-hub .learn-hero::after { content: ''; position: absolute; inset: 0; opacity: 0.035; background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 28px 28px; pointer-events: none; }
/* breadcrumbs inside hero */
.learn-hub .breadcrumbs { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.25rem; color: hsl(0 0% 100% / 0.65); }
.learn-hub .breadcrumbs a { color: inherit; }
.learn-hub .breadcrumbs a:hover { color: white; }
.learn-hub .breadcrumbs span { color: hsl(0 0% 100% / 0.9); }
/* h1 */
.learn-hub .learn-hero h1 { font-size: 1.5rem; font-weight: 700; color: white; text-transform: capitalize; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 1rem; }
@media (min-width: 640px) { .learn-hub .learn-hero h1 { font-size: 1.875rem; } }
@media (min-width: 768px) { .learn-hub .learn-hero h1 { font-size: 2.25rem; } }
.learn-hub .hero-subhead { font-size: 1rem; line-height: 1.7; color: hsl(0 0% 100% / 0.85); margin-bottom: 1.5rem; max-width: 44rem; }
.learn-hub .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.25rem; }
.learn-hub .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.375rem; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; }
.learn-hub .btn-primary { background: linear-gradient(135deg, hsl(var(--fish-red)) 0%, hsl(var(--fish-red-hover)) 100%); color: white !important; border: none; box-shadow: 0 2px 8px -2px hsl(var(--fish-red) / 0.4); }
.learn-hub .btn-primary:hover { box-shadow: 0 4px 16px -3px hsl(var(--fish-red) / 0.5); transform: translateY(-1px); }
.learn-hub .btn-secondary { border: 2px solid hsl(0 0% 100% / 0.45); color: white !important; background: transparent; }
.learn-hub .btn-secondary:hover { background: white; color: hsl(var(--fish-navy)) !important; border-color: white; transform: translateY(-1px); }
.learn-hub .hero-trust { margin-top: 1.25rem; padding: 0.75rem 1rem; background: hsl(var(--fish-red) / 0.15); border-left: 3px solid hsl(var(--fish-red)); border-radius: 0 0.375rem 0.375rem 0; font-size: 0.875rem; color: hsl(0 0% 100% / 0.9); max-width: 42rem; line-height: 1.65; }
.learn-hub .hero-trust p { font-family: 'Roboto Flex', system-ui, sans-serif; color: hsl(0 0% 100% / 0.9); margin-bottom: 0; }
.learn-hub .hero-trust strong { color: white; }
/* ── learn-section ── */
.learn-hub .learn-section { padding: 3.5rem 1rem; border-bottom: 1px solid hsl(var(--fish-gray-200)); }
@media (min-width: 640px) { .learn-hub .learn-section { padding: 3.5rem 1.5rem; } }
@media (min-width: 768px) { .learn-hub .learn-section { padding: 4.5rem 1.5rem; } }
.learn-hub .learn-section:last-of-type { border-bottom: none; }
.learn-hub .learn-section-alt { background: linear-gradient(180deg, hsl(var(--fish-gray-50)) 0%, hsl(var(--fish-gray-100) / 0.5) 100%); }
.learn-hub .learn-section h2 { font-size: 1.5rem; font-weight: 700; text-transform: capitalize; letter-spacing: -0.02em; color: hsl(var(--fish-navy)); margin-bottom: 1.375rem; position: relative; display: inline-block; }
@media (min-width: 768px) { .learn-hub .learn-section h2 { font-size: 1.875rem; } }
.learn-hub .learn-section h2::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 4px; width: 40px; border-radius: 9999px; background: hsl(var(--fish-red)); }
.learn-hub .learn-section > .learn-section-inner > p,
.learn-hub .learn-section p.lh-intro { font-size: 1rem; line-height: 1.75; color: hsl(var(--fish-gray-700)); margin-bottom: 1.25rem; }
.learn-hub .learn-section p strong { color: hsl(var(--fish-navy)); }
/* lists inside learn-section (not inside callout/phase/etc) */
.learn-hub .learn-section > .learn-section-inner > ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.learn-hub .learn-section > .learn-section-inner > ul > li { font-size: 1rem; line-height: 1.7; color: hsl(var(--fish-gray-700)); padding-left: 1.125rem; position: relative; }
.learn-hub .learn-section > .learn-section-inner > ul > li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
.learn-hub .learn-section > .learn-section-inner > ul > li strong { color: hsl(var(--fish-navy)); }
.learn-hub .learn-section > .learn-section-inner > ul > li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; }
.learn-hub .learn-section > .learn-section-inner > ul > li a:hover { color: hsl(var(--fish-red)); }
/* ordered list (what to throw) */
.learn-hub .learn-section ol { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; padding-left: 1.5rem; list-style: decimal; }
.learn-hub .learn-section ol li { font-size: 1rem; line-height: 1.7; color: hsl(var(--fish-gray-700)); padding-left: 0.25rem; }
.learn-hub .learn-section ol li strong { color: hsl(var(--fish-navy)); }
.learn-hub .learn-section ol li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; }
.learn-hub .learn-section ol li a:hover { color: hsl(var(--fish-red)); }
/* ── callouts ── */
.learn-hub .callout { border-radius: 0.5rem; padding: 1.125rem 1.25rem; margin: 1.5rem 0; }
.learn-hub .callout h3 { font-size: 1rem; font-weight: 700; text-transform: capitalize; letter-spacing: 0.07em; color: hsl(var(--fish-navy)); margin-bottom: 0.75rem; }
.learn-hub .callout ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.learn-hub .callout ul li { font-size: 0.9375rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); padding-left: 1rem; position: relative; }
.learn-hub .callout ul li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
.learn-hub .callout ul li strong { color: hsl(var(--fish-navy)); }
.learn-hub .callout ul li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.learn-hub .callout ul li a:hover { color: hsl(var(--fish-red)); }
.learn-hub .callout p { font-size: 0.9375rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); margin-bottom: 0; }
.learn-hub .callout p strong { color: hsl(var(--fish-navy)); }
.learn-hub .callout p a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.learn-hub .callout p a:hover { color: hsl(var(--fish-red)); }
.learn-hub .callout-key { background: hsl(var(--hub-callout-bg)); border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--fish-red)); }
.learn-hub .callout-links { background: hsl(var(--fish-navy) / 0.03); border: 1px solid hsl(var(--fish-navy) / 0.12); border-left: 3px solid hsl(var(--fish-navy)); }
.learn-hub .hub-guide-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.learn-hub .hub-guide-list li { font-size: 0.9375rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); padding-left: 1rem; position: relative; }
.learn-hub .hub-guide-list li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
.learn-hub .hub-guide-list li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.learn-hub .hub-guide-list li a:hover { color: hsl(var(--fish-red)); }
/* ── phase grid ── */
.learn-hub .phase-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .learn-hub .phase-grid { grid-template-columns: repeat(3, 1fr); } }
.learn-hub .phase-card { border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); background: hsl(var(--card)); padding: 1.25rem 1.375rem; position: relative; overflow: hidden; }
.learn-hub .phase-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, hsl(var(--fish-navy)), hsl(var(--fish-red))); }
.learn-hub .phase-card h3 { font-size: 1rem; font-weight: 800; color: hsl(var(--fish-navy)); text-transform: capitalize; letter-spacing: -0.02em; margin-bottom: 0.625rem; margin-top: 0.5rem; }
.learn-hub .phase-card p { font-size: 0.875rem; line-height: 1.65; color: hsl(var(--fish-gray-700)); margin-bottom: 0.875rem; }
.learn-hub .phase-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0; }
.learn-hub .phase-card ul li { font-size: 0.875rem; line-height: 1.6; color: hsl(var(--fish-gray-700)); padding-left: 0.875rem; position: relative; }
.learn-hub .phase-card ul li::before { content: '›'; position: absolute; left: 0; color: hsl(var(--fish-red)); font-weight: 700; }
.learn-hub .phase-card ul li strong { color: hsl(var(--fish-navy)); }
.learn-hub .phase-card ul li a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.learn-hub .phase-card ul li a:hover { color: hsl(var(--fish-red)); }
/* ── FAQ (native ) ── */
.learn-hub .faq { display: flex; flex-direction: column; margin-top: 1.5rem; border: 1px solid hsl(var(--fish-gray-200)); border-radius: 0.5rem; overflow: hidden; }
.learn-hub .faq details { border-bottom: 1px solid hsl(var(--fish-gray-200)); }
.learn-hub .faq details:last-child { border-bottom: none; }
.learn-hub .faq summary { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.125rem; font-size: 1rem; font-weight: 700; color: hsl(var(--fish-navy)); cursor: pointer; list-style: none; user-select: none; transition: background 0.15s; }
.learn-hub .faq summary::-webkit-details-marker { display: none; }
.learn-hub .faq summary::after { content: '+'; font-size: 1.25rem; font-weight: 300; color: hsl(var(--fish-gray-500)); flex-shrink: 0; margin-left: 1rem; }
.learn-hub .faq details[open] > summary { background: hsl(var(--hub-callout-bg)); }
.learn-hub .faq details[open] > summary::after { content: '\2212'; }
.learn-hub .faq details > p { padding: 0.875rem 1.125rem 1rem; font-size: 0.9375rem; line-height: 1.75; color: hsl(var(--fish-gray-700)); }
.learn-hub .faq details > p a { color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 2px; }
.learn-hub .faq details > p a:hover { color: hsl(var(--fish-red)); }
.learn-hub .faq details > p strong { color: hsl(var(--fish-navy)); }
/* ── learn-hub: merch modules ── */
.learn-hub .art-merch { border: 1px solid hsl(var(--fish-gray-200)); border-radius: 0.5rem; padding: 1.25rem; margin: 1.5rem 0; background: hsl(var(--card)); }
.learn-hub .art-merch-hd { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
@media (min-width: 640px) { .learn-hub .art-merch-hd { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.learn-hub .art-merch-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-red)); display: block; margin-bottom: 0.25rem; }
.learn-hub .art-merch-title { font-size: 0.9375rem; font-weight: 800; color: hsl(var(--fish-navy)); letter-spacing: -0.02em; }
.learn-hub .art-merch-sub { font-size: 0.75rem; color: hsl(var(--fish-gray-500)); margin-top: 0.25rem; line-height: 1.5; }
.learn-hub .art-merch-all { font-size: 0.75rem; font-weight: 600; color: hsl(var(--fish-navy)); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; flex-shrink: 0; transition: color 0.15s; }
.learn-hub .art-merch-all:hover { color: hsl(var(--fish-red)); }
.learn-hub .art-merch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .learn-hub .art-merch-grid { grid-template-columns: repeat(4, 1fr); } }
.learn-hub .art-prod { border-radius: 0.375rem; border: 1px solid hsl(var(--fish-gray-200)); padding: 0.75rem; display: flex; flex-direction: column; background: hsl(var(--background)); transition: all 0.15s; }
.learn-hub .art-prod:hover { border-color: hsl(var(--fish-gray-300)); box-shadow: var(--fish-card-shadow); }
.learn-hub .art-prod-img { height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.625rem; overflow: hidden; }
.learn-hub .art-prod-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.learn-hub .art-prod-img-ph { height: 84px; background: hsl(var(--fish-gray-100)); border-radius: 0.25rem; margin-bottom: 0.625rem; display: flex; align-items: center; justify-content: center; }
.learn-hub .art-prod-img-ph span { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: hsl(var(--fish-gray-300)); }
.learn-hub .art-prod-name { font-size: 0.6875rem; font-weight: 700; color: hsl(var(--fish-navy)); margin-bottom: 0.25rem; line-height: 1.4; flex: 1; }
.learn-hub .art-prod-var { font-size: 0.6875rem; color: hsl(var(--fish-gray-500)); margin-bottom: 0.5rem; }
.learn-hub .art-prod-btn { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.5rem; border-radius: 0.25rem; text-align: center; border: 1px solid hsl(var(--fish-navy)); color: hsl(var(--fish-navy)); transition: all 0.15s; margin-top: auto; display: block; }
.learn-hub .art-prod-btn:hover { background: hsl(var(--fish-navy)); color: white; }
.learn-hub .art-merch-footer { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.875rem; margin-top: 0.875rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 640px) { .learn-hub .art-merch-footer { flex-direction: row; align-items: center; justify-content: space-between; } }
.learn-hub .art-merch-footer-note { font-size: 0.8125rem; color: hsl(var(--fish-gray-500)); line-height: 1.5; }
.learn-hub .art-merch-footer-note strong { color: hsl(var(--fish-navy)); }
.learn-hub .btn-add-all { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border-radius: 0.375rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(135deg, hsl(var(--fish-red)) 0%, hsl(var(--fish-red-hover)) 100%); color: white !important; border: none; box-shadow: 0 2px 8px -2px hsl(var(--fish-red) / 0.4); transition: all 0.2s; white-space: nowrap; }
.learn-hub .btn-add-all:hover { box-shadow: 0 4px 16px -3px hsl(var(--fish-red) / 0.5); transform: translateY(-1px); }
.content-blog-page .text-sm { font-size: 0.875rem; }
.content-blog-page .font-bold { font-weight: 700; }
.content-blog-page .font-medium { font-weight: 500; }
.content-blog-page .uppercase { text-transform: uppercase; }
.content-blog-page .w-full { width: 100%; }
.content-blog-page .max-w-3xl { max-width: 48rem; }
.content-blog-page .relative { position: relative; }
.content-blog-page .z-10 { z-index: 10; }
.content-blog-page .space-y-2 > * + * { margin-top: 0.5rem; }
.content-blog-page .space-y-3 > * + * { margin-top: 0.75rem; }
.content-blog-page .overflow-x-auto { overflow-x: auto; }
.content-blog-page .label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--fish-navy)); }
/* ── Buyer's guide inline product callout ── */
.content-blog-page .product-callout { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.25rem; border-radius: 0.5rem; border: 1px solid hsl(var(--fish-gray-200)); border-left: 3px solid hsl(var(--fish-red)); background: hsl(var(--hub-surface)); margin: 1.5rem 0 2rem; }
.content-blog-page .product-callout-img { flex-shrink: 0; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 0.375rem; border: 1px solid hsl(var(--fish-gray-200)); overflow: hidden; }
.content-blog-page .product-callout-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.content-blog-page .product-callout-body { flex: 1; min-width: 0; }
.content-blog-page .product-callout-eyebrow { display: block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--fish-red)); margin-bottom: 0.2rem; }
.content-blog-page .product-callout-name { display: block; font-size: 0.9375rem; font-weight: 700; color: hsl(var(--fish-navy)); line-height: 1.3; margin-bottom: 0.2rem; }
.content-blog-page .product-callout-name a { color: hsl(var(--fish-navy)) !important; text-decoration: none; }
.content-blog-page .product-callout-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.content-blog-page .product-callout-sub { display: block; font-size: 0.8125rem; color: hsl(var(--fish-gray-500)); line-height: 1.4; }
@media (max-width: 540px) { .content-blog-page .product-callout { flex-wrap: wrap; } .content-blog-page .product-callout .btn-primary { width: 100%; justify-content: center; } }