/* =============================================================================
   Bluefin Design System - Layout primitives  (Phase 2 / Workstream 1)
   -----------------------------------------------------------------------------
   Page-structure primitives consumed by the layout partials in bluefin/layout/.
   All bf- prefixed, tokens-only, additive. They express column structure with
   CSS (flex), NOT with the STORE_TYPE-driven BOX_WIDTH / LEFT_WIDTH / RIGHT_WIDTH
   math in application_top.php - retiring that branching is WS2. Breakpoints are
   fixed constants here (custom properties cannot be used in @media conditions),
   aligned to Bootstrap 3's grid (md >=768).

   No em dash (U+2014) anywhere (CI style guard).
   ============================================================================= */

/* Page shell: the outermost wrapper a rebuilt page opts into. */
.bf-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bf-color-surface-alt);
  color: var(--bf-color-text);
  font-family: var(--bf-font-body);
}

.bf-shell__main {
  flex: 1 0 auto;
}

/* Centered content container with a max width and gutters. */
.bf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--bf-space-4);
}

.bf-container--narrow {
  max-width: 720px;
}

/* Page heading for redesigned content pages (the .bf-scope h1 carries the type;
   this only adds vertical rhythm). */
.bf-page-head {
  padding: var(--bf-space-5) 0 var(--bf-space-2);
}

.bf-page-head h1,
.bf-page-head h2 {
  margin: 0;
  font-family: var(--bf-font-serif);
}

/* Region: main content + optional sidebar. Single column on small screens,
   two columns from md up. The sidebar side is chosen by a modifier. */
.bf-region {
  display: flex;
  /* Force full width: in some page contexts the flex container was landing in a
     shrink-to-fit sizing context and collapsing to its content width (which
     starved the flex-1 main column down to a few px). width:100% pins it to its
     parent regardless. */
  width: 100%;
  flex-direction: column;
  gap: var(--bf-space-5);
  padding: var(--bf-space-5) 0;
}

.bf-region__main {
  min-width: 0;
}

.bf-region__sidebar {
  min-width: 0;
}

@media (min-width: 768px) {
  .bf-region {
    flex-direction: row;
  }

  .bf-region__main {
    flex: 1 1 auto;
  }

  /* 360px (not the original 280px) so the legacy rail widgets fit: the
     previously-viewed / featured-results fragments carry hard-coded fixed widths
     (e.g. a width:360px carousel + min-width:300px cards) built for the old
     ~380px col-md-4 column; a narrower rail makes them overflow off-screen to the
     right. Revisit (narrow this back) when those sidebar widgets are restyled. */
  .bf-region__sidebar {
    flex: 0 0 360px;
  }

  /* Sidebar-first variant places the aside on the left. */
  .bf-region--sidebar-left {
    flex-direction: row-reverse;
  }
}

/* Stack: vertical rhythm helper for a column of elements. */
.bf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

/* Header / footer shells. The header is the editorial masthead: a light "paper"
   surface with charcoal ink, framed by a brand-color accent rule on the top edge
   and a hairline base. The brand color is used as an ACCENT (the top rule, the
   active-link underline, the CTA) rather than filling the bar, so it recolors
   safely for any storefront hue. The footer is the secondary (charcoal) bar. */
.bf-header {
  position: sticky;
  top: 0;
  z-index: var(--bf-z-sticky);
  background-color: var(--bf-color-paper);
  color: var(--bf-color-text);
  /* The brand accent sheen runs along the BOTTOM edge (drawn by ::after),
     acting as the divider between the sticky masthead and the page. */
  box-shadow: var(--bf-shadow-sm);
}

/* Brand accent rule along the bottom edge of the bar: a thin band with a clean
   horizontal sheen - lighter through the middle, deeper at the ends - so it
   reads as a polished accent rather than a flat slab. color-mix keeps it
   monochromatic on whatever brand color the storefront sets; the solid
   background-color is the fallback for browsers without color-mix. */
.bf-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--bf-brand-primary);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bf-brand-primary) 62%, #000),
    color-mix(in srgb, var(--bf-brand-primary) 88%, #fff) 50%,
    color-mix(in srgb, var(--bf-brand-primary) 62%, #000)
  );
}

.bf-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-3) var(--bf-space-4);
  padding: var(--bf-space-3) 0;
}

/* Header chrome (WS3): a masthead brand, the account-avatar trigger, and a
   responsive nav - inline from md up, a CSS-only hamburger drawer below md (a
   visually-hidden checkbox toggles .bf-header__nav; no JS, works JS-off). */
.bf-header__brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

.bf-header__logo {
  display: block;
  max-width: 280px;
  max-height: 54px;
  width: auto;
  height: auto;
}

.bf-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding: var(--bf-space-1) var(--bf-space-2);
  color: var(--bf-color-text);
  cursor: pointer;
}

.bf-header__toggle-icon {
  font-size: var(--bf-text-2xl);
  line-height: 1;
}

.bf-header__nav {
  display: none;
  flex-basis: 100%;
}

.bf-header__toggle-input:checked ~ .bf-header__nav {
  display: block;
}

.bf-header__nav .bf-nav--inline {
  flex-direction: column;
  align-items: stretch;
  gap: var(--bf-space-1);
}

.bf-header__nav .bf-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding-bottom: var(--bf-space-1);
  color: var(--bf-color-text);
  font-family: "Inter", var(--bf-font-body);
  font-weight: var(--bf-weight-medium);
  font-size: var(--bf-text-sm);
  text-transform: none;
  font-variant: normal;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Animated underline on hover/active (skipped for the CTA button), in the
   storefront brand color (the accent against the paper masthead). */
.bf-header__nav .bf-nav__link:not(.bf-header__cta)::after {
  content: "";
  position: absolute;
  left: var(--bf-space-2);
  right: var(--bf-space-2);
  bottom: 0;
  height: 2px;
  background-color: var(--bf-brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bf-transition-fast);
}

.bf-header__nav .bf-nav__link:hover {
  background-color: transparent;
  color: var(--bf-color-text);
  text-decoration: none;
}

.bf-header__nav .bf-nav__link:not(.bf-header__cta):hover::after,
.bf-header__nav .bf-nav__link.is-active:not(.bf-header__cta)::after {
  transform: scaleX(1);
}

/* "Place an Ad" CTA: a solid charcoal "ink" button on the paper masthead - the
   one filled element, so it clearly reads as the primary action without leaning
   on the storefront brand color at rest. The brand color arrives on hover (a
   small reveal + lift), so the brand still plays a part but does not box the CTA
   in at rest. */
.bf-header__nav .bf-nav__link.bf-header__cta {
  background-color: var(--bf-brand-secondary);
  color: var(--bf-color-text-inverse);
  font-weight: var(--bf-weight-bold);
  border-radius: var(--bf-radius-pill);
  padding: var(--bf-space-2) var(--bf-space-4);
  transition: background-color var(--bf-transition-fast),
    color var(--bf-transition-fast),
    transform var(--bf-transition-fast);
}

.bf-header__nav .bf-nav__link.bf-header__cta:hover {
  background-color: var(--bf-brand-primary);
  color: var(--bf-brand-primary-ink);
  transform: translateY(-1px);
}

.bf-header__actions {
  display: inline-flex;
  align-items: center;
}

/* Account trigger. The link is the focus target, so its focus ring is round
   (matching the avatar) instead of the browser's square outline; focus-visible
   means a mouse click shows no ring at all, only keyboard focus does. */
.bf-header__account {
  display: inline-flex;
  border-radius: var(--bf-radius-pill);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Avatar chip on the paper masthead: a hairline ring on a surface fill, framing
   either the default (charcoal) glyph or, when logged in, the customer photo. */
.bf-header__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--bf-radius-pill);
  object-fit: cover;
  background-color: var(--bf-color-surface);
  box-shadow: inset 0 0 0 1px var(--bf-color-border-strong);
  transition: background-color var(--bf-transition-fast),
    box-shadow var(--bf-transition-fast),
    transform var(--bf-transition-fast);
}

.bf-header__account:hover .bf-header__avatar {
  background-color: var(--bf-color-surface-alt);
  box-shadow: inset 0 0 0 1px var(--bf-brand-primary);
  transform: translateY(-1px);
}

.bf-header__account:focus-visible .bf-header__avatar {
  box-shadow: inset 0 0 0 1px var(--bf-color-border-strong),
    0 0 0 3px var(--bf-color-focus-ring);
}

/* Click feedback on the masthead: kill the ugly default dark tap/click highlight
   box on the logo + nav links + hamburger, and show a clean press (a quick dim)
   instead. Keyboard focus still gets the bf-scope focus-visible ring, so
   accessibility is preserved. */
.bf-header a,
.bf-header__toggle {
  -webkit-tap-highlight-color: transparent;
}

.bf-header a:focus:not(:focus-visible),
.bf-header__toggle:focus:not(:focus-visible) {
  outline: none;
}

.bf-header a:active,
.bf-header__toggle:active {
  opacity: 0.6;
}

@media (min-width: 768px) {
  /* Condensed single-row chrome (Open Market): logo on the left, the inline nav
     and the account avatar pushed to the right. The avatar takes layout width on
     this row (no absolute float), so the bar stays a compact single line on every
     page. */
  .bf-header__inner {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--bf-space-4);
  }

  .bf-header__brand {
    margin-right: auto;
    padding-bottom: 0;
  }

  .bf-header__actions {
    position: static;
    margin-left: var(--bf-space-2);
  }

  .bf-header__toggle {
    display: none;
  }

  .bf-header__nav,
  .bf-header__toggle-input:checked ~ .bf-header__nav {
    display: flex;
    flex-basis: auto;
    justify-content: flex-end;
    width: auto;
    padding-top: 0;
    border-top: 0;
  }

  .bf-header__nav .bf-nav--inline {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bf-space-4);
  }
}

.bf-footer {
  margin-top: var(--bf-space-8);
  padding: var(--bf-space-6) 0;
  background-color: var(--bf-color-secondary);
  color: var(--bf-color-text-inverse);
  border-top: 3px solid var(--bf-brand-primary);
}

.bf-footer a {
  color: var(--bf-color-text-inverse);
}

/* Account panel chrome (WS3): inner styling for the dark slide-out. The
   .panel-my-account geometry stays owned by the legacy hozi CSS; this only
   restyles the bf- content inside .account-panel-wrapper. The Bootstrap
   password modals keep their own (light) frame, so the dark text rules below are
   scoped to descendants of .bf-account-panel, not the standalone error class. */
.bf-account-panel {
  color: var(--bf-color-text-inverse);
}

.bf-account-panel__heading {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text-inverse);
}

.bf-account-panel hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: var(--bf-space-4) 0;
}

.bf-account-panel .bf-field {
  margin-bottom: var(--bf-space-3);
}

.bf-account-panel .bf-btn {
  width: 100%;
}

.bf-account-panel__check {
  display: flex;
  gap: var(--bf-space-2);
  align-items: flex-start;
  color: var(--bf-color-text-inverse);
  font-size: var(--bf-text-sm);
}

.bf-account-panel__link {
  color: var(--bf-color-text-inverse);
  text-decoration: underline;
}

.bf-account-panel__error {
  display: block;
  margin: var(--bf-space-2) 0;
  color: var(--bf-color-danger);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
}

.bf-footer .bf-nav--inline {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bf-space-3);
}

.bf-footer .bf-nav__link {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bf-color-text-inverse);
}

.bf-footer .bf-nav__link:hover {
  background-color: transparent;
  color: var(--bf-brand-primary);
  text-decoration: none;
}

.bf-footer__copyright {
  margin: var(--bf-space-4) 0 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-inverse);
  text-align: center;
  opacity: 0.85;
}

/* Cookie-consent banner (WS3 chrome). Reuses the .bf-alert--warning visuals;
   these rules pin it to the bottom and drop the alert's rounding/edges. Loaded
   after components.css, so it wins where it overlaps .bf-alert. Visibility is
   driven by the legacy .hide class (sandbox/js/hozi.main.js toggles it). */
.bf-cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--bf-z-toast);
  margin: 0;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-4);
  text-align: center;
}

/* Payment page (WS3 chunk-3): centered sheet + mobile button stack. */
.bf-scope #payment-form {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 599px) {
  .bf-scope .place-ad_button-row .col-xs-12 {
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-2);
  }

  .bf-scope .place-ad_button-row .bf-btn {
    float: none;
    width: 100%;
    margin-right: 0 !important; /* overrides the inline margin-right:10px */
  }

  .bf-scope .place-ad_button-row #next-button-payment {
    order: -1; /* primary action first */
  }

  .bf-scope .place-ad_button-row #payment-validation-error {
    float: none;
    width: 100%;
  }
}