/**
 * Guide To The Philippines — Site CSS
 *
 * Site-specific enhancements loaded after engine theme.
 * Uses theme variables; scoped to .theme-philippines where needed.
 */

/* ══════════════════════════════════════════════════════════════
   HERO ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .hero-image {
  min-height: 520px;
}

.theme-philippines .hero-image::before {
  background: linear-gradient(
    to bottom,
    rgba(27, 58, 92, 0.25) 0%,
    rgba(27, 58, 92, 0.55) 100%
  );
}

.theme-philippines .hero-image__title {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.theme-philippines .hero-image__subtitle {
  font-size: var(--text-xl);
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.theme-philippines .hero-image__content {
  border-bottom: 3px solid #D4A843;
  padding-bottom: var(--space-lg);
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE INTRO
   ══════════════════════════════════════════════════════════════ */

.site-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}

.site-intro p {
  font-size: var(--text-lg);
  color: var(--text-light);
  line-height: 1.7;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   CARD GRID ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .card {
  border-top: 3px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.theme-philippines .card:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Strengthen card text contrast */
.theme-philippines .card__excerpt {
  color: var(--text);
}

.theme-philippines .card__title {
  color: var(--text);
}

.theme-philippines .card__title a {
  color: var(--text);
}

.theme-philippines .card__title a:hover {
  color: var(--accent);
}

/* Card image placeholder */
.card__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.card__image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Category tag with accent bg */
.theme-philippines .card__category {
  display: inline-block;
  background: var(--accent-light);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* ══════════════════════════════════════════════════════════════
   HEADING TYPOGRAPHY
   Navy palette — softer than the near-black #1A2332, cohesive
   with the ocean-inspired brand. Clear visual hierarchy.
   ══════════════════════════════════════════════════════════════ */

.theme-philippines h1 {
  color: #1B3A5C;
}

.theme-philippines h2 {
  color: #243B53;
}

.theme-philippines h3 {
  color: #334E68;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE SECTION SPACING
   ══════════════════════════════════════════════════════════════ */

/* Reduce gap between hero and first content section */
.theme-philippines .layout-wide > .section:first-child {
  padding-top: var(--space-lg);
}

/* Tighter intro flow on homepage */
.theme-philippines .layout-wide > .section:first-child .section__header--center {
  margin-bottom: var(--space-md);
}

/* ══════════════════════════════════════════════════════════════
   CONTENT PAGE LAYOUT
   These rules target article/content pages where the first child
   of <main> is a .section (not .hero-image). The homepage starts
   with .hero-image, so none of these selectors fire there.
   ══════════════════════════════════════════════════════════════ */

/* Uniform white bg — remove alternating color bands on article pages */
.theme-philippines .layout-default > .section:first-child,
.theme-philippines .layout-default > .section:first-child ~ .section {
  background: #fff;
}

/* ── Page title bar ── */

.theme-philippines .layout-default > .section:first-child {
  padding-top: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.theme-philippines .layout-default > .section:first-child h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Accent underline beneath page title */
.theme-philippines .layout-default > .section:first-child h1::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent);
  margin-top: 0.5rem;
  border-radius: 2px;
}

/* ── Content section — tight junction with title bar ── */

.theme-philippines .layout-default > .section:first-child + .section {
  padding-top: var(--space-md);
}

/* Content-block — remove default grid padding inside articles */
.theme-philippines .content-block {
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   CONTENT / PROSE ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Prose type scale & spacing ── */

/* Tighter element spacing than base 1.5rem */
.theme-philippines .prose > * + * {
  margin-top: 1.1rem;
}

/* H2 — major section divider */
.theme-philippines .prose h2 {
  font-size: var(--text-2xl);
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* First h2 flows naturally — no top border */
.theme-philippines .prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* H3 — sub-section heading (semibold, lighter than h2) */
.theme-philippines .prose h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
}

/* Lead paragraph — subtle emphasis after first heading */
.theme-philippines .prose > h2:first-child + p {
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--text-light);
  line-height: 1.8;
}

/* Drop-cap option for lead paragraphs */
.prose--drop-cap > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  padding-right: 0.08em;
  margin-top: 0.05em;
  font-weight: 700;
  color: var(--accent);
}

/* Pull-quote */
.pull-quote--philippines {
  border-left: 4px solid #D4A843;
  background: rgba(212, 168, 67, 0.06);
  font-size: var(--text-xl);
  font-style: italic;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
}

/* Heading anchors on content pages */
.prose h2[id],
.prose h3[id] {
  scroll-margin-top: 5rem;
}

/* Better list spacing in prose */
.theme-philippines .prose li {
  margin-bottom: 0.35em;
}

/* ══════════════════════════════════════════════════════════════
   STATS ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .stats-row {
  padding: var(--space-xl) 0;
}

.theme-philippines .stat__number {
  color: var(--accent);
  font-size: clamp(2.2rem, 1.6rem + 1.5vw, 3rem);
}

.theme-philippines .stat__label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .breadcrumbs {
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-light);
}

.theme-philippines .breadcrumbs a {
  color: var(--accent);
}

.theme-philippines .breadcrumbs a:hover {
  color: var(--accent-hover);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — DARK NAVY OVERRIDES
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .footer {
  background: var(--footer-bg);
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #B0C4D8;
}

.theme-philippines .footer-section h3 {
  color: #fff;
}

.theme-philippines .footer-section p {
  color: #8FA6C0;
}

.theme-philippines .footer-links a {
  color: #8FA6C0;
}

.theme-philippines .footer-links a:hover {
  color: #fff;
}

.theme-philippines .footer-social a {
  color: #8FA6C0;
}

.theme-philippines .footer-social a:hover {
  color: #fff;
}

.theme-philippines .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.theme-philippines .footer-bottom p {
  color: #6B8AAA;
}

.theme-philippines .footer .footer-privacy a,
.theme-philippines .footer-bottom a {
  color: #8FA6C0;
}

.theme-philippines .footer .footer-privacy a:hover,
.theme-philippines .footer-bottom a:hover {
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .toc {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
}

.theme-philippines .toc__title {
  color: var(--accent);
}

.theme-philippines .toc a {
  color: var(--text-light);
  transition: color var(--transition);
}

.theme-philippines .toc a:hover {
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   FACTS BOX
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .facts-box {
  background: #fff;
  border-left-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   IMAGE GALLERY ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .image-gallery__item {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-philippines .image-gallery__item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════
   AD CONTAINERS — Google-approved unfilled ad handling
   See: https://support.google.com/adsense/answer/10762946
   ══════════════════════════════════════════════════════════════ */

/* Override engine border/background — ads provide their own styling */
.ad-container {
  background: none;
  border: none;
  padding: 0;
}

/* Google-approved: hide unfilled ads AFTER AdSense processes them */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION TITLE ACCENT BAR
   ══════════════════════════════════════════════════════════════ */

.theme-philippines .section__header--center .section__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR — RESPONSIVE LAYOUT FIXES
   ══════════════════════════════════════════════════════════════ */

/* Desktop: hide navbar-logo (site name already in site-header above) */
.theme-philippines .navbar-logo {
  display: none;
}

/* Always hide "Browse All Pages" — clutters nav */
.theme-philippines .mobile-browse-all {
  display: none;
}

/* Tighter section header spacing */
.theme-philippines .section__header--center {
  margin-bottom: var(--space-lg);
}

/* ── Tablet: show hamburger at 1024px (11 nav items need it) ── */
@media (max-width: 1024px) {
  .theme-philippines .navbar-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    color: #F0F0F0;
    cursor: pointer;
    min-height: 40px;
  }

  .theme-philippines .hamburger-icon {
    width: 22px;
  }

  .theme-philippines .hamburger-icon span {
    height: 2px;
    background: #F0F0F0;
  }

  .theme-philippines .menu-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #F0F0F0;
  }

  .theme-philippines .navbar-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  /* Engine JS toggles aria-expanded on .navbar-toggle (sibling after menu).
     Use :has() on the parent to detect when menu should be open. */
  .theme-philippines .navbar-content:has(.navbar-toggle[aria-expanded="true"]) .navbar-menu {
    display: flex;
  }

  .theme-philippines .navbar-content {
    flex-wrap: wrap;
  }

  /* Nav links — dark theme mobile style */
  .theme-philippines .navbar-link {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    color: #B0C4D8;
  }

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

  /* Dropdown menu in mobile nav */
  .theme-philippines .dropdown-menu {
    background: rgba(0, 0, 0, 0.15);
  }

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

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

/* ══════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Hide site-header on mobile, navbar handles branding ── */
  .theme-philippines .site-header {
    display: none;
  }

  /* Show short brand in navbar on mobile (since site-header is hidden) */
  .theme-philippines .navbar-logo {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
  }

  /* Fix: navbar is the only fixed header on mobile */
  .theme-philippines .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }

  /* Mobile nav menu panel — slides below navbar */
  .theme-philippines .navbar-menu {
    background: var(--nav-bg);
    max-height: 70vh;
    overflow-y: auto;
  }

  /* ── Card & content overrides ── */

  .theme-philippines .card {
    border-top-width: 3px;
  }

  /* Stats stack cleanly */
  .theme-philippines .stats-row {
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
  }

  /* Hero adjustments */
  .theme-philippines .hero-image {
    min-height: 380px;
  }

  .theme-philippines .hero-image__content {
    padding-bottom: var(--space-md);
  }
}

@media (max-width: 480px) {
  .theme-philippines .hero-image {
    min-height: 300px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */

@media print {
  .theme-philippines .navbar,
  .theme-philippines .footer,
  .theme-philippines .share-bar,
  .theme-philippines .breadcrumbs {
    display: none;
  }

  .theme-philippines .hero-image {
    min-height: auto;
    background: none !important;
  }

  .theme-philippines .hero-image::before {
    display: none;
  }

  .theme-philippines .hero-image__content {
    color: #000;
    border-bottom-color: #000;
  }

  .theme-philippines .hero-image__title,
  .theme-philippines .hero-image__subtitle {
    color: #000;
    text-shadow: none;
  }

  .theme-philippines .card {
    break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .theme-philippines .section {
    background: #fff !important;
    padding: 1rem 0;
  }
}