/* Balkan Guide hub alignment v1
   Purpose: make Planning Hub and Practical Guides use the current homepage
   editorial language while preserving their existing content and behavior. */
:root {
  --hub-paper: #eee7db;
  --hub-ink: #273a35;
  --hub-muted: #63716a;
  --hub-rule: #cbbfac;
  --hub-rust: #b85d3f;
  --hub-gold: #d79a62;
  --hub-forest: #2d4d4b;
  --hub-cream: #f4eee3;
}

body {
  background: var(--hub-paper) !important;
  color: var(--hub-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.site-header {
  background: #1f2926 !important;
  border-bottom: 3px solid var(--hub-rust) !important;
}

.site-header .site-title {
  color: var(--hub-cream) !important;
  -webkit-text-fill-color: var(--hub-cream) !important;
}

.site-header .site-subtitle,
.breadcrumb,
.breadcrumb a,
.breadcrumb .current {
  color: rgba(244, 238, 227, .68) !important;
}

/* Planning Hub */
.hub-wrap {
  max-width: 1240px;
  padding: 0 2rem 5rem;
}

.hub-back {
  margin: 2rem 0 1.4rem;
  color: var(--hub-rust);
}

.hub-intro,
.practical-header {
  background: var(--hub-forest) !important;
  border-top-color: var(--hub-rust) !important;
}

.hub-intro {
  padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 7vw, 5rem);
}

.hub-eyebrow,
.guide-card-icon {
  color: var(--hub-gold) !important;
}

.hub-intro h1,
.practical-header .hero-title {
  color: #f8f2e8 !important;
  -webkit-text-fill-color: #f8f2e8 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
}

.hub-lede,
.practical-header p {
  color: rgba(248, 242, 232, .82) !important;
}

.hub-button,
.hub-button.primary,
.hub-button.secondary {
  border-radius: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.hub-button.primary {
  background: var(--hub-rust);
  color: #fff8ee;
}

.hub-button.primary:hover,
.hub-button.primary:focus-visible {
  background: #963f2b;
}

.hub-button.secondary {
  border-color: rgba(244, 238, 227, .55);
  color: var(--hub-cream);
}

.hub-button.secondary:hover,
.hub-button.secondary:focus-visible {
  background: var(--hub-cream);
  border-color: var(--hub-cream);
  color: #1f2926;
}

.hub-section {
  margin-top: 5rem;
}

.hub-section h2,
.resource-link h3,
.guide-directory a,
.guide-card h3 {
  color: var(--hub-ink) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}

.hub-section > p,
.resource-link p,
.guide-card-excerpt,
.guide-card-meta,
.guide-directory small,
.hub-note {
  color: var(--hub-muted) !important;
}

.resource-list,
.resource-list li,
.guide-directory,
.guide-directory li,
.guide-card {
  border-color: var(--hub-rule) !important;
}

.resource-number,
.resource-arrow,
.hub-note strong,
.guide-card-category {
  color: var(--hub-rust) !important;
}

.resource-link:hover,
.resource-link:focus-visible,
.guide-directory a:hover,
.guide-directory a:focus-visible,
.guide-card:hover {
  background: #e5ddcf !important;
}

.resource-link:hover h3,
.resource-link:focus-visible h3,
.guide-directory a:hover,
.guide-directory a:focus-visible {
  color: var(--hub-rust) !important;
}

.hub-note {
  border-top-color: var(--hub-rust);
}

/* Practical Guides grid */
.practical-header {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 7vw, 5rem);
}

.practical-grid {
  max-width: 1240px;
  padding-top: 3.5rem;
}

.guide-card {
  min-height: 230px;
}

.guide-card-category {
  color: var(--hub-forest) !important;
}

/* Shared lower-page finish */
.email-signup-section {
  background: var(--hub-forest) !important;
  border-radius: 0 !important;
  border-top: 3px solid var(--hub-rust) !important;
  border-bottom: 0 !important;
}

.email-signup-inner h3 {
  color: var(--hub-cream) !important;
  -webkit-text-fill-color: var(--hub-cream) !important;
}

.email-signup-inner p {
  color: rgba(244, 238, 227, .75) !important;
}

.email-input-group input {
  background: #fff8ee !important;
  border-color: transparent !important;
}

.email-signup-form button,
.email-input-group button {
  background: var(--hub-gold) !important;
  border-color: var(--hub-gold) !important;
  color: #1f2926 !important;
}

.site-footer {
  border-top: 1px solid var(--hub-rule) !important;
  color: #718078 !important;
}

.site-footer a {
  color: var(--hub-rust) !important;
}

@media (max-width: 768px) {
  .hub-wrap {
    padding: 0 1.5rem 4rem;
  }

  .hub-intro,
  .practical-header {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

@media (max-width: 540px) {
  .hub-wrap {
    padding: 0 1.25rem 3.5rem;
  }

  .hub-intro,
  .practical-header {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}