/*
Theme Name: Hearth & Hush
Theme URI: https://hearthandhush.co.uk
Description: Custom child theme for the Hearth & Hush cozy home discovery guide. Warm nude / beige palette, editorial serif headlines, auto affiliate disclosure, optimised for Pinterest CTR. Built on GeneratePress.
Author: Hearth & Hush
Author URI: https://hearthandhush.co.uk
Template: generatepress
Version: 1.0.0
Text Domain: hearth-and-hush
*/

/* ==========================================================================
   Brand palette
   ========================================================================== */
:root {
  --hh-cream:  #F5EFE6;
  --hh-beige:  #E8DBC9;
  --hh-taupe:  #D9C5B2;
  --hh-mocha:  #A67B5B;
  --hh-oak:    #5D4037;
  --hh-brass:  #B89160;
  --hh-ink:    #2E2A26;
  --hh-white:  #FFFFFF;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--hh-ink);
  background: var(--hh-cream);
  line-height: 1.6;
  font-size: 17px;
}

@media (min-width: 768px) {
  body { font-size: 18px; }
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--hh-oak);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1, .entry-title { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; font-weight: 600; }

@media (min-width: 768px) {
  h1, .entry-title { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.75rem; }
}

/* Pull quotes */
blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--hh-oak);
  border-left: 3px solid var(--hh-brass);
  padding-left: 1.25em;
  margin: 1.5em 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
  color: var(--hh-mocha);
  text-decoration: underline;
  text-decoration-color: var(--hh-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--hh-oak);
  text-decoration-color: var(--hh-mocha);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  background: var(--hh-mocha);
  color: var(--hh-cream);
  padding: 0.75em 1.75em;
  border: none;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--hh-oak);
  color: var(--hh-cream);
  text-decoration: none;
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--hh-oak);
  border: 1px solid var(--hh-mocha);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--hh-mocha);
  color: var(--hh-cream);
}

/* ==========================================================================
   Affiliate disclosure
   ========================================================================== */
.hh-affiliate-disclosure {
  background: var(--hh-beige);
  border-left: 3px solid var(--hh-brass);
  padding: 1em 1.25em;
  margin: 1.5em 0;
  font-size: 0.875rem;
  color: var(--hh-oak);
  font-style: italic;
  border-radius: 0 2px 2px 0;
}

.hh-affiliate-disclosure a {
  color: var(--hh-oak);
  font-weight: 500;
}

/* ==========================================================================
   Post layout
   ========================================================================== */
.entry-header {
  text-align: center;
  padding: 1.5em 0 1em;
}

.entry-title {
  margin-bottom: 0.5em;
}

.entry-meta {
  font-size: 0.875rem;
  color: var(--hh-mocha);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.entry-content > p:first-of-type {
  font-size: 1.125rem;
  color: var(--hh-oak);
  line-height: 1.6;
}

/* Featured image rounded subtly */
.featured-image img,
.post-image img,
.wp-block-image img {
  border-radius: 4px;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  background: var(--hh-cream);
  border-bottom: 1px solid var(--hh-taupe);
}

.site-title a {
  color: var(--hh-oak);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.site-description {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--hh-mocha);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-style: normal;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.main-navigation,
.main-navigation ul ul {
  background: var(--hh-cream);
}

.main-navigation .main-nav ul li a {
  color: var(--hh-oak);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--hh-mocha);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--hh-beige);
  color: var(--hh-oak);
  font-size: 0.875rem;
}

.site-footer a {
  color: var(--hh-oak);
}

/* ==========================================================================
   Forms (newsletter signup styling)
   ========================================================================== */
input[type="email"],
input[type="text"],
textarea {
  background: var(--hh-white);
  border: 1px solid var(--hh-taupe);
  color: var(--hh-ink);
  padding: 0.75em 1em;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
}

input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
  border-color: var(--hh-mocha);
  outline: none;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.hh-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--hh-brass);
  margin: 2em auto;
  border: none;
}

.hh-caption {
  font-size: 0.8125rem;
  color: var(--hh-mocha);
  font-style: italic;
  text-align: center;
  margin-top: 0.5em;
}