/*
Theme Name: Kadence Child - ShelterGuru
Template: kadence
Description: ShelterGuru brand child theme — warm/light outdoor palette, self-hosted Lora + Work Sans.
Version: 1.0.0
*/

@font-face {
  font-family: 'Fjell';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lora-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Stiga';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/worksans-reg.woff2') format('woff2');
}

:root {
  --sg-bg: #FDFCFA;
  --sg-bg-alt: #FFFFFF;
  --sg-ink: #2E2A24;
  --sg-ink-soft: #776C5C;
  --sg-accent: #33526E;
  --sg-accent-warm: #B65A32;
  --sg-border: #EBE7DD;
  --sg-good: #4C7A54;
  --sg-bad: #A23F35;
  --sg-serif: 'Fjell', Georgia, "Iowan Old Style", serif;
  --sg-sans: 'Stiga', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: var(--sg-bg);
  color: var(--sg-ink);
  font-family: var(--sg-sans);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title a {
  font-family: var(--sg-serif);
  color: var(--sg-ink);
}

a {
  color: var(--sg-accent);
}
a:hover {
  color: var(--sg-accent-warm);
}

.site-header,
.site-footer,
.footer-widget-area {
  background-color: var(--sg-bg-alt);
  border-color: var(--sg-border);
}

/* CTA-style elements — matches the confirmed mockup's amber buttons */
.wp-block-button__link,
.kt-button,
button:not(.kadence-svg-icon-frame),
input[type="submit"] {
  background-color: var(--sg-accent-warm);
  border-color: var(--sg-accent-warm);
  color: #FFF8EE;
}
.wp-block-button__link:hover,
.kt-button:hover,
input[type="submit"]:hover {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
}

/* narrow reading column for article content, matches confirmed mockup */
.entry-content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content.alignwide,
.entry-content .alignwide {
  max-width: 880px;
}

/* Gutenberg tables — comparison tables in Trendly articles */
.entry-content table {
  border: 1px solid var(--sg-border);
  background-color: var(--sg-bg-alt);
  border-collapse: collapse;
}
.entry-content table th {
  font-family: var(--sg-serif);
  background-color: var(--sg-bg);
}
.entry-content table td,
.entry-content table th {
  border-color: var(--sg-border);
  padding: 12px 16px;
}