/* ---------------------------------------------------------
   Origen Valencia - Error & Maintenance Styles
   --------------------------------------------------------- */

/* [[P2.461]] self-hosted brand faces — no third-party request, ever.
   Previously: @import url('https://fonts.googleapis.com/css2?family=Montserrat...
   Montserrat is used at 400 (.ov-error-subheading, .ov-card-title, .ov-btn base),
   600 (.ov-btn-green) and 700 (.ov-error-code) — a full range is declared because
   the variable file covers it and a narrow 600–700 range would drop the 400 uses
   to system sans-serif with zero matching @font-face. Poppins is used at 400
   (body default) and 600 (.ov-error-debug-summary, inherits body's family); only
   400 is self-hosted here, so 600 renders as browser-synthesised bold Poppins,
   not a fallback typeface.

   #710 (2026-09-28): served from `/assets/error/` here, NOT
   `catalog/view/stylesheet/fonts/brand/`. This stylesheet is the one CSS file a
   stranger's browser fetches UNAUTHENTICATED on `/coming-soon`, behind the
   [D-416] pre-launch lock, and only `/assets/error/*` — EXACT files, never a
   directory — is exempted there
   (`deploy/environment-templates/production/.htaccess.root`). Pointing these
   `url()`s at `catalog/view/stylesheet/fonts/brand/` 401'd both fonts on the one
   page that must render before any credential (#710 finding). The
   `catalog/view/stylesheet/fonts/brand/` copies are UNCHANGED and still serve
   the rest of the platform (admin login/forgotten) once the lock is off — this
   is a second, exempted COPY for this one page, not a move. Source of truth for
   licence/subsetting is still `catalog/view/stylesheet/fonts/brand/README.md`.
   Do not point this back at `fonts/brand/` (401s behind the lock) and do not
   exempt that directory instead of keeping the copy (a directory exemption also
   opens the catalogue — see the .htaccess template's own comment on this). */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/error/montserrat-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/error/poppins-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ov-green: #B7C969;
  --ov-blue:  #92D3F5;
  --ov-brown: #926E51;
  --ov-black: #332d25;
  --ov-white: #ffffff;

  --ov-font-heading: 'Montserrat', sans-serif;
  --ov-font-body: 'Poppins', sans-serif;
}

body.ov-error-page {
  margin: 0;
  background: var(--ov-white);
  color: var(--ov-black);
  font-family: var(--ov-font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------
   HERO SECTION
   --------------------------------------------------------- */
.ov-error-hero {
  text-align: center;
  padding: 4rem 1.5rem 2rem;
}

.ov-error-icon {
  font-size: 4rem;
  color: var(--ov-green);
  margin-bottom: 1rem;
}

.ov-error-code {
  font-size: 4.5rem;
  font-weight: 700;
  font-family: var(--ov-font-heading);
  color: var(--ov-black);
  margin-bottom: 1rem;
}

.ov-error-subheading {
  font-size: 1.6rem;
  font-family: var(--ov-font-heading);
  opacity: 0.8;
}

/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */
.ov-error-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
  /* WCAG 1.4.10 Reflow (#869). The body is a flex column and `margin: 0 auto`
     turns this <main> from "stretch" into shrink-to-fit, whose floor is the
     content's MIN-content — and the 404 search <input> contributes its intrinsic
     width (~352px) to that, so <main> was 563px wide on a 375px screen and the
     whole page scrolled sideways. An explicit width takes it out of
     shrink-to-fit; the input then shrinks (it already has min-width:0). */
  width: 100%;
  box-sizing: border-box;
}

.ov-card {
  background: var(--ov-white);
  border-radius: 18px;
  border: 1px solid #e6e6e6;
  padding: 2rem 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Phone: 2rem + 2.5rem of padding on each side left 176px of text at 320px. */
@media (max-width: 480px) {
  .ov-error-container { padding: 1rem; }
  .ov-card { padding: 1.5rem 1.25rem; }
}

.ov-card-title {
  font-family: var(--ov-font-heading);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.ov-error-lead {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.ov-error-more {
  font-size: .95rem;
  color: #777;
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------
   ACTION BUTTONS
   --------------------------------------------------------- */
.ov-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ov-btn {
  padding: 0.85rem 1.4rem;
  border-radius: 12px;
  font-family: var(--ov-font-heading);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  transition: .15s ease;
}

.ov-btn-lg {
  font-size: 1.1rem;
  padding: 1rem 1.6rem;
}

/* Green Button */
.ov-btn-green {
  background: var(--ov-green);
  color: var(--ov-black);
  font-weight: 600;
}

.ov-btn-green:hover {
  background: #aabf57;
}

/* Outline Button */
.ov-btn-outline {
  background: transparent;
  border: 2px solid var(--ov-black);
  color: var(--ov-black);
}

.ov-btn-outline:hover {
  background: var(--ov-black);
  color: var(--ov-white);
}

/* ---------------------------------------------------------
   DEBUG DETAILS
   --------------------------------------------------------- */
.ov-error-debug {
  margin-top: 2rem;
}

.ov-error-debug-summary {
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1rem;
}

.ov-error-trace {
  white-space: pre-wrap;
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}