/* ============================================================
   Fianzza Blog — fianzza.css
   Pixel-perfect design system for WordPress Astra Child Theme
   Colors: HSL values from Fin.md brand handoff
   Font: Montserrat (Google Fonts) + Space Mono
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Brand Colors */
  --color-primary: hsl(220, 80%, 45%);
  /* #1754CF */
  --color-primary-fg: hsl(220, 100%, 98%);
  /* #F5F8FF */
  --color-secondary: hsl(215, 24%, 26%);
  /* #324052 */
  --color-background: hsl(209, 40%, 96%);
  /* #F1F5F9 */
  --color-foreground: hsl(222, 47%, 11%);
  /* #0F1729 */
  --color-card: hsl(210, 40%, 98%);
  /* #F8FAFC */
  --color-muted: hsl(215, 20%, 65%);
  /* #94A3B8 */
  --color-border: hsl(212, 26%, 83%);
  /* #CBD5E1 */
  --color-ring: hsl(220, 80%, 45%);
  /* #1754CF */
  --color-success: hsl(142, 76%, 36%);
  /* #16A26E */
  --color-warning: hsl(45, 93%, 47%);
  /* #E7B008 */
  --color-destructive: hsl(0, 72%, 50%);
  /* #DB2424 */
  --color-navbar-bg: #fff;
  --color-navbar-border: hsl(212, 26%, 90%);

  /* Badge colors */
  --badge-payments-bg: hsl(220, 80%, 92%);
  --badge-payments-fg: hsl(220, 80%, 35%);
  --badge-open-bg: hsl(162, 60%, 88%);
  --badge-open-fg: hsl(162, 60%, 28%);
  --badge-embedded-bg: hsl(270, 50%, 90%);
  --badge-embedded-fg: hsl(270, 50%, 35%);
  --badge-trends-bg: hsl(45, 80%, 88%);
  --badge-trends-fg: hsl(45, 80%, 28%);

  /* Resources section */
  --resources-bg: hsl(215, 24%, 26%);
  /* #324052 */
  --resources-fg: #fff;

  /* Typography */
  --font-primary: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* Spacing */
  --spacing-unit: 4px;
  --container-max: 1265px;
  --container-pad: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.08);
  --shadow-lg: 0 1px 3px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
}

/* ============================================================
   RESET & BASE (scoped overrides for Astra compatibility)
   ============================================================ */
.fianzza-site *,
.fianzza-site *::before,
.fianzza-site *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.fianzza-site {
  font-family: var(--font-primary) !important;
  background-color: var(--color-background) !important;
  color: var(--color-foreground);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Astra body styles when fianzza-site class present */
body.fianzza-site {
  background-color: var(--color-background) !important;
  font-family: var(--font-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Global Heading Styles */
.fianzza-site h1 {
  font-family: var(--font-primary) !important;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
}

.fianzza-site h2 {
  font-family: var(--font-primary) !important;
  font-weight: 600;
  line-height: 1.2;
}

.fianzza-site h3 {
  font-family: var(--font-primary) !important;
  font-weight: 600;
  line-height: 1.3;
}

.fianzza-site h4 {
  font-family: var(--font-primary) !important;
  font-weight: 600;
  line-height: 1.4;
}

.fianzza-site p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

.fianzza-site img {
  display: block;
  max-width: 100%;
}

.fianzza-site a {
  color: inherit;
  text-decoration: none;
}

.fianzza-site button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.fz-container {
  width: 100%;
  /* Full width */
  max-width: 1265px;
  /* Figma: 1265px total page width */
  margin: 0 auto;
  padding-left: 24px;
  /* 24px padding on left side */
  padding-right: 24px;
  /* 24px padding on right side */
  box-sizing: border-box;
}

/* ============================================================
   HIDE ASTRA DEFAULT HEADER & FOOTER
   ============================================================ */
body.fianzza-site #masthead,
body.fianzza-site .ast-masthead-custom-menu-items,
body.fianzza-site .main-header-bar,
body.fianzza-site #colophon,
body.fianzza-site .ast-footer-overlay,
body.fianzza-site .footer-widget-area {
  display: none !important;
}

body.fianzza-site #page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.fianzza-site .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

body.fianzza-site #content.site-content {
  padding-top: 0 !important;
}

body.fianzza-site .ast-breadcrumbs-wrapper,
body.fianzza-site .entry-header,
body.fianzza-site .entry-meta,
body.fianzza-site .ast-post-format-image {
  display: none !important;
}

/* Force full-width layout — override Astra entry content constraints */
body.fianzza-site #primary,
body.fianzza-site #main,
body.fianzza-site .site-main,
body.fianzza-site .ast-article-single,
body.fianzza-site .ast-row,
body.fianzza-site #content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.fianzza-site .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.fianzza-site .ast-container,
body.fianzza-site .ast-separate-container .ast-article-post {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Hide Astra sidebar when it appears */
body.fianzza-site #secondary,
body.fianzza-site .widget-area,
body.fianzza-site .ast-sidebar-wrap {
  display: none !important;
}

/* Pagination list reset */
.fz-pagination ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.fz-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  border-bottom: none;
}

.fz-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 0;
  width: 100%;
  max-width: 100% !important;
  /* Take full width of the screen */
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Logo */
.fz-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 24px;
  width: 126px;
  height: 28px;
}

.fz-logo-text {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 22px;
  color: #ffffff;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  line-height: 28px;
}

.fz-logo-app {
  color: #22C55E;
  font-weight: 600;
}

/* Nav links */
.fz-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fz-nav-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-nav-link {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff !important;
  /* Pure white color */
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.fz-nav-link:hover,
.fz-nav-link:focus {
  background: none !important;
  /* No background change on hover */
  color: #ffffff !important;
  /* No color change on hover */
  text-decoration: none;
}

.fz-nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
}

.fz-dropdown-icon {
  font-size: 10px;
  margin-left: 6px;
  opacity: 0.8;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s;
}

/* Navigation dropdown containers */
.fz-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.fz-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}

.fz-nav-item:hover .fz-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.fz-dropdown-item {
  padding: 10px 20px;
  color: #0F1729 !important;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  text-align: left;
  display: block;
}

.fz-dropdown-item:hover {
  background: #F8FAFC;
  color: #1754CF !important;
}

/* Chevron rotation */
.fz-nav-item:hover .fz-dropdown-icon {
  transform: rotate(180deg);
}

/* Nav actions */
.fz-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Language switcher */
.fz-lang-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 2px;
}

.fz-lang-switcher a,
.fz-lang-btn {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
}

.fz-lang-switcher a.gt-current-lang,
.fz-lang-btn.active {
  background: #ffffff;
  color: var(--color-primary) !important;
}

/* Mobile menu language switcher overrides */
.fz-mobile-menu-drawer .fz-lang-switcher {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.fz-mobile-menu-drawer .fz-lang-switcher a {
  color: #64748B;
}

.fz-mobile-menu-drawer .fz-lang-switcher a.gt-current-lang {
  background: #ffffff;
  color: var(--color-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Buttons */
.fz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
  text-decoration: none !important;
  font-family: var(--font-primary);
}

.fz-btn:active {
  transform: scale(0.98);
}

.fz-btn-login {
  background: #ffffff;
  color: var(--color-primary) !important;
  border: 1px solid #ffffff;
}

.fz-btn-login:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--color-primary) !important;
}

.fz-btn-signup {
  background: #16A26E;
  color: #ffffff !important;
  border: 1px solid #16A26E;
}

.fz-btn-signup:hover {
  background: hsl(142, 76%, 30%);
  border-color: hsl(142, 76%, 30%);
  color: #ffffff !important;
}

/* Hamburger */
.fz-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.fz-hero-section {
  background: var(--color-background);
  /* #F1F5F9 — matches screenshot exactly */
  padding: 56px 0 48px;
  border-bottom: none;
  /* No visible divider — seamless blend */
}

.fz-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  /* #1754CF blue */
  margin-bottom: 16px;
  letter-spacing: 0.2px;
  line-height: 1;
}

.fz-hero-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  /* 48px — large bold H1 as in screenshot */
  font-weight: 700;
  color: #0F1729;
  /* Deep navy — matches screenshot */
  line-height: 1.12;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
  /* Tight tracking for large display type */
  max-width: 768px;
  /* Constrains width to exactly 768px */
}

.fz-hero-sub {
  font-size: 1rem;
  /* 16px — matches screenshot (smaller than 1.125rem) */
  color: #64748B;
  /* Slate-500 muted — matches screenshot exactly */
  line-height: 1.65;
  margin-bottom: 36px;
  font-weight: 400;
  max-width: 480px;
  /* Wraps to 2 lines as shown */
}

/* Category bar */
.fz-category-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Exact source value */
}

.fz-cat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  /* #94A3B8 — muted gray, uppercase */
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.fz-cat-pills-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  /* Keep pills and search on one line */
}

.fz-cat-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fz-cat-pill {
  padding: 8px 18px;
  /* Exact source: padding: 8px 18px */
  border-radius: var(--radius-pill);
  /* 999px full pill */
  font-size: 13px;
  /* Exact source: 13px */
  font-weight: 500;
  border: 1px solid var(--color-border);
  /* #CBD5E1 */
  background: #ffffff;
  color: var(--color-secondary);
  /* #324052 */
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-primary);
  text-decoration: none;
  display: inline-flex;
  /* inline-flex for perfect vertical centering */
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}

.fz-cat-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  text-decoration: none;
}

.fz-cat-pill.active,
.fz-cat-pill.current-cat {
  background: var(--color-primary);
  /* #1754CF filled blue */
  color: #ffffff !important;
  border-color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   SEARCH BAR — Astra-proof, pixel-perfect
   White pill input + blue circle button on right
   ============================================================ */
.fz-hero-search {
  display: flex;
  align-items: center;
  position: relative;
  width: 300px;
  /* Fixed width matching design */
  flex-shrink: 0;
}

/* Override Astra input styles completely */
body.fianzza-site .fz-hero-search input[type="text"],
body.fianzza-site .fz-search-input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 48px 0 16px !important;
  /* Right padding leaves room for the circle button */
  border: 1px solid var(--color-border) !important;
  /* #CBD5E1 light gray */
  border-radius: 999px !important;
  /* Full pill shape */
  font-size: 13px !important;
  font-family: var(--font-primary) !important;
  color: var(--color-foreground) !important;
  /* #0F1729 */
  background: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  /* No shadow in default state */
  box-sizing: border-box !important;
  /* Prevent width overflow */
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

body.fianzza-site .fz-hero-search input[type="text"]:focus,
body.fianzza-site .fz-search-input:focus {
  border-color: var(--color-primary) !important;
  /* #1754CF blue on focus */
  box-shadow: 0 0 0 2px hsl(220, 80%, 45%, 0.10) !important;
  outline: none !important;
}

body.fianzza-site .fz-hero-search input[type="text"]::placeholder,
body.fianzza-site .fz-search-input::placeholder {
  color: var(--color-muted) !important;
  /* #94A3B8 muted gray */
  font-weight: 400 !important;
  opacity: 1 !important;
  /* Firefox resets placeholder opacity to 0.54 */
}

/* Override Astra button styles completely */
body.fianzza-site .fz-hero-search button,
body.fianzza-site .fz-search-btn {
  position: absolute !important;
  right: 4px !important;
  /* 4px gap from right edge of input */
  top: 4px !important;
  /* (40px input - 32px button) / 2 = 4px */
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  /* Perfect circle */
  background: var(--color-primary) !important;
  /* #1754CF */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

body.fianzza-site .fz-hero-search button:hover,
body.fianzza-site .fz-search-btn:hover {
  background: hsl(220, 80%, 38%) !important;
}

body.fianzza-site .fz-search-btn svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   SECTION SHARED
   ============================================================ */
.fz-section {
  background: transparent;
  /* Page bg (#F1F5F9) shows through — cards are white */
  padding: 56px 0;
  /* Figma: 56px vertical padding, horizontal handled by fz-container */
}

.fz-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  /* #94A3B8 */
  margin-bottom: 16px;
}

/* ============================================================
   BADGES
   ============================================================ */
.fz-badge-featured {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--color-black-50, #00000080) !important;
  /* Semi-transparent black */
  backdrop-filter: blur(8px) !important;
  /* 8px blur backdrop */
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  z-index: 10;
}

/* ============================================================
   MOST POPULAR SECTION
   ============================================================ */
.fz-popular-grid {
  display: grid;
  grid-template-columns: 1fr 389.55px;
  column-gap: 40px;
  align-items: start;
  width: 100%;
}

/* Main large card */
.fz-popular-main-card {
  background: #F8FAFC;
  /* Figma: #F8FAFC */
  border-radius: 12px;
  /* Figma: 12px */
  border: 0.67px solid #C8D3DF;
  /* Figma: border 0.67px */
  overflow: hidden;
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.10);
  width: 100%;
  /* Fill the 1fr grid column — aligns with container edge */
  height: auto;
  min-height: 562.22px;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: box-shadow 0.2s;
  color: inherit !important;
}

.fz-popular-main-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.fz-card-img-wrap {
  position: relative;
  flex-shrink: 0;
}

.fz-main-img {
  height: 393.22px;
  /* 562.22px - 169px body = 393.22px */
  overflow: hidden;
}

.fz-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fz-card-body {
  padding: 20px 24px;
  /* Figma: 20px 24px */
  flex: 1;
  /* Fill remaining 30% of card */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fz-card-title {
  font-size: 1.5rem;
  /* 24px — Figma type scale */
  font-weight: 600;
  color: var(--color-foreground);
  /* #0F1729 */
  margin-bottom: 8px;
  line-height: 1.3;
  transition: color 0.15s;
  font-family: var(--font-primary);
}

.fz-popular-main-card:hover .fz-card-title {
  color: var(--color-primary);
}

.fz-card-excerpt {
  font-size: 1rem;
  /* 16px — Figma type scale */
  color: var(--color-muted);
  /* #94A3B8 */
  line-height: 1.7;
  margin-bottom: 12px;
  font-family: var(--font-primary);
}

.fz-card-meta {
  display: flex;
  align-items: center;
  font-size: 11px;
  /* 11px — Figma */
  color: var(--color-muted);
  /* #94A3B8 */
  font-weight: 500;
  font-family: var(--font-primary);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.fz-meta-sep {
  color: #64748B;
  margin: 0 12px;
}

/* Sidebar small cards */
.fz-popular-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Figma: Gap 16px */
  width: 389.55px;
  /* Figma: Hug 389.55px */
  height: auto;
}

.fz-popular-side-card {
  display: flex;
  gap: 12px;
  /* 12px gap between thumb and text */
  align-items: center;
  background: #F8FAFC;
  /* Figma: #F8FAFC */
  border: 0.67px solid #C8D3DF;
  /* Figma: border 0.67px */
  border-radius: 12px;
  /* Figma: Radius 12px */
  padding: 12px;
  /* Figma: Padding 12px */
  min-height: 106.33px;
  /* Figma: Height Hug 106.33px */
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none !important;
  color: inherit !important;
}

.fz-popular-side-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.fz-side-img-wrap {
  flex-shrink: 0;
  width: 80px;
  /* Figma: 80px */
  height: 60px;
  /* Matching screenshot proportions */
  border-radius: var(--radius-md);
  /* 6px */
  overflow: hidden;
  background: #E2E8F0;
}

.fz-side-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fz-side-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Slightly more breathing room */
}

/* Side badge — all badges must be the same brand blue color (#1754CF) */
.fz-side-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 2px;
  color: #1754CF !important;
  /* Fixed brand blue */
}

.fz-side-title {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-foreground);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fz-side-date {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 500;
}

/* ============================================================
   ARTICLES GRID
   ============================================================ */
.fz-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fz-article-card {
  background: #F8FAFC;
  border: 1px solid #C8D3DF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none !important;
}

.fz-article-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

.fz-article-card:hover {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.fz-art-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.fz-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fz-article-card:hover .fz-art-img {
  transform: scale(1.02);
}

.fz-art-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fz-art-title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-foreground);
  line-height: 1.35;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fz-art-excerpt {
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fz-art-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.fz-art-meta {
  font-size: 13px;
  color: #64748B;
  font-weight: 400;
}

.fz-art-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 14px;
  transition: transform 0.15s;
  text-decoration: none !important;
}

.fz-art-more:hover {
  transform: translateX(3px);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.fz-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centered to match screenshot */
  gap: 8px;
  margin-top: 36px;
}

.fz-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  /* Figma: Rounded corners */
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  /* Light gray border */
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
}

.fz-page-btn:hover,
.fz-page-btn.active,
.fz-page-btn.current {
  background: #1754CF;
  /* Brand blue filled */
  color: #ffffff !important;
  /* White text */
  border-color: #1754CF;
}

/* WP paginate_links compatibility */
.fz-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  /* Figma: Rounded corners */
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  /* Light gray border */
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
}

.fz-pagination .page-numbers:hover,
.fz-pagination .page-numbers.current {
  background: #1754CF;
  /* Brand blue filled */
  color: #ffffff !important;
  /* White text */
  border-color: #1754CF;
}

.fz-pagination .page-numbers.dots {
  background: none;
  border: none;
  color: #94A3B8;
  width: auto;
  cursor: default;
}

/* ============================================================
   RESOURCES SECTION
   ============================================================ */
.fz-resources-section {
  background: #1754CF;
  padding: 64px 0;
  margin-top: 0;
  border-top: 0.67px solid #C8D3DF;
  min-height: 522.67px;
  box-sizing: border-box;
}

.fz-resources-header {
  margin-bottom: 32px;
}

.fz-resources-title {
  font-family: var(--font-primary) !important;
  /* Montserrat */
  font-size: 24px !important;
  /* Figma: 24px */
  font-weight: 700 !important;
  /* Figma: 700 Bold */
  color: #ffffff;
  line-height: 32px !important;
  /* Figma: 32px */
  letter-spacing: -0.6px !important;
  /* Figma: -0.6px */
  vertical-align: middle;
  margin-bottom: 8px;
}

.fz-resources-sub {
  font-size: 16px;
  color: #E2E8F0;
  font-weight: 400;
  font-family: var(--font-primary);
}

.fz-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 columns in a row */
  gap: 24px;
  /* Spacing between cards */
}

@media (min-width: 1265px) {
  .fz-resource-card {
    width: 267.17px;
    /* Figma: Fixed width 267.17px on desktop */
  }

  .fz-resources-grid {
    grid-template-columns: repeat(4, 267.17px);
    justify-content: space-between;
    /* Aligns cards perfectly to the left and right container edges */
    gap: 0;
    /* Spacing is handled by justify-content */
  }
}

.fz-resource-card {
  background: #F8FAFC;
  /* Figma background */
  border-radius: 12px;
  /* Figma: Radius 12px */
  padding: 20px;
  /* Figma: Padding 20px */
  border: 0.67px solid #C8D3DF;
  /* Figma: Border 0.67px solid #C8D3DF */
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Fluid by default on tablet/mobile */
  height: 325.46px;
  /* Figma: Height 325.46px */
  box-sizing: border-box;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  text-decoration: none !important;
}

.fz-resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.fz-res-img-wrap {
  height: 180px;
  /* Adjusted height to fit perfectly in the 325.46px card */
  border-radius: 8px;
  /* Proportional inner radius */
  overflow: hidden;
  flex-shrink: 0;
}

.fz-res-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fz-resource-card:hover .fz-res-img {
  transform: scale(1.02);
}

.fz-res-body {
  padding: 16px 0 0;
  /* Gap below image */
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  box-sizing: border-box;
}

.fz-res-title {
  font-family: var(--font-primary);
  /* Montserrat */
  font-size: 16px;
  /* Figma: font-size 16px */
  font-weight: 600;
  /* Figma: SemiBold (600) */
  color: #0F1729;
  line-height: 24px;
  /* Figma: line-height 24px */
  letter-spacing: 0px;
  /* Figma: letter-spacing 0px */
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fz-res-link {
  font-family: var(--font-primary);
  /* Montserrat */
  font-size: 14px;
  /* Figma: font-size 14px */
  font-weight: 500;
  /* Figma: Medium (500) */
  color: #1754CF;
  line-height: 20px;
  /* Figma: line-height 20px */
  letter-spacing: 0px;
  /* Figma: letter-spacing 0px */
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
}

.fz-res-link:hover {
  text-decoration: underline;
  color: #1754CF !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.fz-site-footer {
  background: #F8FAFC;
  border-top: 1px solid #C8D3DF;
  padding: 40px 0 32px;
  text-align: center;
}

.fz-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fz-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fz-footer-links a {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: #475569;
  text-decoration: none;
  transition: color 0.15s;
}

.fz-footer-links a:hover {
  color: var(--color-primary);
}

.fz-footer-middle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}

.fz-footer-logo {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
}

.fz-footer-logo .fz-logo-main {
  color: #1754CF;
}

.fz-footer-logo .fz-logo-sub {
  color: #22C55E;
}

.fz-footer-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.fz-footer-lang i {
  font-size: 14px;
  color: #475569;
}

.fz-footer-copy-text {
  font-family: var(--font-primary) !important;
  /* Montserrat */
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: #94A3B8;
  margin-top: 4px;
}

/* ============================================================
   SINGLE BLOG POST PAGE STYLES
   ============================================================ */

/* Breadcrumb / Back Bar */
.fz-post-back-bar {
  background: #E7B00826;
  border-bottom: 1px solid #C8D3DF;
  padding: 16px 20px;
  /* 20px padding from both sides */
}

.fz-post-back-bar .fz-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

.fz-back-link {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fz-back-link:hover {
  color: var(--color-primary);
}

.fz-back-link strong {
  color: #0F1729;
  font-weight: 600;
}

/* Main Container spacing */
.fz-post-container {
  margin-top: 40px;
  margin-bottom: 64px;
}

/* Post Layout Grid */
.fz-post-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}

.fz-post-sidebar {
  position: sticky;
  top: 100px;
  /* Sticky offset from top of viewport */
  align-self: start;
}

/* Sidebar: Table of Contents */
.fz-toc-card {
  background: #F8FAFC;
  border: 1px solid #C8D3DF;
  border-radius: 8px;
  padding: 20px;
}

.fz-toc-title {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Ensure headings aren't hidden behind the sticky header when clicking TOC links */
.fz-post-content h2,
.fz-post-content h3,
.fz-post-content h4 {
  scroll-margin-top: 120px;
  /* Height of header + extra spacing */
}

.fz-toc-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fz-toc-links a {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: #475569;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
  display: inline-block;
}

.fz-toc-links a.active,
.fz-toc-links a:hover {
  color: #1754CF;
  font-weight: 500;
}

/* Article Main Column */
.fz-post-main {
  max-width: 850px;
}

.fz-post-category {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  color: #1754CF;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.fz-post-title {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #0F1729;
  margin-bottom: 16px;
}

.fz-post-lead {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 24px;
  font-weight: 400;
}

.fz-post-meta-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 0.67px solid #C8D3DF;
  margin-bottom: 32px;
}

.fz-post-author-info {
  font-family: var(--font-primary);
  font-size: 14px;
  color: #64748B;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.fz-post-author-info .fz-author-name {
  font-weight: 600;
  color: #0F1729;
}

.fz-post-share-icons {
  display: flex;
  gap: 12px;
  align-self: flex-end;
  /* Figma: 12px gap between icons */
}

.fz-share-btn {
  width: 40px;
  /* Figma: 40px circular button */
  height: 40px;
  /* Figma: 40px circular button */
  border-radius: 50%;
  background: #ffffff;
  border: 0.67px solid #C8D3DF;
  /* Light slate border */
  color: #64748B;
  /* Slate-500 icon color — matches screenshot */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  /* Perfect icon size balance */
  transition: border-color 0.15s, color 0.15s;
  padding: 0;
  margin: 0;
}

.fz-share-btn:hover {
  border-color: #1754CF;
  color: #1754CF;
}

/* Featured Image with Badge Overlaid */
.fz-post-featured-img {
  position: relative;
  height: 450px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}

.fz-post-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post Content Typography */
.fz-post-content p {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 24px;
  font-weight: 400;
}

.fz-post-content h2 {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #0F1729;
  margin-top: 40px;
  margin-bottom: 16px;
}

.fz-post-content h3 {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0F1729;
  margin-top: 32px;
  margin-bottom: 12px;
}

.fz-post-content ul,
.fz-post-content ol {
  margin-bottom: 24px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fz-post-content ul li,
.fz-post-content ol li {
  font-family: var(--font-primary);
  font-size: 16px;
  color: #334155;
  line-height: 1.6;
}

.fz-post-content blockquote {
  background: #EFF6FF;
  border-left: 4px solid #1754CF;
  padding: 24px;
  margin: 32px 0;
  font-family: var(--font-primary);
  font-size: 18px;
  font-style: italic;
  color: #1E3A8A;
  line-height: 1.6;
  font-weight: 500;
  border-radius: 0 8px 8px 0;
}

/* Standalone post list (for template use) */
.fz-post-list {
  margin-bottom: 24px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fz-post-list li {
  font-family: var(--font-primary);
  font-size: 16px;
  color: #334155;
  line-height: 1.6;
}

/* Blockquote Style */
.fz-post-quote {
  background: #EFF6FF;
  border-left: 4px solid #1754CF;
  padding: 24px;
  margin: 32px 0;
  font-family: var(--font-primary);
  font-size: 18px;
  font-style: italic;
  color: #1E3A8A;
  line-height: 1.6;
  font-weight: 500;
  border-radius: 0 8px 8px 0;
}

/* Call To Action Box */
.fz-post-cta {
  background: linear-gradient(180deg, #1754CF 0%, #1750C2 7%, #174BB5 14%, #1747A8 21%, #17429C 28%, #173E8F 35%, #163983 42%, #163577 50%, #15316B 57%, #142C5F 64%, #132854 71%, #122449 78%, #11203E 85%, #101B33 92%, #0F1729 100%);
  border-radius: 12px;
  padding: 32px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  /* Stack vertically */
  align-items: flex-start;
  /* Left-aligned */
  justify-content: flex-start;
  margin-top: 48px;
}

.fz-cta-content {
  flex: 1;
}

.fz-cta-title {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}

.fz-cta-sub {
  font-family: var(--font-primary);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.fz-btn-cta {
  background: #16A34A;
  color: #ffffff !important;
  width: 124px;
  height: 36px;
  box-sizing: border-box;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  font-family: var(--font-primary);
  margin-top: 16px;
  /* Offset below the content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fz-btn-cta:hover {
  opacity: 0.9;
  color: #ffffff !important;
}

/* Keep Reading Section */
.fz-keep-reading-section {
  background: #F8FAFC;
  padding: 64px 0;
  border-top: 1px solid #C8D3DF;
}

.fz-keep-reading-title {
  font-family: var(--font-primary);
  font-size: 1.875rem;
  font-weight: 700;
  color: #0F1729;
  margin-bottom: 32px;
}

/* ============================================================
   MOBILE MENU DRAWER
   ============================================================ */
.fz-mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fz-mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.fz-mobile-menu-drawer {
  position: absolute;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #ffffff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.fz-mobile-menu-overlay.open .fz-mobile-menu-drawer {
  right: 0;
}

.fz-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.fz-menu-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-foreground);
  cursor: pointer;
  padding: 4px;
}

.fz-mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
  margin-left: 0;
}

.fz-mobile-nav-item {
  display: flex;
  flex-direction: column;
}

.fz-mobile-nav-link-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid hsl(212, 26%, 90%);
  width: 100%;
}

.fz-mobile-nav-link {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-foreground);
  text-decoration: none;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.fz-mobile-dropdown-trigger {
  padding: 10px 12px;
  cursor: pointer;
  color: #64748B;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fz-mobile-sub-menu {
  list-style: none;
  padding: 8px 0 8px 16px;
  margin: 0;
  display: none;
  /* Hidden by default */
  flex-direction: column;
  gap: 12px;
  border-left: 2px solid #E2E8F0;
  margin-top: 8px;
}

.fz-mobile-sub-menu.open {
  display: flex;
}

.fz-mobile-sub-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-mobile-sub-menu li a {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #64748B;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  transition: color 0.15s;
}

.fz-mobile-sub-menu li a:hover {
  color: var(--color-primary);
}

.fz-mobile-nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

.fz-mobile-menu-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   NO RESULTS / EMPTY STATE
   ============================================================ */
.fz-no-results {
  text-align: center;
  padding: 80px 20px;
  color: var(--color-muted);
}

.fz-no-results h2 {
  font-size: 1.5rem;
  color: var(--color-foreground);
  margin-bottom: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1265px) {
  .fz-resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fz-resource-card {
    height: auto !important;
    min-height: auto !important;
  }

  .fz-popular-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    /* Added vertical gap when stacked */
    align-items: start;
    width: 100%;
  }

  .fz-popular-main-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .fz-main-img {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .fz-card-body {
    height: auto;
  }

  .fz-popular-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fz-popular-side-card {
    flex: 1 1 calc(50% - 12px);
    min-width: 240px;
  }

  .fz-card-meta {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
  }

  .fz-meta-sep {
    margin: 0 6px !important;
  }

  .fz-post-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fz-post-sidebar {
    display: none;
  }

  .fz-post-title {
    font-size: 2.25rem;
  }

  .fz-post-featured-img {
    height: 300px;
  }

  .fz-post-cta {
    flex-direction: column;
    align-items: flex-start;
    /* Left-aligned button on mobile to match screenshot */
    text-align: left;
    /* Left-aligned text on mobile to match screenshot */
    gap: 20px;
    padding: 32px 24px;
  }
}

@media (max-width: 1024px) {
  .fz-nav-links {
    display: none !important;
  }

  .fz-nav-actions {
    display: none !important;
  }

  .fz-menu-toggle {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  :root {
    --container-pad: 24px;
    /* Maintain 24px padding on mobile as requested */
  }

  .fz-hero-title {
    font-size: 28px;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }

  .fz-popular-sidebar {
    flex-direction: column;
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fz-popular-side-card {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fz-articles-grid {
    grid-template-columns: 1fr;
  }

  .fz-resources-section {
    background: #E8EFFC66 !important;
    border-top: 0.67px solid #C8D3DF !important;
    min-height: auto !important;
    height: auto !important;
  }

  .fz-resources-title {
    color: #0F1729 !important;
  }

  .fz-resources-sub {
    color: #64748B !important;
  }

  .fz-resources-grid {
    grid-template-columns: 1fr;
    /* Properly stack resources on mobile */
    row-gap: 24px;
    justify-items: center;
  }

  .fz-resource-card {
    width: 100% !important;
    max-width: 366px !important;
    height: auto !important;
    background: #F8FAFC !important;
    border: 0.67px solid #C8D3DF !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1) !important;
  }

  .fz-res-img-wrap {
    width: 100% !important;
    max-width: 324.67px !important;
    height: 243.5px !important;
    border-radius: 6px !important;
  }

  .fz-res-body {
    padding-top: 12px !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .fz-res-title {
    font-size: 15px !important;
    line-height: 20px !important;
    margin-bottom: 4px !important;
  }

  .fz-res-link {
    display: block !important;
    width: 100% !important;
    max-width: 324.67px !important;
    height: 32px !important;
    padding-top: 12px !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0px !important;
    box-sizing: border-box !important;
    color: #1754CF !important;
  }

  .fz-post-cta {
    width: 100% !important;
    max-width: 366px !important;
    height: 193.33px !important;
    border-radius: 16px !important;
    padding: 32px !important;
    background: linear-gradient(135deg, #1754CF 0%, #1750C2 7.14%, #174BB5 14.29%, #1747A8 21.43%, #17429C 28.57%, #173E8F 35.71%, #163983 42.86%, #163577 50%, #15316B 57.14%, #142C5F 64.29%, #132854 71.43%, #122449 78.57%, #11203E 85.71%, #101B33 92.86%, #0F1729 100%) !important;
    border: 0.67px solid #C8D3DF !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fz-cta-title {
    font-size: 20px !important;
    margin-bottom: 4px !important;
    line-height: 24px !important;
  }

  .fz-cta-sub {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .fz-btn-cta {
    margin-top: -12px !important;
  }

  .fz-footer-links {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .fz-cat-pills-search {
    flex-direction: column;
    /* Stack category pills and search input vertically */
    align-items: stretch;
    gap: 16px;
  }

  .fz-cat-pills {
    gap: 8px;
  }

  .fz-cat-pill {
    padding: 6px 12px;
    font-size: 12px;
  }

  .fz-hero-search {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .fz-articles-grid {
    grid-template-columns: 1fr;
  }

  .fz-popular-sidebar {
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fz-popular-main-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fz-post-title {
    font-size: 1.875rem;
  }
}