/* Joomla host of the shared AGR header (pkg_agrmenu shared/README.md, "Host requirements"): what the blog's theme does
   for its header, done here for the Astroid child template. Theme-independent: it styles only mod_agrmenu's own markup,
   and Astroid's wrappers around it are reduced to nothing (display: contents) so the header behaves as a direct child of
   the page — its sticky phone/tablet bar then holds for the whole page, as on the blog. */

/* Fonts: self-hosted (OFL, licences in fonts/). Barlow Condensed = the menu's face; DM Sans = its body text. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlowcondensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlowcondensed-600.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dmsans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/dmsans-700.woff2") format("woff2"); }

/* Astroid's header section, its container/row/column and the module chrome around the header: no box of their own. */
.astroid-header-section:has([data-agrm-header]),
.astroid-header-section:has([data-agrm-header]) :has([data-agrm-header]) { display: contents; }

.agrm-host { z-index: 1000; margin: 0; padding: 0; background: #3da441; text-align: left; }
@media (min-width: 1100px) { .agrm-host { position: relative; } }   /* below 1100 agrmenu.css makes it sticky: leave that alone */
.agrm-host *, .agrm-host *::before, .agrm-host *::after { box-sizing: border-box; }

/* Both rows: 1240 px content width, 16 px sides (inner box 1208 px), items 16 px apart. */
.agrm-host-row { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; justify-content: space-between; gap: 16px; }
.agrm-host-row-top { min-height: 48px; }
.agrm-host-row-main { min-height: 88px; }
.agrm-host-row-main > .agrm { flex: 0 1 auto; }

/* Brand: the shared logo (250 px; host-logo.css makes it fluid at 1100-1140 px) and the Canadian badge 20 px after it. */
.agrm-host-brand { flex: 0 0 auto; display: flex; align-items: center; }
.agrm-host-logo { display: block; flex: 0 0 auto; line-height: 0; }
.agrm-host-logo img { display: block; height: auto; }   /* width: the attribute; host-logo.css makes it fluid */
.agrm-host-badge { display: block; margin-left: 20px; max-width: none; height: auto; }
@media (max-width: 1099.98px) {
  .agrm-host-badge { display: none; }   /* the menu shows it in its phone sheet (R14) */
  .agrm-host-row-main { min-height: 0; }
}

/* The store panel's content: what the store script writes into #store-selector-details (com_agrstorefinder
   getStoreContent). The template styled it inside the old Maximenu (.store-selector-mod); here inside the menu's panel. */
#store-selector-content { font: 400 14px/1.45 "DM Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: normal; color: #2d2d2d; }
#store-selector-content .row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
#store-selector-content .row > [class*="col-"], #store-selector-content .row > [class*="span"] { flex: 1 1 220px; max-width: none; width: auto; padding: 0; }
#store-selector-content .row > .col-12, #store-selector-content .row > .span12 { flex-basis: 100%; }
#store-selector-content .store_selector_title { margin: 0 0 4px; font: 700 20px/1.2 "Barlow Condensed", "Roboto Condensed", sans-serif; text-transform: uppercase; color: #1a1a1a; }
#store-selector-content .store_selector_title label { margin: 0 4px 0 0; font: inherit; color: #575757; }
#store-selector-content a { color: #146b22; letter-spacing: normal; }
#store-selector-content a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 8px 8px 0; padding: 8px 14px;
  border: 0; border-radius: 10px; background: #146b22; color: #fff; font: 700 15px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
#store-selector-content a.btn:hover, #store-selector-content a.btn:focus { background: #0e5219; color: #fff; }
#store-selector-content address { margin: 4px 0 8px; font-style: normal; }
#store-map { width: 100%; height: 180px; margin-top: 8px; border-radius: 10px; }
/* "View more tire centres": the template's icon font glyph is replaced by the menu's chevron. */
#store-selector-content .store_sel_more i { display: none; }
#store-selector-content .store_sel_more a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-1px) rotate(45deg); }

/* The template sets every h2 to 28px !important on small screens; the sheet's section headings are the menu's small
   labels (agrmenu.css .agrm-sheet-h), so they need !important here too. */
.agrm-sheet .agrm-sheet-h { font-size: 13px !important; line-height: 1.2 !important; }

/* In the phone/tablet menu the store's details (book, call, address, hours) come first and the map after it, smaller:
   on a phone the details are what people open My Store for (the map column is first in the store script's markup). */
.agrm-sheet #store-selector-content .row > :has(#store-map) { order: 2; }
.agrm-sheet #store-map { height: 140px; }

/* Search results page (agrsearch.css): the same answer to the template's small-screen "h2 { 28px !important }" for the
   page's small section labels (Best matches, More results). */
.agrs .agrs-h { font-size: 14px !important; line-height: 1.2 !important; padding-bottom: 8px !important; }