/* ==========================================================================
   BN-FOOTER: Bella Nova NY site footer (Elementor Theme Builder, site-wide)
   Namespace: bn-footer-*
   Source of truth: specs/footer.md, reference/src__components__layout__Footer.jsx
   Owner: footer builder agent. Do not edit outside this file.

   Delivery: this file is auto-enqueued by the
   wp-content/mu-plugins/bellanova-area-styles.php loader, which globs
   assets/css/*.css (skipping tokens.css/animations.css) at priority 20 with
   filemtime() cache-busting, and also hooks elementor/preview/enqueue_styles
   so it applies inside the Elementor editor canvas. Do not enqueue this file
   manually and do not add it to style.css.
   ========================================================================== */

/* Layout is built with real Elementor Containers/Widgets; this file owns
   exact spacing, type, color and breakpoint behavior per the build brief
   (structure in Elementor, fine detail in CSS). Some rules use !important
   on Elementor generated layout properties (display/flex/grid) because
   Elementor's own per-element CSS can otherwise win depending on load order. */

.bn-footer {
  background-color: var(--color-forest, #2C3B2E) !important;
  color: var(--color-cream, #F7F5F0);
}

/* ---- Main content: container plus 12-col grid ----
   Elementor wraps every container's children in an intermediate
   `.e-con-inner` div (confirmed by inspecting the actual rendered DOM on
   the install), so the grid/flex-enabling properties below target that
   grandchild, not `.bn-footer-inner` itself. Box-model properties
   (max-width/margin/padding) stay on the outer element since that is the
   box we want centered and inset. */

.bn-footer-inner {
  /* Explicit reset, not just omission: a stale duplicate of this file's
     first draft is still loaded from wp-content/themes/bellanova/style.css
     (left in place deliberately per team-lead instruction; that file is
     off-limits to edit) and it still sets `display: grid !important` on
     this exact selector. Left alone, that turns `.bn-footer-inner` into a
     12-column grid whose single child (`.e-con-inner`) gets auto-placed
     into one narrow track instead of the full width, collapsing the whole
     footer to a sliver. This file is enqueued after style.css (mu-plugin
     priority 20), so an equal-specificity `!important` here wins the tie
     and cancels it. */
  display: block !important;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.bn-footer-inner > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 640px) {
  .bn-footer-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 768px) {
  .bn-footer-inner > .e-con-inner {
    grid-template-columns: repeat(12, 1fr);
  }

  .bn-footer-inner {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.bn-footer-col {
  display: block !important;
  min-width: 0;
}

.bn-footer-col-brand    { grid-column: span 12; }
.bn-footer-col-visit    { grid-column: span 12; }
.bn-footer-col-explore  { grid-column: span 12; }
.bn-footer-col-licensed { grid-column: span 12; }

@media (min-width: 768px) {
  .bn-footer-col-brand    { grid-column: span 5; }
  .bn-footer-col-visit    { grid-column: span 3; }
  .bn-footer-col-explore  { grid-column: span 2; }
  .bn-footer-col-licensed { grid-column: span 2; }
}

/* ---- Column 1: Wordmark plus description ---- */

.bn-footer-wordmark-line1 .elementor-heading-title {
  display: block;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: 0.28em !important;
  color: var(--color-cream, #F7F5F0) !important;
  font-weight: 400;
}

@media (min-width: 768px) {
  .bn-footer-wordmark-line1 .elementor-heading-title {
    font-size: 24px !important;
  }
}

.bn-footer-wordmark-line2 .elementor-heading-title {
  display: block;
  font-family: var(--font-sans, Manrope, sans-serif) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.55em !important;
  margin-top: 4px;
  padding-left: 2px;
  color: rgba(247, 245, 240, 0.6) !important;
  font-weight: 400;
}

.bn-footer-desc {
  margin-top: 24px;
}

.bn-footer-desc .elementor-widget-container,
.bn-footer-desc p {
  margin: 0;
  font-family: var(--font-sans, Manrope, sans-serif);
  font-size: 14px;
  line-height: 1.625;
  color: rgba(247, 245, 240, 0.7) !important;
  max-width: 384px;
}

/* ---- Eyebrow headings (Visit Us, Explore, Licensed) ---- */

.bn-footer-eyebrow .elementor-heading-title {
  display: block;
  font-family: var(--font-sans, Manrope, sans-serif) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  text-transform: uppercase;
  letter-spacing: 0.25em !important;
  color: rgba(247, 245, 240, 0.5) !important;
  margin-bottom: 20px;
  font-weight: 400;
}

/* ---- Icon plus text rows (address, hours, license) ----
   Same `.e-con-inner` wrapper issue as the main grid: the icon and text
   widgets are grandchildren of `.bn-footer-row`, not direct children. */

.bn-footer-row {
  /* Same stale-style.css override problem as .bn-footer-inner above:
     cancel the old flex-on-the-outer-wrapper rule so it can't constrain
     .e-con-inner's width via flex-item sizing. */
  display: block !important;
}

.bn-footer-row > .e-con-inner {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}

.bn-footer-row-hours {
  margin-top: 12px;
}

.bn-footer-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  line-height: 0;
}

.bn-footer-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--color-brass, #C2A878);
}

.bn-footer-row-text .elementor-widget-container,
.bn-footer-row-text p {
  margin: 0;
  font-family: var(--font-sans, Manrope, sans-serif);
  font-size: 14px;
  line-height: 1.625;
  color: rgba(247, 245, 240, 0.8) !important;
}

/* ---- Get Directions link ---- */

.bn-footer-directions {
  margin-top: 20px;
}

.bn-footer-directions .elementor-widget-container,
.bn-footer-directions p {
  margin: 0;
}

.bn-footer-directions a {
  display: inline-block;
  font-family: var(--font-sans, Manrope, sans-serif);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass, #C2A878) !important;
  text-decoration: none;
  transition: color 300ms;
}

.bn-footer-directions a:hover,
.bn-footer-directions a:focus-visible {
  color: var(--color-cream, #F7F5F0) !important;
}

/* ---- Explore nav (Icon List widget used as a plain link list; icons hidden) ---- */

.bn-footer-explore-list.elementor-widget-icon-list .elementor-icon-list-items {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.bn-footer-explore-list .elementor-icon-list-item {
  margin: 0 !important;
}

.bn-footer-explore-list .elementor-icon-list-icon {
  display: none !important;
}

.bn-footer-explore-list .elementor-icon-list-text {
  padding: 0 !important;
  font-family: var(--font-sans, Manrope, sans-serif);
  font-size: 14px;
  color: rgba(247, 245, 240, 0.8) !important;
  text-decoration: none;
  transition: color 300ms;
}

.bn-footer-explore-list a.elementor-icon-list-link:hover .elementor-icon-list-text,
.bn-footer-explore-list a.elementor-icon-list-link:focus-visible .elementor-icon-list-text {
  color: var(--color-cream, #F7F5F0) !important;
}

.bn-footer-explore-list a.elementor-icon-list-link:focus-visible {
  outline: 1px solid var(--color-brass, #C2A878);
  outline-offset: 2px;
}

/* ---- Bottom bar ---- */

.bn-footer-bottom {
  border-top: 1px solid rgba(247, 245, 240, 0.1);
}

.bn-footer-bottom-inner {
  /* Same stale-style.css override problem; see .bn-footer-inner above. */
  display: block !important;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 20px;
}

.bn-footer-bottom-inner > .e-con-inner {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 640px) {
  .bn-footer-bottom-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 768px) {
  .bn-footer-bottom-inner > .e-con-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.bn-footer-copyright,
.bn-footer-legal {
  font-family: var(--font-sans, Manrope, sans-serif);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.4) !important;
}

.bn-footer-copyright .elementor-heading-title,
.bn-footer-legal .elementor-heading-title {
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.4) !important;
  font-weight: 400;
}

/* ---- Focus visibility for keyboard nav. Not literally present in the
   reference markup, but required so links are usable against the forest
   background; color and timing match the existing hover treatment. ---- */

.bn-footer a:focus-visible {
  outline: 1px solid var(--color-brass, #C2A878);
  outline-offset: 2px;
}