/* =====================================================
   ABOUT PAGE – FULL PREMIUM STYLING
   NIPIOGNOSI AI BRAND COLORS + DARK MODE + RTL + A11Y
===================================================== */

:root {
  --nipio-ocean: #00506a;
  --nipio-midnight: #00394e;
  --nipio-amber: #fcd250;
  --nipio-gold: #e8b346;
  --nipio-teal: #82cfcd;
  --nipio-deep-teal: #48b5b4;

  --about-bg: #ffffff;
  --about-bg-soft: #f4fbfb;
  --about-surface: #ffffff;
  --about-text: #00394e;
  --about-muted: #475569;
  --about-border: rgba(0, 80, 106, 0.18);
  --about-shadow: rgba(0, 57, 78, 0.12);
  --about-gradient: linear-gradient(135deg, var(--nipio-ocean), var(--nipio-deep-teal));
  --about-accent-gradient: linear-gradient(90deg, var(--nipio-amber), var(--nipio-teal));
}

/* Dark mode support */
html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"],
.nipiognosi-dark,
.dark-mode {
  --about-bg: #061f2a;
  --about-bg-soft: #082b39;
  --about-surface: #0b3342;
  --about-text: #f8fafc;
  --about-muted: #cbd5e1;
  --about-border: rgba(130, 207, 205, 0.28);
  --about-shadow: rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --about-bg: #061f2a;
    --about-bg-soft: #082b39;
    --about-surface: #0b3342;
    --about-text: #f8fafc;
    --about-muted: #cbd5e1;
    --about-border: rgba(130, 207, 205, 0.28);
    --about-shadow: rgba(0, 0, 0, 0.35);
  }
}

/* =====================================================
   BASE
===================================================== */

.nipiognosi-about-page {
  padding-bottom: 120px;
  background: var(--about-bg);
  color: var(--about-text);
}

.nipiognosi-container.narrow {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =====================================================
   HERO
===================================================== */

.nipiognosi-about-hero {
  padding: 120px 0 90px;
  text-align: center;
  background: linear-gradient(180deg, var(--about-bg-soft) 0%, var(--about-bg) 100%);
}

.about-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  color: var(--about-text);
}

.about-subtitle {
  font-size: 20px;
  color: var(--about-muted);
  max-width: 720px;
  margin: 0 auto;
}

/* =====================================================
   GENERIC SECTION
===================================================== */

.editorial-section {
  padding: 100px 0;
}

.editorial-section.alt-bg {
  background: var(--about-bg-soft);
}

.editorial-section h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
  color: var(--about-text);
}

.editorial-section p {
  font-size: 18px;
  color: var(--about-muted);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* =====================================================
   PREMIUM LIST
===================================================== */

.premium-list {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.premium-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  font-size: 17px;
  color: var(--about-text);
}

.premium-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--about-accent-gradient);
}

/* =====================================================
   PREMIUM BOX
===================================================== */

.premium-box {
  margin-top: 30px;
  padding: 26px 30px;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    rgba(252, 210, 80, 0.18),
    rgba(130, 207, 205, 0.18)
  );
  border: 1px solid var(--about-border);
  color: var(--about-text);
  font-weight: 500;
}

.premium-box.strong {
  font-weight: 600;
}

/* =====================================================
   CREATOR GRID
===================================================== */

.about-creator-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.creator-photo img {
  width: 100%;
  height: auto;
  border-radius: 26px;
  box-shadow: 0 40px 100px var(--about-shadow);
}

/* =====================================================
   VISION & MISSION CARDS
===================================================== */

.nipiognosi-vision-section {
  padding: 120px 0;
  text-align: center;
  background: var(--about-bg);
}

.nipiognosi-vision-section h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 60px;
  color: var(--about-text);
}

.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.vision-card {
  background: var(--about-surface);
  padding: 50px;
  border-radius: 24px;
  border: 1px solid var(--about-border);
  box-shadow: 0 20px 50px var(--about-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.vision-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 80px var(--about-shadow);
}

.vision-card::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 22px;
  background: var(--about-accent-gradient);
}

.vision-card h3 {
  font-size: 22px;
  margin-bottom: 14px;
  color: var(--about-text);
}

.vision-card p {
  font-size: 17px;
  color: var(--about-muted);
}

/* =====================================================
   CTA
===================================================== */

.cta-center {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary {
  background: var(--about-gradient);
  color: #ffffff;
  border: none;
  min-height: 54px;
  padding: 0 34px;
  border-radius: 40px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 80, 106, 0.28);
}

.btn-secondary {
  min-height: 54px;
  padding: 0 34px;
  border-radius: 40px;
  border: 1px solid var(--about-border);
  background: var(--about-surface);
  color: var(--about-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.btn-secondary:hover {
  border-color: var(--nipio-deep-teal);
  color: var(--nipio-ocean);
  background: rgba(130, 207, 205, 0.12);
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.vision-card:focus-within {
  outline: 3px solid var(--nipio-amber);
  outline-offset: 4px;
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0);
}

/* Better readable selection */
.nipiognosi-about-page ::selection {
  background: var(--nipio-amber);
  color: var(--nipio-midnight);
}

/* =====================================================
   RTL SUPPORT
===================================================== */

[dir="rtl"] .premium-list li {
  padding-left: 0;
  padding-right: 26px;
}

[dir="rtl"] .premium-list li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .vision-card {
  text-align: right;
}

[dir="rtl"] .about-creator-grid {
  direction: rtl;
}

[dir="rtl"] .about-creator-grid > * {
  direction: rtl;
}

[dir="rtl"] .cta-center {
  flex-direction: row-reverse;
}

/* =====================================================
   I18N SAFE PATCHES
===================================================== */

.about-title,
.about-subtitle,
.editorial-section h2,
.editorial-section p,
.premium-list li,
.vision-card h3,
.vision-card p,
.btn-primary,
.btn-secondary {
  overflow-wrap: anywhere;
}

html[lang="ja"] .about-title,
html[lang="zh"] .about-title,
html[lang="ko"] .about-title {
  letter-spacing: 0;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 992px) {
  .nipiognosi-about-hero {
    padding: 90px 0 70px;
  }

  .about-title {
    font-size: 36px;
  }

  .about-subtitle {
    font-size: 18px;
  }

  .editorial-section {
    padding: 70px 0;
  }

  .about-creator-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .nipiognosi-vision-section {
    padding: 80px 0;
  }

  .nipiognosi-vision-section h2 {
    font-size: 34px;
    margin-bottom: 40px;
  }

  .vision-grid {
    grid-template-columns: 1fr;
  }

  .vision-card {
    padding: 34px;
  }

  .cta-center,
  [dir="rtl"] .cta-center {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .nipiognosi-container.narrow {
    padding: 0 18px;
  }

  .about-title {
    font-size: 32px;
  }

  .editorial-section h2 {
    font-size: 29px;
  }

  .nipiognosi-vision-section h2 {
    font-size: 30px;
  }

  .premium-box {
    padding: 22px;
  }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
  .vision-card,
  .btn-primary,
  .btn-secondary {
    transition: none !important;
  }

  .vision-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-primary:active,
  .btn-secondary:active {
    transform: none !important;
  }
}

/* =====================================================
   ABOUT PAGE – FULL WIDTH DARK BACKGROUND FIX
===================================================== */

html.dark body,
body.dark,
html[data-theme="dark"] body,
body[data-theme="dark"],
body.nipiognosi-dark,
body.dark-mode {
  background: #061f2a !important;
}

/* WordPress / Elementor outer wrappers */
html.dark .site,
html.dark #page,
html.dark #content,
html.dark .site-content,
html.dark .entry-content,
html.dark .elementor,
html.dark .elementor-section,
html.dark .elementor-container,
html.dark .elementor-widget-wrap,
html.dark .elementor-widget-container,
html[data-theme="dark"] .site,
html[data-theme="dark"] #page,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .elementor,
html[data-theme="dark"] .elementor-section,
html[data-theme="dark"] .elementor-container,
html[data-theme="dark"] .elementor-widget-wrap,
html[data-theme="dark"] .elementor-widget-container,
body.dark .site,
body.dark #page,
body.dark #content,
body.dark .site-content,
body.dark .entry-content,
body.dark .elementor,
body.dark .elementor-section,
body.dark .elementor-container,
body.dark .elementor-widget-wrap,
body.dark .elementor-widget-container {
  background: #061f2a !important;
}

/* About page itself should fill visually */
.nipiognosi-about-page {
  width: 100%;
  max-width: none;
  background: var(--about-bg);
}