/**
 * overrides.css — Theme-level CSS overrides
 *
 * Use this file for custom styles that go beyond Tailwind utility classes.
 * Loaded AFTER tailwind.min.css so it can override any Tailwind rule.
 *
 * Keep it organized by section. Avoid duplicating what Tailwind already provides.
 */

/* ── Guide video embeds ────────────────────────────────────────────────── */
/* Wrapper injected around YouTube/Vimeo iframes by seo_render_guide_body().
   Gives embeds a 100%-width, 16:9 container with rounded corners, shadow,
   and a constrained max-width. */
.guide-video {
  display: block;
  position: relative;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  margin: 2rem auto;
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 40px -18px rgba(15, 23, 42, 0.28),
    0 8px 20px -10px rgba(15, 23, 42, 0.18);
  outline: 1px solid rgba(226, 232, 240, 1);
  outline-offset: -1px;
}
.guide-video > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Fallback for browsers without aspect-ratio support (very rare) */
@supports not (aspect-ratio: 16 / 9) {
  .guide-video { padding-top: 56.25%; height: 0; }
}

/* ── pseo body content — full-width band with intro + FAQ ─────────────── */
/* PHP emits max-w-3xl mx-auto on the section; override here. */
section.pseo-body {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 3rem 1.5rem 3.5rem;
  margin-top: 2.5rem !important;
}

/* Intro paragraph */
section.pseo-body > p {
  max-width: 93%;
  font-size: 1rem;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 0;
}

/* FAQ heading */
section.pseo-body h2 {
  max-width: 93%;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 2.5rem 0 1.25rem;
}

/* FAQ accordion — all open by default (JS sets open attr on load) */
section.pseo-body details {
  max-width: 93%;
  border-bottom: 1px solid #e2e8f0;
}
section.pseo-body details:first-of-type {
  border-top: 1px solid #e2e8f0;
}
section.pseo-body summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e293b;
  transition: color 0.15s;
}
section.pseo-body summary::-webkit-details-marker { display: none; }
section.pseo-body summary::after {
  content: '−';
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: #94a3b8;
  flex-shrink: 0;
}
section.pseo-body details:not([open]) > summary::after { content: '+'; }
section.pseo-body summary:hover { color: #059669; }
section.pseo-body details > div,
section.pseo-body details > p {
  padding: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #64748b;
}

/* ── /guide index page title — force Lora ─────────────────────────────── */
/* The inline <style> in seo_render_guide_body()/seo_guide_index() sets
   font-family via --ocd-font-display, but something upstream (Tailwind
   preflight or browser H1 default) still wins on some builds. Hard-pin
   Lora/Times here so the hub headline always renders as the serif. */
.ocd-g-title {
  font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
}

/* ── Homepage hero H1 ──────────────────────────────────────────────── */
/* Overrides the Tailwind leading-* utilities so the hero headline sits
   at a consistent line-height. Mobile gets a looser 1.2 so the wrapped
   lines breathe; desktop stays tight at 1.15. Oregon gets the themed
   brand green (same tone as the Verified badge). */
h1.fade-up {
  line-height: 1.15 !important;
}
@media (max-width: 639px) {
  h1.fade-up {
    line-height: 1.25 !important;
  }
}
.ocd-accent-green {
  color: #2D9650;
}

/* ── Tile rounding — 50% of Tailwind defaults ─────────────────────────── */
/* Softens the "pill-y" feel of cards, tiles, and panels site-wide. Keeps
   rounded-full (avatars, pills) and rounded-sm/rounded (already minimal)
   untouched. Loads after tailwind.min.css so source order wins.
   Per-side + per-corner variants included so inner pieces (e.g. a
   rounded-t-3xl gradient band on top of a rounded-3xl card) stay flush. */
.rounded-lg  { border-radius: 0.25rem; }  /* was 0.5rem (8px → 4px)  */
.rounded-xl  { border-radius: 0.375rem; } /* was 0.75rem (12px → 6px) */
.rounded-2xl { border-radius: 0.5rem; }   /* was 1rem (16px → 8px)   */
.rounded-3xl { border-radius: 0.75rem; }  /* was 1.5rem (24px → 12px)*/

.rounded-t-lg  { border-top-left-radius: 0.25rem;  border-top-right-radius: 0.25rem; }
.rounded-t-xl  { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.rounded-t-2xl { border-top-left-radius: 0.5rem;   border-top-right-radius: 0.5rem; }
.rounded-t-3xl { border-top-left-radius: 0.75rem;  border-top-right-radius: 0.75rem; }

.rounded-b-lg  { border-bottom-left-radius: 0.25rem;  border-bottom-right-radius: 0.25rem; }
.rounded-b-xl  { border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.rounded-b-2xl { border-bottom-left-radius: 0.5rem;   border-bottom-right-radius: 0.5rem; }
.rounded-b-3xl { border-bottom-left-radius: 0.75rem;  border-bottom-right-radius: 0.75rem; }

.rounded-l-lg  { border-top-left-radius: 0.25rem;  border-bottom-left-radius: 0.25rem; }
.rounded-l-xl  { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.rounded-l-2xl { border-top-left-radius: 0.5rem;   border-bottom-left-radius: 0.5rem; }
.rounded-l-3xl { border-top-left-radius: 0.75rem;  border-bottom-left-radius: 0.75rem; }

.rounded-r-lg  { border-top-right-radius: 0.25rem;  border-bottom-right-radius: 0.25rem; }
.rounded-r-xl  { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.rounded-r-2xl { border-top-right-radius: 0.5rem;   border-bottom-right-radius: 0.5rem; }
.rounded-r-3xl { border-top-right-radius: 0.75rem;  border-bottom-right-radius: 0.75rem; }

.rounded-tl-lg  { border-top-left-radius: 0.25rem; }
.rounded-tl-xl  { border-top-left-radius: 0.375rem; }
.rounded-tl-2xl { border-top-left-radius: 0.5rem; }
.rounded-tl-3xl { border-top-left-radius: 0.75rem; }

.rounded-tr-lg  { border-top-right-radius: 0.25rem; }
.rounded-tr-xl  { border-top-right-radius: 0.375rem; }
.rounded-tr-2xl { border-top-right-radius: 0.5rem; }
.rounded-tr-3xl { border-top-right-radius: 0.75rem; }

.rounded-bl-lg  { border-bottom-left-radius: 0.25rem; }
.rounded-bl-xl  { border-bottom-left-radius: 0.375rem; }
.rounded-bl-2xl { border-bottom-left-radius: 0.5rem; }
.rounded-bl-3xl { border-bottom-left-radius: 0.75rem; }

.rounded-br-lg  { border-bottom-right-radius: 0.25rem; }
.rounded-br-xl  { border-bottom-right-radius: 0.375rem; }
.rounded-br-2xl { border-bottom-right-radius: 0.5rem; }
.rounded-br-3xl { border-bottom-right-radius: 0.75rem; }