/**
 * Philippines Theme — Override
 *
 * Extends base theme. Ocean-inspired palette with warm off-white
 * background, deep blue accent, dark navy nav/footer, wider layout.
 */

:root {
  /* Colors */
  --text: #1A2332;
  --text-light: #4A5568;
  --muted: #8896A6;
  --bg: #FAF8F5;
  --bg-alt: #F2EFEA;
  --border: #E2E6EA;

  --link: #0066A4;
  --link-hover: #005288;

  --accent: #0066A4;
  --accent-hover: #005288;
  --accent-light: rgba(0, 102, 164, 0.08);

  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0066A4;

  --nav-bg: #1B3A5C;
  --header-bg: #1B3A5C;
  --footer-bg: #1B3A5C;

  /* Typography — tighter headings for impact */
  --text-xl: clamp(1.15rem, 1rem + 0.3vw, 1.25rem);
  --text-2xl: clamp(1.4rem, 1.1rem + 0.7vw, 1.6rem);
  --text-3xl: clamp(1.65rem, 1.2rem + 1.1vw, 2rem);
  --text-4xl: clamp(2rem, 1.4rem + 1.5vw, 2.5rem);

  /* Layout — wider for travel articles */
  --content-width: 800px;
  --wide-width: 1200px;

  /* Effects — softer, warmer */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(27, 58, 92, 0.06);
  --shadow-md: 0 4px 12px rgba(27, 58, 92, 0.08);
  --shadow-lg: 0 8px 30px rgba(27, 58, 92, 0.12);
}

/* ── Dark nav with light text ── */

.theme-philippines .navbar {
  background: var(--nav-bg);
  border-bottom-color: transparent;
}

.theme-philippines .navbar-logo {
  color: #F0F0F0;
}

.theme-philippines .navbar-link {
  color: #B0C4D8;
}

.theme-philippines .navbar-link:hover,
.theme-philippines .navbar-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.theme-philippines .dropdown-menu {
  background: var(--nav-bg);
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-philippines .dropdown-menu a {
  color: #B0C4D8;
}

.theme-philippines .dropdown-menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.theme-philippines .navbar-toggle {
  color: #F0F0F0;
}

/* Mobile nav panel — match dark nav */
.theme-philippines .navbar-menu {
  background: var(--nav-bg);
}

/* ── Dark site header — match navbar ── */

.theme-philippines .site-header {
  background: var(--header-bg);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-philippines .site-title {
  color: #F0F0F0;
}

.theme-philippines .site-title:hover {
  color: #fff;
}

.theme-philippines .site-tagline {
  color: #8FA6C0;
}

/* ── Section alternating backgrounds ── */

.theme-philippines .section:nth-child(odd) {
  background: #fff;
}

.theme-philippines .section:nth-child(even) {
  background: var(--bg);
}

/* Alt section explicitly gets warm bg */
.theme-philippines .section--alt {
  background: var(--bg-alt);
}

/* ── Cards — white on warm bg for depth ── */

.theme-philippines .card {
  background: #fff;
}

/* ── Headings — tighter line-height ── */

.theme-philippines h1,
.theme-philippines h2,
.theme-philippines h3 {
  line-height: 1.2;
  color: var(--text);
}

/* ── Hero text must stay white over image overlay ── */

.theme-philippines .hero-image__title,
.theme-philippines .hero-image__subtitle {
  color: #fff;
}

.theme-philippines .hero-image__content {
  color: #fff;
}

/* ── Dark mode ── */
/* Auto dark mode (prefers-color-scheme) removed — theme has hardcoded
   white backgrounds (#fff) in sections/cards that conflict with dark
   text variables. Only enable dark mode via explicit plugin toggle. */

/* Dark mode (plugin-driven only) */
html[data-theme="dark"].theme-philippines {
  --text: #E2E8F0;
  --text-light: #A0AEC0;
  --muted: #718096;
  --bg: #0F1923;
  --bg-alt: #1A2736;
  --border: #2D3E50;

  --link: #5BA8D4;
  --link-hover: #7CBCE3;

  --accent: #5BA8D4;
  --accent-hover: #7CBCE3;
  --accent-light: rgba(91, 168, 212, 0.12);

  --nav-bg: #0A1929;
  --header-bg: #0F1923;
  --footer-bg: #0A1929;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
}