/*
Theme Name:  Horology Republic
Theme URI:   https://horologyrepublic.com
Description: The Antiquarian Archive — a fully custom standalone WordPress theme for Horology Republic. Dark antiquarian aesthetic with deep antique gold accents, Cormorant Garamond display typography, and Space Mono for labels. No parent theme required.
Author:      Horology Republic
Author URI:  https://horologyrepublic.com
Version:     1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License:     GNU General Public License v2 or later
Text Domain: horology-republic
*/


/* ============================================================
   HOW THIS FILE WORKS
   ─────────────────────────────────────────────────────────
   This is a STANDALONE WordPress theme — it does not require
   any parent theme. Everything the site needs is in this file
   and the other template files in this folder.

   TO CHANGE A COLOUR: edit the values in section 1 (:root).
   One change there updates the whole site automatically.

   PALETTE — The Antiquarian Archive
     #0e0d0b  ink black  — darkest backgrounds, footer
     #2a2a2e  charcoal   — header, cards, dark sections
     #f5f0e8  cream      — body text on dark, light content bg
     #b8922a  gold       — primary accent (antique gold)
     #d4a84b  amber      — hover states, highlights
     #7a7268  dust       — muted text, captions, borders
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (variables)
   ============================================================ */
:root {
  /* Colours */
  --hr-ink:          #0e0d0b;                    /* ink black                 */
  --hr-charcoal:     #2a2a2e;                    /* dark charcoal             */
  --hr-cream:        #f5f0e8;                    /* warm cream                */
  --hr-gold:         #b8922a;                    /* antique gold              */
  --hr-amber:        #d4a84b;                    /* warm amber                */
  --hr-dust:         #7a7268;                    /* muted warm grey           */
  --hr-white:        #ffffff;                    /* pure white                */

  /* Derived shades */
  --hr-border:       rgba(184, 146, 42, 0.28);   /* subtle gold border        */
  --hr-border-dark:  rgba(245, 240, 232, 0.12);  /* cream border on dark bg   */
  --hr-ink-80:       rgba(14, 13, 11, 0.8);      /* ink with opacity          */

  /* Typography
     Cormorant Garamond — display, headlines, body (light/300 weight)
     Space Mono         — eyebrows, labels, data, captions             */
  --hr-font:         'Cormorant Garamond', Georgia, serif;
  --hr-font-mono:    'Space Mono', 'Courier New', monospace;

  /* Layout */
  --hr-container:    1200px;
  --hr-container-sm: 860px;
  --hr-gap:          1.5rem;
  --hr-radius:       0;          /* sharp corners — antiquarian editorial */

  /* Transitions */
  --hr-transition:   0.2s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--hr-font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--hr-ink);
  background-color: var(--hr-cream);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--hr-gold);
  text-decoration: none;
  transition: color var(--hr-transition);
}

a:hover {
  color: var(--hr-amber);
  text-decoration: underline;
}

/* Remove link underline inside nav/buttons */
nav a:hover,
.hr-btn:hover {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: var(--hr-font);
  font-size: 1rem;
}

p {
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   3. TYPOGRAPHY — Headings
   All-caps, tracked letter-spacing — antiquarian editorial.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hr-font);
  font-weight: 300;   /* Cormorant Garamond Light — refined, not heavy */
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--hr-charcoal);
}

/* Fluid heading scale */
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Headings on dark backgrounds */
.hr-dark h1,
.hr-dark h2,
.hr-dark h3,
.hr-dark h4,
.hr-dark h5,
.hr-dark h6,
.hr-dark .entry-title {
  color: var(--hr-cream);
}

/* Entry / post titles */
.entry-title {
  font-family: var(--hr-font);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--hr-charcoal);
}

.entry-title a {
  color: inherit;
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--hr-gold);
}

/* Widget titles */
.widget-title {
  font-family: var(--hr-font-mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-charcoal);
  border-bottom: 1px solid var(--hr-border);
  padding-bottom: 10px;
  margin-bottom: 1.25rem;
}

/* Section headings — gold rule underneath */
.hr-section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hr-section-title h2::after,
.hr-section-title h3::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--hr-gold);
  margin: 12px auto 0;
}

.hr-section-title.text-left h2::after,
.hr-section-title.text-left h3::after {
  margin-left: 0;
}

/* ── Eyebrow / Kicker label above a heading ──────────────────
   Space Mono, tiny, tracked, gold.
   Usage: <span class="hr-eyebrow">Section Label</span>
   ─────────────────────────────────────────────────────────── */
.hr-eyebrow,
.hr-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hr-font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hr-gold);
  margin-bottom: 0.75rem;
}

/* The extending gold line after the eyebrow text */
.hr-eyebrow::after,
.hr-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hr-border);
}

/* Dark-background variant — line stays gold-tinted */
.hr-dark .hr-eyebrow::after,
.hr-dark .hr-kicker::after {
  background: rgba(184, 146, 42, 0.2);
}

/* Pull quote / blockquote */
blockquote {
  font-family: var(--hr-font);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.6;
  border-left: 4px solid var(--hr-gold);
  padding: 16px 24px;
  margin: 2rem 0;
  background: var(--hr-white);
  color: var(--hr-charcoal);
}

blockquote cite {
  display: block;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hr-dust);
  margin-top: 10px;
}

/* Code */
code,
pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88rem;
  background: rgba(14, 13, 11, 0.06);
  padding: 2px 6px;
  border-radius: 2px;
}

pre {
  display: block;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

/* Horizontal rule */
hr {
  border: none;
  height: 1px;
  background: var(--hr-border);
  margin: 2rem 0;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.hr-container {
  max-width: var(--hr-container);
  margin: 0 auto;
  padding: 0 24px;
}

.hr-container--sm {
  max-width: var(--hr-container-sm);
  margin: 0 auto;
  padding: 0 24px;
}

.hr-section {
  padding: 72px 0;
}

.hr-section--sm {
  padding: 48px 0;
}

.hr-dark {
  background: var(--hr-charcoal);
  color: var(--hr-cream);
}

.hr-ink-bg {
  background: var(--hr-ink);
  color: var(--hr-cream);
}

.hr-cream-bg {
  background: var(--hr-cream);
  color: var(--hr-ink);
}


/* ============================================================
   5. SKIP LINK (accessibility)
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 8px 16px;
  background: var(--hr-gold);
  color: var(--hr-ink);
  font-weight: 700;
  z-index: 9999;
}

.skip-link:focus {
  left: 0;
}


/* ============================================================
   6. TOP BAR
   Thin strip above the main navigation.
   ============================================================ */
.hr-topbar {
  background: var(--hr-ink);
  border-bottom: 1px solid rgba(184, 146, 42, 0.2);
  padding: 6px 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--hr-dust);
}

.hr-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hr-topbar__left {
  font-style: italic;
  color: rgba(245, 240, 232, 0.5);
}

.hr-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hr-topbar__social {
  display: flex;
  gap: 12px;
  list-style: none;
}

.hr-topbar__social a {
  color: var(--hr-dust);
  font-size: 0.85rem;
  transition: color var(--hr-transition);
}

.hr-topbar__social a:hover {
  color: var(--hr-amber);
}


/* ============================================================
   7. MAIN HEADER & NAVIGATION
   ============================================================ */
.hr-header {
  background: var(--hr-charcoal);
  border-bottom: 1px solid var(--hr-border);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: box-shadow var(--hr-transition);
}

.hr-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(14, 13, 11, 0.5);
}

.hr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 24px;
  max-width: var(--hr-container);
  margin: 0 auto;
  height: 68px;
}

/* ── Branding / Logo ── */
.hr-header__branding {
  flex-shrink: 0;
}

.hr-header__logo img {
  height: 52px;
  width: auto;
}

.hr-header__site-name {
  font-family: var(--hr-font);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hr-cream);
  text-decoration: none;
  transition: color var(--hr-transition);
}

.hr-header__site-name:hover {
  color: var(--hr-amber);
  text-decoration: none;
}

/* ── Primary Navigation ── */
.hr-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.hr-nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.hr-nav__menu > li {
  position: relative;
}

.hr-nav__menu > li > a {
  display: block;
  padding: 8px 16px;
  font-family: var(--hr-font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.8);
  text-decoration: none;
  transition: color var(--hr-transition);
  white-space: nowrap;
}

.hr-nav__menu > li > a:hover,
.hr-nav__menu > li.current-menu-item > a,
.hr-nav__menu > li.current-menu-ancestor > a {
  color: var(--hr-amber);
  text-decoration: none;
}

/* Dropdown submenu */
.hr-nav__menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--hr-ink);
  border: 1px solid var(--hr-border);
  border-top: 2px solid var(--hr-gold);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--hr-transition), transform var(--hr-transition), visibility var(--hr-transition);
  z-index: 200;
}

.hr-nav__menu li:hover > ul,
.hr-nav__menu li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hr-nav__menu li ul li a {
  display: block;
  padding: 10px 18px;
  font-family: var(--hr-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 240, 232, 0.07);
  transition: color var(--hr-transition), background var(--hr-transition);
}

.hr-nav__menu li ul li:last-child a {
  border-bottom: none;
}

.hr-nav__menu li ul li a:hover {
  color: var(--hr-amber);
  background: rgba(184, 146, 42, 0.08);
}

/* ── Header Actions (cart icon, search) ── */
.hr-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.hr-header__cart-link,
.hr-header__search-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(245, 240, 232, 0.75);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--hr-transition);
}

.hr-header__cart-link:hover,
.hr-header__search-toggle:hover {
  color: var(--hr-amber);
  text-decoration: none;
}

.hr-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--hr-gold);
  color: var(--hr-ink);
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 50%;
  line-height: 1;
}

/* ── Hamburger (mobile only) ── */
.hr-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hr-nav-toggle__line {
  display: block;
  height: 2px;
  background: var(--hr-cream);
  transition: transform var(--hr-transition), opacity var(--hr-transition);
}

.hr-nav-toggle[aria-expanded="true"] .hr-nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hr-nav-toggle[aria-expanded="true"] .hr-nav-toggle__line:nth-child(2) {
  opacity: 0;
}
.hr-nav-toggle[aria-expanded="true"] .hr-nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   8. HERO / BANNER SECTION
   Handled mainly by Elementor/page builder on live pages.
   These styles ensure any non-Elementor heroes look right.
   ============================================================ */
.hr-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background: var(--hr-charcoal);
  overflow: hidden;
}

.hr-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hr-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(14, 13, 11, 0.85) 0%,
    rgba(42, 42, 46, 0.55) 100%
  );
}

.hr-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--hr-container);
  margin: 0 auto;
  padding: 80px 24px;
}

.hr-hero h1,
.hr-hero h2 {
  color: var(--hr-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
}

.hr-hero p {
  color: rgba(245, 240, 232, 0.8);
  font-size: 1.15rem;
  max-width: 540px;
  margin-bottom: 2rem;
}


/* ============================================================
   9. BUTTONS & CTAs
   Sharp corners = antiquarian editorial print style.
   ============================================================ */
.hr-btn,
a.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.elementor-button,
.wp-block-button__link {
  display: inline-block;
  padding: 12px 30px;
  font-family: var(--hr-font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;                    /* sharp corners */
  cursor: pointer;
  transition: background var(--hr-transition), color var(--hr-transition), border-color var(--hr-transition);
}

/* Primary button */
.hr-btn,
.hr-btn--primary,
input[type="submit"],
.woocommerce #respond input#submit,
.elementor-button {
  background: var(--hr-gold);
  color: var(--hr-ink);
  border: 2px solid var(--hr-gold);
}

.hr-btn:hover,
.hr-btn--primary:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.elementor-button:hover {
  background: var(--hr-amber);
  border-color: var(--hr-amber);
  color: var(--hr-ink);
  text-decoration: none;
}

/* Secondary (outline) button */
.hr-btn--outline,
a.button,
button.button,
.woocommerce a.button,
.woocommerce button.button {
  background: transparent;
  color: var(--hr-gold);
  border: 2px solid var(--hr-gold);
}

.hr-btn--outline:hover,
a.button:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--hr-gold);
  color: var(--hr-ink);
  text-decoration: none;
}

/* Dark background variants */
.hr-dark .hr-btn--outline {
  color: var(--hr-cream);
  border-color: var(--hr-cream);
}

.hr-dark .hr-btn--outline:hover {
  background: var(--hr-cream);
  color: var(--hr-charcoal);
}

/* Block button */
.wp-block-button__link {
  background: var(--hr-gold) !important;
  color: var(--hr-ink) !important;
  border: 2px solid var(--hr-gold) !important;
  border-radius: 0 !important;
}

.wp-block-button__link:hover {
  background: var(--hr-amber) !important;
  border-color: var(--hr-amber) !important;
  text-decoration: none;
}


/* ============================================================
   10. CONTENT AREA LAYOUT
   ============================================================ */
.hr-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hr-main {
  flex: 1;
}

/* Standard page/post layout */
.hr-content-wrap {
  max-width: var(--hr-container);
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}

.hr-content-wrap--no-sidebar {
  grid-template-columns: 1fr;
  max-width: var(--hr-container-sm);
}

/* Full-width (Elementor pages) */
.hr-content-wrap--full {
  max-width: 100%;
  padding: 0;
  display: block;
}

.hr-entry {
  min-width: 0; /* prevent grid blowout */
}


/* ============================================================
   11. POST CONTENT TYPOGRAPHY
   ============================================================ */
.entry-content {
  line-height: 1.8;
  color: var(--hr-ink);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--hr-charcoal);
}

.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: 1.75rem;
  margin-bottom: 1.25rem;
}

.entry-content li {
  margin-bottom: 0.4rem;
}

.entry-content img {
  border: 1px solid var(--hr-border);
  margin: 1.5rem 0;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
  padding: 10px 14px;
  border: 1px solid rgba(14, 13, 11, 0.12);
  text-align: left;
}

.entry-content th {
  background: var(--hr-charcoal);
  color: var(--hr-cream);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* Post meta — Space Mono for data/metadata */
.hr-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-family: var(--hr-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hr-dust);
  margin-bottom: 1.5rem;
}

.hr-post-meta a {
  color: var(--hr-dust);
  text-decoration: none;
}

.hr-post-meta a:hover {
  color: var(--hr-gold);
}

/* Post categories */
.hr-cat-label {
  display: inline-block;
  padding: 3px 10px;
  background: var(--hr-charcoal);
  color: var(--hr-cream);
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 6px;
  transition: background var(--hr-transition);
}

.hr-cat-label:hover {
  background: var(--hr-gold);
  color: var(--hr-ink);
  text-decoration: none;
}

/* Featured image */
.hr-featured-image {
  margin-bottom: 2rem;
  border: 1px solid var(--hr-border);
  overflow: hidden;
}

.hr-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Post navigation */
.hr-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hr-border);
}

.hr-post-nav__prev,
.hr-post-nav__next {
  padding: 1rem;
  background: var(--hr-charcoal);
}

.hr-post-nav__next {
  text-align: right;
}

.hr-post-nav__label {
  display: block;
  font-family: var(--hr-font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-gold);
  margin-bottom: 4px;
}

.hr-post-nav__title {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--hr-cream);
  line-height: 1.3;
}

.hr-post-nav a {
  text-decoration: none;
  display: block;
}

.hr-post-nav a:hover .hr-post-nav__title {
  color: var(--hr-amber);
}


/* ============================================================
   12. BLOG / ARCHIVE — POST CARDS
   ============================================================ */
.hr-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.hr-post-card {
  background: var(--hr-white);
  border: 1px solid rgba(14, 13, 11, 0.1);
  overflow: hidden;
  transition: box-shadow var(--hr-transition), transform var(--hr-transition);
}

.hr-post-card:hover {
  box-shadow: 0 8px 32px rgba(14, 13, 11, 0.12);
  transform: translateY(-2px);
}

.hr-post-card__image {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.hr-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.hr-post-card:hover .hr-post-card__image img {
  transform: scale(1.04);
}

.hr-post-card__body {
  padding: 1.5rem;
}

.hr-post-card__category {
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-gold);
  margin-bottom: 0.5rem;
  display: block;
}

.hr-post-card__title {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  color: var(--hr-charcoal);
}

.hr-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.hr-post-card__title a:hover {
  color: var(--hr-gold);
}

.hr-post-card__excerpt {
  font-size: 0.95rem;
  color: var(--hr-dust);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.hr-post-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hr-dust);
  border-top: 1px solid rgba(14, 13, 11, 0.08);
  padding-top: 0.75rem;
}

.hr-read-more {
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-gold);
  border-bottom: 1px solid var(--hr-gold);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color var(--hr-transition), border-color var(--hr-transition);
}

.hr-read-more:hover {
  color: var(--hr-amber);
  border-color: var(--hr-amber);
  text-decoration: none;
}

/* Pagination */
.hr-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hr-border);
}

.hr-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--hr-font);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hr-charcoal);
  border: 1px solid rgba(14, 13, 11, 0.18);
  text-decoration: none;
  transition: background var(--hr-transition), color var(--hr-transition), border-color var(--hr-transition);
}

.hr-pagination .page-numbers:hover,
.hr-pagination .page-numbers.current {
  background: var(--hr-charcoal);
  color: var(--hr-cream);
  border-color: var(--hr-charcoal);
}

.hr-pagination .page-numbers.dots {
  background: none;
  border: none;
  width: auto;
}


/* ============================================================
   13. SIDEBAR
   ============================================================ */
.hr-sidebar {
  position: sticky;
  top: 88px;
}

.hr-sidebar .widget {
  margin-bottom: 2.5rem;
}

.hr-sidebar .widget:last-child {
  margin-bottom: 0;
}

.hr-sidebar ul {
  list-style: none;
}

.hr-sidebar ul li {
  border-bottom: 1px solid rgba(14, 13, 11, 0.1);
  padding: 8px 0;
}

.hr-sidebar ul li:last-child {
  border-bottom: none;
}

.hr-sidebar ul li a {
  color: var(--hr-charcoal);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--hr-transition);
}

.hr-sidebar ul li a:hover {
  color: var(--hr-gold);
}


/* ============================================================
   14. WOOCOMMERCE
   ============================================================ */

/* Shop page */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product {
  border: 1px solid rgba(14, 13, 11, 0.1);
  padding: 0 !important;
  overflow: hidden;
  transition: box-shadow var(--hr-transition);
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 32px rgba(14, 13, 11, 0.1);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--hr-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--hr-charcoal) !important;
  padding: 1rem 1rem 0.25rem !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--hr-font) !important;
  font-weight: 600 !important;
  color: var(--hr-gold) !important;
  padding: 0 1rem 0.5rem !important;
  display: block;
}

.woocommerce ul.products li.product .button {
  display: block;
  margin: 0 1rem 1rem;
  text-align: center;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--hr-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--hr-charcoal) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--hr-gold) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--hr-font);
  color: var(--hr-ink);
  line-height: 1.75;
}

/* Cart & Checkout */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  font-family: var(--hr-font);
}

.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th,
.woocommerce-checkout table th,
.woocommerce-checkout table td {
  font-family: var(--hr-font);
  padding: 14px 16px;
}

.woocommerce-checkout .woocommerce h3 {
  font-family: var(--hr-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hr-charcoal);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  font-family: var(--hr-font);
  border: 1px solid rgba(14, 13, 11, 0.22);
  padding: 10px 14px;
  border-radius: 0;
  transition: border-color var(--hr-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--hr-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 146, 42, 0.15);
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--hr-gold) !important;
  background: rgba(184, 146, 42, 0.06);
  font-family: var(--hr-font);
}

.woocommerce-error {
  border-top-color: #9b1c1c !important;
  font-family: var(--hr-font);
}

/* Star ratings */
.woocommerce .star-rating span::before {
  color: var(--hr-gold) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--hr-charcoal) !important;
  border-radius: 0 !important;
  font-family: var(--hr-font);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  min-height: auto;
  line-height: 1;
  padding: 6px 10px;
}

/* Tabs on single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--hr-font);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--hr-charcoal);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--hr-gold);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  background: var(--hr-gold);
}


/* ============================================================
   15. SEARCH FORM & RESULTS
   ============================================================ */
.search-form {
  display: flex;
  gap: 0;
}

.search-form .search-field {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid var(--hr-charcoal);
  border-right: none;
  border-radius: 0;
  font-family: var(--hr-font);
  font-size: 0.95rem;
  background: var(--hr-white);
  color: var(--hr-ink);
}

.search-form .search-field:focus {
  outline: none;
  border-color: var(--hr-gold);
}

.search-form .search-submit {
  padding: 10px 20px;
  background: var(--hr-charcoal);
  color: var(--hr-cream);
  border: 2px solid var(--hr-charcoal);
  border-radius: 0;
  font-family: var(--hr-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hr-transition), border-color var(--hr-transition);
}

.search-form .search-submit:hover {
  background: var(--hr-gold);
  border-color: var(--hr-gold);
  color: var(--hr-ink);
}

/* No results / search page */
.hr-no-results {
  text-align: center;
  padding: 5rem 1rem;
}

.hr-no-results h1,
.hr-no-results h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

.hr-no-results p {
  color: var(--hr-dust);
  max-width: 480px;
  margin: 0 auto 2rem;
}


/* ============================================================
   16. 404 PAGE
   ============================================================ */
.hr-404 {
  text-align: center;
  padding: 6rem 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.hr-404__number {
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--hr-gold);
  line-height: 1;
  margin-bottom: 0;
}

.hr-404 h2 {
  font-size: clamp(1.3rem, 3vw, 2rem);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.hr-404 p {
  color: var(--hr-dust);
  margin-bottom: 2rem;
}


/* ============================================================
   17. FOOTER
   ============================================================ */
.hr-footer {
  background: var(--hr-ink);
  color: var(--hr-cream);
  border-top: 3px solid var(--hr-gold);
  padding: 56px 0 28px;
  font-family: var(--hr-font);
}

.hr-footer__inner {
  max-width: var(--hr-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* Concept D — Meridian Stack wordmark in the footer */
.hr-footer__brand {
  font-family: var(--hr-font);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--hr-cream);
}

.hr-footer__tagline {
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hr-dust);
  margin-top: 6px;
}

.hr-footer__rule {
  width: 72px;
  height: 2px;
  background: var(--hr-gold);
  border: none;
  margin: 0;
}

/* Footer nav links */
.hr-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  list-style: none;
}

.hr-footer__nav li a {
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-dust);
  text-decoration: none;
  transition: color var(--hr-transition);
}

.hr-footer__nav li a:hover {
  color: var(--hr-amber);
}

/* Social icons */
.hr-footer__social ul {
  display: flex;
  gap: 14px;
  justify-content: center;
  list-style: none;
}

.hr-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(184, 146, 42, 0.4);
  color: var(--hr-dust) !important;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: border-color var(--hr-transition), background var(--hr-transition), color var(--hr-transition);
}

.hr-footer__social a:hover {
  background: var(--hr-gold);
  border-color: var(--hr-gold);
  color: var(--hr-ink) !important;
}

.hr-footer__copyright {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(122, 114, 104, 0.7);
  margin: 0;
}


/* ============================================================
   18. COMMENTS
   ============================================================ */
.comments-area {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hr-border);
}

.comments-title,
.comment-reply-title {
  font-family: var(--hr-font);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--hr-charcoal);
  margin-bottom: 1.5rem;
  font-size: 1.15rem;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-body {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(14, 13, 11, 0.1);
}

.comment-author .fn {
  font-weight: 700;
  color: var(--hr-charcoal);
  font-style: normal;
}

.comment-metadata {
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hr-dust);
  margin-top: 4px;
  margin-bottom: 0.75rem;
}

.comment-metadata a {
  color: var(--hr-dust);
}

.comment-metadata a:hover {
  color: var(--hr-gold);
}

.comment-content p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--hr-ink);
}

.reply a {
  font-family: var(--hr-font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hr-gold);
  text-decoration: none;
}

.reply a:hover {
  color: var(--hr-amber);
}

.comment-respond {
  margin-top: 2rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(14, 13, 11, 0.2);
  border-radius: 0;
  font-family: var(--hr-font);
  font-size: 0.98rem;
  background: var(--hr-white);
  color: var(--hr-ink);
  margin-bottom: 0.5rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--hr-gold);
  box-shadow: 0 0 0 2px rgba(184, 146, 42, 0.12);
}

.comment-form label {
  display: block;
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hr-charcoal);
  margin-bottom: 0.35rem;
}


/* ============================================================
   19. PAGE HEADER / BREADCRUMB BANNER
   ============================================================ */
.hr-page-header {
  background: var(--hr-charcoal);
  padding: 48px 0;
  border-bottom: 1px solid var(--hr-border);
}

.hr-page-header__inner {
  max-width: var(--hr-container);
  margin: 0 auto;
  padding: 0 24px;
}

.hr-page-header h1 {
  color: var(--hr-cream);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  margin-bottom: 0.5rem;
}

.hr-breadcrumb {
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hr-dust);
}

.hr-breadcrumb a {
  color: var(--hr-dust);
  text-decoration: none;
}

.hr-breadcrumb a:hover {
  color: var(--hr-amber);
}

.hr-breadcrumb .sep {
  margin: 0 6px;
  color: rgba(122, 114, 104, 0.5);
}


/* ============================================================
   20. FORMS (generic)
   ============================================================ */
label {
  display: block;
  font-family: var(--hr-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hr-charcoal);
  margin-bottom: 0.4rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--hr-font);
  font-size: 1rem;
  color: var(--hr-ink);
  background: var(--hr-white);
  border: 1px solid rgba(14, 13, 11, 0.2);
  border-radius: 0;
  transition: border-color var(--hr-transition);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--hr-gold);
  box-shadow: 0 0 0 2px rgba(184, 146, 42, 0.12);
}


/* ============================================================
   21. ELEMENTOR COMPATIBILITY
   Ensure Elementor's full-width sections look right.
   ============================================================ */
.elementor-section-stretched {
  width: 100% !important;
}

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--hr-font) !important;
  letter-spacing: 0.04em !important;
}

/* Override any conflicting Elementor defaults */
.elementor *,
.elementor-widget-container {
  font-family: var(--hr-font);
}

/* Elementor button widget */
.elementor-button {
  font-family: var(--hr-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}


/* ============================================================
   22. INSTAGRAM / SMASH BALLOON OVERRIDES
   ============================================================ */
.sbi,
.sbi-feed-container {
  background: transparent !important;
}

.sbi_header,
.sbi-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hr-charcoal) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

.sbi_header_text h3,
.sbi-header-text h3,
.sbi_header_text .sbi_header_name,
.sbi-header-text .sbi-header-name {
  font-family: var(--hr-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--hr-charcoal) !important;
}

.sbi_header_img_wrap img,
.sbi-header-img img {
  border: 2px solid var(--hr-gold) !important;
  border-radius: 0 !important;
}

.sbi_follow_btn a,
.sbi-follow-btn a,
.sbi-btn {
  background: var(--hr-charcoal) !important;
  background-image: none !important;
  border: 2px solid var(--hr-charcoal) !important;
  border-radius: 0 !important;
  color: var(--hr-cream) !important;
  font-family: var(--hr-font) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.sbi_follow_btn a:hover,
.sbi-follow-btn a:hover,
.sbi-btn:hover {
  background: var(--hr-gold) !important;
  border-color: var(--hr-gold) !important;
  color: var(--hr-ink) !important;
}

.sbi_photo_wrap,
.sbi-image-container {
  border-radius: 0 !important;
}

.sbi_photo_wrap:hover .sbi_hover_bottom,
.sbi-image-container:hover .sbi-overlay {
  background: rgba(14, 13, 11, 0.78) !important;
}

.sbi_photo_wrap .sbi_hover_bottom p,
.sbi_photo_wrap .sbi_hover_bottom span {
  color: var(--hr-cream) !important;
}

.sbi_load_btn,
.sbi-load-btn,
#sbi_load {
  background: var(--hr-charcoal) !important;
  background-image: none !important;
  border: 2px solid var(--hr-charcoal) !important;
  border-radius: 0 !important;
  color: var(--hr-cream) !important;
  font-family: var(--hr-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.sbi_load_btn:hover,
.sbi-load-btn:hover {
  background: var(--hr-gold) !important;
  border-color: var(--hr-gold) !important;
  color: var(--hr-ink) !important;
}

.sbi_powered_by,
.sbi-powered-by {
  display: none !important;
}


/* ============================================================
   23. ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--hr-gold);
  outline-offset: 3px;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}


/* ============================================================
   24. WORDPRESS BLOCK EDITOR (Gutenberg) ALIGNMENT
   ============================================================ */
.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin: 0 auto 1rem;
}

.alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Gutenberg image block */
figure.wp-block-image {
  margin-bottom: 1.5rem;
}

figure.wp-block-image figcaption {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--hr-dust);
  text-align: center;
  margin-top: 6px;
}


/* ============================================================
   25. MOBILE — RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
  .hr-content-wrap {
    grid-template-columns: 1fr 280px;
    gap: 40px;
  }
}

@media (max-width: 768px) {

  html { font-size: 17px; }

  /* Nav collapses into mobile drawer */
  .hr-nav-toggle {
    display: flex;
  }

  .hr-nav {
    position: fixed;
    inset: 68px 0 0;
    background: var(--hr-ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 400;
  }

  .hr-nav.is-open {
    transform: translateX(0);
  }

  .hr-nav__menu {
    flex-direction: column;
    gap: 0;
  }

  .hr-nav__menu > li > a {
    padding: 14px 24px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(245, 240, 232, 0.06);
  }

  /* Dropdown becomes block on mobile */
  .hr-nav__menu li ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    border-top: none;
    background: rgba(245, 240, 232, 0.04);
    padding-left: 1.5rem;
  }

  .hr-nav__menu li ul li a {
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(245, 240, 232, 0.04);
  }

  .hr-header__actions .hr-header__search-toggle span {
    display: none;
  }

  /* Content area goes single column */
  .hr-content-wrap {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 40px;
  }

  .hr-sidebar {
    position: static;
  }

  /* Cards stack */
  .hr-posts-grid {
    grid-template-columns: 1fr;
  }

  /* WooCommerce grid */
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }

  /* Post nav stacks */
  .hr-post-nav {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .hr-footer {
    padding: 40px 0 24px;
  }

  /* Top bar hidden on mobile */
  .hr-topbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .hr-header__inner {
    height: 60px;
  }

  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }

  .hr-footer__social ul {
    gap: 10px;
  }
}