/* ============================================================
   CHROME.CSS · Brebu Nou
   ------------------------------------------------------------
   Persistent UI shell: top-bar, main-header, footer.
   Matches V6.1 mockup exactly.
   ============================================================ */


/* ============================================================
   1. TOP BAR · Essex green strip with contact + a11y + lang
   ============================================================ */

.top-bar {
  background: var(--essex);
  color: rgba(242, 241, 235, 0.82);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 8px 0;
}

.top-bar-left {
  display: flex;
  gap: 28px;
  align-items: center;
}
.top-bar-left a {
  opacity: 0.85;
}
.top-bar-left a:hover {
  color: var(--rustic-taupe-light);
  opacity: 1;
}

.top-bar-right {
  display: flex;
  gap: 32px;
  align-items: center;
}


/* ----- A11y toolbar (A-/A/A+) ----- */

.a11y-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.a11y-controls .label {
  opacity: 0.85;
  margin-right: 12px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.a11y-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(242, 241, 235, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: all 0.25s ease;
}
.a11y-btn:hover {
  background: var(--chantilly);
  color: var(--essex);
  border-color: var(--chantilly);
}
.a11y-btn.active {
  background: rgba(242, 241, 235, 0.18);
  border-color: var(--chantilly);
  color: var(--chantilly);
}
.a11y-btn.size-s { font-size: 0.65rem; }
.a11y-btn.size-m { font-size: 0.82rem; }
.a11y-btn.size-l { font-size: 0.98rem; }


/* ----- Language switcher (RO / EN / DE) ----- */

.lang-switch {
  display: flex;
  gap: 4px;
  align-items: center;
}
.lang-btn {
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  opacity: 0.85;
  font-weight: 500;
}
.lang-btn:hover {
  opacity: 1;
}
.lang-btn.active {
  opacity: 1;
  color: var(--rustic-taupe-light);
}

/* Disabled state · for language versions not yet available (e.g. DE coming soon) */
.lang-btn-disabled {
  opacity: 0.32 !important;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}


/* ============================================================
   2. MAIN HEADER · sticky chantilly bar with brand + nav
   ============================================================ */

.main-header {
  background: var(--chantilly);
  border-bottom: 1px solid var(--stone-hearth); /* was --stone-hearth-soft · crisp on cream heroes */
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  cursor: pointer;
  /* Block-level tap target · ensures the entire brand area (blazon + text)
     is tappable on mobile, including the gaps between elements */
  position: relative;
  z-index: 1;
  transition: opacity 0.2s ease;
}
.brand:hover,
.brand:active {
  opacity: 0.75;
}
.brand:focus-visible {
  opacity: 0.75;
  outline: 2px solid var(--essex);
  outline-offset: 4px;
}
.brand-mark {
  width: 44px;
  height: 44px;
  background: transparent url('../assets/img/blazon.png?v=2026-05-29-43') center / contain no-repeat;
  color: transparent;   /* hide any text fallback that lives inside · blazon is the visual */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1rem;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--essex);
}
.brand-sub {
  font-size: 0.68rem;
  color: var(--rustic-taupe);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 5px;
  font-weight: 500;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.main-nav > a {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--essex);
  padding: 6px 0;
  position: relative;
  letter-spacing: 0.01em;
}
.main-nav > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--rustic-taupe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.main-nav > a:hover {
  color: var(--rustic-taupe);
}
.main-nav > a:hover::after {
  transform: scaleX(1);
}


/* MOL button · special call-to-action treatment */
.nav-mol {
  background: var(--essex);
  color: var(--chantilly) !important;
  padding: 12px 20px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition:
    background 0.3s ease,
    transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 0.35s ease,
    gap 0.3s ease,
    padding-right 0.3s ease;
}
.nav-mol::after {
  /* override the generic underline from .main-nav > a */
  content: '→';
  display: inline-block;
  position: static;
  background: none;
  height: auto;
  width: auto;
  transform: translateX(-6px) scaleX(1);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1),
    opacity 0.3s ease;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.nav-mol:hover {
  background: var(--essex-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 28, 0.22);
  gap: 10px;
  padding-right: 24px !important;
}
.nav-mol:hover::after {
  transform: translateX(0) scaleX(1);
  opacity: 1;
}
.nav-mol:focus-visible {
  outline: 2px solid var(--chantilly);
  outline-offset: 3px;
}


/* ============================================================
   3. FOOTER · Essex-deep with 5 columns + legal bar
   ============================================================ */

.footer {
  background: var(--essex-deep);
  color: rgba(242, 241, 235, 0.62);
  padding: 110px 0 0;
  font-size: 0.875rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 72px;
}

.footer-brand-name {
  font-size: 1.125rem;
  color: var(--chantilly);
  font-weight: 500;
  margin-bottom: 10px;
}
.footer-brand-sub {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 241, 235, 0.65);
  margin-bottom: 30px;
}
.footer-brand-desc {
  font-size: 0.875rem;
  line-height: 1.8;
  max-width: 300px;
  margin-bottom: 32px;
  font-weight: 300;
}

.footer-social {
  display: flex;
  gap: 14px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(242, 241, 235, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}
.footer-social a:hover {
  background: var(--rustic-taupe);
  border-color: var(--rustic-taupe);
  color: var(--chantilly);
}

.footer-col h3 {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--chantilly);
  font-weight: 500;
  margin-bottom: 24px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col a {
  font-weight: 300;
}
.footer-col a:hover {
  color: var(--rustic-taupe-light);
}

.footer-legal {
  border-top: 1px solid rgba(242, 241, 235, 0.12);
  padding: 36px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.footer-legal-links {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.footer-legal-links a {
  color: var(--chantilly);
  font-weight: 400;
}
.footer-legal-links a:hover {
  color: var(--rustic-taupe-light);
}
.footer-copyright {
  color: rgba(242, 241, 235, 0.65);
}


/* ============================================================
   HAMBURGER + MOBILE MENU · v25
   ------------------------------------------------------------
   Hidden on desktop · revealed in responsive.css at <=900px.
   The hamburger lines morph into an X when aria-expanded=true.
   The mobile-menu slides down under the brand bar as a flat
   dropdown · keeps the design language (no rounded corners,
   essex on chantilly, generous letter-spacing).
   ============================================================ */

/* Hamburger button · invisible by default, appears on mobile via responsive.css */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  margin: -8px;                  /* extend the tap target without visual size */
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.hamburger:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: 2px;
}
.hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--essex);
  transition: transform 0.22s ease, opacity 0.18s ease;
  transform-origin: center;
}

/* When the menu is open, lines morph into an X */
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* Mobile dropdown menu · hidden by default on every viewport.
   Shown only when JS toggles the hidden attribute + .is-open class. */
.mobile-menu {
  background: var(--chantilly);
  border-top: 1px solid rgba(31, 45, 39, 0.10);
  border-bottom: 1px solid rgba(31, 45, 39, 0.12);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.mobile-menu.is-open {
  /* Cover viewport minus sticky header (~56px on mobile).
     Long menus on primarie (~120 items) need internal scrolling
     rather than a fixed pixel cap that would clip most items.
     100dvh excludes the iOS Safari URL bar; 100vh is the fallback. */
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-list li {
  border-bottom: 1px solid rgba(31, 45, 39, 0.08);
}
.mobile-menu-list li:last-child {
  border-bottom: none;
}
.mobile-menu-list a {
  display: block;
  position: relative;
  padding: 16px 24px 16px 32px;
  color: var(--essex);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    padding-left 0.3s ease;
}

/* Left indicator bar · mirrors the desktop underline effect (which expands
   from left). On mobile it slides in from the left edge as a vertical bar.
   This gives the same "growing accent" feel during interaction. */
.mobile-menu-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--rustic-taupe);
  transform: translateY(-50%);
  transition: height 0.3s ease;
}

.mobile-menu-list a:hover,
.mobile-menu-list a:active,
.mobile-menu-list a:focus-visible {
  color: var(--rustic-taupe);
  background: rgba(31, 45, 39, 0.04);
  padding-left: 38px;
}
.mobile-menu-list a:hover::before,
.mobile-menu-list a:active::before,
.mobile-menu-list a:focus-visible::before {
  height: 22px;
}

/* ============================================================
   Mobile menu · section accordion · used by comuna1 hubs to expand
   the 8-tab nav with sub-categories. Mirrors the primarie pattern.
   Section title is clickable (role="button"); items list collapses
   to max-height: 0 by default and expands when parent has .is-expanded.
   ============================================================ */
.mobile-menu-section {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid var(--stone-hearth-hair);
}
.mobile-menu-section:last-child { border-bottom: none; }
.mobile-menu-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  min-height: 44px;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--essex);
  font-weight: 500;
  background: rgba(216, 210, 194, 0.32);
  border-bottom: 1px solid var(--stone-hearth-hair);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.2s ease;
}
.mobile-menu-section-title:hover { background: rgba(194, 181, 160, 0.32); }
.mobile-menu-section-title:focus-visible {
  background: rgba(194, 181, 160, 0.32);
  outline: 2px solid var(--essex);
  outline-offset: -2px;
}
.mobile-menu-section-title::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  opacity: 0.7;
}
.mobile-menu-section.is-expanded > .mobile-menu-section-title::after {
  transform: rotate(-135deg) translateY(1px);
  opacity: 1;
}
.mobile-menu-section.is-expanded > .mobile-menu-section-title {
  background: rgba(194, 181, 160, 0.22);
}
.mobile-menu-items {
  list-style: none;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.mobile-menu-section.is-expanded > .mobile-menu-items {
  max-height: 2400px;
  padding: 6px 0;
}
.mobile-menu-items li { margin: 0; }
.mobile-menu-items a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--essex);
  text-decoration: none;
  transition: background 0.2s ease, padding-left 0.2s ease;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.mobile-menu-items a:hover,
.mobile-menu-items a:active,
.mobile-menu-items a:focus-visible {
  background: rgba(194, 181, 160, 0.22);
  padding-left: 28px;
}
.mobile-menu-items a:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: -2px;
}
.mobile-menu-section-title:active {
  background: rgba(194, 181, 160, 0.42);
}
.mobile-menu-items a[aria-current="page"] {
  color: var(--rustic-taupe);
  font-weight: 500;
  background: rgba(194, 181, 160, 0.18);
}
/* Cancel the inherited 3px taupe ::before bar from .mobile-menu-list a (it
   targets every descendant <a>). Accordion sub-items use a flatter look. */
.mobile-menu-items a::before { display: none; }

/* MOL gets a dot prefix like its desktop sibling · keeps legal hierarchy.
   Plus a distinctive CTA background, like the desktop MOL button. */
.mobile-menu-mol {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: var(--essex);
  color: var(--chantilly) !important;
  font-weight: 500;
  letter-spacing: 0.16em !important;
}
.mobile-menu-mol::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--chantilly);
  flex-shrink: 0;
}
.mobile-menu-mol:hover,
.mobile-menu-mol:active,
.mobile-menu-mol:focus-visible {
  background: var(--rustic-taupe) !important;
  color: var(--chantilly) !important;
  padding-left: 32px !important;
}
/* MOL has no indicator bar · its whole row IS the indicator */
.mobile-menu-mol::before {
  position: static !important;
  transform: none !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--chantilly) !important;
}

/* When the mobile menu is open, lock body scroll so the page underneath
   doesn't scroll while the user pans inside the menu. */
body.mobile-menu-open {
  overflow: hidden;
  touch-action: none;
}


/* ============================================================
   PRINT · global hide-list for chrome elements
   ------------------------------------------------------------
   Legal pages have additional print rules in legal.css. Here we
   ensure that ANY page (index, primarie, 404, legal) prints
   readable content without site chrome, FABs, hero photos,
   cookie banner, etc. Links underlined and rendered in black.
   ============================================================ */
@media print {
  .top-bar,
  .main-header,
  .mobile-menu,
  .skip-to-content,
  .noscript-notice,
  .splash-slides,
  .splash-overlay,
  .splash-interlude,
  .hero-slides,
  .hero-overlay,
  .hero-progress,
  .cookie-banner,
  .cookie-modal,
  .a11y-modal,
  .floating-toolbar,
  #floatingToolbar {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Show absolute URL after external links so the printed copy is self-referent */
  main a[href^="http"]:not([href*="brebunou.ro"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* Cookie settings trigger in the footer ul · semantic <button> styled to
   match its sibling <a> links (no native button chrome). */
.splash-footer-col button.cookie-settings-trigger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--chantilly);
  text-decoration: none;
  opacity: 0.82;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s ease;
}
.splash-footer-col button.cookie-settings-trigger:hover { opacity: 1; }
.splash-footer-col button.cookie-settings-trigger:focus-visible {
  outline: 2px solid var(--rustic-taupe, #8B7B6C);
  outline-offset: 2px;
}