/*
Theme Name: ModBiz
Author: ModBiz
Description: ModBiz marketing site theme (ACF-first, templates-first).
Version: 1.0
Text Domain: modbiz
*/

/* ==========================================================================
   ModBiz v1 Global Styles (tokens-first)
   Everything consumes CSS variables only.
   Tokens are injected via PHP (wp_add_inline_style) into :root + html[data-theme="dark"].
   This file assumes those variables exist.
   ========================================================================== */

/* ----------------------------
   1) Resets and base defaults
---------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-rendering: geometricPrecision;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--brand-text);
  text-decoration: none;
  text-underline-offset: 0.14em;
}

a:hover { color: var(--text); text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection { background: var(--brand-soft); }

/* Focus ring (locked, not editable) */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ----------------------------
   2) Layout primitives (CSS only, no tokens in v1)
   These are structural, not themeable.
---------------------------- */

.container {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.stack > * + * { margin-top: 16px; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grid {
  display: grid;
  gap: 16px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

/* ----------------------------
   3) Typography system (tokenised, no ad-hoc sizes)
---------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text);
}

p { margin: 0; color: var(--text-secondary); }

small { font-size: var(--text-ui-s); color: var(--text-muted); }

strong { font-weight: 600; color: var(--text); }

/* Display (Space Grotesk) */
.t-display-l,
.t-display-m,
.t-display-s {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--text);
}

.t-display-l { font-size: var(--text-display-l); font-weight: 600; }
.t-display-m { font-size: var(--text-display-m); font-weight: 600; }
.t-display-s { font-size: var(--text-display-s); font-weight: 500; }

/* Headings (Manrope) */
.t-h-l,
.t-h-m,
.t-h-s {
  font-family: var(--font-ui);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text);
  font-weight: 600;
}

.t-h-l { font-size: var(--text-h-l); }
.t-h-m { font-size: var(--text-h-m); }
.t-h-s { font-size: var(--text-h-s); }

/* Body */
.t-body { font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-secondary); }

/* Small UI */
.t-ui-m { font-size: var(--text-ui-m); line-height: 1.4; color: var(--text-secondary); }
.t-ui-s { font-size: var(--text-ui-s); line-height: 1.35; color: var(--text-muted); }

/* Labels */
.label {
  font-size: var(--text-ui-s);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
}

/* Numbers do not jump */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Links as buttons or inline actions */
.link {
  color: var(--brand-text);
  font-weight: 600;
}
.link:hover { color: var(--text); }

/* ----------------------------
   4) Surfaces and borders
---------------------------- */

.surface {
  background: var(--surface-1);
  border: 1px solid var(--border);
}

.surface-2 {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }

/* Badges and state chips (global roles only) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-ui-s);
  line-height: 1.2;
}

.badge--brand {
  background: var(--brand-soft);
  border-color: var(--border);
  color: var(--brand-text);
}

.badge--danger { background: var(--danger-soft); color: var(--danger-text); border-color: var(--border); }
.badge--warning { background: var(--warning-soft); color: var(--warning-text); border-color: var(--border); }
.badge--caution { background: var(--caution-soft); color: var(--text); border-color: var(--border); }

/* ----------------------------
   5) Buttons (CSS only, not tokenised per-component)
---------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-ui-m);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.btn:hover {
  text-decoration: none;
  background: var(--surface-1);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  border-color: transparent;
  background: var(--brand);
  color: #0C0C0F;
}

html[data-theme="dark"] .btn-primary { color: #0C0C0F; }

.btn-primary:hover {
  background: var(--brand);
  filter: brightness(0.95);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover { background: var(--surface-1); }

.btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--brand-text);
  font-weight: 600;
}

.btn-link:hover { color: var(--text); text-decoration: underline; }

/* ----------------------------
   6) Forms (marketing safe defaults)
---------------------------- */

.field { display: grid; gap: 8px; }

.input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-body);
  line-height: 1.3;
}

.input::placeholder,
textarea::placeholder { color: var(--text-muted); }

.input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--brand);
}

/* ----------------------------
   7) Header and nav (expects your existing markup classes)
---------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Base nav link typography */
.site-nav a {
  color: var(--text-secondary);
  font-size: var(--text-ui-m);
  font-weight: 600;
  text-decoration: none;
}

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

/* -------------------------------------------------
   Bulletproof WP menu styling (works regardless of classes)
------------------------------------------------- */

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 18px;
}

.site-nav li {
  margin: 0;
  padding: 0;
  position: relative; /* anchor for dropdown */
}

.site-nav li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
}

.site-nav li > a:hover {
  background: var(--surface-1);
}

/* Dropdown (nested ul) */
.site-nav ul ul {
  list-style: none;
  margin: 0;
  padding: 8px;

  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;

  display: none;
  z-index: 60;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.site-nav ul ul li {
  margin: 0;
}

.site-nav ul ul a {
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.site-nav ul ul a:hover {
  background: var(--surface-1);
  color: var(--text);
}

/* Show dropdown on hover + keyboard focus */
.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
  display: block;
}

/* Active states */
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
  color: var(--text);
}

/* -------------------------------------------------
   Optional: class-based styling (kept for clarity)
   If wp_nav_menu outputs .menu-primary / .sub-menu, this aligns too.
------------------------------------------------- */

.menu-primary {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 18px;
}

.menu-primary > li {
  margin: 0;
  padding: 0;
  position: relative;
}

.menu-primary a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.menu-primary > li > a:hover {
  background: var(--surface-1);
}

.menu-primary .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px;

  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;

  display: none;
  z-index: 60;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.menu-primary > li:hover > .sub-menu,
.menu-primary > li:focus-within > .sub-menu {
  display: block;
}


/* Header Logo */

.header-logo-img { display: none; height: auto; }

/* Theme-based logo swap */
html[data-theme="dark"]  .header-logo-img.header-logo--dark  { display: block; }
html[data-theme="dark"]  .header-logo-img.header-logo--light { display: none; }

html[data-theme="light"] .header-logo-img.header-logo--light { display: block; }
html[data-theme="light"] .header-logo-img.header-logo--dark  { display: none; }

/* Fallback */
html:not([data-theme]) .header-logo-img.header-logo--dark { display: block; }


/* Current menu item */
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
  color: var(--text);
  text-decoration: none;
}



.site-header__cta { display: inline-flex; align-items: center; gap: 10px; }

/* Announcement bar (optional) */
.announce {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.announce__inner {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.announce__text {
  font-size: var(--text-ui-m);
  color: var(--text-secondary);
}

/* ----------------------------
   8) Footer (6-col grid incl brand)
---------------------------- */

.site-footer {
  margin-top: 64px;
  padding: 40px 0;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
}

.footer-inner { width: 100%; }

.footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 12px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-logo-img {
  max-width: 140px;
  height: auto;
  display: none;
}

/* Default: hide both until theme decides */
.footer-logo-img { display: none; }

/* Show the correct logo based on data-theme on <html> */
html[data-theme="dark"]  .footer-logo-img.footer-logo--dark  { display: block; }
html[data-theme="dark"]  .footer-logo-img.footer-logo--light { display: none; }

html[data-theme="light"] .footer-logo-img.footer-logo--light { display: block; }
html[data-theme="light"] .footer-logo-img.footer-logo--dark  { display: none; }

/* Fallback if data-theme isn’t present */
html:not([data-theme]) .footer-logo-img.footer-logo--dark { display: block; }

.footer-logo-text {
  color: var(--text);
  font-weight: 600;
}

.footer-blurb {
  margin: 0;
  color: var(--text-secondary);
  max-width: 32ch;
}

/* Footer column heading */
.footer-heading {
  margin: 0 0 12px;
  font-size: var(--text-ui-m);
  font-weight: 600;
  color: var(--text);
}

/* Footer menu list */
.site-footer .menu-footer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Footer links — EXPLICIT SIZE */
.site-footer .menu-footer a {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}

/* Hover */
.site-footer .menu-footer a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.footer-bottom {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.footer-text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-ui-s);
}

/* Responsive */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ----------------------------
   9) Sections and hero
---------------------------- */

.section { padding: 56px 0; }

.hero { padding: 72px 0 48px; }

.hero__kicker {
  font-size: var(--text-ui-m);
  color: var(--text-secondary);
}

.hero__title { margin-top: 10px; }

.hero__sub { margin-top: 16px; max-width: 62ch; }

.hero__actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ----------------------------
   10) KPI / Metric styling
---------------------------- */

.kpi { display: grid; gap: 8px; }

.kpi__label {
  font-size: var(--text-ui-s);
  color: var(--text-muted);
}

.kpi__value {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 600;
}

.kpi__value.tabular { font-variant-numeric: tabular-nums; }

.kpi__delta {
  font-size: var(--text-ui-m);
  font-weight: 600;
}

.kpi__delta--up { color: var(--brand-text); }
.kpi__delta--down { color: var(--danger-text); }

/* ----------------------------
   11) Tables (simple, marketing safe)
---------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 12px;
  overflow: hidden;
}

.table th, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: var(--text-ui-m);
  color: var(--text-secondary);
}

.table th {
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
}

.table tr:last-child td { border-bottom: 0; }

/* ----------------------------
   12) WordPress content basics (so editor output looks sane)
---------------------------- */

.entry-content > * + * { margin-top: 16px; }

.entry-content ul,
.entry-content ol { margin: 0; padding-left: 1.2em; color: var(--text-secondary); }

.entry-content li + li { margin-top: 8px; }

.alignwide { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.alignfull { width: 100%; }

/* ----------------------------
   13) Utility helpers
---------------------------- */

.center { text-align: center; }
.right { text-align: right; }
.hidden { display: none !important; }

.max-60 { max-width: 60ch; }
.max-70 { max-width: 70ch; }

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* Theme toggle (public) */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.theme-toggle:hover {
  background: var(--surface-1);
}

.theme-toggle:active {
  transform: translateY(1px);
}

.theme-toggle__icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

/* ----------------------------
   14) Responsive adjustments (not tokenised, minimal)
---------------------------- */

@media (max-width: 880px) {
  .site-nav { display: none; } /* Replace with your mobile nav later */
  .hero { padding: 56px 0 36px; }
}

@media (max-width: 520px) {
  .container { width: calc(100% - 32px); }
  .hero__actions { flex-direction: column; align-items: stretch; }
}
/* Footer typography lock (must be last in file) */
.site-footer .footer-heading {
  font-size: 14px;
  line-height: 1.4;
}

.site-footer .menu-footer a {
  font-size: 14px !important;
  line-height: 1.4;
}