/**
 * DATUM forest overrides for Botiga header / footer / navigation.
 * Parent Botiga provides structure; this file maps it to canopy palette.
 */

:root {
  --dt-canopy: #0C1410;
  --dt-panel: #152019;
  --dt-moss: #3E6B4F;
  --dt-brass: #C4A15A;
  --dt-vellum: #EBE6D8;
  --dt-muted: rgba(235, 230, 216, 0.62);
  --dt-border: rgba(196, 161, 90, 0.22);
}

/* —— Top bar / announcement —— */
.top-bar,
.botiga-top-bar,
.bhfb-top_bar,
.dt-announce {
  background: var(--dt-panel) !important;
  color: var(--dt-brass) !important;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--dt-border);
}

/* —— Site header shell —— */
.site-header,
.bhfb-header,
.bhfb-desktop,
.main-header,
.dt-header {
  background: rgba(12, 20, 16, 0.96) !important;
  color: var(--dt-vellum) !important;
  border-bottom: 1px solid var(--dt-border);
  backdrop-filter: blur(8px);
}

.site-header a,
.bhfb-header a,
.main-navigation a,
.botiga-dropdown a,
.dt-header a {
  color: var(--dt-vellum) !important;
  text-decoration: none;
}

.site-header a:hover,
.main-navigation a:hover,
.botiga-dropdown a:hover,
.dt-header a:hover {
  color: var(--dt-brass) !important;
}

/* —— Branding / logo —— */
.site-branding,
.site-title,
.site-title a,
.custom-logo-link,
.dt-logo {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 1.35rem;
  color: var(--dt-vellum) !important;
}

/* —— Primary navigation (Botiga dropdown + DATUM) —— */
.main-navigation,
.botiga-dropdown.main-navigation,
.dt-nav-desktop-left,
.dt-nav-desktop-right {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.main-navigation > div > ul,
.botiga-dropdown.main-navigation > div#primary-menu > ul,
.dt-nav-left,
.dt-nav-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li,
.botiga-dropdown li,
.dt-nav-left li,
.dt-nav-right li {
  position: relative;
  list-style: none;
}

.main-navigation a,
.botiga-dropdown a,
.dt-nav-left a,
.dt-nav-right a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.65rem;
  color: var(--dt-vellum) !important;
}

/* Submenu / dropdown (Botiga + child) */
.main-navigation ul ul,
.botiga-dropdown .sub-menu,
.botiga-dropdown ul ul {
  background: var(--dt-panel) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  min-width: 14rem;
  padding: 0.35rem 0;
  z-index: 100;
}

.main-navigation ul ul a,
.botiga-dropdown .sub-menu a {
  min-height: 44px;
  padding: 0.5rem 1rem !important;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dt-vellum) !important;
}

.main-navigation ul ul a:hover,
.botiga-dropdown .sub-menu a:hover {
  background: rgba(62, 107, 79, 0.25) !important;
  color: var(--dt-brass) !important;
}

/* —— Header icons / cart / search —— */
.header-item,
.header-search,
.site-header-cart,
.botiga-cart,
.dt-bag {
  color: var(--dt-vellum) !important;
}

.site-header-cart .cart-contents,
.botiga-cart .cart-count,
.header-cart-count {
  background: var(--dt-brass) !important;
  color: var(--dt-canopy) !important;
}

/* —— Mobile offcanvas / panel —— */
.botiga-offcanvas-menu,
.botiga-mobile-header,
.bhfb-mobile_offcanvas,
.dt-mobile-panel {
  background: var(--dt-canopy) !important;
  color: var(--dt-vellum) !important;
}

.botiga-offcanvas-menu a,
.dt-nav-mobile a {
  color: var(--dt-vellum) !important;
  border-bottom: 1px solid var(--dt-border);
  display: block;
  padding: 0.85rem 0;
  min-height: 44px;
}

.menu-toggle,
.botiga-mobile-header .menu-toggle,
.dt-menu-toggle {
  color: var(--dt-vellum) !important;
  background: transparent !important;
  border: 1px solid var(--dt-border);
  min-height: 44px;
  min-width: 44px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
}

/* —— DATUM modular header grid (fallback + enhancement) —— */
.dt-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
}

.dt-nav-desktop-left { justify-self: start; }
.dt-logo { justify-self: center; }
.dt-nav-desktop-right,
.dt-header-utils {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

@media (max-width: 1024px) {
  .dt-nav-desktop-left,
  .dt-nav-desktop-right {
    display: none;
  }
  .dt-header__inner {
    grid-template-columns: auto 1fr auto;
  }
}

/* —— Footer (Botiga + DATUM) —— */
.site-footer,
.bhfb-footer,
.botiga-footer,
.dt-footer {
  background: var(--dt-canopy) !important;
  color: var(--dt-muted) !important;
  border-top: 1px solid var(--dt-border);
  padding: 3rem 0 1.5rem;
}

.site-footer a,
.botiga-footer a,
.dt-footer a {
  color: var(--dt-vellum) !important;
}

.site-footer a:hover,
.dt-footer a:hover {
  color: var(--dt-brass) !important;
}

.site-footer h4,
.dt-footer h4,
.widget-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--dt-brass) !important;
  margin-bottom: 1rem;
}

.dt-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.dt-footer-brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--dt-vellum);
  margin: 0 0 0.5rem;
}

.dt-footer-tagline {
  font-size: 0.9rem;
  color: var(--dt-muted);
  line-height: 1.6;
}

.dt-footer__bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.25rem;
  border-top: 1px solid var(--dt-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--dt-muted);
}

.dt-footer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dt-footer .menu li {
  margin: 0 0 0.45rem;
}

/* —— Accessibility —— */
.skip-link:focus {
  background: var(--dt-brass);
  color: var(--dt-canopy);
}

/* ============================================================
   FULL-WIDTH LAYOUT FIXES
   Botiga default layout + Elementor were boxing content into a
   narrow column. Force true full-bleed sections and content.
   ============================================================ */

/* Kill Botiga default content box */
body.datum-botiga-child .content-wrapper,
body.datum-botiga-child .botiga-wrapper,
body.datum-botiga-child #content.content-wrapper,
body.datum-botiga-child .site-content,
body.datum-botiga-child #primary,
body.datum-botiga-child .site-main,
body.datum-botiga-child .content-area {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* Single-column: no sidebar gap eating width */
body.datum-botiga-child.botiga-site-layout-default #primary,
body.datum-botiga-child.no-sidebar #primary,
body.datum-botiga-child .content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Elementor containers — full viewport width */
body.datum-botiga-child .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
}
body.datum-botiga-child .elementor-section,
body.datum-botiga-child .e-con,
body.datum-botiga-child .e-con-full,
body.datum-botiga-child .elementor-top-section {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Inner content still needs readable measure for text blocks */
body.datum-botiga-child .elementor-widget-container,
body.datum-botiga-child .dt-wrap,
body.datum-botiga-child .entry-content > *:not(.alignfull):not(.wp-block-image):not(.elementor) {
  /* do not force all widgets full — only section shells */
}

/* Hero / full-bleed media */
body.datum-botiga-child .dt-hero,
body.datum-botiga-child .dt-hero__media,
body.datum-botiga-child .elementor-section.dt-h,
body.datum-botiga-child .e-con.dt-h {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Page hero blocks from PHP templates */
body.datum-botiga-child .dt-page-hero {
  width: 100%;
  max-width: 100%;
  padding: 4rem clamp(1.25rem, 4vw, 3rem);
}
body.datum-botiga-child .dt-wrap {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 2rem);
  padding-right: clamp(1.25rem, 4vw, 2rem);
  width: 100%;
  box-sizing: border-box;
}

/* Product / image sections should not look like a postcard in the dark */
body.datum-botiga-child .elementor-widget-image img,
body.datum-botiga-child .dt-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Entry content from seeded pages */
body.datum-botiga-child .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* WooCommerce shop grid full width */
body.datum-botiga-child .woocommerce-products-header,
body.datum-botiga-child ul.products {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 2rem);
  padding-right: clamp(1.25rem, 4vw, 2rem);
}

/* Header already full — ensure sticky bar spans viewport */
body.datum-botiga-child .site-header,
body.datum-botiga-child .bhfb-header,
body.datum-botiga-child .bhfb-desktop {
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove Botiga main padding that shrinks the stage */
body.datum-botiga-child .main-wrapper,
body.datum-botiga-child .botiga-main-wrapper,
body.datum-botiga-child #page .content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}