/* ==========================================================================
   By Jillian Rose — Components
   Reusable classes (buttons, cards, icons, dividers) PLUS light styling of
   real, existing Genesis selectors (nav, titles, widgets, footer) so the
   system is visible site-wide. This does not rearrange what appears on any
   page or the homepage — only how the recurring site chrome looks. Content
   arrangement is Phase 2.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
/* Spec update, verified against real WCAG contrast math before applying:
   white text on the raw --color-accent (#B68A93) measures ~2.98:1, and
   even on --color-accent-dark (#98727B) only ~4.18:1 — both under the
   4.5:1 normal-text AA threshold at this weight/size (14-15px Medium
   doesn't qualify for the 3:1 large-text exception, which needs bold
   ≥18.66px or regular ≥24px). --color-button-fill (#906973) measures
   ~4.71:1 and its existing hover variant --color-button-fill-hover
   (#7C5A61) measures ~6.01:1 — both clear AA, so solid button fills use
   those instead of the raw accent tokens. --color-accent/--color-accent-
   dark are kept for the secondary button's border, where there's no
   text-on-color contrast requirement to fail. */
.btn, .btn-primary, .btn-secondary, button, input[type="submit"], input[type="button"], .button {
  font-family: var(--font-sans);
  font-weight: 500; /* Inter Medium */
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 25px;
  border-radius: var(--radius); /* 8px — within the requested 6-8px range */
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, button:focus-visible, input[type="submit"]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

.btn-primary, button, input[type="submit"], .button {
  background: var(--color-button-fill);
  color: var(--color-white);
  border: none;
}
.btn-primary:hover, button:hover, input[type="submit"]:hover, .button:hover {
  background: var(--color-button-fill-hover);
  color: var(--color-white);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-accent);
}
.btn-secondary:hover {
  background: var(--color-button-fill);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

.btn-tertiary {
  background: transparent;
  color: var(--color-accent-dark);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 15px;
  padding: 0;
  gap: 6px;
  border: none;
  box-shadow: none;
  text-decoration: none;
}
.btn-tertiary:hover { color: var(--color-text); background: none; box-shadow: none; transform: none; }
.btn-tertiary .icon { width: 15px; height: 15px; transition: transform .18s ease; }
.btn-tertiary:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
/* Clearly-labeled placeholder card — dashed border + muted fill so it
   reads unmistakably as "not real content yet," never mistaken for an
   actual post. */
.card-placeholder {
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
  box-shadow: none;
}
.card-placeholder:hover { transform: none; box-shadow: none; }
.card-placeholder .card-thumb-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 12px);
}
.card-placeholder .card-thumb-placeholder .icon { width: 28px; height: 28px; color: var(--color-text-secondary); }
.card-placeholder .card-body h3 { color: var(--color-text-secondary); font-style: italic; }
/* Generalized from ".card-placeholder .placeholder-badge" to a bare,
   reusable class — it's now also used standalone (home-intro title
   placeholder), not just nested inside card-placeholder. */
.placeholder-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-white);
  border: 1px solid var(--color-border-interactive);
  border-radius: 100px;
  padding: 2px 10px;
  margin-bottom: var(--space-1);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 2px;
}
.instagram-tile-placeholder {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 12px);
  background-color: var(--color-bg-secondary);
}
.instagram-tile-placeholder .icon { width: 22px; height: 22px; color: var(--color-text-secondary); }
/* .card is now the single clickable element (an <a>, not an <article>
   wrapping separate nested links) — the title/thumbnail no longer need
   their own inner <a> tags, which also avoids invalid nested-anchor
   markup. display:flex + color/text-decoration reset so the whole block
   behaves like a card, not an inline text link. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card .card-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.card .card-body { padding: var(--space-3); }
.card h3, .card h4 { margin-bottom: var(--space-2); }

/* Titles: bold + smaller, no underline (title text lives directly inside
   the card-wide link now, not its own nested <a>). Eyebrow moved below
   the title in cards specifically — muted/secondary instead of the
   accent-dark used when it appears above a title elsewhere on the page. */
.card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  margin: 0;
}
.card:hover h3 { color: var(--color-accent-dark); }
.card .eyebrow {
  order: 2;
  color: var(--color-text-secondary);
  font-size: 10.5px;
  margin-top: var(--space-1);
  margin-bottom: 0;
}
.card .card-body { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------
   Eyebrow / kicker label
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------------------
   Meta text
   --------------------------------------------------------------------- */
.meta, .entry-meta, .entry-footer {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------
   Icons — single-weight line SVG (use with <svg class="icon">)
   --------------------------------------------------------------------- */
.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
   Dividers
   --------------------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--color-border); /* decorative — soft on purpose, see tokens.css */
  border: none;
  margin: var(--space-5) 0;
}
.divider-motif {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-accent);
  margin: var(--space-4) 0;
}
.divider-motif::before, .divider-motif::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---------------------------------------------------------------------
   Newsletter CTA (shared component) — bjr_home_newsletter() in
   functions.php. Site-wide (not homepage.css) since page-templates/
   legal.php calls the same function. Scoped under .home-newsletter so
   it can't bleed into the other pages' own locally-styled newsletter
   forms (each of those already has its own more-specific class, same
   established pattern site-wide).
   --------------------------------------------------------------------- */
.home-newsletter {
  padding: var(--space-6) 0;
  text-align: center;
  background: var(--color-bg-secondary);
}
.home-newsletter-inner { max-width: 560px; margin: 0 auto; }
.home-newsletter-inner p { margin-bottom: var(--space-3); }
.home-newsletter .newsletter-form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.home-newsletter .newsletter-form .field { flex: 1; margin-bottom: 0; text-align: left; }
.home-newsletter .newsletter-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
} /* visually hidden but accessible — placeholder carries the visible label here */
.home-newsletter .newsletter-form button { white-space: nowrap; }
@media (max-width: 780px) {
  .home-newsletter .newsletter-form { flex-direction: column; }
  .home-newsletter .newsletter-form button { width: 100%; justify-content: center; }
}

/* =========================================================================
   Genesis site-wide chrome — real selectors, global scope only.
   No homepage/page layout changes here (Phase 2), only how these
   already-existing, everywhere-repeating elements look.
   ========================================================================= */

.site-title, .site-title a {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--color-text);
  text-decoration: none;
}
.site-description {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Custom logo: explicit pixel max-width, not just the generic 100%-of-
   container img rule — flex-width/flex-height in the theme support lets
   the uploaded file render near its full native size otherwise.
   .custom-logo/.custom-logo-link are WordPress core's standard output
   classes for the_custom_logo(), which Genesis's genesis-custom-logo
   feature builds on.
   Resized for the 2026 logo (attachment #1482, real cropped aspect
   ~1.857:1 — notably more square/vertically-dense than the old file's
   2.345:1, since this version stacks "by" + wordmark + subtitle + heart)
   — sized by width to that real ratio rather than reusing the old
   logo's 276px, and intentionally larger per explicit request (330px,
   ~20% up from the old value). */
.custom-logo-link { display: inline-block; }
.custom-logo {
  max-width: 330px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  margin: 0 auto;
}

/* Standard WordPress accessibility class — kept as general-purpose
   boilerplate (search forms, skip-links, and other core WP features
   depend on this class existing and being defined somewhere). NOT relied
   on below to hide the site-title text: that assumption (that Genesis
   auto-applies this class to the title when a custom logo is active) was
   unverified and turned out to be wrong — the text was still rendering
   visibly. Hiding the title is now done directly against its own real,
   unambiguous class instead — see .site-header .site-title below. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--color-white);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text);
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Structural: turns the real Genesis <ul class="genesis-nav-menu"><li> markup
   into a horizontal bar. Verified against live markup — Genesis emits a
   plain nested list with no layout CSS of its own (that's the child theme's
   job); Uptown supplied this structural layer, and my first pass at this
   file only styled typography, never replaced it. That gap — not a loading
   failure — is what produced the bullet-list symptom. */
/* <nav class="nav-primary"> itself carries no .wrap class, so it already
   spans the full width of .site-inner (verified unconstrained — only
   .wrap/.content-sidebar-wrap get a max-width, see base.css). It just had
   no visible boundary marking that, so it read as column-width even
   though the box itself wasn't. These borders make the full-width extent
   actually visible; the inner .wrap + justify-content:center below (kept
   as-is) is what keeps the link group itself centered within that bar,
   at any viewport width — the two are independent: this rule controls
   the bar's own edges, not the links' position. */
.nav-primary {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.genesis-nav-menu {
  font-family: var(--font-sans);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5); /* increased from --space-4 (32px) for more breathing room between items, per request */
}
.genesis-nav-menu .menu-item {
  list-style: none;
  margin: 0;
}
.genesis-nav-menu a {
  display: inline-block;
  padding: var(--space-1) 0;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--color-text);
  text-decoration: none;
  text-transform: none;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
  color: var(--color-accent-dark);
}
/* Top-level items only (Motherhood, Home, Travel, Money, Lifestyle,
   Resources, About, Shop) — scoped via the child combinator so it doesn't
   also catch .sub-menu dropdown links, which keep their existing weight/
   case for visual hierarchy under each dropdown trigger. Size and letter-
   spacing intentionally untouched, per request — only weight and case. */
.genesis-nav-menu > .menu-item > a {
  font-weight: 700;
  text-transform: uppercase;
}

/* Sub-menus (dropdowns) — Genesis nests these as ul.sub-menu inside li.
   Kept minimal/safe for Phase 1: readable and usable, not a full flyout
   redesign (that's a Phase 2 interaction-design decision). */
.genesis-nav-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  display: block;
}
.genesis-nav-menu .sub-menu .menu-item { display: block; }

.entry-title, .entry-title a {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  text-transform: none;
}
.entry-title a:hover { color: var(--color-accent-dark); }

.entry-content { color: var(--color-text); }
.entry-content a { color: var(--color-accent-dark); }

.widget-title, .widgettitle {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.site-footer, .site-footer a {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.site-footer a:hover { color: var(--color-accent-dark); }

.site-header, .site-inner, .site-footer { background: var(--color-bg); }

/* =========================================================================
   Phase 2 — Announcement bar, header utility, nav dropdowns, footer columns
   ========================================================================= */

.bjr-announcement {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}
/* Single row, no longer needing right-padding reserved for a dismiss
   button (removed — the bar is permanent now, per explicit request).
   space-between splits it into two groups: .bjr-announcement-main
   (motto/link, its own centered flex group) on the left/center, and
   .bjr-announcement-subscribe (the CTA that used to live in a separate
   header row) on the right — flex-wrap so narrow viewports wrap onto a
   second line within this SAME bar rather than overflowing, still one
   bar element either way, never two stacked ones. */
.bjr-announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: 12.5px;
}
.bjr-announcement-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.bjr-announcement-motto {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
}
.bjr-announcement-motto .icon { width: 13px; height: 13px; color: var(--color-accent); }
.bjr-announcement-divider {
  width: 1px;
  height: 14px;
  background: var(--color-border-interactive);
}
.bjr-announcement-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
}
.bjr-announcement-link:hover .bjr-announcement-cta { color: var(--color-text); }
.bjr-announcement-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent-dark);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
.bjr-announcement-cta .icon { width: 12px; height: 12px; }

/* Subscribe CTA — moved here from the header (.bjr-header-cta-right,
   removed) per explicit request so it lives in this one bar instead of
   a visually separate second row. Same text-hidden-below-900px pattern
   the old header version used. */
.bjr-announcement-subscribe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.bjr-announcement-subscribe-text {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  max-width: 16ch;
  line-height: 1.35;
  display: none;
}
.bjr-announcement-subscribe .btn-primary { padding: 8px 18px; font-size: 11.5px; }
@media (min-width: 900px) {
  .bjr-announcement-subscribe-text { display: block; }
}

/* Real, positioned wrapper around icons-left + <header> + cta-right
   (bjr_header_wrap_open()/_close() in functions.php) — verified against
   actual rendered HTML that .bjr-header-icons-left and .bjr-header-cta-
   right are DOM SIBLINGS of <header>, not children of it (Genesis prints
   its own <header> tag via a callback on the same 'genesis_header'
   action our two hooks use, interleaved by priority), so ".site-header {
   position: relative }" never actually contained them. This wrapper is
   their real positioning context now instead. */
.bjr-header-wrap { position: relative; }

/* Header: icons pinned left / CTA pinned right, logo/title centered in
   normal flow between them — three-column layout per the approved
   mockup. text-align:center on the header centers the title-area's
   inline logo content; the absolutely-positioned icon/CTA blocks are
   positioned against .bjr-header-wrap above (see that rule's comment),
   not this element, though .site-header keeps its own position:relative
   for .site-header .site-title below, a genuine real child of it. */
.site-header { position: relative; padding-top: var(--space-2); text-align: center; }
.site-header .title-area { display: inline-block; }

/* Verified against real inspected markup (not assumed): the text title is
   a <p class="site-title" itemprop="headline"> sitting directly inside
   .title-area, right after .custom-logo-link — both output together.
   Hidden using the visually-hidden-but-accessible pattern so the logo
   image (which already contains the wordmark) is the only thing visibly
   shown, while the text stays in the DOM for accessibility/SEO. !important
   guarantees this wins regardless of any other rule's specificity. */
.site-header .site-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.bjr-header-icons-left {
  position: absolute;
  left: var(--space-3);
  top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.bjr-header-icons-left a, .bjr-search-toggle { color: var(--color-text-secondary); display: inline-flex; cursor: pointer; }
.bjr-header-icons-left a:hover, .bjr-search-toggle:hover { color: var(--color-accent-dark); }
.bjr-header-icons-left .icon { width: 17px; height: 17px; }
.bjr-search-toggle { position: relative; }
.bjr-search-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bjr-search-panel {
  position: absolute;
  top: 28px;
  left: 0;
  width: 220px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.bjr-search-checkbox:checked ~ .bjr-search-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.bjr-search-panel input[type="search"] { margin: 0; }
.bjr-search-panel .search-form { display: flex; gap: 6px; }

@media (max-width: 680px) {
  .site-header { padding-top: var(--space-5); }
  .bjr-header-icons-left { position: static; margin-bottom: var(--space-2); justify-content: center; }
}

/* Dropdown sub-menus: reveal on hover/focus of the parent item.
   Scoped strictly to .nav-primary > .genesis-nav-menu (this theme's own
   nav container), not the bare .genesis-nav-menu/.sub-menu classes alone
   — those are generic, standard WordPress class names, so an unscoped
   selector here could style ANY other menu on the page that happens to
   share them, not just this one. */
.nav-primary .genesis-nav-menu .menu-item-has-children { position: relative; }
.nav-primary .genesis-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: var(--space-1) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 20;
}
.nav-primary .genesis-nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-primary .genesis-nav-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-primary .genesis-nav-menu .sub-menu .menu-item,
.nav-primary .genesis-nav-menu .sub-menu li { display: block; }
.nav-primary .genesis-nav-menu .sub-menu a {
  display: block;
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

/* Restyled per direct mockup comparison — single unified row (logo
   block + 4 nav columns together, not two stacked sections), tighter
   throughout, logo left-aligned instead of centered. */
.bjr-footer-top {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0;
}
.bjr-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
/* Sized by width to the new logo's real ~1.857:1 aspect, intentionally
   larger than the old 160px, same proportional bump as the header. */
.bjr-footer-logo { max-width: 195px; width: auto; height: auto; margin: 0; }
/* align-self:center centers this row specifically under the logo above
   it (which is itself center-composed within its own bounding box),
   without changing .bjr-footer-brand's own left-alignment relative to
   the other footer columns.
   Social icons now use the same circular icon-badge treatment first
   built on the Contact page (.bjr-contact-info-social a in contact.css)
   — matched exactly here: 32px circle, 1px solid --color-accent border,
   --color-accent-dark icon at 15px, filled hover state. gap bumped from
   --space-1 to --space-2 to match that same spacing. */
.bjr-footer-social { display: flex; align-items: center; justify-content: center; align-self: center; gap: var(--space-2); }
.bjr-footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-dark);
}
.bjr-footer-social a:hover { background: var(--color-button-fill); border-color: var(--color-button-fill); color: var(--color-white); }
.bjr-footer-social .icon { width: 15px; height: 15px; }

.bjr-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bjr-footer-col li { margin-bottom: 4px; }
.bjr-footer-col a { color: var(--color-text-secondary); text-decoration: none; font-size: 13.5px; line-height: 1.15; }
.bjr-footer-col a:hover { color: var(--color-accent-dark); }
.bjr-footer-col .newsletter-form { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.bjr-footer-col .newsletter-form button { width: 100%; justify-content: center; }

/* Bottom bar: copyright left, real Privacy Policy link right, divider
   line above separating it from the row above — matches the mockup's
   two-tier footer (main row, then a thin separate legal-line row). */
.bjr-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}
.bjr-footer-credit { margin: 0; padding: 0; text-align: left; border: none; }
.bjr-footer-bottom-link { color: var(--color-text-secondary); text-decoration: none; font-size: 13px; }
.bjr-footer-bottom-link:hover { color: var(--color-accent-dark); }

@media (max-width: 900px) {
  .bjr-footer-top { grid-template-columns: repeat(2, 1fr); }
  .bjr-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bjr-footer-top { grid-template-columns: 1fr; }
  .bjr-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

@media (max-width: 680px) {
  .genesis-nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-left: var(--space-3); }
}