/* ── CSS-only interactivity (zero client scripting) ─────────── */
/* All interactive patterns use native HTML + CSS only:
   - Desktop dropdowns: :focus-within
   - Mobile menu: checkbox hack
   - FAQ accordions: <details>/<summary>
   - Deployment tabs: radio buttons + :checked
   - Testimonials: scroll-snap
   - Cookie consent: checkbox dismiss
   - Back-to-top: anchor + scroll-behavior
*/

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Skip Link ──────────────────────────────────────────────── */
/* Single consolidated rule set (design audit item 15): the element
   carries the id; the old duplicate .skip-to-content class block was
   fully overridden by this id-scoped rule and deleted. Background is
   the brand red — white-on-white made the focused link invisible
   (1:1). */
#skip-to-content {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 10000;
  padding: 12px 24px;
  border-radius: 0;
  background: rgb(var(--brand-600));
  color: #fff;
  border: 1px solid rgb(var(--surface-950));
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: top 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

#skip-to-content:focus {
  left: 1rem;
}

/* ── Focus Rings ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Header Dropdowns (<details> disclosure, design audit item 5) ──
   Native disclosure widgets: click/Enter/Space toggles, Esc closes,
   and the open state is real markup — no frozen aria-expanded, no
   JS-kitchen-sink ARIA. The chevron rotates with the open state. */
details[data-dropdown] > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
details[data-dropdown] > summary::-webkit-details-marker {
  display: none;
}
details[data-dropdown] > summary .dropdown-chevron {
  transition: transform 150ms ease;
}
details[data-dropdown][open] > summary .dropdown-chevron {
  transform: rotate(180deg);
}
details[data-dropdown][open] > summary {
  color: rgb(var(--surface-950));
}
details[data-dropdown][open] > [data-dropdown-menu] {
  display: block;
}
/* When CLOSED the <details> user-agent stylesheet hides the panel.
   The old unconditional `display: block` overrode that, rendering
   EVERY dropdown panel simultaneously (overlapping text in the nav). */

/* ── Mobile Menu (checkbox hack + grid-rows animation, item 17) ──
   Off-screen positioning instead of clip-based sr-only to maintain
   keyboard focusability (clip:rect can break Tab focus in some browsers).
   The panel animates its grid-template-rows 0fr→1fr instead of a
   display:none flip that can never animate. */
.nav-toggle-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Visible focus treatment (a11y audit): the checkbox itself is the
   keyboard operative control, but its ring used to paint at
   left:-9999px — keyboard users got NO focus indicator at all. The
   checkbox precedes #site-header as a sibling, so its focus state can
   ring the visible hamburger affordance (#mobile-menu-toggle label
   inside the header) instead. */
#nav-toggle:focus-visible ~ #site-header #mobile-menu-toggle {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
}
/* Ensure close icon is hidden by default (overrides header partial) */
#menu-icon-close { display: none; }
#nav-toggle:checked ~ #site-header #menu-icon-open { display: none !important; }
#nav-toggle:checked ~ #site-header #menu-icon-close { display: block !important; }

@media (max-width: 1023.98px) {
  #site-header #mobile-menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #site-header #mobile-menu > .mobile-menu-inner {
    overflow: hidden;
    min-height: 0;
    /* Collapsed menu links stayed tabbable (and screen-reader
       traversable) behind the 0fr grid row — visibility:hidden takes
       them out of the tab order AND the a11y tree while the grid
       animation still plays. It flips to visible immediately on
       expand, and only after the collapse animation finishes on the
       way back. */
    visibility: hidden;
    transition: visibility 0ms linear 280ms;
  }
  #nav-toggle:checked ~ #site-header #mobile-menu {
    grid-template-rows: 1fr;
  }
  #nav-toggle:checked ~ #site-header #mobile-menu > .mobile-menu-inner {
    visibility: visible;
    transition: visibility 0ms;
  }
}
/* Open-state header styling: opaque surface + deepened border so the
   expanded panel reads as one attached surface (item 17). */
#nav-toggle:checked ~ #site-header {
  background: rgb(var(--surface-50));
  border-bottom-color: rgb(var(--surface-300));
}
@media (prefers-reduced-motion: reduce) {
  #site-header #mobile-menu {
    transition: none;
  }
}

/* ── FAQ Accordion (<details>/<summary>) ────────────────────── */
details.faq-item summary {
  cursor: pointer;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::marker { display: none; }
details.faq-item .faq-icon {
  transition: transform 200ms ease;
}
details.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  color: rgb(var(--brand-600));
}

/* ── Deployment Options (radio tabs) ────────────────────────── */
.deploy-radio { display: none; }
.deploy-panel { display: none; }
#deploy-shared:checked ~ .deploy-tabs [for="deploy-shared"],
#deploy-dedicated:checked ~ .deploy-tabs [for="deploy-dedicated"],
#deploy-private:checked ~ .deploy-tabs [for="deploy-private"],
#deploy-byoc:checked ~ .deploy-tabs [for="deploy-byoc"] {
  background-color: rgb(var(--surface-900));
  color: white;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
html.dark #deploy-shared:checked ~ .deploy-tabs [for="deploy-shared"],
html.dark #deploy-dedicated:checked ~ .deploy-tabs [for="deploy-dedicated"],
html.dark #deploy-private:checked ~ .deploy-tabs [for="deploy-private"],
html.dark #deploy-byoc:checked ~ .deploy-tabs [for="deploy-byoc"] {
  background-color: rgb(var(--brand-700));
  border-color: rgb(var(--brand-500));
  color: rgb(255 255 255);
}
@media (prefers-color-scheme: dark) {
  html:not(.light) #deploy-shared:checked ~ .deploy-tabs [for="deploy-shared"],
  html:not(.light) #deploy-dedicated:checked ~ .deploy-tabs [for="deploy-dedicated"],
  html:not(.light) #deploy-private:checked ~ .deploy-tabs [for="deploy-private"],
  html:not(.light) #deploy-byoc:checked ~ .deploy-tabs [for="deploy-byoc"] {
    background-color: rgb(var(--brand-700));
    border-color: rgb(var(--brand-500));
    color: rgb(255 255 255);
  }
}
#deploy-shared:checked ~ .deploy-panels #panel-shared,
#deploy-dedicated:checked ~ .deploy-panels #panel-dedicated,
#deploy-private:checked ~ .deploy-panels #panel-private,
#deploy-byoc:checked ~ .deploy-panels #panel-byoc {
  display: block;
}

/* ── Pricing calculator billing-cycle pills (radio + :has(:checked)) ──
   The calculator's Monthly/Annual segmented control (templates/
   partials/pricing/calculator.html). The radios live INSIDE their
   labels (bigger hit area), so the checked state styles the pill via
   :has() — the only pure-CSS way to style an ancestor. Visual-only
   progressive enhancement: browsers without :has() render both pills
   unselected; the radio still posts correctly. Same pattern family as
   the deploy-tabs rules above (those can use ~ because their radios
   sit outside the labels). */
.billing-pill {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgb(var(--surface-500));
  cursor: pointer;
}
.billing-pill:hover { color: rgb(var(--surface-950)); }
.billing-pill:has(input:checked) {
  background-color: rgb(var(--surface-950));
  color: #fff;
}
/* Keyboard focus on the radio rings its pill, mirroring the mobile
   menu-toggle treatment. */
.billing-pill:has(input:focus-visible) {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
}

/* ── Testimonials (scroll-snap) ─────────────────────────────── */
.testimonials-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1.5rem;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonials-track > .testimonial-card,
.testimonials-track > .apex-card,
.testimonials-track > .card-dna {
  scroll-snap-align: start;
  flex: 0 0 100%;
  min-width: 0;
}

/* ── Back-to-Top (CSS-only visibility via :target or fixed) ── */
#back-to-top {
  /* Always visible as a simple anchor link — no JS scroll detection needed */
  opacity: 0.7;
  transition: opacity 200ms;
}
#top[data-js="true"] #back-to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 200ms, transform 200ms;
}
#top[data-js="true"] #back-to-top.is-visible {
  opacity: 0.7;
  pointer-events: auto;
  transform: translateY(0);
}
#back-to-top:hover {
  opacity: 1;
}

#cookie-consent-banner:not([hidden]) ~ #back-to-top {
  display: none;
}

/* ── Contact-form PRG banners (zero-JS :target reveal) ──────────
   The api-server contact endpoints (POST /v1/contact/{sales,
   enterprise,security}) redirect back to these static pages with
   `?submitted=true#enquiry-submitted` (success) or `?error=…#
   enquiry-error` (failure). A query parameter alone cannot be read
   without client script, so the banners ship hidden in the static
   markup and the CSS :target selector — driven by the fragment the
   redirect carries — reveals them. Works identically on the static
   host and the api-server's marketing mirror (same HTML). */
.form-banner { display: none; }
.form-banner:target { display: block; }
.form-banner p { margin: 0; }
.form-banner--success,
.form-banner--error {
  max-width: 42rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid;
  border-left-width: 4px;
}
.form-banner--success {
  background: rgb(var(--success-50, 248 250 252));
  border-color: rgb(var(--success-200, 134 239 172));
  color: rgb(var(--success-900, 20 83 45));
}
.form-banner--error {
  background: rgb(var(--danger-50, 253 242 248));
  border-color: rgb(var(--danger-200, 244 146 176));
  color: rgb(var(--danger-900, 76 5 25));
}

/* GDPR Art. 13 point-of-collection notice under each contact form's
   submit button (all locales). */
.form-privacy-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(var(--surface-500));
}
.form-privacy-note a {
  color: rgb(var(--surface-700));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-privacy-note a:hover { color: rgb(var(--brand-600)); }

/* ── Cookie banner recorded-consent state (no-JS) ─────────────
   After a choice is made, the api-server /consent endpoint sets the
   apexmail_consent cookie (Domain=.apexmail.ee). Because the site is
   static, hiding the banner is server-side: the marketing container's
   nginx serves a sub_filter variant that flips the banner's
   data-consent-state attribute from "pending" to "recorded" whenever
   the cookie is present (and the api-server makes the same flip when
   it serves these pages directly). This rule collapses the banner —
   and restores the back-to-top link the banner suppressed. */
#cookie-consent-banner[data-consent-state="recorded"] {
  display: none !important;
}
#cookie-consent-banner[data-consent-state="recorded"] ~ #back-to-top {
  display: inline-flex;
}

/* ── Status page auto-refresh indicator ──────────────────────── */
.status-refresh-notice {
  font-size: 0.75rem;
  color: rgb(var(--surface-500));
  text-align: center;
  padding: 0.5rem;
}

/* ── Private Cloud latency comparison ────────────────────────── */
.compare-hero-wedge { clip-path: polygon(100% 0, 0% 0, 100% 100%); }

.progress-width-98 { width: 98%; }
.progress-width-96 { width: 96%; }
.progress-width-94 { width: 94%; }
.progress-width-87 { width: 87%; }
.progress-width-72 { width: 72%; }

.latency-width-2 { --bar-width: 2%; }
.latency-width-8 { --bar-width: 8%; }
.latency-width-65 { --bar-width: 65%; }
.latency-width-100 { --bar-width: 100%; }

@keyframes grow-bar {
  from { width: 0; }
  to { width: var(--bar-width, 0%); }
}

.latency-bar {
  width: var(--bar-width, 0%);
  animation: grow-bar 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .latency-bar { animation: none; }
}

/* ── Details closed-state enforcement (2026-09-07) ──────────────────
   Both the nav dropdowns and the FAQ accordions were rendering their
   content ALWAYS visible — the <details> user-agent closed-state
   hiding was defeated. This author-level rule restores it. */
details:not([open]) > *:not(summary) {
  display: none !important;
}