/* ==========================
   CalculatorTool - assets/style.css (v3) + HERO
   Final, complete and tested CSS — drop-in replacement.
   - Sticky footer layout
   - Slide-in mobile menu (transform-based)
   - Mobile menu hidden on desktop, shown only under 880px
   - No global link underlines; underline only in footer/.text-link
   - CTA text locked to white where necessary
   - Responsive tool grid + accessibility focus styles
   - Deduplicated, cleaned and commented
   ========================== */

/* --------------------------
   Color tokens & base
   -------------------------- */
:root{
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --accent: #2563EB;
  --accent-600: #1D4ED8;
  --border: rgba(15,23,42,0.06);
  --card-shadow: 0 10px 30px rgba(2,6,23,0.06);
  --max-width: 1200px;
  --site-header-height: 59px; /* sensible default, can be updated by JS */
}

/* --------------------------
   Reset / Layout
   -------------------------- */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensure main pushes footer down */
main { flex: 1 0 auto; }

/* Container */
.container { width: 90%; max-width: var(--max-width); margin: 0 auto; }

/* --------------------------
   MOBILE MENU: HIDE BY DEFAULT (desktop-safe)
   We create elements via JS but keep them hidden on desktop.
   -------------------------- */
/* start hidden; shown by @media rules */
.mobile-menu-backdrop,
.mobile-nav-panel {
  display: none !important;
  pointer-events: none;
  transform: translateX(100%);
}

/* --------------------------
   Links - no global underline
   -------------------------- */
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-600); text-decoration: none; outline: none; }
/* Underline only where wanted */
.site-footer a:hover,
.site-footer a:focus,
.text-link:hover,
.text-link:focus {
  text-decoration: underline;
  color: var(--accent-600);
}

/* Utility */
.muted { color: var(--muted); }

/* --------------------------
   Header
   -------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow .18s ease, background .18s ease;
}
.site-header.scrolled { box-shadow: 0 8px 30px rgba(2,6,23,0.06); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 1rem; text-decoration: none; flex: 0 0 auto; }
.logo svg { width: 28px; height: 28px; flex: 0 0 28px; color: var(--accent); }

/* Navigation (center) */
.main-nav { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
.main-nav ul { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; align-items: center; white-space: nowrap; }
.main-nav a { color: #334155; font-weight: 500; padding: 6px 6px; font-size: 0.95rem; border-radius: 8px; display: inline-block; }
.main-nav a:hover, .main-nav a:focus { background: rgba(37,99,235,0.06); color: var(--accent-600); }

/* Header actions (cta + hamburger) */
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* CTA */
.cta {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg,var(--accent),var(--accent-600));
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37,99,235,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
  color: #fff !important;
}
.cta:hover, .cta:focus { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,99,235,0.14); color: #fff !important; }
.header-actions .cta:active { color: #fff !important; }

/* Hamburger (mobile) */
.menu-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; position: relative; }

/* make the hamburger element real so pseudo elements position correctly */
.menu-toggle .hamburger {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  position: relative;
}
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .24s cubic-bezier(.4,0,.2,1), opacity .18s ease, top .18s ease;
}
.menu-toggle .hamburger::before { top: -7px; }
.menu-toggle .hamburger::after { top: 7px; }

/* --------------------------
   Main / Hero / Tool grid
   -------------------------- */
main.container { padding-top: 22px; padding-bottom: 60px; }
.hero { padding: 18px 0 8px 0; }
.hero h1 { font-size: 2rem; margin: 0 0 10px 0; color: var(--text); line-height: 1.12; }
.hero p { margin: 0 0 18px 0; color: var(--muted); max-width: 820px; }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }

.tool-card {
  display: block;
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  min-height: 96px;
  border: 1px solid rgba(2,6,23,0.04);
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: var(--card-shadow);
}
.tool-card a { text-decoration: none; color: inherit; }
.tool-card:hover, .tool-card:focus { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(2,6,23,0.07); }
.tool-card h3 { margin: 0 0 6px 0; font-size: 1.05rem; color: var(--text); }
.tool-card p { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* --------------------------
   Footer
   -------------------------- */
.site-footer {
  background: #F1F5F9;
  border-top: 1px solid rgba(2,6,23,0.03);
  color: var(--text);
  font-size: 0.95rem;
  margin-top: 48px;
  flex-shrink: 0;
}
.site-footer .footer-inner { display: flex; gap: 30px; padding: 28px 0; align-items: flex-start; justify-content: space-between; }
.site-footer .footer-col { flex: 1; min-width: 160px; }
.site-footer h4 { margin: 0 0 8px 0; font-size: 1rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.footer-bottom { border-top: 1px solid rgba(2,6,23,0.03); padding: 10px 0; font-size: 0.85rem; color: var(--muted); }

/* --------------------------
   MOBILE MENU (only visible under 880px)
   -------------------------- */
@media (max-width: 880px) {

  /* show hamburger and hide inline nav */
  .menu-toggle { display: inline-block; }
  .main-nav { display: none !important; }

  /* Backdrop: shown on mobile only */
  .mobile-menu-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 10020;
    top: var(--site-header-height);
    height: calc(100vh - var(--site-header-height));
  }
  body.mobile-menu-open .mobile-menu-backdrop { opacity: 1; pointer-events: auto; }

  /* Panel: transform-based animation for smooth in/out */
  .mobile-nav-panel {
    display: flex !important;
    position: fixed;
    top: var(--site-header-height);
    right: 0;
    height: calc(100vh - var(--site-header-height));
    width: 320px;
    max-width: 86vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 20px;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .18s ease;
    z-index: 10030;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    will-change: transform;
  }

  /* visible state */
  body.mobile-menu-open .mobile-nav-panel {
    transform: translateX(0);
    box-shadow: -8px 0 30px rgba(2,6,23,0.12);
  }

  /* ---------------------------
     MOBILE PANEL: header + close button + spacing fixes
     --------------------------- */
  .mobile-nav-panel {
    padding-top: 16px; /* give room for header */
    padding-bottom: 20px;
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px 12px 6px;
    border-bottom: 1px solid rgba(2,6,23,0.03);
  }

  .mobile-nav-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
  }

  .mobile-nav-header .logo svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent); }

  .mobile-nav-header .close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 8px;
    cursor: pointer;
    color: var(--text);
    opacity: 0.95;
  }

  .mobile-nav-header .close-btn:focus {
    outline: 3px solid rgba(37,99,235,0.12);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .mobile-nav-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:6px 0; }
  .mobile-nav-list a { display:block; padding:12px 10px; border-radius:8px; text-decoration:none; color:#0f172a; font-weight:600; }
  .mobile-nav-list a:hover, .mobile-nav-list a:focus { background: rgba(37,99,235,0.06); color: var(--accent-600); }

  .mobile-nav-panel .cta {
    margin-top: auto; /* push CTA to bottom if panel tall */
    margin-bottom: 8px;
    align-self: stretch;
    text-align: center;
    display: block;
  }

  .tool-grid { grid-template-columns: 1fr; }
  .site-footer .footer-inner { flex-direction: column; gap: 14px; padding: 18px 0; }
}

/* --------------------------
   Responsive (desktop -> tablet)
   -------------------------- */
@media (max-width: 1100px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .logo span { font-size: 0.95rem; } }

/* --------------------------
   Accessibility / small fixes
   -------------------------- */
a:focus, button:focus { outline: 3px solid rgba(37,99,235,0.12); outline-offset: 2px; border-radius: 6px; }
.main-nav ul { word-break: keep-all; overflow: hidden; text-overflow: ellipsis; }

/* end of original file content */

/* --------------------------
   Hamburger -> X animation (added, minimal)
   This block is intentionally small and only affects the .menu-toggle .hamburger visuals.
   It uses the existing HTML structure: 
   <button class="menu-toggle" id="menuToggle"><span class="hamburger"></span></button>
   and the JS toggle that sets body.mobile-menu-open
   -------------------------- */
.menu-toggle {
  /* keep existing display rules; add nicer tap area and z-index for mobile */
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 10040;
}

/* Ensure hamburger base + pseudo elements exist and are positioned for animation */
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
  /* already defined above; keep transitions consistent */
  transition: transform .24s cubic-bezier(.4,.0,.2,1), opacity .18s ease, top .18s ease;
}

/* When mobile menu is opened, animate into an X */
body.mobile-menu-open .menu-toggle .hamburger {
  transform: rotate(45deg);
}
body.mobile-menu-open .menu-toggle .hamburger::before {
  transform: rotate(-90deg);
  top: 0;
}
body.mobile-menu-open .menu-toggle .hamburger::after {
  opacity: 0;
  transform: translateX(6px);
}

/* --------------------------
   COMPLETE MOBILE-FIRST BANNER CSS
   Put this LAST in your stylesheet
   -------------------------- */

/* --- Baseline / universal --- */
.slot {
  box-sizing: border-box;
  background: #f1f4f6;
  border: 2px dashed #d0d7dc;
  border-radius: 8px;
  color: #333;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;               /* mobile-first: visible */
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  pointer-events: none;        /* så de ikke fanger klik under udvikling */
  padding: 8px;
  margin: 12px auto;
  line-height: 1;
  z-index: 999;
}

/* --- Default (mobile) --- */
/* Mobile top banner (visible by default) */
.slot-mobile-banner {
  display: flex;
  width: min(100%, 360px);
  height: 50px;
  margin-top: 12px;
  position: relative;  /* følger sidens flow */
  font-size: 14px;
}

/* Footer banner (mobile-first small) */
.slot-footer {
  display: flex;
  width: min(100%, 1000px);
  max-width: calc(100% - 40px);
  height: 60px;
  margin: 28px auto;
  font-size: 14px;
}

/* Side slots hidden by default (mobile-first) */
.slot-left,
.slot-right {
  display: none;
}

/* ------------------------------------------------
   SMALL DESKTOP (1000px — 1299px)
   show compact sidebars (160 width) and hide mobile banner
   ------------------------------------------------ */



/* ------------------------------------------------
   LARGE DESKTOP (1300px+)
   show larger sidebars (200 width) and hide mobile banner
   ------------------------------------------------ */
@media (min-width: 1700px) {

  .slot-mobile-banner { display: none; }

  .slot-left,
  .slot-right {
    display: flex;
    width: 200px;
    height: 600px;
    position: fixed;
    top: var(--site-header-height, 140px);
    pointer-events: none;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .slot-left  { left: 20px; }
  .slot-right { right: 20px; }

  .slot-footer {
    display: flex;
    height: 90px;
    max-width: 970px;
    margin: 40px auto;
  }
}

/* ------------------------------------------------
   Safety: ensure mobile behavior on small screens
   (in case other rules try to override)
   ------------------------------------------------ */
@media (max-width: 999px) {
  .slot-mobile-banner { display: flex !important; }
  .slot-footer { display: flex !important; }
  .slot-left, .slot-right { display: none !important; }
}

/* --- Slot baseline (mobile-first) --- */
.slot {
  box-sizing: border-box;
  background: #f1f4f6;
  border: 2px dashed #d0d7dc;
  border-radius: 8px;
  color: #333;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 8px;
  margin: 12px auto;
  line-height: 1;
  z-index: 999;
}

/* mobile */
.slot-mobile-banner { display:flex; width: min(100%,360px); height:50px; margin-top:12px; position:relative; }
.slot-footer { display:flex; width: min(100%,1000px); height:60px; margin:28px auto; }

/* side slots hidden on small screens */
.slot-left, .slot-right { display: none; }

/* large desktop */
@media (min-width:1700px) {
  .slot-mobile-banner { display: none !important; }

  .slot-left, .slot-right {
    display: flex;
    width: 200px;
    height: 500px;
    position: fixed;
    top: var(--site-header-height, 140px);
    pointer-events: none;
    margin: 0;
    /* left/right set via JS */
  }

  .slot-footer { height:90px; max-width:970px; display:flex; margin:40px auto; }
}

/* safety on very small screens */
@media (max-width:999px) {
  .slot-mobile-banner { display:flex !important; }
  .slot-footer { display:flex !important; }
  .slot-left, .slot-right { display:none !important; }
}

/* --------------------------
   HERO SECTION (scoped)
   - Uses .homepage-hero to avoid colliding with existing .hero rules
   -------------------------- */
.homepage-hero {
  background: linear-gradient(180deg, rgba(15,30,60,0.03), rgba(245,248,250,0.6));
  padding: 56px 20px;
  border-bottom: 1px solid rgba(20,30,40,0.03);
}

.homepage-hero .hero-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
  padding: 8px;
}

/* LEFT column */
.homepage-hero .hero-left { padding: 8px 0; }

.homepage-hero .hero-title{
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.04;
  margin: 0 0 12px 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.homepage-hero .hero-sub{
  margin: 0 0 18px 0;
  color: var(--muted);
  max-width: 60ch;
  font-size: 15px;
}

/* CTA buttons (scoped to hero) */
.homepage-hero .hero-ctas { display:flex; gap:12px; align-items:center; margin-bottom:16px; }

.homepage-hero .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}

.homepage-hero .btn:focus { outline: 3px solid rgba(15,99,255,0.12); outline-offset:3px; }

.homepage-hero .btn-primary{
  background: linear-gradient(180deg,#2f6fff,#0f62fe);
  color:#fff;
  box-shadow: 0 6px 18px rgba(47,111,255,0.12);
  border: 1px solid rgba(15,20,36,0.03);
}

.homepage-hero .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(47,111,255,0.14); }

.homepage-hero .btn-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(15,20,36,0.06);
}

/* small feature list */
.homepage-hero .hero-features{
  display:flex;
  gap:18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}

.homepage-hero .hero-features li::before{
  content: "•";
  margin-right:8px;
  color: #9aa6ff;
  font-weight:700;
}

/* RIGHT column — mini cards */
.homepage-hero .hero-right{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
}

.homepage-hero .mini-card{
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(15,20,36,0.04);
  border: 1px solid rgba(15,20,36,0.03);
}

.homepage-hero .mini-card header{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:6px;
}

.homepage-hero .mini-icon{
  width:22px;
  height:22px;
  fill:none;
  stroke:rgba(15,20,36,0.6);
  stroke-width:1.2;
}

/* Responsive for hero */
@media (max-width: 980px){
  .homepage-hero .hero-inner{ grid-template-columns: 1fr; text-align: left; }
  .homepage-hero .hero-right{ order: 2; grid-row: 2; display:flex; flex-direction:row; gap:10px; }
  .homepage-hero .mini-card{ flex:1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .homepage-hero .btn, .homepage-hero .btn-primary, .homepage-hero .btn-ghost { transition: none; transform: none; }
}

/* --------------------------
   Small utility tweaks for integration
   - Make sure hero's content width matches .container spacing on very wide screens
   -------------------------- */
@media (min-width: 1300px) {
  .homepage-hero { padding-left: calc((100% - var(--max-width))/2 + 20px); padding-right: calc((100% - var(--max-width))/2 + 20px); }
}

/* --------------------------
   FINAL SAFETY / CLEANUP
   - Ensure focus rings remain consistent
   - Small spacing fixes
   -------------------------- */
button, .btn, .cta { -webkit-tap-highlight-color: transparent; }

:focus { outline-offset: 2px; }

/* === MOBILE NAV FIX: ensure panel sits above header/slots === */
/* Put this at the end of your style.css to override earlier rules */

.mobile-menu-backdrop {
  z-index: 10020 !important; /* højere end header/slots */
}

.mobile-nav-panel {
  z-index: 10030 !important;  /* skal være højere end header og andre elementer */
  right: 0;                    /* vær sikker på den er låst til højre */
  left: auto;
  /* ensure full-height and placement */
  top: var(--site-header-height);
  height: calc(100vh - var(--site-header-height));
  will-change: transform;
}

/* Ensure the hamburger toggle is above everything while animating */
.menu-toggle { z-index: 10040 !important; }

/* prevent slots/header from appearing above menu */
.slot, .site-header { z-index: 999 !important; } /* ikke nødvendig hvis du ikke ønsker at ændre header, men sikrer hierarki */

/* End of file */

/* --------------------------
   Ensure mobile panel sits *under* the sticky header, not on top of it.
   Uses a CSS variable --site-header-height which is set by JS.
   Fallback value (59px) used if JS hasn't run yet.
   -------------------------- */
/* (variable already defined at :root) */

/* Position the panel below the header using the CSS var (redundant-safe rules) */
.mobile-nav-panel {
  top: var(--site-header-height);
  height: calc(100vh - var(--site-header-height));
}

/* When the panel is hidden keep transform as before (no change) */
/* When visible the panel will slide in from top: var(--site-header-height) */
body.mobile-menu-open .mobile-nav-panel {
  transform: translateX(0);
  box-shadow: -8px 0 30px rgba(2,6,23,0.12);
}

/* Also ensure top backdrop does not cover the header */
.mobile-menu-backdrop {
  top: var(--site-header-height);
  height: calc(100vh - var(--site-header-height));
}

/* --------------------------
   SHOW LOGO TEXT IN MOBILE PANEL
   - Ensures "TheToolHub.io" text is visible inside the mobile nav header/panel
   - Applied under 1000px to be defensive (mobile/tablet range)
   -------------------------- */
@media (max-width: 1000px) {
  /* make sure the mobile panel logo is visible and matches desktop style */
  .mobile-nav-panel .logo,
  .mobile-nav-header .logo,
  body.mobile-menu-open .mobile-nav-panel .logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
  }

  /* ensure the textual label is visible (undo any prior hide rules) */
  .mobile-nav-panel .logo span,
  .mobile-nav-header .logo span,
  body.mobile-menu-open .mobile-nav-panel .logo span,
  .mobile-nav-panel .logo strong,
  .mobile-nav-header .logo strong {
    display: inline-block !important;
    visibility: visible !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--text) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  /* Icon sizing in panel */
  .mobile-nav-panel .logo svg,
  .mobile-nav-header .logo svg,
  body.mobile-menu-open .mobile-nav-panel .logo svg {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    color: var(--accent) !important;
  }

  /* ensure spacing in header is compact */
  .mobile-nav-header { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* Accessibility: ensure focusable logo in header remains keyboard-accessible.
   We only ensure the textual label is visible inside mobile panel; the link itself remains tabbable. */
.mobile-nav-header .logo,
.mobile-nav-panel .logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

/* REMOVE close button inside mobile panel */
.mobile-nav-header .close-btn {
  display: none !important;
}

/* End of stylesheet */

/* --------------------------
   ======= ADDED: ROBUST STICKY-FOOTER FIX =======
   Place at the very end of the stylesheet. This section ensures the footer
   stays at the bottom across various page wrapper patterns without altering HTML.
   -------------------------- */

/* Ensure document fills viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Make body a column flex container (already set above but reinforce here) */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Make the main content area stretch to push footer down.
   Cover common wrapper names used across site pages. */
main,
main.container,
.container main,
.page,
.page-wrapper,
.site-inner,
.home-root,
.tools-root,
.app-root,
.content,
.main-content {
  flex: 1 0 auto !important;
  display: block;
  min-height: 0; /* prevents nested flex children from overflowing */
}

/* Footer must not shrink */
.site-footer,
.site-footer > .footer-inner,
footer,
#footer,
#footer > * {
  flex-shrink: 0 !important;
}

/* If some pages use a footer wrapper with id #footer empty, make sure it displays correctly */
#footer {
  display: block;
  width: 100%;
}

/* Safety: hero or large elements with 100vh can push footer off-screen.
   Provide a helper utility to override those where necessary. Use .full-vh-safe when needed via JS or inline.
   Not applied by default to avoid changing current 100vh behaviour. */
/* .full-vh-safe { min-height: 100vh; height: auto; } */

/* End of sticky-footer fix */


/* Sticky-footer helper: ensure footer sits at bottom reliably */

/* ensure body is a column flex container (defensive — won't hurt if already present) */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* allow main to expand and push footer down */
main, .page, .page-wrapper, .site-inner, .main-content, .content {
  flex: 1 0 auto;
  min-height: 0;
}

/* footer baseline - keep visual styles but ensure it's not shrinking */
.site-footer, footer, #siteFooter {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

/* defensive fallback: if footer is injected later keep a small spacer so page doesn't "jump" */
#siteFooter:empty {
  min-height: 10px;
}

/* Optionally tighten footer spacing if needed */
.site-footer .footer-inner { align-items:flex-start; }

/* If you use a full-height hero anywhere, prefer min-height instead of height:100vh,
   but provide a helper class to opt-in when needed:
   <section class="hero full-vh-safe">...</section>
*/
.full-vh-safe { min-height: 100vh !important; height: auto !important; }