/* ============================================================
   SAVVY TRAVELING — DESIGN SYSTEM v1.0
   Typography: Playfair Display (headings) + DM Sans (body)
   Colors: Terracotta #C1440E | Sand #F5EDD6 | Forest #2D5016
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --color-terracotta: #C1440E;
  --color-terracotta-light: #E8724A;
  --color-terracotta-dark: #9A3208;
  --color-sand: #F5EDD6;
  --color-sand-dark: #E8D9B5;
  --color-forest: #2D5016;
  --color-forest-light: #4A7A28;
  --color-charcoal: #2C2C2C;
  --color-warm-gray: #6B6560;
  --color-off-white: #FDFAF4;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ---- Base Typography ---- */
body,
.site {
  font-family: var(--font-body) !important;
  color: var(--color-charcoal) !important;
  background-color: var(--color-off-white) !important;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title,
.wp-block-heading {
  font-family: var(--font-heading) !important;
  color: var(--color-charcoal) !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem) !important; }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem) !important; }
h4 { font-size: 1.3rem !important; }

p {
  font-family: var(--font-body) !important;
  line-height: 1.8;
}

/* ---- Site Header ---- */
#masthead,
.site-header,
header.site-header,
.kadence-sticky-header,
.header-wrap {
  background-color: var(--color-off-white) !important;
  border-bottom: 1px solid var(--color-sand-dark) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

.site-title a,
.site-branding .site-title a {
  font-family: var(--font-heading) !important;
  color: var(--color-charcoal) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}

/* ---- Navigation ---- */
.main-navigation a,
.primary-menu a,
nav.main-navigation ul li a,
.kadence-navigation a,
.nav--primary a,
#site-navigation a {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-charcoal) !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

.main-navigation a:hover,
.primary-menu a:hover,
nav.main-navigation ul li a:hover,
.kadence-navigation a:hover {
  color: var(--color-terracotta) !important;
}

/* ---- Buttons ---- */
.wp-block-button__link,
.wp-element-button,
.button,
button[type="submit"],
input[type="submit"],
.kb-btn {
  background-color: var(--color-terracotta) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 28px !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-terracotta-dark) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid var(--color-terracotta) !important;
  color: var(--color-terracotta) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-terracotta) !important;
  color: #ffffff !important;
}

/* ---- Links ---- */
a {
  color: var(--color-terracotta) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--color-terracotta-dark) !important;
}

/* ---- Page Title / Entry Header ---- */
.entry-header,
.page-header,
.wp-block-post-title {
  background-color: var(--color-sand) !important;
  padding: 4rem 2rem 3rem !important;
  border-bottom: 1px solid var(--color-sand-dark) !important;
}

.entry-title,
.page-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  color: var(--color-charcoal) !important;
  font-weight: 700 !important;
}

/* ---- Blog Archive ---- */
.blog .entry-title a,
.archive .entry-title a,
.home .entry-title a {
  color: var(--color-charcoal) !important;
  font-family: var(--font-heading) !important;
  text-decoration: none !important;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover {
  color: var(--color-terracotta) !important;
}

.entry-meta,
.entry-meta a,
.posted-on,
.byline {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-warm-gray) !important;
  font-family: var(--font-body) !important;
}

.entry-meta a:hover {
  color: var(--color-terracotta) !important;
}

/* ---- Single Post Content ---- */
.single .entry-content,
.page .entry-content {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  font-family: var(--font-body) !important;
}

.single .entry-content h2,
.single .entry-content h3,
.page .entry-content h2,
.page .entry-content h3 {
  font-family: var(--font-heading) !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.single .entry-content blockquote,
.page .entry-content blockquote {
  border-left: 3px solid var(--color-terracotta) !important;
  padding-left: 1.5rem !important;
  font-style: italic !important;
  font-family: var(--font-heading) !important;
  font-size: 1.2rem !important;
  color: var(--color-warm-gray) !important;
  margin: 2rem 0 !important;
  background: none !important;
}

/* ---- Gutenberg Cover Block ---- */
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container h3 {
  font-family: var(--font-heading) !important;
  color: #ffffff !important;
}

/* ---- Gutenberg Pullquote ---- */
.wp-block-pullquote blockquote p {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
}

.wp-block-pullquote {
  border-top: 3px solid var(--color-terracotta) !important;
  border-bottom: 3px solid var(--color-terracotta) !important;
}

/* ---- Separator ---- */
.wp-block-separator,
hr {
  border-color: var(--color-sand-dark) !important;
}

/* ---- Tables ---- */
table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
}

th {
  background-color: var(--color-charcoal) !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--color-sand-dark) !important;
  font-size: 0.95rem !important;
  color: var(--color-charcoal) !important;
}

tr:nth-child(even) td {
  background-color: var(--color-sand) !important;
}

/* ---- Footer ---- */
.site-footer,
footer.site-footer,
#colophon {
  background-color: var(--color-charcoal) !important;
  color: rgba(255,255,255,0.75) !important;
  padding: 3rem 0 1.5rem !important;
}

.site-footer p,
footer.site-footer p,
#colophon p {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.9rem !important;
}

.site-footer a,
footer.site-footer a,
#colophon a {
  color: rgba(255,255,255,0.75) !important;
}

.site-footer a:hover,
footer.site-footer a:hover,
#colophon a:hover {
  color: var(--color-terracotta-light) !important;
}

/* ---- Kadence-specific overrides ---- */
.kb-row-layout-wrap {
  font-family: var(--font-body) !important;
}

.kb-advanced-heading {
  font-family: var(--font-heading) !important;
}

/* ---- Utility classes used in page content ---- */
.st-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-terracotta) !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

.st-stat-number {
  font-family: var(--font-heading) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--color-terracotta) !important;
  display: block !important;
  line-height: 1 !important;
  margin-bottom: 0.5rem !important;
}

.st-stat-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-warm-gray) !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.3rem !important; }
  
  .entry-header,
  .page-header {
    padding: 2.5rem 1.5rem 2rem !important;
  }
}

/* ---- Hide page title banner on front page (homepage) ---- */
.home .entry-header,
.home .page-header,
.home .wp-block-post-title,
.page-template-default.home .entry-header {
  display: none !important;
}

/* ---- Hide page title banner on specific pages that use full-width hero ---- */
.page-id-34674 .entry-header,
.page-id-34674 .page-header {
  display: none !important;
}

/* ---- Ensure hero cover blocks are full-width ---- */
.home .wp-block-cover,
.home .wp-block-group.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ---- Blog page title ---- */
.blog .page-header .page-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
}

/* ---- Scrollbar styling ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-off-white); }
::-webkit-scrollbar-thumb { background: var(--color-sand-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-warm-gray); }