/* =============================================================
   BREJD Theme — main.css
   ============================================================= */

/* ── Custom properties ──────────────────────────────────────── */
:root {
  --brejd-bg:          #dde1df;
  --brejd-paper:       #f6f1e8;
  --brejd-ink:         #2a2521;
  --brejd-ink-soft:    #6e6258;
  --brejd-copper:      #963821;
  --brejd-copper-dark: #6e2916;
  --brejd-forest:      #394742;
  --brejd-sand:        #e6dbc8;
  --brejd-line:        rgba(42,37,33,.14);
  --brejd-radius:      4px;
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--brejd-bg);
  color: var(--brejd-ink);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

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

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brejd-copper-dark);
}

/* ── Layout helpers ─────────────────────────────────────────── */
.wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 6vw, 3rem);
}

/* ── NAV / HEADER ───────────────────────────────────────────── */
.site-header.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(221, 225, 223, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brejd-line);
}

.nav-inner {
  padding-block: 1.1rem;
}

/* Logo */
.nav-logo .wp-block-site-logo img,
.nav-logo img {
  height: 22px;
  width: auto;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav-logo:hover img { transform: scaleX(1.08); }

/* Nav links */
.nav-links .wp-block-navigation__container,
.nav-links ul {
  display: flex;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--brejd-ink);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  transition: opacity .2s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { opacity: 1; }

/* Mobile hamburger */
.wp-block-navigation__responsive-container-open {
  color: var(--brejd-ink);
}
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--brejd-paper);
  padding: 2rem;
}

@media (max-width: 680px) {
  .nav-links .wp-block-navigation__container { gap: 1.2rem; font-size: .7rem; }
}

/* ── SECTIONS ───────────────────────────────────────────────── */
section,
.wp-block-group.section { padding-block: clamp(4rem, 9vw, 7rem); }

.has-paper-background-color,
.panel { background: var(--brejd-paper); }

/* ── HERO (cover block usage) ────────────────────────────────── */
.wp-block-cover.hero-cover {
  min-height: clamp(460px, 88vh, 900px);
}

.wp-block-cover.hero-cover .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(15,12,10,.45) 0%, rgba(15,12,10,.8) 100%) !important;
  opacity: 1 !important;
}

.wp-block-cover.hero-cover .wp-block-cover__inner-container {
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  z-index: 2;
}

.hero-tag {
  max-width: 34rem;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: #fffaf3;
  margin-inline: auto;
  text-align: center;
}

/* ── BLOCKQUOTE ─────────────────────────────────────────────── */
blockquote,
.wp-block-quote {
  border-left: 3px solid var(--brejd-copper) !important;
  padding: 1.2rem 0 1.2rem 1.6rem;
  margin: 2rem 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--brejd-copper-dark);
  line-height: 1.45;
}

.wp-block-quote cite,
.wp-block-quote__citation {
  display: block;
  margin-top: .6rem;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-style: normal;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brejd-ink-soft);
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
  border-radius: 999px !important;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 500;
  padding: .85rem 1.9rem;
  transition: background .25s, letter-spacing .25s, color .25s;
}

.wp-block-button__link:hover { letter-spacing: .2em; }

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid var(--brejd-ink);
  color: var(--brejd-ink);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--brejd-ink);
  color: var(--brejd-bg);
}

/* Ghost (for dark backgrounds) */
.wp-block-button.is-style-ghost .wp-block-button__link {
  border: 1px solid #fffaf3;
  color: #fffaf3;
  background: transparent;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: #fffaf3;
  color: var(--brejd-ink);
}

/* Forest / dark green */
.wp-block-button.is-style-forest .wp-block-button__link {
  background: var(--brejd-forest);
  color: var(--brejd-paper);
}
.wp-block-button.is-style-forest .wp-block-button__link:hover {
  background: #2a3630;
  color: var(--brejd-paper);
}

/* ── PAGE TEMPLATE ──────────────────────────────────────────── */
.page-hero-image img,
.post-hero-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

.page-content-wrap,
.post-content-wrap {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page-title,
.post-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

/* ── POST TEMPLATE ──────────────────────────────────────────── */
.post-meta-row {
  margin-bottom: 1rem;
  gap: 1rem;
}

.post-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--brejd-ink-soft);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.back-link a {
  color: var(--brejd-copper);
  text-decoration: none;
  font-size: .88rem;
  letter-spacing: .06em;
}
.back-link a:hover { text-decoration: underline; }

.post-footer-row { margin-top: 1.5rem; }

/* ── POST GRID (archive/index) ──────────────────────────────── */
.post-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 6vw, 3rem);
  max-width: 1180px;
  margin-inline: auto;
}

.post-card {
  background: var(--brejd-paper);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .25s;
}
.post-card:hover { transform: translateY(-3px); }

.post-card-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.post-card-body {
  padding: 1.4rem 1.6rem 1.8rem;
}

.post-card-body .wp-block-post-date {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brejd-ink-soft);
  margin-bottom: .4rem;
}

.post-card-body .wp-block-post-title a {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 650;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.1;
  color: var(--brejd-ink);
  text-decoration: none;
}
.post-card-body .wp-block-post-title a:hover { color: var(--brejd-copper); }

.post-card-body .wp-block-post-excerpt p {
  font-size: .92rem;
  color: var(--brejd-ink-soft);
  margin-top: .6rem;
}

.post-card-body .wp-block-post-excerpt__more-link {
  font-size: .82rem;
  color: var(--brejd-copper);
  text-decoration: none;
  letter-spacing: .05em;
}

/* ── PAGINATION ─────────────────────────────────────────────── */
.wp-block-query-pagination {
  padding: 2rem 0 4rem;
  gap: .5rem;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding-inline: .6rem;
  border: 1px solid var(--brejd-line);
  border-radius: 4px;
  font-size: .85rem;
  color: var(--brejd-ink);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
  background: var(--brejd-ink);
  color: var(--brejd-bg);
}
.wp-block-query-pagination-numbers .current {
  background: var(--brejd-copper);
  color: var(--brejd-paper);
  border-color: var(--brejd-copper);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--brejd-ink);
  color: var(--brejd-bg);
}

.footer-inner {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.footer-logo img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1) sepia(1) saturate(.4) brightness(1.5);
}

.foot-meta p {
  font-size: .82rem;
  letter-spacing: .04em;
  color: #a9aeac;
  line-height: 1.8;
  text-align: right;
  margin: 0;
}

/* Lang nav in footer */
.footer-lang-nav .wp-block-navigation__container { gap: .8rem; }
.footer-lang-nav a {
  font-size: .78rem;
  letter-spacing: .08em;
  color: #c7ccca;
  text-decoration: none;
}
.footer-lang-nav a:hover,
.footer-lang-nav a[aria-current="page"] { color: var(--brejd-paper); font-weight: 600; }

@media (max-width: 680px) {
  .foot-meta p { text-align: left; }
}

/* ── SEPARATOR ──────────────────────────────────────────────── */
.wp-block-separator {
  border-color: var(--brejd-line) !important;
  margin-block: 2rem;
}

/* ── IMAGES ─────────────────────────────────────────────────── */
.wp-block-image img { border-radius: var(--brejd-radius); }
figure.wp-block-image figcaption {
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brejd-ink-soft);
  margin-top: .6rem;
}

/* ── BREJD MARK (inline brand name) ────────────────────────── */
.brejd-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 750;
  letter-spacing: .05em;
  color: var(--brejd-copper);
  transition: letter-spacing .4s ease;
  white-space: nowrap;
}
.brejd-mark:hover { letter-spacing: .22em; }

/* ── INSOLE SECTION (forest bg) ─────────────────────────────── */
.insoles-section {
  background: var(--brejd-forest);
  color: var(--brejd-paper);
}
.insoles-section .eyebrow { color: #cfe0d3; }
.insoles-section p { color: #dfe9e1; }

.insole-pair {
  display: flex;
  gap: 1.4rem;
}

.insole-card {
  flex: 1;
  background: rgba(246,241,232,.06);
  border: 1px solid rgba(246,241,232,.18);
  border-radius: 6px;
  padding: 1.4rem;
}

.insole-card h3 { font-size: 1.1rem; margin-bottom: .5rem; font-weight: 600; }
.insole-card p  { font-size: .92rem; color: #cfe0d3; margin: 0; }

@media (max-width: 680px) {
  .insole-pair { flex-direction: column; }
}

/* ── SPEC LIST ───────────────────────────────────────────────── */
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .88rem;
  color: var(--brejd-ink-soft);
}
.spec-list li {
  display: flex;
  gap: .6rem;
  padding: .45rem 0;
  border-top: 1px solid var(--brejd-line);
}
.spec-list li:first-child { border-top: none; }
.spec-list b { color: var(--brejd-ink); font-weight: 600; min-width: 8rem; }

/* ── STORY GRID (2-col) ─────────────────────────────────────── */
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
}

/* ── PRODUCT GALLERY + SWATCHES ─────────────────────────────── */
.product-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .product-layout { grid-template-columns: 1fr; } }

.gallery-main { border-radius: 6px; overflow: hidden; background: var(--brejd-paper); }
.gallery-main img { width: 100%; height: clamp(280px, 46vw, 520px); object-fit: cover; }

.gallery-thumbs { display: flex; gap: .8rem; margin-top: .9rem; }
.gallery-thumbs img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 5px;
  cursor: pointer; border: 2px solid transparent; opacity: .65;
  transition: opacity .2s, border-color .2s;
}
.gallery-thumbs img.active { opacity: 1; border-color: var(--brejd-copper); }

.swatches { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.swatch {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem .9rem;
  border: 1px solid var(--brejd-line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: .92rem;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.swatch:hover { border-color: var(--brejd-copper); }
.swatch.active { border-color: var(--brejd-copper); background: rgba(150,56,33,.08); font-weight: 500; }
.swatch-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--brejd-line); flex-shrink: 0; }

/* ── UTILITY ────────────────────────────────────────────────── */
.text-copper { color: var(--brejd-copper); }
.text-soft   { color: var(--brejd-ink-soft); }
.bg-paper    { background: var(--brejd-paper); }
.bg-forest   { background: var(--brejd-forest); color: var(--brejd-paper); }

/* ── Hide page title ────────────────────────────────────────── */
.hide-page-title .page-title,
.hide-page-title .post-title,
.hide-page-title .wp-block-post-title {
  display: none;
}

/* ── Full-width fix: remove WP root padding on main ─────────── */
.wp-site-blocks,
.wp-site-blocks > main,
body > main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Cover block: force true full-width regardless of align setting */
.hero-cover,
.wp-block-cover.hero-cover {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Also ensure alignfull sections break out properly */
.wp-block-group.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ── Strip WP auto-padding wrappers so alignfull works ───────── */
.page-content-wrap,
.post-content-wrap,
.entry-content,
.wp-block-post-content,
.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove top gap caused by page title + content wrapper */
.page-content-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide page title by default on front page — 
   WP adds it automatically from the template.
   Toggle it per-page with the meta box checkbox instead. */
.page-template-default .page-title,
.home .page-title {
  display: none;
}

/* ── Remove top gap between nav and first block ─────────────── */
.wp-block-group[tagname="main"] > *:first-child,
main > *:first-child,
main > .wp-block-group:first-child,
.entry-content > *:first-child,
.wp-block-post-content > *:first-child {
  margin-top: 0 !important;
}