/***** TYPOGRAPHY — SINGLE SOURCE OF TRUTH (styles-addendum.css) *****/
:root{
  /* Family & color */
  --ffl-text-color: #e6e6e6 !important;

  /* Base + scale */
  --ffl-font-size-base: 16px !important;
  --ffl-font-size-page-title: 26px !important;  /* h1 */
  --ffl-font-size-card-title: 22px !important;  /* h2 */
  --ffl-font-size-section-title: 20px !important;/* h3 */
  --ffl-font-size-card-line: 14px !important;   /* h4/body small */
  --ffl-line-height: 1.5 !important;
}

html{ font-size: var(--ffl-font-size-base) !important; }
body{
  font-family: var(--ffl-font-family) !important;
  color: var(--ffl-text-color) !important;
  line-height: var(--ffl-line-height, 1.5) !important;
}

/* Unified heading scale (applies to both dealers & ranges) */
h1{ font-size: var(--ffl-font-size-page-title) !important; font-weight: 900 !important; line-height: 1.1 !important; }
h2{ font-size: var(--ffl-font-size-card-title) !important; font-weight: 900 !important; line-height: 1.1 !important; }
h3{ font-size: var(--ffl-font-size-section-title) !important; font-weight: 700 !important; line-height: 1.2 !important; }
h4{ font-size: var(--ffl-font-size-card-line) !important; font-weight: 600 !important; line-height: 1.2 !important; }

/* Neutralize per-page drift */
.range-wrap, .range-wrap *{ font-family: inherit !important; color: inherit !important; font-size: inherit !important; }
.range-wrap h2{ font-size: var(--ffl-font-size-card-title) !important; }

/* ===============================
   FRONT THEME ADDENDUM (public)
   Loads after styles.css
   =============================== */

/* ---------- TYPOGRAPHY (single source of truth) ---------- */
:root{
  --font-base: var(--ffl-font-size-base, 16px);
  --title-xl:  var(--ffl-font-size-page-title, 26px);
  --title-lg:  var(--ffl-font-size-card-title, 22px);
  --title-md:  var(--ffl-font-size-section-title, 20px);
  --title-sm:  var(--ffl-font-size-card-line, 14px);
}

body{ font-size: var(--font-base); line-height:1.5; color: var(--ffl-text-color, #e6e6e6);}

/* Title mapping */
.dealers-wrap .page-title{ font-size:var(--title-xl) !important; -webkit-text-stroke:1.2px #000 !important; line-height:1.2; }
.dealer-wrap h2{          font-size:var(--title-lg) !important; -webkit-text-stroke:1.2px #000 !important; line-height:1.2; }
.state-title{             font-size:var(--title-md) !important; -webkit-text-stroke:1px #000 !important; line-height:1.2; }
.grid .box h3,
.home-card .box h3{       font-size:var(--title-md) !important; -webkit-text-stroke: var(--ffl-text-stroke-width,0) var(--ffl-text-stroke-color,#000) !important; text-shadow: var(--ffl-text-shadow, none) !important; }
.dealer-wrap .dealer-grid h4{ font-size:var(--title-sm) !important; -webkit-text-stroke:1px #000 !important; }

/* Hours table spacing (prevents “Mon/Tue” hugging the edge) */
.dealer-wrap .hours table{ width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
.dealer-wrap .hours th{ width:88px; text-align:left; padding:4px 8px 4px 6px; color:#e6e6e6; -webkit-text-stroke:1px #000 !important; }
.dealer-wrap .hours td{ padding:4px 0 4px 6px; }

/* ---------- Global page background (no scaling) ---------- */
body{
  background-color:#0b0f12 !important;
  background-image:url('/ffl/images/asfalt-dark.png') !important;
  background-repeat:repeat; background-size:auto; background-attachment:fixed;
  image-rendering:crisp-edges; image-rendering:pixelated;
}

/* Wrapper */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px;}

/* Menu (front) */
.menu{
  background-repeat: repeat;
  background-color:#12181c !important;
  background-image:url('/ffl/images/concrete-wall.png');
  background-repeat:repeat; background-size:auto;
  border-bottom:2px solid #111;
}
.menu .wrap{display:flex;gap:12px;align-items:center;padding:10px 0;}
.menu .nav-links{display:flex;gap:12px;align-items:center;}
.menu a{color:#fff !important;font-weight:700;text-decoration:none;padding:8px 12px;border-radius:6px;}
.menu a:hover{background:rgba(0,0,0,.18);}

/* Hamburger */
.nav-toggle{display:none;appearance:none;background:transparent;border:0;padding:8px;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:3px;margin:4px 0;background:#fff;border-radius:2px}
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .menu .wrap{justify-content:space-between}
  .menu .nav-links{position:relative;display:block;width:100%;max-height:0;overflow:hidden;transition:max-height .2s ease}
  .menu .nav-links.open{max-height:500px}
  .menu .nav-links a{display:block;padding:10px 0;border-top:1px solid rgba(0,0,0,.15)}
}

/* Six-box grid (front homepage) */
:root{ --header-h:0px; --menu-h:44px; --footer-h:100px; --page-vpad:32px; }
main{padding:16px 0;}
.grid{min-height:0;}

.grid{
  display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-areas:"box1 box2" "box3 box6" "box4 box6" "box5 box6";
  gap:16px;align-items:stretch;
}
#box1{grid-area:box1} #box2{grid-area:box2} #box3{grid-area:box3}
#box4{grid-area:box4} #box5{grid-area:box5} #box6{grid-area:box6}

/* === Box chrome (match dealer panels) === */
.box{padding:14px;min-height:auto;height:100%;display:flex;flex-direction:column;}
.grid .box{
  text-align:left;background-color:rgba(12,13,14,.28) !important;background-image:none !important;
  border:1px solid rgba(255,255,255,.14) !important;border-radius:10px !important;
  box-shadow:0 12px 24px rgba(0,0,0,.75) !important;
}
.grid .box h3{ margin:0 0 8px; padding-left:6px; line-height:1.2; text-align:left; }
.grid .box .content{
  margin:0;padding:12px 14px !important;background-color:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.12) !important;border-radius:12px !important;box-shadow:none !important;
}
.dir-table{width:100%;border-collapse:collapse;}
.dir-table td{padding:0;border:0;}
.dir-table .row{padding:2px 0;}
.dir-table .name{display:block;font-weight:700;text-decoration:none;}
.dir-table .name:hover{text-decoration:underline;}
.dir-table .subtext{margin-top:2px;opacity:.95;font-weight:400;}

/* Map (Box 6) */
#box6{display:flex;flex-direction:column;align-items:stretch}
.map-wrap{position:relative;min-height:360px;}
#box6-map{display:block;width:100%;height:auto !important;min-height:360px;border-radius:12px;flex:1 1 auto !important;box-shadow:0 12px 24px rgba(0,0,0,.75);}
#box6 .content{padding:10px !important;}
#box6-legend{position:static !important;display:flex !important;justify-content:center !important;align-items:center !important;flex-wrap:wrap !important;width:100% !important;margin:8px 0 0 0 !important;padding:0 !important;text-align:center !important;}
#box6-legend .dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.dot-dealer{background:#1a73e8}.dot-preferred{background:#0e9f6e}.dot-range{background:#ef4444}

/* Global theme text */
body{color:#ffffff !important;}
a{color: var(--ffl-link-color, #4ea3ff) !important;text-decoration:underline;}
a:hover{text-decoration:none}
body{-webkit-text-stroke:3px #000; paint-order:stroke fill; text-shadow:none !important;}
a, .menu a, .box a{-webkit-text-stroke:2px #000}

/* Custom font */
@font-face{font-family:'segoeui';src:local('Segoe UI'),local('segoeui');font-weight:normal;font-style:normal;}
body{overflow-y:scroll;}

/* Footer */
.site-footer{background:#000;color:#101010;border-top:2px solid #111;margin-top:24px;}
.site-footer .wrap{padding:24px 16px;text-align:center;font-weight:700;letter-spacing:1px;text-transform:uppercase;}

/* Responsive single column */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"box1" "box2" "box3" "box6" "box4" "box5";min-height:auto;}
  .box{height:auto}
}

/* Background texture around boxes */
.grid .box{
  background-color:rgba(51,51,51,.28) !important;
  border:1px solid rgba(255,255,255,.14);
  background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)), url('/ffl/images/black-felt.png');
  background-repeat:no-repeat, repeat; background-position:0 0, 0 0; background-size:auto, auto;
}

/* Box 6 sizing + map crispness */
#box6 .content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#box6 .map-wrap{position:relative;flex:1 1 auto;min-height:360px}
#box6 #box6-map{width:100%;height:100% !important;min-height:0 !important}
#box6 #box6-legend{margin-top:8px;flex:0 0 auto}
#box6, #box6 *{-webkit-text-stroke:0 !important;text-shadow:none !important;filter:none !important;mix-blend-mode:normal !important;}
#box6, #box6 *, #box6 img, #box6 canvas{image-rendering:auto !important}

/* Homepage InfoWindow readability */
#box6 .gm-style .gm-style-iw,
#box6 .gm-style .gm-style-iw *{color:#111 !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
#box6 .gm-style .gm-style-iw a{color:#1a73e8 !important;text-decoration:underline}

/* Dealer-page InfoWindow too */
.dealer-wrap .gm-style .gm-style-iw,
.dealer-wrap .gm-style .gm-style-iw *{color:#111 !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
.dealer-wrap .gm-style .gm-style-iw a{color:#1a73e8 !important;text-decoration:underline}

/* Range-page InfoWindow too */
.range-wrap .gm-style .gm-style-iw,
.range-wrap .gm-style .gm-style-iw *{color:#111 !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
.range-wrap .gm-style .gm-style-iw a{color:#1a73e8 !important;text-decoration:underline}

/* Box 1 controls look */
#box1 .box1-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 6px 8px}
#box1 .btn-link{padding:4px 8px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);border-radius:6px;cursor:pointer}
#box1 .zip-form{display:flex;gap:6px;align-items:center}
#box1 .zip-form input{width:100px;padding:4px 8px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);border-radius:6px;outline:none}
#box1 .box1-controls{font-size:1.15rem;line-height:1.25}
#box1 .box1-controls label,#box1 .btn-link,#box1 .zip-form input,#box1 .zip-form button{font-size:1.1rem !important;font-weight:700}
#box1 .box1-controls,#box1 .box1-controls *{-webkit-text-stroke:1px #000 !important}
#box1 #box1-zip::placeholder{color:rgba(255,255,255,.85);opacity:1}
#box1>h3{text-align:left !important}

/* ===== CANONICAL PREFERRED BADGE (used everywhere) ===== */
.badge,
.badge.pref,
.badge.preferred,
.badge--preferred{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:3px 10px !important;
  border-radius:999px !important;

  background:#0a7c3b !important; /* same as dealer.php look */
  border:2px solid rgba(255,255,255,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 3px 6px rgba(0,0,0,.35) !important;

  color:#fff !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  font-size:15px !important;
  letter-spacing:.7px !important;
  line-height:2 !important;

  -webkit-text-stroke:1px #000 !important;
  text-shadow:none !important;
}

@media (max-width:900px){
  .badge,.badge.pref,.badge.preferred,.badge--preferred{
    font-size:15px !important; padding:3px 10px !important;
  }
}

/* ===== Force all box titles to top-left (all pages) ===== */
.grid > .box > h3{
  text-align: left !important;
  display: grid !important;
  justify-content: start !important;
  align-content: start !important;
  margin: 0 0 8px !important;
  padding: 0 6px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  width: 100% !important;
}

/* ===== Public profile titles (Dealers & Ranges) ===== */
.dealer-skin h2, .range-wrap h2 { font-size: var(--ffl-font-size-card-title) !important; font-weight: 900 !important; line-height: 1.1 !important; margin-bottom: 10px !important; }

/* =========================================================
   PREFERRED RING — single rounded outline (Range + Dealer)
   ---------------------------------------------------------
   Reads CSS vars (set via PHP inline):
     --pref-ring: px thickness
     --pref-grad-start / --pref-grad-end: colors
     --pref-pattern-url: optional subtle texture (unused by default)
   ========================================================= */

/* defaults if PHP doesn't set them */
:root{
  --pref-ring:        6px;
  --pref-grad-start:  #31c6ff;
  --pref-grad-end:    #0b72ff;
}

/* make sure cards can host pseudos if needed */
.range-card, .dealer-card { position: relative; }

/* kill any inner 1px outline some templates add on ::after */
.range-card.preferred::after,
.range-card.pref-accent::after,
.dealer-card.preferred::after{
  display:none !important;
}

/* draw ONE gradient ring on the element border (no fill) */
.range-card.preferred,
.range-card.pref-accent,
.dealer-card.preferred{
  border: var(--pref-ring) solid transparent !important; /* thickness */
  border-radius: 14px !important;                        /* match card radius */
  border-image-slice: 1;
  border-image-source: linear-gradient(135deg, var(--pref-grad-start), var(--pref-grad-end));
}

/* optional super-subtle inner texture (if you decide to use --pref-pattern-url) */
.range-card.preferred::before,
.range-card.pref-accent::before,
.dealer-card.preferred::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  background: var(--pref-pattern-url, none);
  opacity:.08;
  pointer-events:none;
}

/* legacy fallback: browsers without border-image + gradients */
@supports not (border-image: linear-gradient(red, blue) 1) {
  .range-card.preferred,
  .range-card.pref-accent,
  .dealer-card.preferred{
    box-shadow: 0 0 0 var(--pref-ring,6px) #18b764 !important;
  }
}

/* Keep Google Map/StreetView UI clean inside range-card viewer area */
.range-card .viewer-grid,
.range-card .viewer-grid *{
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

/* ===== Spacing fix for content blocks (Range & Dealer) ===== */
.range-grid .panel .meta,
.dealer-grid .panel .meta,
.range-grid .panel .meta p,
.dealer-grid .panel .meta p,
.range-grid .panel .meta li,
.dealer-grid .panel .meta li {
  text-align: left !important;
  text-justify: auto !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Preferred badge as image (admin-configurable) */
.preferred-badge{
  display:inline-block;
  vertical-align:middle;
  line-height:1;
}
/* If the image sits in a .badge container, neutralize the pill styles */
.badge.is-image{
  background:none!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
}

a{ color: var(--ffl-link-color, #4ea3ff); }


/* Typography bindings for home boxes */
.grid .box .content,
.grid .box .content p,
.grid .box .content li,
.grid .box .content span{
  font-size: var(--ffl-font-size-base, 16px) !important;
  color: var(--ffl-text-color, #e6e6e6) !important;
}
.grid .box .content a{
  color: var(--ffl-link-color, #4ea3ff) !important;
  -webkit-text-stroke: var(--ffl-text-stroke-width,0) var(--ffl-text-stroke-color,#000) !important;
  text-shadow: var(--ffl-text-shadow, none) !important;
}



:root {
  --ffl-nav-bg-image: url('<?= e($GN_SETTINGS['nav_background_image'] ?? "/ffl/images/concrete-wall.png") ?>');
  --ffl-nav-mobile-bg-image: url('<?= e($GN_SETTINGS['nav_mobile_background_image'] ?? "/ffl/images/fake-brick.png") ?>');
}

.menu {
  background-repeat: repeat;
  background-image: var(--ffl-nav-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width:900px){
  .drawer-links {
    background-image: var(--ffl-nav-mobile-bg-image);
    background-repeat: repeat;
    background-repeat: no-repeat;
  }
}


/* FINAL link color guard */
a{ color: var(--ffl-link-color, #4ea3ff) !important; }