/* ============================================================
   WordPress glue.
   assets/css/style.css is kept byte-identical to the live static
   site so the look cannot drift. Everything needed to make that
   design survive WordPress's block markup lives here instead.
   ============================================================ */

/* Gutenberg wraps a group's children in .wp-block-group__inner-container,
   which breaks any layout that relies on direct children (grid, flex).
   display:contents removes the wrapper from the layout without removing
   it from the DOM, so our grids see the cards again. */
.grid-2 > .wp-block-group__inner-container,
.grid-3 > .wp-block-group__inner-container,
.grid-4 > .wp-block-group__inner-container,
.cta-band > .wp-block-group__inner-container,
.hero-grid > .wp-block-group__inner-container,
.method-steps > .wp-block-group__inner-container,
.stats-band > .wp-block-group__inner-container,
.footer-grid > .wp-block-group__inner-container,
.kpi-row > .wp-block-group__inner-container,
.prod-grid > .wp-block-group__inner-container,
.proof-bar > .wp-block-group__inner-container,
.globe-grid > .wp-block-group__inner-container,
.dip-facts > .wp-block-group__inner-container,
.dip-legend > .wp-block-group__inner-container,
.prod-card > .wp-block-group__inner-container,
.form-grid > .wp-block-group__inner-container,
.actions > .wp-block-group__inner-container,
.logo-strip > .wp-block-group__inner-container { display: contents; }

/* ANY new multi-column layout must be added to the list above, or Gutenberg's
   inner wrapper collapses it into a single column. */

/* Core block wrappers should not add their own spacing on top of ours. */
.wp-block-group { margin-block: 0 }
.container > .wp-block-group__inner-container > *:last-child { margin-bottom: 0 }

/* Core buttons carry .wp-block-button on the wrapper and the real anchor
   inside, so our .btn styling has to reach the anchor. */
.wp-block-button.btn > .wp-block-button__link { all: unset; cursor: pointer }
.wp-block-buttons { display: flex; gap: 10px; flex-wrap: wrap }
.wp-block-button.btn {
  /* The .btn classes land on this WRAPPER as well as reaching the anchor below,
     so without stripping it you get a pill drawn inside a pill — and on a dark
     band the wrapper gets painted while the anchor keeps its light colours and
     the label disappears. The wrapper must be layout only. */
  display: inline-flex; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none;
}
.wp-block-button.btn-lg > .wp-block-button__link { padding: 15px 32px; font-size: 1rem }
.wp-block-button.btn-sm > .wp-block-button__link { padding: 9px 18px; font-size: .84rem }
.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: .93rem;
  border: 1px solid transparent; transition: .18s; white-space: nowrap; letter-spacing: -.01em;
}
.wp-block-button.btn-primary > .wp-block-button__link { background: var(--ink); color: #fff; border-color: var(--ink) }
.wp-block-button.btn-primary > .wp-block-button__link:hover { background: var(--brand); border-color: var(--brand) }
.wp-block-button.btn-outline-dark > .wp-block-button__link { border-color: var(--gray-300); color: var(--ink); background: transparent }
.wp-block-button.btn-outline-dark > .wp-block-button__link:hover { border-color: var(--brand); color: var(--brand) }
.cta-band .wp-block-button.btn-outline-dark > .wp-block-button__link { border-color: rgba(255,255,255,.32); color: #fff }
.cta-band .wp-block-button.btn-outline-dark > .wp-block-button__link:hover { background: rgba(255,255,255,.1); border-color: #fff }

/* On-dark bands: the anchor needs the inverted treatment, not the wrapper.
   Add every new dark container here as well as to style.css. */
.globe-band .wp-block-button.btn-primary > .wp-block-button__link,
.dip-band  .wp-block-button.btn-primary > .wp-block-button__link,
.cta-band  .wp-block-button.btn-primary > .wp-block-button__link {
  background: #fff; color: var(--ink); border-color: #fff;
}
.globe-band .wp-block-button.btn-primary > .wp-block-button__link:hover,
.dip-band  .wp-block-button.btn-primary > .wp-block-button__link:hover,
.cta-band  .wp-block-button.btn-primary > .wp-block-button__link:hover {
  background: var(--brand-400); border-color: var(--brand-400); color: var(--ink);
}
.globe-band .wp-block-button.btn-outline-dark > .wp-block-button__link,
.dip-band  .wp-block-button.btn-outline-dark > .wp-block-button__link,
.globe-band .wp-block-button.btn-outline > .wp-block-button__link,
.dip-band  .wp-block-button.btn-outline > .wp-block-button__link {
  border-color: rgba(255,255,255,.32); color: #fff; background: transparent;
}
.globe-band .wp-block-button.btn-outline-dark > .wp-block-button__link:hover,
.dip-band  .wp-block-button.btn-outline-dark > .wp-block-button__link:hover {
  background: rgba(255,255,255,.1); border-color: #fff;
}

/* Headings and paragraphs come out with core classes; keep our rhythm. */
.wp-block-heading { margin: 0 }
p.wp-block-paragraph { margin: 0 }
.card > .wp-block-group__inner-container > h3 { margin-bottom: 6px }
.section-head > .wp-block-group__inner-container > * + * { margin-top: 14px }

/* WordPress names a nested menu .sub-menu; the design system styles .dropdown.
   Map one onto the other rather than touching style.css. */
.main-nav .sub-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-start:-6px;
  background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius);
  min-width:246px; padding:6px; opacity:0; visibility:hidden; transform:translateY(5px);
  transition:.15s; box-shadow:0 14px 40px rgba(28,34,51,.12); z-index:120;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.main-nav .sub-menu a{display:block;padding:9px 12px;border-radius:6px;color:var(--gray-500);font-size:.87rem;white-space:normal}
.main-nav .sub-menu a:hover{background:var(--gray-50);color:var(--brand)}
.main-nav .menu-item-has-children > a::after{content:"▾";font-size:.7em;margin-inline-start:5px;opacity:.7}

@media(max-width:1219px){
  .main-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;background:var(--gray-50);display:none;min-width:0;
  }
  .main-nav li.open > .sub-menu{display:block}
}

/* ------------------------------------------------------------------
   Page-specific CSS that used to live in each page's <head>. The block
   converter only reads the body, so without this the calculator and the
   solutions page import completely unstyled.
   ------------------------------------------------------------------ */

/* from downtime-calculator.html */
.calc-wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.calc-field{margin-bottom:20px}
.calc-field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:var(--ink)}
.calc-field .hint{display:block;font-weight:400;color:var(--gray-500);font-size:.8rem;margin-top:3px}
.calc-field input,.calc-field select{width:100%;padding:12px 14px;border:1px solid var(--gray-300);
  border-radius:10px;background:#fff;font-size:.95rem;color:var(--ink)}
.calc-field input:focus,.calc-field select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.calc-inline{display:grid;grid-template-columns:1fr 108px;gap:10px}
.calc-out{position:sticky;top:88px;background:var(--ink);color:#fff;border-radius:16px;padding:30px}
.calc-out .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-400);margin-bottom:10px}
.calc-out .big{font-family:var(--font-head);font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.calc-out .cur{font-size:.5em;color:var(--gray-400);font-weight:600;margin-inline-start:6px}
.calc-out .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.12);font-size:.9rem}
.calc-out .row span:first-child{color:var(--gray-400)}
.calc-out .row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.calc-out .band{display:inline-block;font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:99px;margin-top:18px}
.band-low{background:#173d2b;color:#8fe0b4}
.band-mid{background:#4a3a12;color:#f0cd7d}
.band-high{background:#4a1f18;color:#f5a48e}
.calc-note{font-size:.78rem;color:var(--gray-400);margin-top:18px;line-height:1.6}
.calc-math{background:var(--gray-50);border-radius:12px;padding:18px 20px;margin-top:26px;font-size:.85rem;color:var(--gray-500);line-height:1.7}
.calc-math b{color:var(--ink)}
.calc-gate{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.calc-gate p{font-size:.86rem;color:var(--gray-300);margin-bottom:14px}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr;gap:32px}.calc-out{position:static}}

/* from solutions.html */
.sol-section{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;padding:56px 0;border-bottom:1px solid var(--gray-100)}
.sol-section:last-child{border-bottom:none}
.sol-facts{display:grid;gap:12px}
.sol-fact{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:12px;padding:14px 18px;font-size:.92rem}
.sol-fact b{color:var(--teal-600);display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.product-chip{display:inline-block;background:rgba(61,79,192,.1);color:var(--teal-600);border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:600;margin:3px 3px 0 0}
@media(max-width:900px){.sol-section{grid-template-columns:1fr}}