/*
Theme Name: rr-core
Author: Em
Author URI: https://em.is-a.dev
Description: A specialized, lightweight WordPress starter theme for "Rank & Rent" lead generation sites.
Version: 1.2.0
*/

:root {
  /* Brand Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-accent: #28a745;

  /* Theme Colors (with Light Mode Defaults) */
  --color-text: #333333;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  /* For cards, headers */
  --color-border: #e9ecef;
  --color-bg-secondary: #f9f9f9;
  --color-text-muted: #666666;

  /* Typography */
}

/* Dark Mode Overrides */
[data-theme='dark'] {
  --color-bg: #0f172a;
  --color-text: #f8fafc;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-primary: #3b82f6;
  --color-bg-secondary: #1e293b;
  --color-text-muted: #cbd5e1;
}

:root {


  --font-base: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
  --font-heading: var(--font-base);
  /* Default inherits body font */

  /* Spacing */
  --spacing-unit: 8px;
  --container-width: 1200px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Global Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Thank You Page Styling */
body.page-thank-you .site-main .entry-content,
body.page-slug-thank-you .site-main .entry-content {
  max-width: 600px;
  margin: 40px auto;
  padding: 60px 40px;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  /* Soft SaaS Shadow */
  text-align: center;
  border: 1px solid var(--color-border);
}

body.page-thank-you h1.entry-title {
  display: none;
  /* Hide default title "Submission Received" if redundant with h2 */
}

/* Utilities */
/* Content Typography (AI Pipeline Ready) */
.entry-content {
  max-width: 750px;
  /* Optimal reading width ~75ch */
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-top: 1em;
  /* Reduced from 1.5em for tighter feel */
  margin-bottom: 0.5em;
  line-height: 1.2;
}

/* Global Site Title Protection (All devices) */
.site-branding h1.site-title {
  margin: 0 !important;
  font-size: 1.5rem;
  /* Default desktop size, mobile override handles smaller */
  line-height: 1;
}

/* Global Typography - Desktop/Tablet Defaults */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
}

.rr-section-heading {
  font-size: 2rem;
  text-align: center;
  /* Restore centered alignment */
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

p,
li {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 75ch;
}

/* Benefits Grid — layout consolidated in SECTION GRIDS block below */
.rr-benefit-card {
  background: var(--color-bg-secondary);
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s;
}

.rr-benefit-card:hover {
  transform: translateY(-5px);
  background: var(--color-surface);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.rr-icon-wrapper {
  color: var(--color-primary);
  margin-bottom: 20px;
}

.rr-benefit-card h3 {
  margin-top: 0;
  font-size: 1.25rem;
  margin-bottom: 15px;
}

.rr-benefit-card p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
  margin-top: 1.25em;
  font-weight: 600;
}

p {
  margin-bottom: 1.25em;
  /* Font size handled above */
}

ul,
ol {
  margin-bottom: 1em;
  padding-left: 20px;
}

li {
  margin-bottom: 0.5em;
}

blockquote {
  border-left: 4px solid var(--color-accent);
  margin: 1.5em 0;
  padding: 10px 20px;
  background: var(--color-bg-secondary);
  font-style: italic;
  color: var(--color-text-muted);
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--color-accent);
  color: white;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s;
}

@media (max-width: 768px) {
  .cta-phone-detail {
    display: none;
  }

  .header-container {
    flex-wrap: nowrap;
    /* Keep side-by-side */
    gap: 10px;
  }

  .site-title {
    font-size: 1.2rem;
    /* Slightly smaller title */
    line-height: 1.2;
  }

  .button.header-cta {
    white-space: nowrap;
    /* Prevent "Call\nNow" */
    padding: 8px 12px;
    /* Compact padding */
    font-size: 0.9rem;
  }
}

.button:hover {
  background-color: #218838;
  color: white;
  text-decoration: none;
}

/* ---------------------------------------------------------
   SITEWIDE NOTIFICATION BAR (NOTIBAR)
--------------------------------------------------------- */
.rr-notification-bar {
  background-color: #111;
  /* Default Dark */
  color: #fff;
  font-size: 0.9rem;
  padding: 10px 0;
  position: relative;
  z-index: 1001;
  /* Above Header */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  /* Ensure no scrollbars on body */
}

[data-theme='light'] .rr-notification-bar {
  background-color: #000;
}

.rr-notibar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Layout: Mask | Actions */
  gap: 15px;
  position: relative;
  max-width: 100%;
}

/* Scroll Wrapper (The Mask) */
.rr-notibar-scroll-wrapper {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-align: center;
  /* Center short text */
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* The Track (Animates) */
.rr-notibar-track {
  display: inline-block;
  /* Default: Static center (via wrapper) */
}

/* Active Marquee State (applied via JS) */
.rr-notibar-track.is-scrolling {
  padding-left: 100%;
  /* Start from far right */
  animation: rr-marquee 25s linear infinite;
  text-align: left;
  /* Reset alignment for scrolling */
}

.rr-notibar-text {
  display: inline-block;
  font-weight: 500;
}

/* Keyframes */
@keyframes rr-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Actions Group */
.rr-notibar-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  z-index: 2;
  /* Keep above scrolling text if overlap */
  background: #111;
  /* Partial bg to cover text if needed? No, mask handles it. */
}

/* Button in Bar */
.rr-notibar-btn {
  background-color: var(--color-accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.rr-notibar-btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #fff;
}

/* Close Button */
.rr-notibar-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.rr-notibar-close:hover {
  color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .rr-notibar-actions {
    gap: 10px;
  }

  .rr-notibar-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
}



/* Header */
.site-header {
  background: var(--color-surface);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
  /* Visual Separation */
}

.header-container {
  display: flex;
  justify-content: space-between;
  /* Logo Left, CTA Right */
  align-items: center;
  flex-wrap: nowrap;
  /* Prevent wrapping on desktop */
}

.site-branding {
  flex-shrink: 0;
  /* Never shrink logo */
  margin-right: 30px;
}

.site-branding .custom-logo-link img {
  max-width: 200px;
  height: auto;
  display: block;
  /* Remove inline spacing */
}

.site-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
}

.site-title a {
  color: var(--color-text);
  text-decoration: none;
}

/* Navigation */
.main-navigation {
  flex-grow: 1;
  margin: 0 20px;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
  justify-content: flex-start;
  align-items: center;
  /* Ensure vertical alignment */
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 0;
  transition: color 0.2s;
  white-space: nowrap;
  display: block;
  /* Ensure it behaves like a block for padding */
}

.main-navigation a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Dropdowns (Desktop) */
.main-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  flex-direction: column;
  gap: 0;
  z-index: 1000;
  border-radius: 4px;
  padding: 10px 0;
}

/* Hover logic moved to media query below */

.main-navigation ul ul li {
  width: 100%;
}

.main-navigation ul ul a {
  padding: 10px 20px;
  font-size: 0.95rem;
  color: var(--color-text);
}

.main-navigation ul ul a:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
}


/* Mobile Toggle */
.menu-toggle {
  display: none;
  /* Hidden on desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
  /* Push to right */
  align-self: center;
  /* Vertically center in flex container */
}

.hamburger-icon {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--color-text);
  position: relative;
  transition: background 0.3s ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--color-text);
  left: 0;
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.hamburger-icon::before {
  top: -8px;
}

.hamburger-icon::after {
  bottom: -8px;
}

/* Active State (X Shape) - Triggered by JS aria-expanded="true" */
.menu-toggle[aria-expanded="true"] .hamburger-icon {
  background: transparent;
  /* Hide middle line */
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.header-cta-wrapper {
  flex-shrink: 0;
  margin-left: 20px;
}

/* Theme Toggle Button */
.rr-theme-toggle {
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.rr-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-primary);
}

[data-theme='dark'] .rr-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Icons */
.rr-theme-toggle svg {
  display: none;
}

.rr-theme-toggle .rr-sun {
  display: none;
}

.rr-theme-toggle .rr-moon {
  display: none;
}

.rr-theme-toggle .rr-system {
  display: none;
}

/* Default (System Light) or Explicit Light */
.rr-theme-toggle .rr-sun {
  display: block;
}

/* Explicit Dark via JS override */
/* See Theme Engine JS for exact display toggle logic. 
   We rely on JS to set display:block on the correct icon. 
   But we need to ensure they have base styles. */
.rr-theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Tablet Logo Size Constraint - Extended Range */
@media (min-width: 600px) and (max-width: 1199px) {

  .site-header .site-branding .custom-logo-link img,
  .site-header .site-branding img.custom-logo,
  .site-header .custom-logo-link img,
  .site-branding img[class*="custom-logo"],
  img.custom-logo {
    max-width: 150px !important;
    width: 150px !important;
    height: auto !important;
  }
}

/* Mobile Adjustments for Toggle */
@media (max-width: 768px) {

  /* New Controls Grouping */
  .mobile-header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between Menu and Theme toggle */
    margin-left: auto;
    /* Push to the right */
    flex-shrink: 0;
    /* NEVER wrap/shrink these icons */
    order: 2;
    /* Ensure it stays after logo */
  }

  /* Reset separate toggle margins since they are now in a gap-container */
  .rr-theme-toggle {
    margin: 0;
  }

  .menu-toggle {
    margin: 0;
    display: block;
    /* Ensure visible */
  }

  /* Header Flex Logic */
  .site-header .container.header-container {
    flex-wrap: nowrap;
    /* PREVENT WRAPPING of the main row (Logo + Icons) */
    align-items: center;
    gap: 15px;
  }

  /* Logo behavior: Shrink text if needed to save space for icons */
  .site-branding {
    flex-shrink: 1;
    /* Allow shrinking */
    min-width: 0;
    /* Allow flex item to shrink below content size */
    margin-right: 0;
    /* Remove fixed margin */
  }

  /* Ensure logo image scales down if needed */
  .site-branding .custom-logo-link img,
  .site-branding img.custom-logo,
  img.custom-logo {
    max-width: 140px !important;
    /* Fixed constraint for mobile */
    width: auto !important;
    height: auto !important;
  }

  /* Hide CTA on Mobile */
  .button.header-cta {
    display: none !important;
  }

  /* Navigation Styling - MOVED OUT OF FLOW via absolute/fixed or width:100% wrapping */
  /* Since we insist on flex-wrap: nowrap for the header-container, the nav needs special handling if it was relying on wrapping. 
     However, standard navigation implementations usually become absolute positioned or remain hidden until toggled.
     Let's check the existing behavior. The existing behavior used flex-wrap: wrap for the nav. 
     To keep Logo+Icons on one line, but Nav below, we might need a structure change or absolute positioning.
     
     STRATEGY: The Header Container has Logo + Controls. 
     The Nav should be OUTSIDE this flex row if it needs to be full width below. 
     OR we allow wrapping but force individual item widths.
     
     Let's try "flex-wrap: wrap" BUT force Logo+Controls to share the first line 
     by giving them width auto and the Nav width 100%. 
  */

  .site-header .container.header-container {
    flex-wrap: wrap;
    /* Allow wrapping so Nav can go to next line */
  }

  /* 
     Fix for Issue 6: Prevent Icons dropping below Logo 
     Force Logo container to yield width to icons 
  */
  .site-branding {
    flex-grow: 1;
    /* Take up available space */
    flex-shrink: 1;
    min-width: 0;
    /* Allow shrinking below content size */
    max-width: calc(100% - 120px);
    /* Strict limit: 100% - (Icon Widths + Gap) */
  }

  /* Ensure text truncates if really long, rather than breaking layout */
  .site-branding .site-title,
  .site-branding .site-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /* proper block for ellipsis */
  }

  .mobile-header-controls {
    flex-shrink: 0;
    /* Don't shrink icons */
    margin-left: auto;
    /* Push to right */
    width: auto;
  }

  /* Navigation takes full new row */
  .main-navigation {
    width: 100%;
    order: 3;
    margin: 0;
    flex-basis: 100%;
    /* Force new line */
  }


  /* -- MOBILE NAV STYLES (Previously Orphaned) -- */

  .main-navigation ul {
    display: none;
    /* Hidden by default on mobile */
    flex-direction: column;
    background: var(--color-surface);
    width: 100%;
    gap: 0;
    margin-top: 15px;
    /* Spacing from header row */
    border-top: 1px solid var(--color-border);
    align-items: stretch;
    /* Stretch items to full width */
  }

  /* When Toggled Open */
  .main-navigation.toggled>ul {
    display: flex;
  }

  .main-navigation ul li {
    border-bottom: 1px solid var(--color-border);
  }

  /* Prevent double border on last submenu item */
  .main-navigation ul ul li:last-child {
    border-bottom: none;
  }

  .main-navigation ul li a {
    display: block;
    padding: 15px 10px;
  }

  /* Mobile Dropdowns (Indent & Toggle) */
  .main-navigation ul ul {
    position: static;
    display: none;
    /* Hidden by default on mobile */
    box-shadow: none;
    padding: 0;
    margin: 0;
    background: var(--color-bg-secondary);
  }

  /* High Specificity to override .main-navigation.toggled ul */
  .main-navigation.toggled ul ul {
    display: none;
  }

  .main-navigation.toggled ul ul.toggled-on {
    display: block;
    /* Show only when toggled */
  }

  .main-navigation ul ul a {
    padding-left: 30px;
    /* Indent sub-items */
    font-size: 0.95rem;
  }

  /* Dropdown Toggle Button (Mobile) */
  .dropdown-toggle {
    display: block;
    /* Visible on mobile */
    position: absolute;
    right: 10px;
    top: 5px;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--color-primary);
    padding: 5px 15px;
  }
}

/* END MOBILE MEDIA QUERY */


/* --- DESKTOP ADJUSTMENTS FOR NEW LAYOUT --- */
@media (min-width: 769px) {

  /* Reset Mobile Controls Wrapper to flow naturally */
  .mobile-header-controls {
    display: flex;
    /* Or block, but flex is safer for alignment */
    align-items: center;
    margin-left: 10px;
    /* Space from Logo if needed, or remove auto */
    order: 0;
    /* Reset order */
    /* It sits between Logo and Nav usually */
  }

  /* Ensure Menu Toggle is hidden (though it has .menu-toggle class which usually hides on desktop, let's be sure) */
  .mobile-header-controls .menu-toggle {
    display: none;
  }

  /* Ensure Theme Toggle is visible */
  .mobile-header-controls .rr-theme-toggle {
    display: flex;
    /* Or whatever its default was */
    margin: 0;
  }

  /* Reset Header Container Flex Behavior */
  .site-header .container.header-container {
    flex-wrap: nowrap;
    /* No wrapping on desktop */
    justify-content: space-between;
  }

  .site-branding {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 30px;
  }

  .main-navigation {
    width: auto;
    flex-basis: auto;
    order: 0;
    /* Reset */
    flex-grow: 1;
    margin: 0 20px;
  }

  .main-navigation ul {
    display: flex;
    /* Ensure it is FLEX on desktop! */
    flex-direction: row;
    border: none;
    margin-top: 0;
    width: auto;
    background: transparent;
    gap: 30px;
  }

  .main-navigation li {
    border: none;
  }

  .main-navigation a {
    padding: 10px 0;
    width: auto;
  }

  /* Restore Dropdowns */
  .main-navigation ul ul {
    display: none;
    /* Hide submenu */
    position: absolute;
    background: var(--color-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 200px;
    /* or min-width */
  }

  .main-navigation ul li:hover>ul {
    display: flex;
    /* Show on hover */
    flex-direction: column;
  }

  /* Desktop Dropdowns - Move Hover Logic Logic Here */
  .main-navigation ul li:hover>ul,
  .main-navigation ul li:focus-within>ul {
    display: flex;
  }

  /* Desktop Arrows */
  .menu-item-has-children>a {
    padding-right: 25px;
    /* Make room for arrow */
    position: relative;
  }

  .menu-item-has-children>a::after {
    content: '';
    /* Arrow Down */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-25%);
    /* Center vertically */
    border: 5px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
  }

  /* Rotate on hover? Optional */

  .dropdown-toggle {
    display: none;
    /* Hide toggle button on desktop */
  }
}


/* Footer */
.site-footer {
  background: var(--color-bg-secondary);
  padding: 60px 0 20px;
  margin-top: 50px;
  border-top: 1px solid var(--color-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

/* Footer Logo */
.footer-logo .custom-logo-link img {
  max-width: 180px;
  height: auto;
  margin-bottom: 15px;
}

.footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-navigation li {
  margin-bottom: 10px;
}

.site-info {
  text-align: center;
  border-top: 1px solid #dee2e6;
  padding-top: 20px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Footer Social */
/* Footer Social */
.footer-social {
  margin-top: 15px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  color: var(--color-text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
  transition: all 0.2s ease;
}

.footer-social a svg {
  width: 18px;
  height: 18px;
}

.footer-social a:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

/* WhatsApp Click to Chat */
.rr-whatsapp-btn {
  position: fixed;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
  text-decoration: none;
}

/* Icon Only */
/* Icon Only */
.rr-whatsapp-btn.rr-wa-style-icon,
.rr-whatsapp-btn.rr-wa-style-round {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* With Text */
/* With Text (Pill Style) */
.rr-whatsapp-btn.rr-wa-style-pill {
  padding: 10px 20px;
  border-radius: 50px;
  width: auto;
  height: auto;
  gap: 8px;
  /* Add gap for spacing */
}

.rr-whatsapp-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.rr-wa-style-pill svg {
  margin-right: 0;
  /* Gap handles this now */
  width: 24px;
  height: 24px;
}

.rr-wa-text {
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}

/* Positioning */
.rr-wa-pos-bottom-right {
  right: 20px;
}

.rr-wa-pos-bottom-left {
  left: 20px;
}

/* Hover Effect */
.rr-whatsapp-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-decoration: none !important;
  /* Force no underline */
}

@media (max-width: 768px) {
  .rr-whatsapp-btn.rr-wa-style-icon {
    width: 50px;
    height: 50px;
    bottom: 15px;
  }

  .rr-wa-pos-bottom-right {
    right: 15px;
  }

  .rr-wa-pos-bottom-left {
    left: 15px;
  }
}

/* Service Location Lead Form */
.rr-core-lead-form .form-group {
  margin-bottom: 15px;
}

.rr-core-lead-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--color-text);
}

.rr-core-lead-form input[type="text"],
.rr-core-lead-form input[type="tel"],
.rr-core-lead-form input[type="email"],
.rr-core-lead-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  /* Fix width issues */
}

.rr-core-lead-form input:focus,
.rr-core-lead-form textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.rr-core-lead-form .btn-submit {
  width: 100%;
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-transform: uppercase;
}

.rr-core-lead-form .btn-submit:hover {
  filter: brightness(110%);
  transform: translateY(-1px);
}

/* =========================================
   Mobile Sticky Bar
   ========================================= */
/* =========================================
   Mobile Sticky Bar (Modern)
   ========================================= */
.rr-mobile-sticky {
  display: none;
  /* Hidden on Desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  /* Glassmorphism / Modern Base */
  background: var(--color-surface);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: 10px 15px;
  /* Add padding around buttons */
  box-sizing: border-box;
  gap: 10px;
  /* Space between buttons */
  align-items: center;
  justify-content: center;
}

.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  /* Slightly more compact height */
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff !important;
  text-transform: uppercase;
  font-family: var(--font-heading);
  border-radius: 8px;
  /* Rounded corners */
  transition: transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sticky-btn:hover,
.sticky-btn:focus,
.sticky-btn:active {
  text-decoration: none !important;
  color: #ffffff !important;
}

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

.sticky-btn .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* Call Button - Default Color (Overridden inline) */
/* 70% Width */
/* Call Button - Default Color (Overridden inline) */
/* 70% Width */
.sticky-call {
  background-color: var(--color-accent, #28a745);
  flex: 7;
  /* Robust 70% */
}

/* WA Button - Default Color (Overridden inline) */
/* 30% Width */
.sticky-wa {
  background-color: var(--color-primary, #007bff);
  flex: 3;
  /* Robust 30% */
  font-size: 14px;
  /* Slightly smaller text to fit "Chat" if needed */
  padding: 0 5px;
}

/* Show only on Mobile */
@media (max-width: 768px) {
  .rr-mobile-sticky {
    display: flex;
  }

  /* Push body up so content isn't covered by the bar (height ~70px with padding) */
  /* body { padding-bottom: 80px; } - Removed per user request to fix spacing */

  /* 1. HIDE Header CTA on Mobile (User Request) */
  .button.header-cta {
    display: none !important;
  }

  /* 2. HIDE Floating WhatsApp on Mobile (User Request) */
  .rr-whatsapp-btn {
    display: none !important;
  }
}

/* =========================================
   FAQ Accordion Styles
   ========================================= */
.rr-faq-section {
  margin: 2rem 0;
}

.rr-faq-item {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

/* Remove border/margin from the last item to fix "redundant space" */
.rr-faq-item:last-of-type {
  border-bottom: none;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.rr-faq-item summary {
  color: var(--color-text) !important;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-size: 1.1rem;
}

.rr-faq-item summary::-webkit-details-marker {
  display: none;
}

.rr-faq-answer {
  padding-top: 10px;
  color: var(--color-text-muted);
}

/* Custom indicator (optional, but good for UX) */
.rr-faq-item summary::-webkit-details-marker {
  display: none;
}

.rr-faq-item summary::after {
  content: '+';
  font-weight: bold;
}

.rr-faq-item[open] summary::after {
  content: '-';
}

/* =========================================
   Task 22: High-Conversion Hero (Split)
   ========================================= */


/* On Desktop, Grid is inline style, but let's reinforce or add responsive overrides */

@media (max-width: 900px) {

  /* Stack Grid on Tablets/Mobile */
  .rr-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .rr-hero-content {
    text-align: center;
    padding-bottom: 20px;

    /* 
      STACKING ORDER REFINEMENT (Task 25 Refinement 4)
      Goal: Text (Top) -> Image (Middle) -> Form (Bottom)
    */
    display: flex;
    flex-direction: column;
  }

  /* 1. Text Elements First */
  .rr-hero-content h1,
  .rr-hero-content .rr-hero-sub,
  .rr-hero-content .rr-hero-cta {
    order: 1;
  }

  /* 2. Image Second (Moved via Order) */
  .rr-hero-image {
    order: 2;
    margin-top: 20px;
    margin-bottom: 20px !important;
  }

  .rr-hero-content h1 {
    font-size: 2rem !important;
  }

  /* Form Container on Mobile */
  .rr-hero-form .lead-form-wrapper {
    padding: 20px !important;
    /* Smaller padding */
    margin-top: 0 !important;
  }
}

/* =========================================
   Task 27: Persuasion Blocks CSS
   ========================================= */

/* 1. Process Bar — layout consolidated in SECTION GRIDS block below */

/* Page Hero (Featured Image Header) */
.rr-hero-page {
  position: relative;
  background-size: cover;
  background-position: center;
  /* Reduced min-height per request */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  width: 100%;
}

.rr-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Darker Overlay for better text contrast */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.rr-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px;
}

.rr-hero-title {
  color: #ffffff !important;
  /* Force white text */
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.rr-step-icon {
  width: 60px;
  height: 60px;
  background: #f0f0f0;
  border-radius: 50%;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

/* Optional: Connectors (Desktop only) */
@media (min-width: 769px) {
  .rr-process-step {
    position: relative;
  }

  /* Add Arrow to first 2 steps */
  .rr-process-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 20px;
    right: -15px;
    font-size: 24px;
    color: #ddd;
    font-weight: bold;
    transform: translateX(50%);
  }
}

/* 2. Main Content + Sticky Sidebar Layout */
.rr-page-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
}

/* Sticky Sidebar - Refined */
.rr-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  height: fit-content;
  /* Helps, but align-self is key in Grid */
  align-self: start;
  /* CRITICAL: Prevents sidebar from stretching to full height of row */
  z-index: 99;
}

/* Mobile Stack for Sidebar */
@media (max-width: 900px) {
  .rr-page-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Move Sidebar below content */
  .rr-sidebar {
    order: 2;
    /* Sidebar follows content */
    /* Sticky allowed on mobile if desired */
  }

  .rr-main-content {
    order: 1;
  }
}

/* Sidebar Widgets */
.rr-widget h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.25rem;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 10px;
  display: inline-block;
}

.rr-check-list li {
  font-size: 0.95rem;
  margin-bottom: 12px;
}

/* 3. Testimonials — layout consolidated in SECTION GRIDS block below */
.rr-review-card {
  background: var(--color-bg-secondary);
  padding: 30px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 30px;
}

.rr-stars {
  letter-spacing: 2px;
}

.rr-review-card::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: -10px;
  left: 10px;
  color: #e0e0e0;
  font-family: serif;
  z-index: 0;
}

.rr-review-card blockquote {
  background: transparent;
  border: none;
  padding: 0;
  margin: 10px 0 20px;
  position: relative;
  z-index: 1;
}

/* 
=========================================
Global Button Hover Effect (Lift & Glow)
========================================= 
*/
.rr-hover-btn {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.rr-hover-btn:hover {
  transform: translateY(-3px);
  filter: brightness(115%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* =========================================
   Task 30: Portfolio Template Styles
   ========================================= */

/* Hero */
.rr-portfolio-hero {
  background: var(--color-surface);
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 40px;
  text-align: center;
}

.rr-portfolio-hero .entry-title {
  font-size: 2.5rem;
  color: var(--color-text);
  margin-bottom: 0.5em;
}

.rr-portfolio-hero .archive-description {
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* Portfolio Gallery Overrides */
/* Target the WordPress Block Gallery specifically inside our portfolio content */
.rr-portfolio-content .wp-block-gallery {
  gap: 20px !important;
}

.rr-portfolio-content .wp-block-image {
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.rr-portfolio-content .wp-block-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Zoom effect on image itself */
.rr-portfolio-content .wp-block-image img {
  transition: transform 0.5s ease;
  width: 100%;
  display: block;
  /* Remove bottom gap */
}

.rr-portfolio-content .wp-block-image:hover img {
  transform: scale(1.05);
}

/* Dark Mode Adjustments */
[data-theme='dark'] .rr-portfolio-hero {
  border-bottom-color: var(--color-border);
}

[data-theme='dark'] .rr-portfolio-content .wp-block-image {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .rr-portfolio-content .wp-block-image:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* =========================================
   Task 31: Native Lightbox Styles
   ========================================= */
#rr-lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  justify-content: center;
  align-items: center;
  display: none;
  /* Managed by JS */
}

.rr-lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.rr-lightbox-content {
  position: relative;
  z-index: 100001;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rr-lightbox-content img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: rrFadeIn 0.3s ease;
}

.rr-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100002;
  padding: 0;
  line-height: 1;
}

.rr-lightbox-close:hover {
  color: var(--color-primary);
}

@keyframes rrFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================
   Partner Page SaaS Hero
   ========================================= */
.rr-partner-hero {
  padding: 100px 0 250px;
  /* Extra bottom padding to clear the -150px image overlap */
  position: relative;
  z-index: 10;
  /* Keep content relatable */
}

@media (max-width: 768px) {
  .rr-partner-hero {
    padding: 80px 0 80px;
    /* Standard padding on mobile where image stacks */
  }
}

.hero-browser-mockup {
  max-width: 1000px;
  /* Pull it UP significantly to overlap 50/50 */
  margin: -150px auto 60px;
  background: #ffffff;
  /* White frame */
  border-radius: 12px;
  /* Deep, floating shadow */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 50;
  /* Ensure it stays on top */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Fake Browser Bar */
.hero-browser-mockup::before {
  content: "";
  display: block;
  height: 34px;
  background: #f1f5f9;
  /* Light grey bar */
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
  width: 100%;
}

/* The 3 Browser Dots */
.hero-browser-mockup::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f56;
  /* Red */
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  /* Yellow, Green */
  z-index: 51;
}

.hero-browser-mockup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 768px) {
  .hero-browser-mockup {
    margin: 0 auto 40px;
    /* Stack normally */
    width: 90%;
    margin-top: -40px;
    overflow: hidden;
    /* Clip the cropped image */
  }

  .hero-browser-mockup img {
    width: 100%;
    height: 280px;
    /* Fixed height to zoom in */
    object-fit: cover;
    object-position: top left;
    /* Crop to show Date, Name, Service Request columns */
    border-radius: 0 0 12px 12px;
  }
}

/* =========================================
   Footer Bottom Bar Improvements (Task 34)
   ========================================= */

.footer-bottom-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* --- SECTION GRIDS (Process, Benefits, Testimonials, Blog) --- */
/* Single source of truth for these grids (duplicates above were removed). */
/* Mobile default (<600px): auto-fit collapses to 1 column */
.rr-process-grid,
.rr-testimonial-grid,
.rr-blog-grid,
.rr-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.rr-process-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  text-align: center;
}

/* Tablet Override: Force 3 columns to prevent orphans
   Range extended to 600px to catch smaller tablets
   Gap reduced to 20px to ensure they fit */
@media (min-width: 600px) and (max-width: 1024px) {

  .rr-process-grid,
  .rr-benefits-grid,
  .rr-testimonial-grid,
  .rr-blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Desktop (>1024px): also force 3 columns. Without this, 1025-1120px
   viewports fall back to auto-fit and orphan the third card (2+1). */
@media (min-width: 1025px) {

  .rr-process-grid,
  .rr-benefits-grid,
  .rr-testimonial-grid,
  .rr-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- TRUST BAR (Hero) --- */
.rr-trust-bar {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: 15px 0;
}

.rr-trust-bar .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.rr-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Mobile Override: Horizontal One-Liner */
@media (max-width: 768px) {
  .rr-trust-bar {
    padding: 10px 0;
  }

  .rr-trust-bar .container {
    flex-wrap: nowrap !important;
    /* Force one line */
    gap: 8px !important;
    /* Tighter spacing */
    justify-content: space-evenly !important;
    /* Spread out evenly if possible, or center */
    padding: 0 5px;
  }

  .rr-trust-item {
    font-size: 10px !important;
    /* Small text to fit */
    gap: 4px !important;
    white-space: nowrap !important;
    /* Keep text together */
  }

  .rr-trust-item svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* iPhone 11 / iPhone XR Fix (414px width) - Reduce trust bar text by 1px */
@media (max-width: 414px) {
  .rr-trust-item {
    font-size: 9px !important;
  }
}

/* FAQ Section Override: Left Align Heading */
.rr-faq-section .rr-section-heading {
  text-align: left !important;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: underline;
  /* Always show underline for accessibility */
  font-size: 11px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-legal-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-legal-links .sep {
  opacity: 0.5;
  margin: 0 5px;
  font-size: 11px;
}

@media (max-width: 768px) {
  .footer-bottom-flex {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-copyright {
    order: 1;
    margin-bottom: 5px;
    font-size: clamp(10px, 4vw, 13px);
    /* Dynamic scaling */
    line-height: 1.3;
    text-wrap: balance;
    /* Try to keep "All rights reserved" together */
    width: 100%;
  }

  /* Standardized Section Headings */
  .rr-section-heading {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.2;
  }

  @media (max-width: 768px) {
    .rr-section-heading {
      font-size: 1.5rem;
      /* Smaller on mobile */
      margin-bottom: 30px;
    }
  }

  .footer-legal-links {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    /* Minimized gap */
    line-height: 1.5;
  }

  .footer-legal-links a {
    font-size: 10px !important;
    /* Smaller size */
    padding: 0 3px;
    white-space: nowrap;
    /* Try to keep individual links together */
  }

  .footer-legal-links .sep {
    margin: 0;
    /* Minimal separator spacing */
    font-size: 10px !important;
  }

  /* Hide pipes on mobile if wrapping, or keep them small */
  /* .footer-legal-links .sep { display: none; } - Restored per user request */
}

/* --- GLOBAL MOBILE/TABLET TYPOGRAPHY OVERRIDES --- */
@media (max-width: 1024px) {

  /* H1: Standardize Main Titles & Page Titles */
  h1,
  .entry-title,
  .page-title {
    font-size: 1.75rem !important;
    line-height: 1.2;
    margin-top: 20px;
    margin-bottom: 15px;
  }

  /* H2: Section Headings (About, Services, Testimonials) */
  h2,
  .rr-section-heading {
    font-size: 1.5rem !important;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  /* H3: Widget Titles, Cards, Subsections */
  h3,
  .widget-title {
    font-size: 1.25rem !important;
    margin-bottom: 15px;
  }

  /* Standard Body Text & List Items */
  body,
  p,
  li,
  .entry-content p,
  .rr-benefit-card p {
    font-size: 1rem !important;
    line-height: 1.6;
  }

  /* Buttons should arguably be readable too */
  .button,
  button,
  input[type="submit"] {
    font-size: 1rem !important;
  }

  /* Hero Title - Slight bump for visual hierarchy */
  .hero-content h1 {
    font-size: 2rem !important;
  }

  /* --- FIX: Reset Header Title Layout --- */
  /* Global H1 rules broke the header alignment. Resetting specifically for site title. */
  .site-branding h1.site-title {
    margin: 0 !important;
    font-size: 1.4rem !important;
    /* Compact to fit with icons */
    line-height: 1.1;
  }

  /* --- FIX: Prevent Header Wrapping on Mobile --- */
  .header-container {
    flex-wrap: nowrap !important;
  }

  .site-branding {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    /* Allow flex child to shrink past content size */
    overflow: hidden;
    margin-right: 10px !important;
  }

  .site-branding .site-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .mobile-header-controls {
    flex-shrink: 0;
    /* Never squish the buttons */
    white-space: nowrap;
    display: flex;
    gap: 5px;
  }
}

/* Mobile/Tablet Header Fix: Flexbox Centering (Kampala Pest Control Style) */
@media (max-width: 1024px) {

  /* FLEXBOX ROW - Logo left, Icons right, VERTICALLY CENTERED */
  body .site-header .header-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* CENTER vertically */
    width: 100% !important;
    padding: 12px 15px !important;
    gap: 10px !important;
    min-height: 50px !important;
    /* Explicit height for centering */
  }

  /* Logo - just needs to be inline, no special sizing */
  .site-branding {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    /* Center text vertically */
  }

  /* Title styling - inline block, no margins */
  .site-branding .site-title,
  .site-branding .site-title a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(16px, 5vw, 20px) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  /* Icons Container - SAME ROW, center aligned */
  .mobile-header-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* CENTER vertically */
    gap: 12px;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menu Toggle - icon button */
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    line-height: 0 !important;
    overflow: hidden;
  }

  /* HAMBURGER ICON STYLING - Using theme colors for dark mode */
  .menu-toggle .hamburger-icon {
    display: block !important;
    position: relative;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    /* Theme-aware color */
    transition: background 0.2s;
    border-radius: 2px;
    margin: 0 !important;
  }

  .menu-toggle .hamburger-icon::before,
  .menu-toggle .hamburger-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-text);
    /* Theme-aware color */
    transition: transform 0.3s, top 0.3s, bottom 0.3s;
    border-radius: 2px;
    left: 0;
  }

  .menu-toggle .hamburger-icon::before {
    top: -7px;
  }

  .menu-toggle .hamburger-icon::after {
    bottom: -7px;
    top: auto;
  }

  /* ACTIVE STATE (X Icon) */
  .menu-toggle[aria-expanded="true"] .hamburger-icon {
    background: transparent !important;
  }

  .menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
  }

  /* =========================================
     MOBILE MENU DROPDOWN - Full Width Below Header
     ========================================= */

  /* Position relative on header to anchor the dropdown */
  .site-header {
    position: relative !important;
  }

  .main-navigation {
    display: none;
    position: absolute !important;
    top: 100% !important;
    /* Position below header */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border, rgba(128, 128, 128, 0.2));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }

  /* Show when toggled */
  .main-navigation.toggled,
  .main-navigation.open,
  .site-header.toggled .main-navigation {
    display: block !important;
    animation: slideDown 0.3s ease-out forwards;
  }

  .main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .main-navigation ul li {
    border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.15));
    margin: 0;
  }

  .main-navigation ul li:last-child {
    border-bottom: none;
  }

  .main-navigation ul li a {
    display: block;
    padding: 18px 20px;
    /* Slightly more padding like reference */
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    /* Ensure left alignment */
  }

  .main-navigation ul li a:hover {
    background: var(--color-bg-secondary, rgba(128, 128, 128, 0.1));
    color: var(--color-primary);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* End Mobile Header Fix */

/* ---------------------------------------------------------
   SIDEBAR SILO - MOBILE HIDE
   Hide the Topic Silo widget on mobile to keep sidebar compact.
   The links are still in the DOM for SEO (Googlebot sees them).
--------------------------------------------------------- */
@media (max-width: 768px) {
  .rr-silo-widget {
    display: none;
  }
}