/* =========================================================
   GEMENET — Unified header + content color & alignment
   ========================================================= */

/* 0) GLOBAL PAGE BACKGROUND */
html, body {
  background-color: #F7F1E7;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  color: #222;
}

/* 1) FULL-BLEED HEADER BACKGROUND */
header,
.main-header,
.site-header {
  background-color: #F7F1E7 !important;
}

/* =========================================================
   GEMENET — Unified header + content color & alignment
   ========================================================= */

/* 0) GLOBAL PAGE BACKGROUND */
html, body {
  background-color: #F7F1E7;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  color: #222;
}

/* 1) FULL-BLEED HEADER BACKGROUND */
header,
.main-header,
.site-header {
  background-color: #F7F1E7 !important;
}

/* Keep internal bars transparent so wrapper color shows */
.main-header__top-bar,
.main-header__main-bar {
  background: transparent !important;
  height: auto !important;
  min-height: 90px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* Remove any leftover breakout/absolute hacks */
.main-header__top-bar,
.main-header__main-bar {
  position: static !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.main-header__top-bar::before,
.main-header__main-bar::before {
  content: none !important;
}

/* 3) ALIGN HEADER CONTENT WITH MAIN CONTENT (.blocks) */
:root {
  /* Adjust to match your .blocks padding if needed */
  --site-pad: 24px;
  --site-max: 1140px;
}

/* Align both possible structures (same-element or child .container) */
.main-header__top-bar.container,
.main-header__main-bar.container,
.main-header__top-bar > .container,
.main-header__main-bar > .container {
  max-width: var(--site-max);
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 3) MAIN CONTENT BACKGROUND + GEOMETRY */
#main-content,
.main-content.container,
.blocks {
  background-color: #F7F1E7 !important;
  max-width: var(--site-max);
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 4) LOGO + NAVIGATION LAYOUT */
.main-header__site-title { flex: 0 0 auto; }
.main-navigation        { margin-left: auto; min-width: 0; }
.main-navigation__container { width: auto; }

/* Logo sizing — no flattening */
.main-header__site-title img {
  height: 100px;          /* adjust as desired */
  width: auto;
  display: block;
  max-height: none !important;
  vertical-align: middle;
}

/* Navigation link spacing */
.main-navigation__container ul.navigation li a {
  line-height: 1.2;
  color: #333;
}

/* 5) ENSURE OTHER REGIONS MATCH BACKGROUND */
footer,
.site-footer,
#site-footer {
  background-color: #F7F1E7 !important;
  color: #222;
}

/* 6) RESPONSIVE TWEAKS */
@media (max-width: 992px) {
  .main-header__site-title img { height: 80px; }
}
@media (max-width: 640px) {
  .main-header__site-title img { height: 64px; }
  .main-header__main-bar.container,
  .main-header__main-bar > .container { flex-wrap: wrap; }
}

/* 7) CLEANUP — remove stray HR lines or white borders */
header .alignfull,
hr.alignfull {
  display: none !important;
  border: none !important;
}


/* ===== 0) Global page background ===== */
html, body {
  background: #F7F1E7 !important;
  color: #222;
}

/* ===== 1) Header background (full-bleed) ===== */
header,
.main-header,
.site-header,
#site-header {
  background: #F7F1E7 !important;
}

/* Keep the inner bars transparent so wrapper color shows */
.main-header__top-bar,
.main-header__main-bar {
  background: transparent !important;
  position: static !important;      /* remove any breakout hacks */
  margin: 0 !important;
  width: 100% !important;
}

/* ===== 2) Main content wrappers – make them the same color ===== */
#main-content,
.main-content,
.main-content.container,
.site-page,
.site-page-show,
.page,
.wrap,
.blocks,
.blocks > *,
.region,
.section,
.content,
.layout,
.page-layout {
  background: #F7F1E7 !important;
}

/* Neutralize common layout boxes that may be forcing white */
.container,
.container-fluid,
.row {
  background: transparent !important;
}

/* ===== 3) Keep header content aligned with .blocks ===== */
:root { --site-pad: 24px; } /* adjust if your blocks use a different gutter */

.main-header__top-bar.container,
.main-header__main-bar.container,
.main-header__top-bar > .container,
.main-header__main-bar > .container,
#main-content.container,
#main-content .blocks {
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Layout: logo left, nav right */
.main-header__main-bar.container,
.main-header__main-bar > .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.main-header__site-title { flex: 0 0 auto; }
.main-navigation        { margin-left: auto; min-width: 0; }

/* Logo sizing without distortion */
.main-header__site-title img {
  height: 100px; /* adjust as desired */
  width: auto;
  display: block;
  max-height: none !important;
}

/* Optional: unify footer if it’s showing white */
footer, .site-footer, #site-footer { background: #F7F1E7 !important; }

/* === Full-bleed background for TOP + MAIN header bars via ::before === */
.main-header__top-bar,
.main-header__main-bar {
  position: relative; /* anchor the pseudo-element */
  z-index: 0;         /* keep content above the background layer */
}

/* Create a full-width background layer that ignores the .container width */
.main-header__top-bar::before,
.main-header__main-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #F7F1E7;
  z-index: -1; /* sit behind the header content */
}

/* If any theme rule painted the container white, neutralize it */
.main-header__top-bar.container,
.main-header__main-bar.container {
  background: transparent !important;
}

/* === Main content background (keep) === */
.main-content.container {
  background-color: #F7F1E7 !important;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Readability on the light bg (keep) */
.main-content.container,
.main-content.container p,
.main-content.container h1,
.main-content.container h2,
.main-content.container h3 {
  color: #222;
}

/* Prevent horizontal scroll from full-bleed background layers */
html, body { overflow-x: hidden; }

/* Optional: unify the page edge if anything beyond headers/content shows */
body { background-color: #F7F1E7; }
/* Keep internal bars transparent so wrapper color shows */
.main-header__top-bar,
.main-header__main-bar {
  background: transparent !important;
  height: auto !important;
  min-height: 90px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* Remove any leftover breakout/absolute hacks */
.main-header__top-bar,
.main-header__main-bar {
  position: static !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.main-header__top-bar::before,
.main-header__main-bar::before {
  content: none !important;
}

/* 3) ALIGN HEADER CONTENT WITH MAIN CONTENT (.blocks) */
:root {
  /* Adjust to match your .blocks padding if needed */
  --site-pad: 24px;
  --site-max: 1140px;
}

/* Align both possible structures (same-element or child .container) */
.main-header__top-bar.container,
.main-header__main-bar.container,
.main-header__top-bar > .container,
.main-header__main-bar > .container {
  max-width: var(--site-max);
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 3) MAIN CONTENT BACKGROUND + GEOMETRY */
#main-content,
.main-content.container,
.blocks {
  background-color: #F7F1E7 !important;
  max-width: var(--site-max);
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 4) LOGO + NAVIGATION LAYOUT */
.main-header__site-title { flex: 0 0 auto; }
.main-navigation        { margin-left: auto; min-width: 0; }
.main-navigation__container { width: auto; }

/* Logo sizing — no flattening */
.main-header__site-title img {
  height: 100px;          /* adjust as desired */
  width: auto;
  display: block;
  max-height: none !important;
  vertical-align: middle;
}

/* Navigation link spacing */
.main-navigation__container ul.navigation li a {
  line-height: 1.2;
  color: #333;
}

/* 5) ENSURE OTHER REGIONS MATCH BACKGROUND */
footer,
.site-footer,
#site-footer {
  background-color: #F7F1E7 !important;
  color: #222;
}

/* 6) RESPONSIVE TWEAKS */
@media (max-width: 992px) {
  .main-header__site-title img { height: 80px; }
}
@media (max-width: 640px) {
  .main-header__site-title img { height: 64px; }
  .main-header__main-bar.container,
  .main-header__main-bar > .container { flex-wrap: wrap; }
}

/* 7) CLEANUP — remove stray HR lines or white borders */
header .alignfull,
hr.alignfull {
  display: none !important;
  border: none !important;
}