/* ============================================================================
   content/custom/css/boldmere.css
   Site-specific styling for Boldmere Carpets & Rugs.

   Ported from the legacy static site (www.boldmerecarpets.co.uk). Loaded by
   CustomAssets.php AFTER the shipped template CSS, so these rules win the
   cascade. Every Boldmere class/var is prefixed `bmc-` / `--bmc-`; the
   standard CMS chrome (`.site-header`/`.site-footer`/`nav[data-menu]`) is
   re-themed by SCOPED OVERRIDE of the CMS's own CSS custom properties.

   Image URLs are relative to this file (/custom/css/) so they resolve the
   same whether the site is mounted at a domain root or a subfolder:
       ../../media/<file>  ->  /media/<file>
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bmc-cream: #F4E8DF;
  --bmc-cream-dark: #F1DED0;
  --bmc-deep-red: #BB0000;
  --bmc-mid-red: #990000;
  --bmc-brown: #663300;
  --bmc-dark-brown: #512800;
  --bmc-body-bg: #D3C4B6;
  --bmc-border: #bb8866;
  --bmc-cream-on-brown: #f4ddd0;          /* legible cream for text on dark brown */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  background: var(--bmc-body-bg);
  color: var(--bmc-mid-red);
  line-height: 1.7;
  font-size: 1.125rem;
}
a { color: var(--bmc-deep-red); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--bmc-dark-brown); }

/* ============================================================================
   STANDARD CMS CHROME — palette overrides
   The shipped template emits .site-header (sticky), .site-footer, and the
   nav[data-menu] from render_menu. menu.css drives all menu styling from
   CSS custom properties — so retheming the entire menu (desktop list, mobile
   hamburger off-canvas, hover/active states) is just a question of scoping
   new values for those properties. No selector fighting.
   ========================================================================== */

/* --- Theme lockdown ------------------------------------------------------
   style.css and menu.css read their colours from generic tokens
   (--text-color, --text-light, --footer-bg, --header-bg, --primary-color,
   --border-color, --menu-*) that get re-defined under [data-theme="dark"].
   The Boldmere palette is fixed (cream / brown / red) and is not
   theme-aware, so flipping themes was visibly recolouring parts of the
   header and footer that style.css owns — most obviously the footer-nav
   links, which style.css targets at higher specificity than my rules.

   Re-declaring the tokens inside .site-header / .site-footer scope beats
   the [data-theme="dark"] root override for any descendant — same trick I
   already use for --menu-* below, just covering the wider set. No
   specificity fights, no !important.

   There is no admin kill-switch for theme.js. Its mount() falls back to
   .site-footer .container if no [data-theme-toggle-host] exists, so the
   "Theme" button gets injected whether we want it or not. The simplest
   clean fix is to hide the injected button (and its popover) via CSS. */
.site-header,
.site-footer {
  --primary-color:   var(--bmc-deep-red);
  --secondary-color: var(--bmc-mid-red);
  --background:      var(--bmc-cream);
  --background-alt:  var(--bmc-cream-dark);
  --card-bg:         #ffffff;                /* search popout surface — stays light even in OS dark mode */
  --card-hover-bg:   var(--bmc-cream-dark);  /* search result row hover */
  --header-bg:       var(--bmc-dark-brown);
  --footer-bg:       var(--bmc-cream);
  --text-color:      var(--bmc-mid-red);
  --text-light:      var(--bmc-deep-red);
  --text-muted:      var(--bmc-brown);
  --border-color:    var(--bmc-border);
  --border-strong:   var(--bmc-brown);
}
.site-footer .theme-toggle,
.site-footer .theme-popover { display: none !important; }

/* --- Header search widget --------------------------------------------------
   The [search_box] toggle is a circular icon button; style.css colours it
   from --card-bg/--text-color, which would render a white pill. On the brown
   bar we want it to read like the nav — cream outline + cream glass, with the
   same translucent-white hover/open state. The popout dropdown keeps the
   light surface set by --card-bg above. */
.site-header .site-search-toggle {
  background: transparent;
  border-color: var(--bmc-cream-on-brown);
  color: var(--bmc-cream-on-brown);
}
.site-header .site-search-toggle:hover,
.site-header .site-search-widget.is-open .site-search-toggle {
  background: rgba(255, 255, 255, .15);
  border-color: #ffffff;
  color: #ffffff;
}


/* --- sticky top bar (logo + nav) ---------------------------------------- */
.site-header {
  background: var(--bmc-dark-brown);
  border-bottom: 1px solid var(--bmc-brown);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  padding: .55rem 0;                                /* snug like the old brown bar */
  /* Re-theme the menu CSS vars FOR EVERY [data-menu] inside this header */
  --menu-bg:            var(--bmc-dark-brown);
  --menu-fg:            var(--bmc-cream-on-brown);
  --menu-fg-hover:      #ffffff;
  --menu-bg-hover:      rgba(255, 255, 255, .15);
  --menu-accent:        #ffffff;
  --menu-border:        var(--bmc-brown);
  --menu-submenu-bg:    var(--bmc-dark-brown);
}
.site-header .container { gap: 1rem; padding: 0 1rem; }
.site-header .site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .site-logo:hover { text-decoration: none; }
.site-header .site-logo .site-name,
.site-header .site-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bmc-cream-on-brown);
  letter-spacing: .01em;
}
.site-header nav[data-menu] a { font-family: 'Playfair Display', Georgia, serif; }
/* Hamburger button colour against the brown bar */
.site-header nav[data-menu] > .menu-toggle { color: var(--bmc-cream-on-brown); border-color: var(--bmc-brown); }

/* --- standard CMS footer ------------------------------------------------- */
.site-footer {
  background: var(--bmc-cream);
  color: var(--bmc-mid-red);
  border-top: 3px solid var(--bmc-dark-brown);
  padding: 1.25rem 0 1rem;
  --menu-bg:            transparent;
  --menu-fg:            var(--bmc-deep-red);
  --menu-fg-hover:      var(--bmc-dark-brown);
  --menu-bg-hover:      transparent;
  --menu-accent:        var(--bmc-deep-red);
  --menu-border:        var(--bmc-border);
}
.site-footer .container { padding: 0 1rem; }
.site-footer .footer-columns { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.site-footer .footer-brand { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.site-footer .footer-brand p { font-family: 'Playfair Display', serif; color: var(--bmc-deep-red); margin: 0; }
.site-footer .footer-nav a { font-family: 'Playfair Display', serif; color: var(--bmc-deep-red); padding: .35rem .85rem; }
.site-footer .footer-nav a:hover { color: var(--bmc-dark-brown); background: transparent; }
.site-footer .footer-controls { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.site-footer .cc-prefs-link {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  color: var(--bmc-deep-red);
  background: transparent;
  border: 1px solid var(--bmc-border);
  border-radius: 4px;
  padding: .35rem .75rem;
  cursor: pointer;
}
.site-footer .cc-prefs-link:hover { background: var(--bmc-cream-dark); color: var(--bmc-dark-brown); }
.site-footer .rss-link { font-family: 'Playfair Display', serif; color: var(--bmc-deep-red); }

/* ============================================================================
   BOLDMERE WRAPPER (centered cream column)
   ========================================================================== */
.bmc-wrapper {
  max-width: 1020px;
  margin: 0 auto;
  background: url('../../media/background-large.gif') center top var(--bmc-cream);
  box-shadow: 0 0 30px rgba(0, 0, 0, .25);
}

/* ============================================================================
   HERO PANEL (formerly .bmc-header — sits inside the wrapper, under the
   sticky CMS bar. No longer accompanied by .bmc-top-nav, which has been
   replaced by the standard sticky nav.)
   ========================================================================== */
.bmc-header { border: 1px solid var(--bmc-brown); background: var(--bmc-cream); }
.bmc-header-inner { display: flex; align-items: stretch; min-height: 380px; }
.bmc-header-hero { flex: 0 0 285px; overflow: hidden; }
.bmc-header-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bmc-header-info { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 2.5rem; text-align: center; }
.bmc-header-info-inner { max-width: 520px; }
.bmc-header-info h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--bmc-deep-red);
  line-height: 1.2;
  margin-bottom: .5rem;
}
.bmc-tagline { font-style: italic; font-size: 1.2rem; color: var(--bmc-mid-red); margin-bottom: 1rem; }
.bmc-header-info address { font-style: normal; font-size: 1.05rem; line-height: 1.6; margin-bottom: .75rem; }
.bmc-hours { font-size: 1rem; }
.bmc-cta-text { font-size: 1rem; margin: .25rem 0 .75rem; font-weight: 600; }
.bmc-cta-text a { color: var(--bmc-deep-red); font-weight: 700; }

/* ============================================================================
   ACTION BUTTONS (Call Us, Directions, Get Directions from My Location)
   Used in the hero panel and in any contact block (policy contact, find-us).
   ========================================================================== */
.bmc-btn-group {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: .25rem 0 1rem;
}
.bmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;                 /* touch target */
  padding: .55rem 1.1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid var(--bmc-deep-red);
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .1s, box-shadow .2s;
  text-decoration: none;
  white-space: nowrap;
}
.bmc-btn:active { transform: translateY(1px); }
.bmc-btn-icon { flex-shrink: 0; }

.bmc-btn--primary { background: var(--bmc-deep-red); color: #fff; }
.bmc-btn--primary:hover,
.bmc-btn--primary:focus-visible {
  background: var(--bmc-mid-red);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(187, 0, 0, .35);
}
.bmc-btn--ghost { background: transparent; color: var(--bmc-deep-red); }
.bmc-btn--ghost:hover,
.bmc-btn--ghost:focus-visible {
  background: var(--bmc-deep-red);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(187, 0, 0, .25);
}

/* ============================================================================
   CONTENT SECTIONS
   ========================================================================== */
.bmc-content-section { background: var(--bmc-cream); border: 1px solid var(--bmc-border); margin: .75rem; padding: 0; }

/* Index: two column */
.bmc-index-layout { display: flex; align-items: stretch; min-height: 600px; }
.bmc-sidebar { flex: 0 0 270px; border-right: 1px solid var(--bmc-border); padding: 1.25rem 1rem; }
.bmc-sidebar-nav {
  background: url('../../media/laminate-flooring-button.gif') center/cover no-repeat;
  border: 2px solid var(--bmc-brown);
  border-radius: 4px;
  padding: 1rem .5rem;
  margin-bottom: 1.25rem;
}
.bmc-sidebar-nav a, .bmc-sidebar-nav .bmc-no-link {
  display: block;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bmc-deep-red);
  padding: .55rem .25rem;
  transition: opacity .2s;
}
.bmc-sidebar-nav a:hover { opacity: .7; text-decoration: none; }
.bmc-sidebar-nav .bmc-no-link { opacity: .6; cursor: default; }
.bmc-sidebar-nav hr { border: none; border-top: 1px solid rgba(150, 60, 0, .2); margin: .25rem 0; }
.bmc-features-list { list-style: none; padding: .25rem 0; }
.bmc-features-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0;
  border-bottom: 1px dotted rgba(153, 0, 0, .2);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bmc-mid-red);
}
.bmc-features-list li:last-child { border-bottom: none; }
.bmc-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--bmc-deep-red);
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: .5rem;
}
.bmc-tick::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.bmc-main-content { flex: 1; padding: 1.75rem 2rem; }
.bmc-main-content h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--bmc-deep-red); margin-bottom: 1rem; text-align: center; }
.bmc-main-content p { margin-bottom: 1rem; text-align: justify; }

/* Inner pages: full width */
.bmc-inner-content { padding: 1.75rem 2rem 1.75rem; }
.bmc-inner-content h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--bmc-deep-red); margin-bottom: 1rem; text-align: center; }
.bmc-inner-content p { margin-bottom: 1rem; text-align: justify; }
.bmc-inner-content h3 { font-family: 'Playfair Display', serif; color: var(--bmc-deep-red); margin: 1.25rem 0 .5rem; }
.bmc-inner-content ul, .bmc-inner-content ol { margin: 0 0 1rem 1.5rem; }
.bmc-inner-content li { margin-bottom: .35rem; }
.bmc-content-with-image { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.25rem; }
.bmc-content-with-image .bmc-text { flex: 1; }
.bmc-content-with-image .bmc-img-wrap { flex: 0 0 auto; }
.bmc-content-with-image .bmc-img-wrap img { border: 1px solid var(--bmc-brown); display: block; max-width: 100%; height: auto; }

/* Header features (inner pages) */
.bmc-header-features { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: .75rem; }
.bmc-header-features .bmc-feat { display: flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 600; }
.bmc-header-features .bmc-tick { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================================
   FIND-US MAP — responsive intrinsic-ratio iframe wrapper
   ========================================================================== */
.bmc-map-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.bmc-map-wrap { flex: 1 1 60%; min-width: 0; }
.bmc-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bmc-brown);
  overflow: hidden;
}
.bmc-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.bmc-map-text { flex: 1 1 40%; }
.bmc-map-actions { margin-top: .75rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================================================
   POLICY-PAGE CONTACT BLOCK (shared, bottom of each policy page)
   ========================================================================== */
.bmc-contact-block {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--bmc-cream-dark);
  border: 1px solid var(--bmc-border);
  border-radius: 4px;
}
.bmc-contact-block h3 { margin-top: 0; }
.bmc-contact-block address { font-style: normal; line-height: 1.7; margin-bottom: .5rem; }
.bmc-contact-block a { font-weight: 700; }
.bmc-contact-block .bmc-btn-group { justify-content: flex-start; margin-top: .75rem; }

/* ============================================================================
   MARQUEE
   ========================================================================== */
.bmc-marquee-wrap { background: var(--bmc-cream); border: 1px solid var(--bmc-border); margin: .75rem; margin-top: 0; overflow: hidden; }
.bmc-marquee-inner {
  white-space: nowrap;
  display: inline-block;
  animation: bmc-marquee 60s linear infinite;
  padding: .5rem 0;
  color: var(--bmc-mid-red);
  font-family: 'Crimson Pro', serif;
  font-size: .95rem;
}
@keyframes bmc-marquee {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 700px) {
  .bmc-header-inner { flex-direction: column; }
  .bmc-header-hero { flex: 0 0 auto; height: 220px; }
  .bmc-header-info { padding: 1.25rem 1rem; }
  .bmc-header-info h1 { font-size: 1.9rem; }
  .bmc-index-layout { flex-direction: column; }
  .bmc-sidebar { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--bmc-border); }
  .bmc-content-with-image { flex-direction: column; }
  .bmc-map-layout { flex-direction: column; }
  .bmc-header-features { gap: .75rem; }
  .bmc-btn { width: 100%; max-width: 320px; }      /* full-width buttons on mobile */
  .bmc-btn-group { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .bmc-header-info h1 { font-size: 1.55rem; }
  .bmc-main-content, .bmc-inner-content { padding: 1.25rem 1rem; }
  .site-header .site-logo { font-size: 1.1rem; }
}