/*
Theme Name: The Dopamine Home
Theme URI: https://example.com/the-dopamine-home
Description: A lightweight standalone theme for an image-led Home & Garden editorial site.
Author: The Dopamine Home
Version: 1.0.0
Text Domain: the-dopamine-home
*/

:root {
  --tdh-ink: #20302b;
  --tdh-ink-soft: #52625d;
  --tdh-paper: #fbfaf7;
  --tdh-sand: #eee9df;
  --tdh-moss: #71806d;
  --tdh-moss-dark: #4e6258;
  --tdh-clay: #b96e4c;
  --tdh-line: #dedbd3;
  --tdh-content: 46rem;
  --tdh-wide: 75rem;
  --tdh-shadow: 0 14px 34px rgba(32, 48, 43, 0.1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tdh-paper);
  color: var(--tdh-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

img { height: auto; max-width: 100%; }

a { color: inherit; text-underline-offset: 0.18em; }

a:hover { color: var(--tdh-moss-dark); }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  left: 1rem;
  top: 1rem;
  width: auto;
  z-index: 9999;
  background: var(--tdh-ink);
  color: #fff;
  padding: 0.75rem 1rem;
}

.site-header {
  background: rgba(251, 250, 247, 0.96);
  border-bottom: 1px solid var(--tdh-line);
  position: relative;
  z-index: 20;
}

.site-header__inner,
.site-footer__inner,
.site-shell,
.hero__inner {
  margin-inline: auto;
  max-width: var(--tdh-wide);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  min-height: 5.25rem;
}

.site-branding { flex: 0 1 auto; min-width: 0; }

.custom-logo-link { display: inline-flex; max-width: 13rem; }

.custom-logo { display: block; max-height: 3rem; width: auto; }

.site-title {
  color: var(--tdh-ink);
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
}

.site-title:hover { color: var(--tdh-ink); }

.menu-toggle {
  background: transparent;
  border: 1px solid var(--tdh-ink);
  border-radius: 0;
  color: var(--tdh-ink);
  cursor: pointer;
  display: none;
  font: inherit;
  min-height: 2.75rem;
  padding: 0.45rem 0.75rem;
}

.primary-navigation ul,
.footer-navigation ul,
.entry-categories,
.post-meta,
.post-share,
.related-posts__grid,
.category-grid,
.post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-navigation > div > ul,
.primary-navigation > ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.7vw, 1.4rem);
  justify-content: flex-end;
}

.primary-navigation a {
  color: var(--tdh-ink);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a,
.primary-navigation a:hover { color: var(--tdh-clay); }

.site-main { min-height: 55vh; }

.hero {
  background: linear-gradient(110deg, #e9e2d3 0%, #f6f2e8 48%, #dfe5d8 100%);
  overflow: hidden;
  padding-block: clamp(4.25rem, 9vw, 7.5rem);
  position: relative;
}

.hero::after {
  background: rgba(185, 110, 76, 0.2);
  border-radius: 50%;
  content: "";
  height: 18rem;
  position: absolute;
  right: -7rem;
  top: -8rem;
  width: 18rem;
}

.hero__inner { max-width: 64rem; position: relative; z-index: 1; }

.eyebrow,
.entry-categories a,
.card__category,
.section-heading__eyebrow {
  color: var(--tdh-moss-dark);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero h1,
.entry-header h1,
.archive-header h1,
.page-header h1,
.not-found h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 6vw, 5rem);
  letter-spacing: -0.055em;
  line-height: 0.97;
  margin: 0.55rem 0 1.25rem;
  max-width: 13ch;
}

.hero__intro {
  color: var(--tdh-ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin: 0;
  max-width: 40rem;
}

.home-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.home-section--latest { background: #f2efe8; }

.section-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.section-heading h2,
.related-posts h2,
.author-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0.25rem 0 0;
}

.text-link {
  color: var(--tdh-ink);
  font-weight: 700;
  white-space: nowrap;
}

.category-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.category-card {
  background: var(--tdh-sand);
  display: flex;
  grid-column: span 4;
  min-height: 18rem;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.category-card:nth-child(1),
.category-card:nth-child(2) { grid-column: span 6; min-height: 25rem; }

.category-card__image,
.category-card__placeholder,
.card__image,
.card__image-placeholder { inset: 0; position: absolute; }

.category-card__image img,
.card__image img { height: 100%; object-fit: cover; width: 100%; }

.category-card__placeholder { background: linear-gradient(140deg, #d4ded2, #9bab96); }
.category-card--home .category-card__placeholder { background: linear-gradient(140deg, #ddd4c2, #aeb89d); }
.category-card--garden .category-card__placeholder { background: linear-gradient(140deg, #e5d1b6, #899e75); }
.category-card--outdoor-living .category-card__placeholder { background: linear-gradient(140deg, #d0dcdb, #788f88); }
.category-card--ideas-by-room .category-card__placeholder { background: linear-gradient(140deg, #e7ded6, #b48e77); }
.category-card--seasonal .category-card__placeholder { background: linear-gradient(140deg, #e7d0bc, #aa795e); }

.category-card__placeholder::after,
.card__image-placeholder::after {
  background: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(255,255,255,.12) 19px, rgba(255,255,255,.12) 20px);
  content: "";
  inset: 0;
  position: absolute;
}

.category-card::after { background: linear-gradient(0deg, rgba(20, 31, 26, 0.77), rgba(20, 31, 26, 0.02) 72%); content: ""; inset: 0; position: absolute; }

.category-card__content { align-self: end; color: #fff; padding: 1.5rem; position: relative; z-index: 1; }
.category-card__content span { font-size: 0.8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.category-card__content strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.045em; line-height: 1; margin-top: .3rem; }

.post-grid,
.related-posts__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { display: flex; flex-direction: column; min-width: 0; }
.card__media { aspect-ratio: 4 / 3; background: var(--tdh-sand); display: block; overflow: hidden; position: relative; }
.card__image img { transition: transform .3s ease; }
.card:hover .card__image img { transform: scale(1.025); }
.card__image-placeholder { background: linear-gradient(135deg, #e3dbc9, #adba9d); }
.card__body { padding-top: 1rem; }
.card h2, .card h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; letter-spacing: -.035em; line-height: 1.12; margin: .35rem 0 .6rem; }
.card h2 a, .card h3 a { text-decoration: none; }
.card__excerpt { color: var(--tdh-ink-soft); font-size: .94rem; margin: 0; }

.archive-header,
.page-header,
.not-found { margin-inline: auto; max-width: var(--tdh-wide); padding: clamp(3.2rem, 7vw, 6rem) clamp(1.25rem, 3vw, 2.5rem) 2.25rem; }
.archive-header h1, .page-header h1, .not-found h1 { font-size: clamp(2.35rem, 5vw, 4.2rem); }
.archive-description { color: var(--tdh-ink-soft); max-width: 42rem; }
.archive-content { margin-inline: auto; max-width: var(--tdh-wide); padding: 1rem clamp(1.25rem, 3vw, 2.5rem) clamp(4rem, 8vw, 7rem); }

.entry-header { margin-inline: auto; max-width: var(--tdh-content); padding: clamp(2.75rem, 6vw, 5.25rem) 1.25rem 1.65rem; }
.entry-header h1 { font-size: clamp(2.3rem, 5.5vw, 4.5rem); max-width: 16ch; }
.entry-summary { color: var(--tdh-ink-soft); font-size: 1.15rem; max-width: 40rem; }
.entry-categories { display: flex; flex-wrap: wrap; gap: .65rem; }
.post-meta { color: var(--tdh-ink-soft); display: flex; flex-wrap: wrap; font-size: .9rem; gap: .5rem 1rem; margin-top: 1.1rem; }
.post-meta span + span::before { color: var(--tdh-line); content: "•"; margin-right: 1rem; }

.featured-image { margin: 0 auto clamp(2.2rem, 4vw, 3.75rem); max-width: var(--tdh-wide); padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.featured-image img { display: block; width: 100%; }
.single-post .featured-image { display: none; }

.entry-content { margin-inline: auto; max-width: var(--tdh-content); padding: 0 1.25rem clamp(3.5rem, 7vw, 6rem); }
.entry-content > * { margin-block: 0 1.45rem; }
.entry-content h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 3.8vw, 2.55rem); letter-spacing: -.045em; line-height: 1.08; margin-top: clamp(2.65rem, 6vw, 4.25rem); }
.entry-content h3 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.7vw, 1.75rem); letter-spacing: -.035em; line-height: 1.15; margin-top: 2.25rem; }
.entry-content figure { margin-inline: 0; }
.entry-content figcaption { color: var(--tdh-ink-soft); font-size: .85rem; margin-top: .55rem; text-align: left; }
.entry-content img { display: block; }
.entry-content .wp-block-image img { width: 100%; }
.entry-content .alignwide { margin-left: min(0px, calc((var(--tdh-content) - var(--tdh-wide)) / 2)); margin-right: min(0px, calc((var(--tdh-content) - var(--tdh-wide)) / 2)); max-width: var(--tdh-wide); width: calc(100% + max(0px, var(--tdh-wide) - var(--tdh-content))); }
.entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.entry-content .wp-block-quote { border-left: 3px solid var(--tdh-clay); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; margin-inline: 0; padding-left: 1.25rem; }
.entry-content .wp-block-details { background: #f2efe8; padding: 1rem 1.15rem; }
.entry-content .wp-block-details summary { cursor: pointer; font-weight: 750; }

.post-share { border-bottom: 1px solid var(--tdh-line); border-top: 1px solid var(--tdh-line); display: flex; gap: .85rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); max-width: var(--tdh-content); padding: .85rem 1.25rem; }
.post-share__label { color: var(--tdh-ink-soft); font-size: .85rem; padding-top: .33rem; }
.post-share__pin { background: var(--tdh-clay); color: #fff; font-size: .88rem; font-weight: 750; padding: .3rem .75rem; text-decoration: none; }
.post-share__pin:hover { background: #995535; color: #fff; }

.author-card, .related-posts { margin-inline: auto; max-width: var(--tdh-wide); padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.author-card { margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.author-card__inner { background: #ece8de; border-left: 4px solid var(--tdh-moss); max-width: var(--tdh-content); padding: 1.5rem; }
.author-card h2 { font-size: 1.5rem; }
.author-card p { margin-bottom: 0; }
.related-posts { border-top: 1px solid var(--tdh-line); margin-bottom: clamp(4rem, 8vw, 7rem); padding-top: clamp(2.75rem, 6vw, 4rem); }
.related-posts h2 { margin-bottom: 1.5rem; }

.pagination { display: flex; gap: .5rem; margin-top: 3rem; }
.pagination .page-numbers { border: 1px solid var(--tdh-line); padding: .45rem .75rem; text-decoration: none; }
.pagination .current { background: var(--tdh-ink); color: #fff; }

.site-footer { background: var(--tdh-ink); color: #f7f5f0; padding-block: 3rem 2rem; }
.site-footer__top { align-items: start; display: flex; gap: 2rem; justify-content: space-between; }
.site-footer .site-title { color: #fff; }
.site-footer__tagline { color: #c9d0c9; margin: .65rem 0 0; max-width: 22rem; }
.footer-navigation > div > ul, .footer-navigation > ul { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; justify-content: flex-end; }
.footer-navigation a { color: #fff; font-size: .9rem; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.2); color: #c9d0c9; font-size: .85rem; margin-top: 2rem; padding-top: 1.25rem; }

.not-found { min-height: 55vh; }
.button-link { background: var(--tdh-moss-dark); color: #fff; display: inline-block; font-weight: 700; margin-top: 1rem; padding: .75rem 1rem; text-decoration: none; }
.button-link:hover { background: var(--tdh-ink); color: #fff; }

@media (max-width: 760px) {
  .site-header__inner { min-height: 4.5rem; }
  .menu-toggle { display: block; }
  .primary-navigation { background: var(--tdh-paper); border-bottom: 1px solid var(--tdh-line); display: none; left: 0; padding: 1rem 1.25rem 1.35rem; position: absolute; right: 0; top: 100%; }
  .primary-navigation.is-open { display: block; }
  .primary-navigation > div > ul, .primary-navigation > ul { align-items: stretch; flex-direction: column; gap: .2rem; }
  .primary-navigation a { display: block; padding: .55rem 0; }
  .category-card, .category-card:nth-child(1), .category-card:nth-child(2) { grid-column: span 12; min-height: 15rem; }
  .post-grid, .related-posts__grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .site-footer__top { flex-direction: column; }
  .footer-navigation > div > ul, .footer-navigation > ul { justify-content: flex-start; }
  .entry-content .alignwide { margin-left: -1.25rem; margin-right: -1.25rem; max-width: none; width: calc(100% + 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card__image img { transition: none; }
}