/* =============================================================================
   Oracle Gypsies Nordic Academy — theme.css
   Version: 1.0.0
   Description: Global design tokens, layout, typography, navigation,
                header, footer, components. NO business logic.
   ============================================================================= */

/* ── 1. Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Color palette — Nordic dark */
  --ogn-bg-void:        #08080f;       /* deepest background */
  --ogn-bg-dark:        #0d0d1a;       /* page background */
  --ogn-bg-surface:     #13131f;       /* cards, panels */
  --ogn-bg-elevated:    #1a1a2e;       /* elevated surfaces */
  --ogn-bg-hover:       #20203a;       /* hover states */

  /* Accent — gold / amber */
  --ogn-gold:           #c9a94e;       /* primary brand gold */
  --ogn-gold-light:     #e2c87a;       /* lighter gold for hover */
  --ogn-gold-muted:     rgba(201,169,78,0.35); /* subtle gold tint */
  --ogn-gold-glow:      rgba(201,169,78,0.12); /* gold glow */

  /* Accent — purple */
  --ogn-purple:         #4a2a6e;       /* deep rune purple */
  --ogn-purple-mid:     #6b3fa0;       /* mid purple */
  --ogn-purple-light:   #9b6fcc;       /* light purple for accents */

  /* Text */
  --ogn-text-primary:   #f0e8d8;       /* warm off-white */
  --ogn-text-secondary: #b8a898;       /* muted parchment */
  --ogn-text-muted:     #6e6458;       /* deeply muted */
  --ogn-text-inverse:   #08080f;

  /* Borders */
  --ogn-border:         rgba(201,169,78,0.18);
  --ogn-border-strong:  rgba(201,169,78,0.40);
  --ogn-border-subtle:  rgba(255,255,255,0.06);

  /* Typography */
  --ogn-font-heading:   'Cinzel', 'Palatino Linotype', serif;
  --ogn-font-body:      'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ogn-font-mono:      'Fira Code', 'Courier New', monospace;

  /* Scale */
  --ogn-text-xs:        0.75rem;
  --ogn-text-sm:        0.875rem;
  --ogn-text-base:      1rem;
  --ogn-text-lg:        1.125rem;
  --ogn-text-xl:        1.25rem;
  --ogn-text-2xl:       1.5rem;
  --ogn-text-3xl:       1.875rem;
  --ogn-text-4xl:       2.25rem;
  --ogn-text-5xl:       3rem;

  /* Spacing */
  --ogn-space-1:  0.25rem;
  --ogn-space-2:  0.5rem;
  --ogn-space-3:  0.75rem;
  --ogn-space-4:  1rem;
  --ogn-space-5:  1.25rem;
  --ogn-space-6:  1.5rem;
  --ogn-space-8:  2rem;
  --ogn-space-10: 2.5rem;
  --ogn-space-12: 3rem;
  --ogn-space-16: 4rem;
  --ogn-space-20: 5rem;
  --ogn-space-24: 6rem;

  /* Layout */
  --ogn-container-max:  1200px;
  --ogn-container-narrow: 800px;
  --ogn-header-h:       72px;

  /* Radii */
  --ogn-radius-sm:   4px;
  --ogn-radius-md:   8px;
  --ogn-radius-lg:   12px;
  --ogn-radius-xl:   20px;
  --ogn-radius-full: 9999px;

  /* Shadows */
  --ogn-shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
  --ogn-shadow-md:  0 4px 16px rgba(0,0,0,0.6);
  --ogn-shadow-lg:  0 8px 32px rgba(0,0,0,0.7);
  --ogn-shadow-gold: 0 0 20px rgba(201,169,78,0.20);

  /* Transitions */
  --ogn-transition:      0.25s ease;
  --ogn-transition-fast: 0.15s ease;
  --ogn-transition-slow: 0.4s ease;
}

/* ── 2. Reset & Base ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  background-color: var(--ogn-bg-dark);
  color: var(--ogn-text-primary);
  font-family: var(--ogn-font-body);
  font-size: var(--ogn-text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Subtle noise texture — pure CSS, no image dependency */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ogn-font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ogn-text-primary);
  letter-spacing: 0.03em;
}

a {
  color: var(--ogn-gold);
  text-decoration: none;
  transition: color var(--ogn-transition-fast);
}
a:hover {
  color: var(--ogn-gold-light);
}

p { margin-bottom: var(--ogn-space-4); }
p:last-child { margin-bottom: 0; }

/* ── 3. Layout ────────────────────────────────────────────────────────────── */
.ogn-page-wrapper {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--ogn-header-h));
}

.ogn-container {
  width: 100%;
  max-width: var(--ogn-container-max);
  margin-inline: auto;
  padding-inline: var(--ogn-space-6);
}

.ogn-container--narrow {
  max-width: var(--ogn-container-narrow);
}

.ogn-main-content {
  padding-block: var(--ogn-space-16);
}

/* Full-width Elementor — no container constraint */
.ogn-main--full-width {
  padding-block: 0;
  width: 100%;
  max-width: none;
}

/* ── 4. Header ────────────────────────────────────────────────────────────── */
.ogn-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--ogn-header-h);
  background: rgba(8,8,15,0.92);
  border-bottom: 1px solid var(--ogn-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ogn-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--ogn-container-max);
  margin-inline: auto;
  padding-inline: var(--ogn-space-6);
  gap: var(--ogn-space-8);
}

/* ── 4a. Branding ──── */
.ogn-branding {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.ogn-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.ogn-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* Fallback when logo file not yet uploaded */
.ogn-logo-text {
  font-family: var(--ogn-font-heading);
  font-size: var(--ogn-text-xl);
  font-weight: 700;
  color: var(--ogn-gold);
  letter-spacing: 0.06em;
  line-height: 1;
}

.ogn-site-tagline {
  font-size: var(--ogn-text-xs);
  color: var(--ogn-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  display: none; /* shown only on larger screens */
}

/* ── 4b. Navigation ──── */
.ogn-primary-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.ogn-nav-menu {
  display: flex;
  list-style: none;
  gap: var(--ogn-space-1);
  align-items: center;
}

.ogn-nav-menu li {
  position: relative;
}

.ogn-nav-menu li a {
  display: flex;
  align-items: center;
  padding: var(--ogn-space-2) var(--ogn-space-4);
  font-size: var(--ogn-text-sm);
  font-weight: 500;
  color: var(--ogn-text-secondary);
  border-radius: var(--ogn-radius-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--ogn-transition-fast), background var(--ogn-transition-fast);
}

.ogn-nav-menu li a:hover,
.ogn-nav-menu li.current-menu-item > a,
.ogn-nav-menu li.current-page-ancestor > a {
  color: var(--ogn-gold);
  background: var(--ogn-gold-glow);
}

/* Dropdown */
.ogn-nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--ogn-bg-elevated);
  border: 1px solid var(--ogn-border);
  border-radius: var(--ogn-radius-md);
  box-shadow: var(--ogn-shadow-lg);
  list-style: none;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ogn-transition), transform var(--ogn-transition), visibility var(--ogn-transition);
  z-index: 10;
}

.ogn-nav-menu li:hover > .sub-menu,
.ogn-nav-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ogn-nav-menu .sub-menu li a {
  padding: var(--ogn-space-3) var(--ogn-space-5);
  font-size: var(--ogn-text-sm);
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
}

/* ── 4c. Hamburger ──── */
.ogn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--ogn-border);
  border-radius: var(--ogn-radius-sm);
  padding: var(--ogn-space-2);
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.ogn-hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ogn-gold);
  border-radius: var(--ogn-radius-full);
  transition: transform var(--ogn-transition), opacity var(--ogn-transition);
}

.ogn-hamburger[aria-expanded="true"] .ogn-hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ogn-hamburger[aria-expanded="true"] .ogn-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.ogn-hamburger[aria-expanded="true"] .ogn-hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 5. Footer ────────────────────────────────────────────────────────────── */
.ogn-site-footer {
  background: var(--ogn-bg-void);
  border-top: 1px solid var(--ogn-border);
  padding-block: var(--ogn-space-16) var(--ogn-space-8);
  margin-top: auto;
}

.ogn-footer-inner {
  max-width: var(--ogn-container-max);
  margin-inline: auto;
  padding-inline: var(--ogn-space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ogn-space-12) var(--ogn-space-16);
}

.ogn-footer-branding {
  display: flex;
  flex-direction: column;
  gap: var(--ogn-space-4);
}

.ogn-footer-tagline {
  font-size: var(--ogn-text-sm);
  color: var(--ogn-text-muted);
  line-height: 1.6;
  margin: 0;
}

.ogn-footer-nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.ogn-footer-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ogn-space-2) var(--ogn-space-6);
  justify-content: flex-end;
}

.ogn-footer-menu li a {
  font-size: var(--ogn-text-sm);
  color: var(--ogn-text-secondary);
  letter-spacing: 0.04em;
  transition: color var(--ogn-transition-fast);
}

.ogn-footer-menu li a:hover {
  color: var(--ogn-gold);
}

.ogn-footer-legal {
  grid-column: 1 / -1;
  padding-top: var(--ogn-space-6);
  border-top: 1px solid var(--ogn-border-subtle);
}

.ogn-copyright {
  font-size: var(--ogn-text-xs);
  color: var(--ogn-text-muted);
  margin: 0;
}

.ogn-copyright a {
  color: var(--ogn-text-secondary);
}
.ogn-copyright a:hover {
  color: var(--ogn-gold);
}

/* ── 6. Post Cards ────────────────────────────────────────────────────────── */
.ogn-loop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ogn-space-8);
}

.ogn-post-card {
  background: var(--ogn-bg-surface);
  border: 1px solid var(--ogn-border-subtle);
  border-radius: var(--ogn-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--ogn-transition), box-shadow var(--ogn-transition), transform var(--ogn-transition);
}

.ogn-post-card:hover {
  border-color: var(--ogn-border);
  box-shadow: var(--ogn-shadow-gold);
  transform: translateY(-2px);
}

.ogn-post-card__thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.ogn-post-card__header {
  padding: var(--ogn-space-6) var(--ogn-space-6) 0;
}

.ogn-post-card__title {
  font-size: var(--ogn-text-xl);
  margin-bottom: var(--ogn-space-2);
}

.ogn-post-card__title a {
  color: var(--ogn-text-primary);
}
.ogn-post-card__title a:hover {
  color: var(--ogn-gold);
}

.ogn-post-card__date {
  font-size: var(--ogn-text-xs);
  color: var(--ogn-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ogn-post-card__excerpt {
  flex: 1;
  padding: var(--ogn-space-4) var(--ogn-space-6);
  color: var(--ogn-text-secondary);
  font-size: var(--ogn-text-sm);
  line-height: 1.7;
}

.ogn-post-card__footer {
  padding: var(--ogn-space-4) var(--ogn-space-6) var(--ogn-space-6);
}

/* ── 7. Single Post / Page ────────────────────────────────────────────────── */
.ogn-single-post,
.ogn-page-content {
  background: var(--ogn-bg-surface);
  border: 1px solid var(--ogn-border-subtle);
  border-radius: var(--ogn-radius-lg);
  padding: var(--ogn-space-12);
}

.ogn-single-post__header,
.ogn-page-content__header {
  margin-bottom: var(--ogn-space-8);
  padding-bottom: var(--ogn-space-8);
  border-bottom: 1px solid var(--ogn-border-subtle);
}

.ogn-single-post__title,
.ogn-page-content__title {
  font-size: var(--ogn-text-3xl);
  margin-bottom: var(--ogn-space-4);
}

.ogn-single-post__meta {
  display: flex;
  gap: var(--ogn-space-4);
  font-size: var(--ogn-text-sm);
  color: var(--ogn-text-muted);
}

.ogn-single-post__thumb {
  margin-bottom: var(--ogn-space-8);
  border-radius: var(--ogn-radius-md);
  overflow: hidden;
}

.ogn-single-post__thumb img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
}

.ogn-single-post__body,
.ogn-page-content__body {
  color: var(--ogn-text-secondary);
  line-height: 1.8;
}

/* Entry content typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: var(--ogn-space-8);
  margin-bottom: var(--ogn-space-4);
  color: var(--ogn-text-primary);
}

.entry-content h2 { font-size: var(--ogn-text-2xl); }
.entry-content h3 { font-size: var(--ogn-text-xl); }
.entry-content h4 { font-size: var(--ogn-text-lg); }

.entry-content ul,
.entry-content ol {
  padding-left: var(--ogn-space-8);
  margin-bottom: var(--ogn-space-4);
}

.entry-content li {
  margin-bottom: var(--ogn-space-2);
}

.entry-content blockquote {
  border-left: 3px solid var(--ogn-gold);
  padding-left: var(--ogn-space-6);
  margin-block: var(--ogn-space-8);
  color: var(--ogn-text-secondary);
  font-style: italic;
}

.entry-content code {
  font-family: var(--ogn-font-mono);
  font-size: 0.875em;
  background: var(--ogn-bg-elevated);
  padding: 2px 6px;
  border-radius: var(--ogn-radius-sm);
  color: var(--ogn-gold-light);
}

.entry-content pre {
  background: var(--ogn-bg-void);
  border: 1px solid var(--ogn-border-subtle);
  border-radius: var(--ogn-radius-md);
  padding: var(--ogn-space-6);
  overflow-x: auto;
  margin-bottom: var(--ogn-space-6);
}

.entry-content pre code {
  background: none;
  padding: 0;
}

.entry-content a {
  color: var(--ogn-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content img {
  border-radius: var(--ogn-radius-md);
  max-width: 100%;
  height: auto;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ogn-space-8);
  font-size: var(--ogn-text-sm);
}

.entry-content th,
.entry-content td {
  padding: var(--ogn-space-3) var(--ogn-space-4);
  border: 1px solid var(--ogn-border-subtle);
  text-align: left;
}

.entry-content th {
  background: var(--ogn-bg-elevated);
  color: var(--ogn-gold);
  font-family: var(--ogn-font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── 8. Post Navigation ───────────────────────────────────────────────────── */
.ogn-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--ogn-space-4);
  padding-top: var(--ogn-space-8);
  border-top: 1px solid var(--ogn-border-subtle);
  font-size: var(--ogn-text-sm);
}

.ogn-post-nav__prev,
.ogn-post-nav__next {
  color: var(--ogn-text-secondary);
  transition: color var(--ogn-transition-fast);
  max-width: 48%;
}

.ogn-post-nav__prev:hover,
.ogn-post-nav__next:hover {
  color: var(--ogn-gold);
}

/* ── 9. Archive Header ─────────────────────────────────────────────────────── */
.ogn-archive-header {
  margin-bottom: var(--ogn-space-12);
  padding-bottom: var(--ogn-space-8);
  border-bottom: 1px solid var(--ogn-border);
}

.ogn-archive-header__title {
  font-size: var(--ogn-text-3xl);
  margin-bottom: var(--ogn-space-4);
}

.ogn-archive-header__description {
  color: var(--ogn-text-secondary);
  font-size: var(--ogn-text-lg);
  max-width: 600px;
}

/* ── 10. 404 ──────────────────────────────────────────────────────────────── */
.ogn-404 {
  text-align: center;
  padding: var(--ogn-space-24) var(--ogn-space-8);
}

.ogn-404__rune {
  font-size: 5rem;
  color: var(--ogn-gold-muted);
  margin-bottom: var(--ogn-space-8);
  line-height: 1;
  user-select: none;
}

.ogn-404__title {
  font-size: var(--ogn-text-4xl);
  margin-bottom: var(--ogn-space-6);
  color: var(--ogn-text-primary);
}

.ogn-404__message {
  font-size: var(--ogn-text-lg);
  color: var(--ogn-text-secondary);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--ogn-space-10);
}

/* ── 11. Buttons ──────────────────────────────────────────────────────────── */
.ogn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ogn-space-2);
  padding: var(--ogn-space-3) var(--ogn-space-6);
  border-radius: var(--ogn-radius-sm);
  font-family: var(--ogn-font-heading);
  font-size: var(--ogn-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--ogn-transition-fast), color var(--ogn-transition-fast),
              border-color var(--ogn-transition-fast), box-shadow var(--ogn-transition-fast);
  white-space: nowrap;
}

.ogn-btn--primary {
  background: var(--ogn-gold);
  color: var(--ogn-text-inverse);
  border-color: var(--ogn-gold);
}
.ogn-btn--primary:hover {
  background: var(--ogn-gold-light);
  border-color: var(--ogn-gold-light);
  color: var(--ogn-text-inverse);
  box-shadow: var(--ogn-shadow-gold);
}

.ogn-btn--ghost {
  background: transparent;
  color: var(--ogn-gold);
  border-color: var(--ogn-gold-muted);
}
.ogn-btn--ghost:hover {
  background: var(--ogn-gold-glow);
  border-color: var(--ogn-gold);
  color: var(--ogn-gold-light);
}

/* ── 12. Pagination ───────────────────────────────────────────────────────── */
.ogn-pagination {
  margin-top: var(--ogn-space-12);
  display: flex;
  justify-content: center;
}

.ogn-pagination .nav-links {
  display: flex;
  gap: var(--ogn-space-2);
  align-items: center;
  flex-wrap: wrap;
}

.ogn-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--ogn-space-3);
  border: 1px solid var(--ogn-border);
  border-radius: var(--ogn-radius-sm);
  font-size: var(--ogn-text-sm);
  color: var(--ogn-text-secondary);
  background: var(--ogn-bg-surface);
  transition: all var(--ogn-transition-fast);
  text-decoration: none;
}

.ogn-pagination .page-numbers:hover,
.ogn-pagination .page-numbers.current {
  background: var(--ogn-gold-glow);
  border-color: var(--ogn-gold-muted);
  color: var(--ogn-gold);
}

/* ── 13. Empty States ─────────────────────────────────────────────────────── */
.ogn-empty-state {
  text-align: center;
  padding: var(--ogn-space-20) var(--ogn-space-8);
  color: var(--ogn-text-muted);
}

/* ── 14. Elementor Integration ────────────────────────────────────────────── */

/* Full-width Elementor sections — no max-width interference */
.elementor-section.elementor-section-stretched {
  max-width: none !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  position: relative !important;
}

/* Ensure Elementor editor renders correctly */
.elementor-editor-active .ogn-page-content__body {
  padding: 0;
}

/* Override any global container that might clip Elementor full-width sections */
.ogn-main--full-width .ogn-container,
.ogn-main--full-width .elementor-section-wrap {
  max-width: none;
  padding: 0;
}

/* Block align-wide and align-full for WP blocks */
.alignwide {
  margin-inline: calc(-1 * var(--ogn-space-8));
  max-width: calc(var(--ogn-container-narrow) + var(--ogn-space-16));
}

.alignfull {
  margin-inline: calc(-1 * var(--ogn-space-12));
  max-width: calc(100% + var(--ogn-space-24));
}

/* ── 15. WP Core Compatibility ────────────────────────────────────────────── */

/* Screen reader only */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--ogn-space-4) var(--ogn-space-6);
  background: var(--ogn-gold);
  color: var(--ogn-text-inverse);
  font-weight: 700;
  z-index: 9999;
  clip: auto;
  clip-path: none;
  overflow: visible;
}

a:focus-visible,
button:focus-visible,
.ogn-btn:focus-visible,
.ogn-hamburger:focus-visible {
  outline: 2px solid var(--ogn-gold-light);
  outline-offset: 2px;
}

/* WP captions */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: var(--ogn-text-sm);
  color: var(--ogn-text-muted);
  text-align: center;
  margin-top: var(--ogn-space-2);
}

/* Sticky post */
.sticky {
  border-left: 3px solid var(--ogn-gold);
  padding-left: var(--ogn-space-4);
}

/* ── 16. Responsive ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .ogn-site-tagline {
    display: block;
  }
}

@media (max-width: 768px) {
  :root {
    --ogn-header-h: 60px;
  }

  .ogn-header-inner {
    padding-inline: var(--ogn-space-4);
  }

  .ogn-hamburger {
    display: flex;
  }

  .ogn-primary-nav {
    position: fixed;
    top: var(--ogn-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8,8,15,0.97);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--ogn-space-8) var(--ogn-space-6);
    transform: translateX(100%);
    transition: transform var(--ogn-transition-slow);
    overflow-y: auto;
    z-index: 999;
  }

  .ogn-primary-nav.is-open {
    transform: translateX(0);
  }

  .ogn-nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .ogn-nav-menu li a {
    padding: var(--ogn-space-4) var(--ogn-space-4);
    font-size: var(--ogn-text-lg);
    border-bottom: 1px solid var(--ogn-border-subtle);
    text-transform: none;
  }

  .ogn-nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding-left: var(--ogn-space-4);
  }

  .ogn-nav-menu .sub-menu li a {
    font-size: var(--ogn-text-base);
  }

  .ogn-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--ogn-space-8);
  }

  .ogn-footer-nav {
    justify-content: flex-start;
  }

  .ogn-footer-menu {
    justify-content: flex-start;
  }

  .ogn-loop {
    grid-template-columns: 1fr;
  }

  .ogn-single-post,
  .ogn-page-content {
    padding: var(--ogn-space-6);
  }

  .ogn-container {
    padding-inline: var(--ogn-space-4);
  }

  .ogn-404__title {
    font-size: var(--ogn-text-3xl);
  }
}

@media (max-width: 480px) {
  :root {
    --ogn-header-h: 56px;
  }

  .ogn-single-post__title,
  .ogn-page-content__title,
  .ogn-archive-header__title {
    font-size: var(--ogn-text-2xl);
  }

  .ogn-logo-img {
    height: 36px;
  }
}

/* ── 17. Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 18. Print ────────────────────────────────────────────────────────────── */
@media print {
  .ogn-site-header,
  .ogn-site-footer,
  .ogn-hamburger,
  .ogn-pagination,
  .ogn-post-nav {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .ogn-single-post,
  .ogn-page-content {
    background: white;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}