@import url("fonts.css");

/* ==========================================================================
   Living Debt Free - design tokens lifted from the hello-fse-blog theme
   (see --wp--preset--* in the original HTTrack mirror).
   Note: the theme's font token was misspelled "oswold"; the font is Oswald
   and it is spelled correctly throughout this rebuild.
   ========================================================================== */
:root {
  --c-primary: #00A9A4;
  --c-primary-dark: #00817d;
  --c-foreground: #000;
  --c-body-text: #717171;
  --c-background: #fff;
  --c-background-secondary: #f9faff;
  --c-border: #f2f2f2;
  --c-tertiary: #c3d9e7;
  --c-footer-bg: #000;
  --c-footer-text: #b7b7b7;
  --c-footer-bar: #1c1918;

  --font-body: "Oxygen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title: "Arizonia", cursive;

  --fs-body: 17px;
  --fs-small: 15px;
  --fs-tiny: 13px;
  --fs-h1: clamp(30px, 3vw, 45px);
  --fs-h2: clamp(25px, 2.6vw, 32px);
  --fs-h3: clamp(20px, 1.9vw, 22px);
  --fs-title: clamp(40px, 4.5vw, 70px);

  --sp-30: 0.67rem;
  --sp-40: 1rem;
  --sp-50: 1.5rem;
  --sp-60: 2.25rem;
  --sp-70: 3.38rem;
  --sp-80: 5.06rem;

  --wrap: 1180px;
  --prose: 44rem;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-body-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover, a:focus { color: var(--c-primary-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-foreground);
  font-weight: 500;
  margin: 0 0 0.6em;
}
h1 { font-size: var(--fs-h1); line-height: 1.38; }
h2 { font-size: var(--fs-h2); line-height: 1.43; }
h3 { font-size: var(--fs-h3); line-height: 1.36; }
p { margin: 0 0 1.25em; }
ul, ol { margin: 0 0 1.5em; padding-left: 1.35em; }
li { margin-bottom: 0.85em; }
blockquote {
  margin: 0 0 1.5em;
  padding-left: 1.25rem;
  border-left: 4px solid var(--c-primary);
  color: var(--c-foreground);
}
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-60) 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-50);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--c-background-secondary);
  border-bottom: 1px solid var(--c-border);
}
.site-branding { text-align: center; padding: var(--sp-50) 0 var(--sp-30); }
.site-title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-body-text);
  margin: 0;
}
.site-title a { color: inherit; text-decoration: none; }
.site-title a:hover { color: var(--c-primary); }
.site-tagline {
  color: var(--c-foreground);
  font-size: var(--fs-small);
  margin: 0.25rem 0 0;
  letter-spacing: 0.02em;
}

.site-nav { border-top: 1px solid var(--c-border); }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 2.5rem);
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 0.9rem 0.25rem;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-foreground);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ---------- Layout ---------- */
.site-main { padding: var(--sp-70) 0 var(--sp-80); flex: 1; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-70); }
@media (min-width: 900px) {
  .layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- Hero (home) ---------- */
.hero { background: var(--c-background-secondary); padding: var(--sp-70) 0; }
.hero-inner {
  display: grid;
  gap: var(--sp-60);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) {
  .hero-inner { grid-template-columns: 1fr auto; }
}
.hero h1 { margin-bottom: 0.4em; }
.hero p { font-size: 19px; margin-bottom: 1.5em; }
.hero-img img {
  width: clamp(180px, 26vw, 260px);
  border: 8px solid var(--c-primary);
  border-radius: 100px;
  margin-inline: auto;
}

.btn {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.btn:hover, .btn:focus { background: var(--c-primary-dark); color: #fff; text-decoration: none; }

/* ---------- Section heads ---------- */
.section-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-50);
  position: relative;
  padding-bottom: 0.45rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--c-primary);
}
.section-title.is-centered { text-align: center; }
.section-title.is-centered::after { left: 50%; transform: translateX(-50%); }

/* ---------- Post cards ---------- */
.card-grid {
  display: grid;
  gap: var(--sp-60);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: var(--sp-60);
}
.card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.card-thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-border); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--sp-50); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 0.4em; font-size: 20px; }
.card-body h3 a { color: var(--c-foreground); }
.card-body h3 a:hover { color: var(--c-primary); }
.card-body p { font-size: var(--fs-small); margin-bottom: 1em; }
.card-body .more {
  margin-top: auto;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entry-meta {
  font-size: var(--fs-tiny);
  color: var(--c-body-text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.75rem;
}
.entry-meta a { color: var(--c-body-text); }
.entry-meta a:hover { color: var(--c-primary); }
.entry-meta .sep { opacity: 0.5; margin: 0 0.45rem; }

/* ---------- Post list (blog / archive) ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list > li {
  display: grid;
  gap: var(--sp-50);
  padding-bottom: var(--sp-60);
  margin-bottom: var(--sp-60);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 640px) {
  .post-list > li { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}
.post-list > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.post-list h2 { font-size: var(--fs-h3); margin-bottom: 0.35em; }
.post-list h2 a { color: var(--c-foreground); }
.post-list h2 a:hover { color: var(--c-primary); }
.post-list img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ---------- Single entry ---------- */
.entry-header { margin-bottom: var(--sp-50); }
.entry-header h1 { margin-bottom: 0.35em; }
.entry-featured { margin-bottom: var(--sp-60); }
/* source photos are 3:2; matching that avoids cropping faces out of frame */
.entry-featured img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.entry-content { max-width: var(--prose); }
.entry-content .lede { font-size: 19px; color: var(--c-foreground); }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.6em; }
.entry-content figure { margin: var(--sp-50) 0; }
.entry-content img { border-radius: var(--radius); }
.entry-content strong { color: var(--c-foreground); }
.page-intro { max-width: var(--prose); margin-bottom: var(--sp-50); }

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: var(--sp-60) 0 0;
}
.cat-chips li { margin: 0; }
.cat-chips a {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--c-primary);
  border-radius: 100px;
  color: var(--c-primary);
  text-decoration: none;
}
.cat-chips a:hover { background: var(--c-primary); color: #fff; text-decoration: none; }

/* ---------- Sidebar ---------- */
.sidebar { font-size: var(--fs-small); }
.widget { margin-bottom: var(--sp-70); }
.widget:last-child { margin-bottom: 0; }
.widget-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: var(--sp-50);
  padding-bottom: 0.4rem;
  position: relative;
}
.widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--c-primary);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: var(--sp-40); }
.recent-posts li {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  gap: var(--sp-40);
  align-items: start;
}
.recent-posts img { width: 75px; height: 75px; object-fit: cover; border-radius: 4px; }
.recent-posts a { color: var(--c-foreground); line-height: 1.4; display: block; }
.recent-posts a:hover { color: var(--c-primary); }
.recent-posts time {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--c-body-text);
  margin-top: 0.2rem;
}
.cat-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 0.6rem;
}
.cat-list a { color: var(--c-foreground); }
.cat-list a:hover { color: var(--c-primary); }
.cat-list .count { color: var(--c-body-text); font-size: var(--fs-tiny); }

.notice {
  background: var(--c-background-secondary);
  border-left: 4px solid var(--c-primary);
  padding: var(--sp-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); }
.site-footer a { color: var(--c-footer-text); }
.site-footer a:hover { color: #fff; }
.footer-top { padding: var(--sp-70) 0; }
.footer-cols {
  display: grid;
  gap: var(--sp-60);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.site-footer .widget-title {
  color: #fff;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-footer .footer-links ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-links li { margin-bottom: 0.6rem; }
.site-footer .recent-list { list-style: none; margin: 0; padding: 0; }
.site-footer .recent-list li { margin-bottom: 1rem; line-height: 1.4; }
.site-footer .recent-list time {
  display: block;
  font-size: var(--fs-tiny);
  opacity: 0.7;
  margin-top: 0.15rem;
}
.footer-address { font-style: normal; line-height: 1.8; }
.footer-bar {
  background: var(--c-footer-bar);
  padding: 1rem 0;
  font-size: var(--fs-small);
  text-align: center;
}
.footer-bar p { margin: 0; }
.footer-bar nav { margin-top: 0.4rem; }
.footer-bar nav a { margin: 0 0.5rem; white-space: nowrap; }

@media print {
  .site-nav, .site-footer, .sidebar, .hero-img { display: none; }
  body { color: #000; font-size: 12pt; }
}