/* =========================================================================
   Hostlino 2.0 — Design System
   Ported from the Hostlino 2.0 design prototype (DC export) to a real,
   dependency-free stylesheet. Scoped under .h2-root so it never leaks into
   wp-admin or other themes.
   ========================================================================= */

/* Fonts are enqueued separately in functions.php (no @import, no CDN). */

/* ---- Design tokens ---------------------------------------------------- */
.h2-root {
  --ink: #171B22;
  --ink2: #5B636F;
  --ink3: #9298A2;
  --bg: #FBFAF8;
  --card: #FFFFFF;
  --line: #ECEAE3;
  --line2: #F4F2EC;
  --accent: #4156D6;
  --accent2: #7A5BF0;
  --accentSoft: #EEF0FF;
  --good: #1E9E6A;
  --goodSoft: #E7F5EE;
  --warn: #D98A2B;
  --warnSoft: #FBF0E1;
  --danger: #D8543F;
  --dangerSoft: #FBEAE7;

  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.h2-root ::selection { background: rgba(65, 86, 214, .16); }

.h2-root .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- Keyframes -------------------------------------------------------- */
@keyframes h2-floaty  { 0%,100% { transform: translateY(0) }   50% { transform: translateY(-14px) } }
@keyframes h2-floaty2 { 0%,100% { transform: translateY(0) }   50% { transform: translateY(10px) } }
@keyframes h2-pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(30,158,106,.55) }
  70%  { box-shadow: 0 0 0 8px rgba(30,158,106,0) }
  100% { box-shadow: 0 0 0 0 rgba(30,158,106,0) }
}
@keyframes h2-blob {
  0%,100% { transform: translate(0,0) scale(1) }
  33%     { transform: translate(3%,-4%) scale(1.06) }
  66%     { transform: translate(-3%,3%) scale(.96) }
}
.h2-floaty  { animation: h2-floaty  7s ease-in-out infinite; }
.h2-floaty2 { animation: h2-floaty2 8s ease-in-out infinite; }
.h2-pulse   { animation: h2-pulseDot 2.2s infinite; }
.h2-blob    { animation: h2-blob 22s ease-in-out infinite; }
.h2-blob.slow { animation-duration: 26s; }

/* ---- Reset for the theme wrapper ------------------------------------- */
.h2-root h1, .h2-root h2, .h2-root h3, .h2-root p { margin: 0; }
.h2-root a { color: inherit; }
.h2-root button { font-family: inherit; }
.h2-root img { max-width: 100%; }

/* ---- Interaction helpers (replace DC's style-hover) ------------------ */
.h2-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.h2-lift:hover { transform: translateY(-4px); }

.h2-cardhover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s, background .35s; }
.h2-cardhover:hover {
  box-shadow: 0 24px 50px -28px rgba(23,27,34,.22);
  border-color: var(--accentSoft);
}

.h2-navlink { transition: background .2s, color .2s; }
.h2-navlink:hover { background: var(--line2); color: var(--ink); }

.h2-ghost { transition: background .2s, border-color .2s, color .2s; }
.h2-ghost:hover { background: var(--line2); }

.h2-btn-dark { transition: background .2s, transform .2s; }
.h2-btn-dark:hover { background: #000; }

.h2-btn-grad { transition: transform .2s, box-shadow .2s; }
.h2-btn-grad:hover { transform: translateY(-2px); }

.h2-btn-outline { transition: border-color .2s, color .2s; }
.h2-btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.h2-infra-tile { transition: border-color .35s, background .35s, box-shadow .35s; }
.h2-infra-tile:hover {
  border-color: var(--accentSoft);
  background: #fff;
  box-shadow: 0 14px 30px -20px rgba(23,27,34,.2);
}

.h2-plan { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.h2-plan:hover { transform: translateY(-5px); }

/* ---- Command Center tabs (JS-driven) --------------------------------- */
.h2-tab {
  flex: 1; min-width: 120px; padding: 11px 12px; border-radius: 11px;
  border: none; cursor: pointer; font-family: inherit; font-size: 13.5px;
  font-weight: 700; background: transparent; color: var(--ink2);
  transition: all .2s;
}
.h2-tab.is-active { background: var(--ink); color: #fff; }
.h2-panel { display: none; }
.h2-panel.is-active { display: block; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 960px) {
  .h2-hero-grid   { grid-template-columns: 1fr !important; gap: 44px !important; }
  .h2-infra-grid  { grid-template-columns: 1fr !important; gap: 36px !important; }
  .h2-labs-top    { grid-template-columns: 1fr !important; }
  .h2-replace-grid{ grid-template-columns: 1fr !important; gap: 22px !important; }
  .h2-replace-arrow { flex-direction: row !important; justify-content: center !important; }
  .h2-resp-4 { grid-template-columns: 1fr 1fr !important; }
  .h2-resp-5 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 840px) {
  .h2-nav-mini { display: none !important; }
}
@media (max-width: 620px) {
  .h2-resp-3 { grid-template-columns: 1fr !important; }
  .h2-resp-4 { grid-template-columns: 1fr !important; }
  .h2-resp-5 { grid-template-columns: 1fr !important; }
  .h2-reassure { flex-direction: column !important; align-items: flex-start !important; }
  .h2-cc-health { grid-template-columns: 1fr !important; }
  .h2-cc-2col { grid-template-columns: 1fr !important; }
  .h2-hero-h1 { font-size: 34px !important; }
  .h2-section-h2 { font-size: 30px !important; }
}

/* ---- Mobile menu ----------------------------------------------------- */
.h2-mobile-menu { display: none; }
.h2-mobile-menu.is-open { display: block; }
.h2-burger { display: none; }
@media (max-width: 840px) {
  .h2-burger { display: inline-flex; }
}

/* ---- WordPress nav menu (reads the site's existing menu) -------------- */
.h2-root .h2-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.h2-root .h2-menu li { margin: 0; }
.h2-root .h2-menu a {
  display: block; padding: 8px 12px; border-radius: 9px; font-size: 14.5px;
  color: var(--ink2); text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: background .2s, color .2s;
}
.h2-root .h2-menu a:hover { background: var(--line2); color: var(--ink); }
.h2-root .h2-menu .current-menu-item > a,
.h2-root .h2-menu .current_page_item > a,
.h2-root .h2-menu .current-menu-ancestor > a { color: var(--ink); background: var(--line2); }

.h2-root .h2-menu-mobile { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h2-root .h2-menu-mobile a { display: block; padding: 11px 8px; border-radius: 9px; font-size: 15px; color: var(--ink); text-decoration: none; font-weight: 600; }
.h2-root .h2-menu-mobile a:hover { background: var(--line2); }

/* ---- Toggle groups (location / duration) ----------------------------- */
.h2-root .h2-toggle { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 13px; flex-wrap: wrap; }
.h2-root .h2-toggle button {
  position: relative; padding: 9px 16px; border-radius: 9px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; background: transparent; color: var(--ink2);
  transition: background .2s, color .2s; display: inline-flex; align-items: center; gap: 7px;
}
.h2-root .h2-toggle button.is-active { background: var(--ink); color: #fff; }
.h2-root .h2-toggle .h2-off-badge { font-size: 11px; font-weight: 800; color: var(--good); background: var(--goodSoft); padding: 2px 7px; border-radius: 999px; }
.h2-root .h2-toggle button.is-active .h2-off-badge { color: #fff; background: rgba(255,255,255,.2); }

/* ---- Range sliders --------------------------------------------------- */
.h2-root .h2-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--line); outline: none; cursor: pointer; }
.h2-root .h2-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(65,86,214,.35); cursor: pointer; margin-top: -1px; }
.h2-root .h2-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(65,86,214,.35); cursor: pointer; }

/* ---- FAQ accordion (native <details>) -------------------------------- */
.h2-root .h2-faq { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.h2-root .h2-faq + .h2-faq { margin-top: 12px; }
.h2-root .h2-faq summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.h2-root .h2-faq summary::-webkit-details-marker { display: none; }
.h2-root .h2-faq summary::after { content: '+'; margin-inline-start: auto; font-size: 22px; font-weight: 400; color: var(--accent); transition: transform .25s; line-height: 1; }
.h2-root .h2-faq[open] summary::after { transform: rotate(45deg); }
.h2-root .h2-faq .h2-faq-body { padding: 0 22px 20px 58px; font-size: 14px; line-height: 2; color: var(--ink2); }

/* ---- Landing-page tab list (exclusive features) ---------------------- */
.h2-root .h2-tablist { display: flex; flex-direction: column; gap: 10px; }
.h2-root .h2-tabcard {
  text-align: right; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; cursor: pointer; font-family: inherit; transition: border-color .25s, box-shadow .25s, background .25s;
  display: flex; gap: 14px; align-items: flex-start;
}
.h2-root .h2-tabcard:hover { border-color: var(--accentSoft); }
.h2-root .h2-tabcard.is-active { border-color: var(--accent); box-shadow: 0 18px 40px -26px rgba(65,86,214,.4); }
.h2-root .h2-tabcard .h2-tabdesc { display: none; margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: var(--ink2); }
.h2-root .h2-tabcard.is-active .h2-tabdesc { display: block; }

/* ---- Package description rich text (from API HTML) ------------------- */
.h2-root .h2-prose ul, .h2-root .h2-prose ol { list-style: none; padding: 0; margin: 6px 0; }
.h2-root .h2-prose li { position: relative; padding-inline-start: 18px; margin-bottom: 5px; line-height: 1.8; }
.h2-root .h2-prose li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 0; color: var(--good); font-weight: 700; }
.h2-root .h2-prose p { margin: 6px 0; }
.h2-root .h2-prose strong, .h2-root .h2-prose b { font-weight: 700; }
.h2-root .h2-prose a { color: var(--accent); text-decoration: underline; }

/* ---- Respect reduced-motion (helps perf on low-end devices) ---------- */
@media (prefers-reduced-motion: reduce) {
  .h2-root * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}