/*
Theme Name:   N.H. Barnes Timeless Editorial
Theme URI:    https://nhbarnes.com
Description:  Child theme of GeneratePress. Gilded-by-candlelight palette (charcoal/cream/gold), self-hosted serif typography.
Author:       N.H. Barnes
Template:     generatepress
Version:      1.0.0
Text Domain:  nhbarnes-child
*/

/* ------------------------------------------------------------------ */
/* Self-hosted fonts (SIL OFL) — Cormorant Garamond (display) + EB Garamond (body) */
/* NO Google Fonts network calls. Files live in this theme's /fonts/ dir.       */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/eb-garamond-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/eb-garamond-italic.woff2') format('woff2');
}

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
  /* "Gilded, by candlelight" — warm near-black + gold sampled from the
     logo (avg #D5B256 / mid #DEB656 / highlight #FBDA69) + cream body text. */
  --nhb-bg: #100e0a;          /* warm near-black, not pure #000 */
  --nhb-bg-raised: #17130d;   /* card/panel tone, a hair lighter */
  --nhb-bg-sunken: #0a0907;   /* header/footer, darker than body */
  --nhb-ink: #ece2cd;         /* body text: warm cream (NOT gold — contrast) */
  --nhb-ink-soft: #c7b998;    /* secondary/muted cream */
  --nhb-accent: #d9b65c;      /* gold — headings, links, accents */
  --nhb-accent-bright: #f0ce72; /* gold highlight — hover, glow moments */
  --nhb-accent-dark: #a9813a; /* deeper gold — hairlines, secondary borders */
  --nhb-rule: rgba(217, 182, 92, 0.28); /* hairline gold rule */
  --nhb-glow: rgba(217, 182, 92, 0.16); /* faint outer glow for cards */

  --nhb-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --nhb-font-body: 'EB Garamond', 'Iowan Old Style', Georgia, serif;

  --nhb-measure: 40rem;
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

html {
  background-color: var(--nhb-bg);
}

body {
  background-color: var(--nhb-bg);
  color: var(--nhb-ink);
  font-family: var(--nhb-font-body);
  font-size: 1.15rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--nhb-accent);
  color: var(--nhb-bg);
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .page-title {
  font-family: var(--nhb-font-display);
  font-weight: 600;
  color: var(--nhb-accent);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: 0 0 24px rgba(217, 182, 92, 0.18);
}

h3, h4, h5, h6 {
  color: var(--nhb-accent-bright);
  text-shadow: none;
}

h1, .entry-title { font-size: 2.6rem; font-weight: 600; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

.site-title a {
  font-family: var(--nhb-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--nhb-accent) !important;
}

.site-description {
  font-family: var(--nhb-font-body);
  font-style: italic;
  color: var(--nhb-ink-soft);
}

p, li, blockquote {
  font-family: var(--nhb-font-body);
}

a {
  color: var(--nhb-accent);
  text-decoration-color: rgba(154, 59, 46, 0.35);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover, a:focus {
  color: var(--nhb-accent-dark);
  text-decoration-color: var(--nhb-accent-dark);
}

/* Comfortable reading measure for main content */
.content-area,
.entry-content,
.page-content,
.site-content article {
  max-width: var(--nhb-measure);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > *,
.page-content > * {
  max-width: var(--nhb-measure);
}

hr,
.nhb-rule {
  border: none;
  border-top: 1px solid var(--nhb-rule);
  margin: 2.5em 0;
}

/* Buttons — solid gold, dark text (primary) */
.button,
button,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--nhb-font-body);
  background-color: var(--nhb-accent);
  color: var(--nhb-bg-sunken) !important;
  border: 1px solid var(--nhb-accent);
  border-radius: 3px;
  padding: 0.7em 1.6em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--nhb-accent-bright);
  border-color: var(--nhb-accent-bright);
  box-shadow: 0 0 18px rgba(217, 182, 92, 0.35);
}

/* Secondary / outline button variant */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--nhb-accent) !important;
  border: 1px solid var(--nhb-accent);
}
.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(217, 182, 92, 0.1);
  color: var(--nhb-accent-bright) !important;
  box-shadow: none;
}

/* Header / nav — near-black so the transparent-background logo floats
   with no visible rectangle seam */
.site-header,
#site-navigation,
.main-navigation {
  background-color: var(--nhb-bg-sunken);
  border-bottom: 1px solid var(--nhb-rule);
}

.main-navigation a {
  font-family: var(--nhb-font-display);
  color: var(--nhb-ink);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.main-navigation a:hover {
  color: var(--nhb-accent);
}

/* GeneratePress's customizer-generated inline CSS (.main-navigation .main-nav
   ul li a, printed in <head> as generate-style-inline-css) sets nav links to
   #ffffff assuming a dark nav bar. Our nav bar is parchment (see rule above),
   so those links render near-invisible. Match/exceed that selector's
   specificity here so ink/terracotta wins regardless of load order. */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .mobile-menu,
.main-navigation .menu-bar-items,
.main-navigation .mobile-bar-items a {
  color: var(--nhb-ink) !important;
  background-color: transparent !important;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li a:hover,
button.menu-toggle:hover,
button.menu-toggle:focus,
.main-navigation .mobile-bar-items a:hover,
.main-navigation .mobile-bar-items a:focus {
  color: var(--nhb-accent) !important;
  background-color: transparent !important;
}

.main-navigation .main-nav ul ul li a {
  color: var(--nhb-ink) !important;
  background-color: var(--nhb-bg-raised) !important;
}

.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  color: var(--nhb-accent) !important;
  background-color: var(--nhb-bg-raised) !important;
}

.main-navigation ul ul {
  background-color: var(--nhb-bg-raised) !important;
  border: 1px solid var(--nhb-rule);
}

/* Mobile "Menu" toggle legibility on the dark header */
.main-navigation .menu-toggle,
.main-navigation .mobile-menu {
  border: 1px solid var(--nhb-rule);
  border-radius: 3px;
}

/* Footer */
.site-footer,
#site-footer,
.site-info {
  background-color: var(--nhb-bg-sunken);
  color: var(--nhb-ink-soft);
  border-top: 1px solid var(--nhb-rule);
}

.site-info a,
.site-footer a {
  color: var(--nhb-accent);
}
.site-info a:hover,
.site-footer a:hover {
  color: var(--nhb-accent-bright);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select {
  font-family: var(--nhb-font-body);
  background-color: var(--nhb-bg-raised);
  border: 1px solid rgba(217, 182, 92, 0.4);
  color: var(--nhb-ink);
  border-radius: 3px;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: var(--nhb-ink-soft);
  opacity: 0.7;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--nhb-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 182, 92, 0.22);
}

/* Contact Form 7 */
.wpcf7 label {
  color: var(--nhb-ink-soft);
}
.wpcf7-form .wpcf7-response-output {
  border-radius: 3px;
  border-color: var(--nhb-rule) !important;
  color: var(--nhb-ink);
}
.wpcf7-not-valid-tip {
  color: #e08a6f;
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--nhb-accent) !important;
  color: var(--nhb-accent-bright);
}

/* ------------------------------------------------------------------ */
/* Content cards — dark, slightly lifted, thin gold hairline + faint glow */
/* ------------------------------------------------------------------ */
.inside-article,
.page .inside-article,
.single .inside-article,
.paging-navigation,
.comments-area {
  background-color: var(--nhb-bg-raised) !important;
  border: 1px solid var(--nhb-rule);
  border-radius: 6px;
  box-shadow: 0 0 32px var(--nhb-glow);
}

/* Front page: full-width, no card shadow, reads as an open page —
   the warm radial glow behind the hero (below) does the work instead */
.home .inside-article {
  background-color: transparent !important;
  border: none;
  box-shadow: none !important;
}

/* Front page: the page's own hero H1 ("N.H. Barnes") is the real heading —
   hide GeneratePress's redundant "Home" entry-title above it. */
.home .entry-header {
  display: none;
}

/* Subtle warm radial glow behind the hero, echoing the logo's own glow */
.home .site-content {
  position: relative;
}
.home .site-content::before {
  content: "";
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(70rem, 140%);
  height: 34rem;
  background: radial-gradient(ellipse at center, rgba(217, 182, 92, 0.14) 0%, rgba(217, 182, 92, 0.05) 40%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.home .inside-article {
  position: relative;
  z-index: 1;
}

/* The masthead logo now carries the author name — the hero name/tagline
   reads as a quiet, gold-toned lead line rather than a duplicate heading. */
.nhb-hero h1 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nhb-accent-dark);
  text-shadow: none;
}
.nhb-hero .nhb-tagline {
  font-family: var(--nhb-font-display);
  font-size: 1.85rem;
  font-style: italic;
  color: var(--nhb-accent-bright);
  margin-top: 0.35rem;
}

hr.nhb-rule,
.wp-block-separator {
  border-top-color: var(--nhb-rule) !important;
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Task 6: email signup form (Newsletter plugin) — match the palette  */
/* ------------------------------------------------------------------ */
.tnp-subscription {
  margin-top: 1.25rem;
  max-width: var(--nhb-measure);
}
.tnp-subscription form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.tnp-subscription .tnp-field {
  margin: 0;
}
.tnp-subscription label {
  display: block;
  font-family: var(--nhb-font-body);
  font-size: 0.9rem;
  color: var(--nhb-ink-soft);
  margin-bottom: 0.35rem;
}
.tnp-subscription input.tnp-email {
  background-color: var(--nhb-bg-raised);
  border: 1px solid rgba(217, 182, 92, 0.4);
  border-radius: 3px;
  color: var(--nhb-ink);
  font-family: var(--nhb-font-body);
  font-size: 1rem;
  padding: 0.6rem 0.85rem;
  min-width: 260px;
}
.tnp-subscription input.tnp-email:focus {
  border-color: var(--nhb-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 182, 92, 0.22);
}
.tnp-subscription input.tnp-submit {
  background: var(--nhb-accent) !important;
  color: var(--nhb-bg-sunken) !important;
  border: none !important;
  border-radius: 3px;
  font-family: var(--nhb-font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.tnp-subscription input.tnp-submit:hover {
  background: var(--nhb-accent-bright) !important;
  box-shadow: 0 0 18px rgba(217, 182, 92, 0.35);
}

/* ------------------------------------------------------------------ */
/* Masthead logo                                                       */
/* ------------------------------------------------------------------ */
.site-logo,
.site-logo img,
.custom-logo-link img {
  width: min(420px, 90%);
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .site-logo,
  .site-logo img,
  .custom-logo-link img {
    width: min(300px, 80%);
  }
}

/* Center the masthead. GP's "floats" header structure left-aligns
   .site-logo by default; override to a centered block, and un-float it
   so it doesn't collapse the header's height. Primary nav is centered
   to match, so the whole masthead reads as one symmetrical block rather
   than a centered logo over a left-hung menu. */
.site-header .inside-header {
  text-align: center;
}

.site-header .site-logo {
  float: none;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.main-navigation .main-nav ul {
  justify-content: center;
  width: 100%;
}

.main-navigation .main-nav > ul {
  display: flex;
}