/* Convert2File — hero: same on mobile & desktop */
:root{
  /* fallbacks; tokens.css already defines these */
  --c2f-g1:#00B4DB; --c2f-g2:#0083B0;
}

#hero,.hero{
  position:relative; isolation:isolate;
  overflow:visible !important;
  background:linear-gradient(135deg,var(--c2f-g1),var(--c2f-g2)) !important;
  min-height:clamp(320px,36vw,540px);
  padding-block:clamp(40px,8vw,96px) clamp(28px,5vw,64px);
}
#hero > *, .hero > *{ position:relative; z-index:1; }

/* remove old desktop-only decorations */
#hero::before,.hero::before{ content:none !important; }
.hero [class*="shape"], .hero [class*="wave"], .hero [class*="diag"],
.hero svg[aria-hidden="true"]{ display:none !important; }

/* thin diagonal stripe like mobile */
#hero::after,.hero::after{
  content:"";
  position:absolute; left:50%; bottom:-1px; width:100vw;
  height:clamp(36px,6vw,88px);
  transform:translateX(-50%) skewY(-5deg);
  transform-origin:left bottom;
  background:linear-gradient(115deg,var(--c2f-g1),var(--c2f-g2));
  pointer-events:none; z-index:0;
}

/* if the next section was clipping */
.hero + *{ overflow:visible; }


/* === HERO — unified across mobile & desktop (Convert2File) === */
#hero, .hero{
  position: relative;
  overflow: visible;
  /* Uses brand gradient variables; falls back to ocean values if missing */
  background: linear-gradient(135deg, var(--c2f-g1, #00B4DB), var(--c2f-g2, #0083B0));
  color: var(--c2f-surface, #ffffff);
}
#hero > *, .hero > *{
  position: relative;
  z-index: 1;
}
/* Kill any decorative shapes/waves used by mobile template so desktop matches */
#hero::before, .hero::before{ content: none !important; }
.hero [class*="shape"], .hero [class*="wave"], .hero [class*="diag"],
.hero svg[aria-hidden="true"]{ display: none !important; }

/* Thin diagonal stripe like mobile */
#hero::after, .hero::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 100vw;
  height: clamp(40px, 6vw, 96px);
  transform: translateX(-50%) skewY(-6deg);
  transform-origin: left bottom;
  background: linear-gradient(115deg, var(--c2f-g1, #00B4DB), var(--c2f-g2, #0083B0));
  pointer-events: none;
  z-index: 0;
}

/* Ensure next section doesn't clip the diagonal */
.hero + *{ overflow: visible; }

/* === Nav visibility rules (desktop vs mobile) === */

/* Desktop (>=1024px): show ribbon, hide hamburger */
@media (min-width:1024px){
  /* likely ribbon containers — force on */
  .c2f-site-header .c2f-tools-ribbon,
  .c2f-site-header .c2f-nav,
  nav[aria-label*="tools" i]{
    display:flex !important;
  }

  /* likely hamburger buttons — force off */
  .c2f-site-header .hamburger,
  .c2f-site-header .menu-toggle,
  .c2f-site-header .nav-toggle,
  .c2f-site-header .btn-menu,
  .c2f-site-header button[aria-label*="menu" i],
  .c2f-site-header [data-nav="toggle"]{
    display:none !important;
  }
}

/* Mobile/Tablet (<1024px): hide ribbon, show hamburger */
@media (max-width:1023.98px){
  .c2f-site-header .c2f-tools-ribbon,
  .c2f-site-header .c2f-nav,
  nav[aria-label*="tools" i]{
    display:none !important;
  }
  .c2f-site-header .hamburger,
  .c2f-site-header .menu-toggle,
  .c2f-site-header .nav-toggle,
  .c2f-site-header .btn-menu,
  .c2f-site-header button[aria-label*="menu" i],
  .c2f-site-header [data-nav="toggle"]{
    display:inline-flex !important;
  }
}
/* === Mobile nav: make hamburger toggle work === */
@media (max-width:1023.98px){
  /* Hide the wide ribbon on mobile */
  .c2f-site-header .c2f-tools-ribbon{ display:none !important; }

  /* Ensure the hamburger is visible and clickable */
  .c2f-site-header .hamburger,
  .c2f-site-header .menu-toggle,
  .c2f-site-header .nav-toggle,
  .c2f-site-header .btn-menu,
  .c2f-site-header button[aria-label*="menu" i],
  .c2f-site-header [data-nav="toggle"]{
    display:inline-flex !important;
    position:relative; z-index:1001;
  }

  /* Mobile panel is hidden by default… */
  .c2f-site-header .c2f-nav,
  .c2f-site-header [data-nav="panel"],
  .c2f-site-header nav[aria-label*="tools" i]{
    display:none;
    position:fixed; left:0; right:0;
    top:var(--nav-top,64px);
    background:var(--c2f-surface);
    border-bottom:1px solid var(--c2f-border);
    box-shadow:var(--c2f-shadow-md);
    padding:12px 16px;
    z-index:1000;
  }

  /* …but shown when “open” */
  body.nav-open .c2f-site-header .c2f-nav,
  body.nav-open .c2f-site-header [data-nav="panel"],
  body.nav-open .c2f-site-header nav[aria-label*="tools" i],
  .c2f-site-header .c2f-nav.is-open,
  .c2f-site-header [data-nav="panel"].is-open,
  .c2f-site-header nav[aria-label*="tools" i].is-open,
  .c2f-site-header .c2f-nav[data-open="true"]{
    display:block !important;
  }
}
/* Optional: full-width horizontal ribbon below brand when you add class="c2f-tools-ribbon wide" */
@media (min-width:1024px){
  .c2f-site-header .c2f-tools-ribbon.wide{
    flex-direction:row;
    flex-wrap:wrap;
    gap:16px;
    order:2;          /* push ribbon below brand in the wrap flex flow */
    width:100%;
    margin-top:8px;
    border-top:1px solid var(--c2f-border);
    padding-top:8px;
  }
}
/* === Desktop: stack the tools vertically under the brand === */
@media (min-width:1024px){
  /* Put brand and ribbon side-by-side, ribbon stacked */
  .c2f-site-header .c2f-wrap{
    display:flex;            /* ensure layout container */
    align-items:flex-start;
    gap:16px;
  }
  /* Your brand/logo block */
  .c2f-site-header .brand,
  .c2f-site-header .logo{
    flex:0 0 auto;
  }

  /* The tools ribbon: vertical list */
  .c2f-site-header .c2f-tools-ribbon{
    display:flex !important;
    flex-direction:column;    /* stack */
    align-items:flex-start;   /* left align */
    gap:8px;
    margin-top:4px;
  }

  /* Ensure items behave like blocks, not inline pills */
  .c2f-site-header .c2f-tools-ribbon a,
  .c2f-site-header .c2f-tools-ribbon button,
  .c2f-site-header .c2f-tools-ribbon li{
    display:block;
    width:max-content;
    line-height:1.2;
    padding:0;                /* keep them clean; adjust if you want bigger targets */
  }
}
/* === Convert2File: Ribbon under logo, centered, on ALL screens === */

/* 1) Stack header: brand/logo first, ribbon second */
.c2f-site-header .c2f-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* 2) Target the ribbon container (cover common class names) */
.c2f-site-header nav,
.c2f-site-header .nav,
.c2f-site-header .c2f-tools-ribbon,
.c2f-site-header .c2f-links,
.c2f-site-header .c2f-actions{
  order:2;                 /* ensure it sits below the brand */
  width:100%;
  display:flex !important; /* override any mobile-hidden styles */
  justify-content:center;  /* centered horizontally */
  align-items:center;
  flex-wrap:wrap;          /* wrap nicely on small screens */
  gap:14px;
  margin-top:4px;
}

/* 3) Make links look tidy and clickable */
.c2f-site-header .c2f-actions a,
.c2f-site-header .c2f-actions button,
.c2f-site-header nav a,
.c2f-site-header .nav a,
.c2f-site-header .c2f-tools-ribbon a,
.c2f-site-header .c2f-links a{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius: var(--c2f-radius-sm, 12px);
  text-decoration:none;
}

/* 4) Hide the hamburger everywhere */
.c2f-site-header .hamburger,
.c2f-site-header .menu-toggle,
.c2f-site-header .nav-toggle{
  display:none !important;
}

/* 5) Prevent any overflow clipping */
.c2f-site-header,
.c2f-site-header *{
  overflow:visible;
}
/* === Header layout: brand left, theme right; ribbon below (all screens) === */
.c2f-site-header .c2f-wrap{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand theme"
    "ribbon ribbon";
  align-items:center;
  gap:8px 16px;
}

/* Brand cluster (logo + wordmark) → left */
.c2f-site-header .c2f-brand,
.c2f-site-header .site-branding,
.c2f-site-header .brand,
.c2f-site-header .logo-wrap,
.c2f-site-header .site-logo{
  grid-area:brand;
  justify-self:start;
  display:flex; align-items:center; gap:10px;
}

/* Theme switch → right */
.c2f-site-header .theme-toggle,
.c2f-site-header .theme-switch,
.c2f-site-header #themeSwitch,
.c2f-site-header #themeToggle,
.c2f-site-header .mode-toggle{
  grid-area:theme;
  justify-self:end;
}

/* Ribbon (the links) → centered below */
.c2f-site-header nav,
.c2f-site-header .c2f-actions,
.c2f-site-header .c2f-links,
.c2f-site-header .c2f-tools-ribbon{
  grid-area:ribbon;
  display:flex !important;
  justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap;
}

/* Hide hamburger everywhere */
.c2f-site-header .hamburger,
.c2f-site-header .menu-toggle,
.c2f-site-header .nav-toggle{ display:none !important; }

/* Avoid clipping */
.c2f-site-header, .c2f-site-header *{ overflow:visible; }
/* === Header: brand left, theme right; ribbon centered below (all screens) === */
.c2f-site-header .c2f-wrap{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand theme"
    "ribbon ribbon";
  align-items:center;
  gap:8px 16px;
}
/* brand (logo+word) → left */
.c2f-site-header .c2f-brand,
.c2f-site-header .site-branding,
.c2f-site-header .brand,
.c2f-site-header .logo-wrap,
.c2f-site-header .site-logo{
  grid-area:brand; justify-self:start;
  display:flex; align-items:center; gap:10px;
}
/* theme slot → right */
.c2f-site-header .theme-toggle-slot{
  grid-area:theme; justify-self:end;
  display:flex; align-items:center; gap:8px;
}
/* ribbon (links) → centered below */
.c2f-site-header nav,
.c2f-site-header .c2f-actions,
.c2f-site-header .c2f-links,
.c2f-site-header .c2f-tools-ribbon{
  grid-area:ribbon !important;
  display:flex !important; justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap;
}
/* hide hamburger on desktop */
@media (min-width: 992px){
  .c2f-site-header .hamburger,
  .c2f-site-header .menu-toggle,
  .c2f-site-header .nav-toggle{ display:none !important; }
}
/* Remove theme toggle UI everywhere */
#themeToggle, .theme-toggle, .theme-switch, .mode-toggle, [data-theme-toggle],
.theme-toggle-slot { display: none !important; }

/* Header layout: brand on top, ribbon centered below */
.c2f-site-header .c2f-wrap{
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "brand"
    "ribbon" !important;
}
/* --- Theme toggle: force visible (overrides any previous "hide") --- */
#themeToggle, .theme-toggle, .theme-switch, .mode-toggle, [data-theme-toggle], .theme-toggle-slot {
  display: inline-flex !important;
}

/* --- Header grid: brand (left) + toggle (right) on top row; ribbon full-width below --- */
.c2f-site-header .c2f-wrap{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand toggle"
    "ribbon ribbon";
  align-items:center;
  gap: var(--c2f-space-4,16px);
}
.c2f-site-header .c2f-wrap > *:first-child{ grid-area: brand; }
.c2f-actions{ grid-area: ribbon; justify-content:center; }

/* --- Toggle button look --- */
#themeToggle.theme-toggle{
  grid-area: toggle;
  align-items:center; gap:8px;
  padding:8px 12px;
  border-radius: var(--c2f-radius-sm,12px);
  border:1px solid var(--c2f-border,#e5e7eb);
  background:#fff; color:#0f172a;
  box-shadow: var(--c2f-shadow-sm,0 2px 8px rgba(16,23,42,.06));
  cursor:pointer; font-weight:600;
}

/* Mobile spacing: keep ribbon a bit lower */
@media (max-width: 640px){
  .c2f-actions{ margin-top: var(--c2f-space-3,12px); }
}
/* Hide any legacy toggle duplicates */
.theme-switch, .mode-toggle, .theme-toggle-slot, [data-theme-toggle] {
  display: none !important;
}

/* Place our toggle in header top-right; ribbon stays on row below */
.c2f-site-header .c2f-wrap{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand toggle"
    "ribbon ribbon";
  align-items:center;
  gap: var(--c2f-space-4,16px);
}
.c2f-site-header .c2f-wrap > *:first-child{ grid-area: brand; }
#themeToggle{ grid-area: toggle; }

/* Button look + keep icons on one line */
#themeToggle.theme-toggle{
  display:inline-flex !important; flex-direction:row !important; align-items:center; gap:8px;
  padding:8px 12px; border-radius: var(--c2f-radius-sm,12px);
  border:1px solid var(--c2f-border,#e5e7eb);
  background:#fff; color:#0f172a; cursor:pointer; font-weight:600;
  box-shadow: var(--c2f-shadow-sm,0 2px 8px rgba(16,23,42,.06));
  white-space:nowrap;
}
#themeToggle span{ display:inline !important; line-height:1; }
/* Hide any leftover legacy theme switches (backup to JS removal) */
.theme-switch, .theme-switcher, .toggle-theme, .mode-toggle, .dark-mode-toggle,
.c2f-theme-switch, [data-theme-toggle], #theme-switch, #themeSwitch, #darkSwitch,
input[type="checkbox"][id*="theme" i], input[type="checkbox"][name*="theme" i],
label[for*="theme" i] { display:none !important; }

/* Position our single button top-right in the header grid */
.c2f-site-header .c2f-wrap{
  display:grid; grid-template-columns:1fr auto;
  grid-template-areas:"brand toggle" "ribbon ribbon";
  align-items:center; gap:16px;
}
.c2f-site-header .c2f-wrap > *:first-child{ grid-area:brand; }
#themeToggle{ grid-area:toggle; }
#themeToggle.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--c2f-border,#e5e7eb);
  background:#fff; color:#0f172a; font-weight:600; cursor:pointer;
  box-shadow:0 2px 8px rgba(16,23,42,.06); white-space:nowrap;
}
/* Kill any leftover legacy theme toggles */
.theme-switch, .theme-switcher, .toggle-theme, .mode-toggle, .dark-mode-toggle,
.c2f-theme-switch, [data-theme-toggle], #theme-switch, #themeSwitch, #darkSwitch,
input[type="checkbox"][id*="theme" i], input[type="checkbox"][name*="theme" i],
label[for*="theme" i] { display:none !important; }
/* Kill any legacy theme switches in header (keep our #themeToggle button) */
.c2f-site-header input[type="checkbox"],
.c2f-site-header label[for*="theme" i],
.c2f-site-header label[for*="dark" i],
.c2f-site-header .theme-switch,
.c2f-site-header .theme-switcher,
.c2f-site-header .toggle-theme,
.c2f-site-header .mode-toggle,
.c2f-site-header .dark-mode-toggle { display:none !important; }

/* Ensure our working toggle sits top-right */
.c2f-site-header .c2f-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#themeToggle{margin-left:auto}
/* Hide any legacy theme switches in header (keep our #themeToggle button) */
.c2f-site-header input[type="checkbox"],
.c2f-site-header label[for*="theme" i],
.c2f-site-header label[for*="dark" i],
.c2f-site-header .theme-switch,
.c2f-site-header .theme-switcher,
.c2f-site-header .toggle-theme,
.c2f-site-header .mode-toggle,
.c2f-site-header .dark-mode-toggle { display:none !important; }

/* Put the working toggle at top-right */
.c2f-site-header .c2f-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#themeToggle{margin-left:auto}
/* Hide any legacy theme switches in header (keep our #themeToggle button) */
.c2f-site-header input[type="checkbox"],
.c2f-site-header label[for*="theme" i],
.c2f-site-header label[for*="dark" i],
.c2f-site-header .theme-switch,
.c2f-site-header .theme-switcher,
.c2f-site-header .toggle-theme,
.c2f-site-header .mode-toggle,
.c2f-site-header .dark-mode-toggle { display:none !important; }

/* Put the working toggle at the top-right */
.c2f-site-header .c2f-wrap{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px
}
#themeToggle{ margin-left:auto }
/* Top-right theme button */
.c2f-site-header{ position:relative; }
#themeToggle{
  position:absolute; top:10px; right:12px; z-index:10;
  /* neutralize any flex push from earlier tweaks */
  margin-left:0 !important;
}
@media (max-width:640px){
  #themeToggle{ top:8px; right:10px; }
}
@media (min-width: 992px){
  .c2f-hamburger, .menu-toggle, .nav-toggle { display:none !important; }
}
@media (min-width: 992px){
  .c2f-hamburger, .menu-toggle, .nav-toggle { display:none !important; }
}
/* Hide stray text-only Theme pill in header, keep the JS icon toggle */
.c2f-site-header .c2f-btn-ghost{ display:none !important; }