/* Legacy page support.
 *
 * Everything here used to live in the ~370 line inline <style> of the old
 * includes/header.php. That header is gone; the whole site now renders through
 * includes/new-header.php + includes/new-footer.php (Tailwind, app-c.css).
 * Page BODIES that still use Bootstrap 4 markup opt in with
 * $needs_legacy_assets = true, which loads bootstrap.min.css and then this
 * file, and wraps their markup in #legacy-body.
 *
 * Three jobs, in order:
 *   A. the one @font-face the surviving rules need
 *   B. the legacy body rules themselves, moved verbatim
 *   C. chrome guard - keep Bootstrap out of the shared header/footer
 *   D. content guard - keep Tailwind's preflight out of the legacy body
 *
 * Delete this file (and the $needs_legacy_assets flag) once the legacy bodies
 * are rebuilt in Tailwind.
 */

/* ------------------------------------------------------------------ *
 * A. Fonts
 * app-c.css already declares Montserrat, Impact and Sonic. It declares
 * the Agency face under the name "AgencyFB"; the rules below ask for
 * "Agency", so that one name still needs its own declaration.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: 'Agency';
  src: url('/files/fonts/agency-fb/AgencyFB-Reg.eot');
  src: local('Agency FB'), local('AgencyFB-Reg'),
    url('/files/fonts/agency-fb/AgencyFB-Reg.eot?#iefix') format('embedded-opentype'),
    url('/files/fonts/agency-fb/AgencyFB-Reg.woff2') format('woff2'),
    url('/files/fonts/agency-fb/AgencyFB-Reg.woff') format('woff'),
    url('/files/fonts/agency-fb/AgencyFB-Reg.ttf') format('truetype'),
    url('/files/fonts/agency-fb/AgencyFB-Reg.svg#AgencyFB-Reg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ------------------------------------------------------------------ *
 * B. Legacy body rules
 * Moved from the old header. The chrome rules that sat alongside these
 * (announcement bar, .menu_bar, .copyright, footer, the banner slider)
 * were dropped with the markup they styled.
 * ------------------------------------------------------------------ */
body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

/* :where() keeps this at the specificity it had as a bare `a:hover`, so the
   per-page <style> blocks that override it still win on source order. */
:where(#legacy-body) a:hover {
  color: #bf0;
  text-decoration: none;
}

.product-showcase a,
.inner-pages a {
  display: block;
  overflow: hidden;
  position: relative;
}
.product-showcase img,
.inner-pages img,
section.pages-content img {
  transition: .2s ease;
}
section.pages-content {
  background: #000;
}
.product-showcase a:hover img,
.inner-pages a:hover img,
.pages-content div.col-md-3.col-12.my-4 a:hover img {
  transform: scale(1.1);
}
.product-showcase h2 {
  background: #000;
  color: #bf0;
  font-family: 'Impact';
  font-size: 2em;
}
.product-showcase h2 span {
  font-family: 'Agency';
  color: #fff;
}
.grid-items {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 30px;
}
.grid-item {
  display: grid;
  grid-row-gap: 30px;
}
.about-thumpstar {
  background: #252525;
}
.about-thumpstar * {
  color: #fff;
}
.about-thumpstar h1 {
  font-family: 'Agency';
  letter-spacing: 1px;
  font-size: 3em;
}
.about-thumpstar span {
  color: #bf0;
  font-family: 'Impact';
}
.about-thumpstar p {
  font-size: 1.15em;
  letter-spacing: 1px;
  line-height: 1.75;
}
.video-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: auto;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pages-banner {
  background: #000 url('/files/images/inner-banner.jpg') no-repeat top center / cover fixed;
}
.pages-banner h1 {
  color: #bf0;
  font-family: 'Montserrat';
  font-size: 2em;
}
.pages-banner p {
  color: #fff;
}
section.pages-content h3 {
  color: #bf0;
  font-size: 1.5em;
  font-family: 'Montserrat';
}
section.pages-content p {
  color: #fff;
}
@media only screen and (max-width: 576px) {
  .grid-items {
    grid-template-columns: repeat(1, auto);
    grid-gap: 15px;
  }
  .grid-item {
    grid-row-gap: 15px;
  }
}

/* ------------------------------------------------------------------ *
 * C. Chrome guard
 *
 * bootstrap.min.css is unlayered, and unlayered author CSS outranks every
 * @layer in app-c.css no matter the specificity. Three ways that bites:
 *
 *   1. Reboot's `nav{display:block}` beats .lg:flex, so the menu stacks
 *      vertically at every width. This is the one that is not cosmetic.
 *   2. Reboot repaints the chrome's links and resets list/paragraph margins,
 *      button casing and heading sizes.
 *   3. Its utility namespace collides with Tailwind's, under !important:
 *        .text-primary   #007bff  vs  #daff1c
 *        .text-secondary #6c757d  vs  #b88632
 *        .bg-primary     #007bff  vs  #daff1c
 *        .overflow-auto  (clips the nav's own dropdowns)
 *        .px-5 3rem / .py-3 1rem / .py-4 1.5rem / .mb-5 3rem / .pt-3 1rem /
 *        .pl-5 3rem  - all against Tailwind's 0.25rem steps
 *
 * Everything below pins the chrome back to what app-c.css intends. It is
 * scoped to the chrome's ids, so legacy bodies keep real Bootstrap.
 * ------------------------------------------------------------------ */

/* The header is fixed here exactly as it is on the homepage, and slides up on
   scroll until the menu row reaches the top - the Tailwind `fixed` on the
   element is left alone. What legacy pages do not have is the homepage's
   full-bleed hero: they bring their own backgrounds, some light, some dark. So
   the bar stays opaque at every scroll position rather than fading in from
   transparent, and #main-content reserves the header's resting height instead
   of running under it (see the isLegacyPage branch in files/js/app-a.js). */
body.legacy-page #main-header {
  background-color: #000 !important;
}
body.legacy-page #main-header > section {
  background-color: #000;
}

/* colour utilities */
#main-header .text-primary {
  color: var(--color-primary) !important;
}
#main-header .text-secondary,
#site-footer .text-secondary {
  color: var(--color-secondary) !important;
}
#site-footer .bg-primary {
  background-color: var(--color-primary) !important;
}

/* spacing utilities - Bootstrap's 0-5 scale against Tailwind's 0.25rem steps */
#main-header .px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
#main-header .py-3 {
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}
#main-header .pt-3 {
  padding-top: .75rem !important;
}
/* Where the chrome writes a bare utility plus an lg: variant that replaces it,
   Bootstrap's !important beats BOTH halves - it is unlayered, so no Tailwind
   variant outranks it at any width. Each such pair therefore has to be restated
   on both sides of 64rem: the bare utility's value below, the variant's above.
     .pl-5 -> lg:pl-0   the dropdown lists
     .pt-2 -> lg:pt-0   #main-nav      (and .mt-2 -> lg:mt-0)
     .py-2 -> lg:py-5   #logo_and_menu
   Left unguarded, the desktop menu carried Bootstrap's 3rem indent on every
   dropdown - shifting the items off-centre and wrapping the longest one - and
   16px of stray space above the menu row while the row itself lost 12px of its
   own padding. The mt-2/py-2 guards are scoped to their elements, not to the
   class: .mt-2 and .py-2 are also on the country and language dropdowns, where
   the bare Bootstrap and Tailwind values already agree. */
@media (width < 64rem) {
  #main-header .pl-5 {
    padding-left: 1.25rem !important;
  }
}
@media (width >= 64rem) {
  #main-header .pl-5 {
    padding-left: 0 !important;
  }
  #main-header #main-nav {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #main-header #logo_and_menu {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}
/* The footer's gutter is px-5 widening to xl:px-15, and both live on the same
   element. An unlayered rule here beats the xl variant as surely as it beats
   Bootstrap, so the guard has to state both halves rather than neutralise the
   element and let Tailwind sort it out. */
@media (width < 80rem) {
  #site-footer .px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}
@media (width >= 80rem) {
  #site-footer .px-5 {
    padding-left: 3.75rem !important;
    padding-right: 3.75rem !important;
  }
}
#site-footer .py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
#site-footer .mb-5 {
  margin-bottom: 1.25rem !important;
}
/* Only the header's - the footer's carries px-5/xl:px-15, handled above. */
#main-header .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Tailwind's .container is width:100% capped at each breakpoint's own width;
   Bootstrap's is a 1140px cap with a 15px gutter. Restate Tailwind's so the
   footer logo sits exactly where it does on the homepage. */
#site-footer-logo .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
@media (width >= 25rem) { #site-footer-logo .container { max-width: 25rem; } }
@media (width >= 40rem) { #site-footer-logo .container { max-width: 40rem; } }
@media (width >= 48rem) { #site-footer-logo .container { max-width: 48rem; } }
@media (width >= 64rem) { #site-footer-logo .container { max-width: 64rem; } }
@media (width >= 80rem) { #site-footer-logo .container { max-width: 80rem; } }
@media (width >= 96rem) { #site-footer-logo .container { max-width: 96rem; } }

/* reboot: links, list and paragraph margins, button casing, footer headings */
#main-header a,
#site-footer a,
#site-footer-logo a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
#main-header a:hover,
#site-footer a:hover,
#site-footer-logo a:hover {
  text-decoration: none;
}
#main-header nav > a:hover,
#main-header nav > div > a:hover,
#site-footer ul a:hover {
  color: var(--color-primary);
}
#main-header #logo a {
  color: var(--color-primary);
}
#main-header #announcement-bar a {
  color: var(--color-secondary);
}
#main-header #announcement-bar a:hover {
  color: var(--color-primary);
}
#main-header nav ul a {
  color: #fff;
}
#main-header nav ul a:hover {
  background-color: var(--color-primary);
  color: #000;
}
#main-header p,
#site-footer p,
#main-header ul,
#site-footer ul {
  margin: 0;
}

/* Bootstrap's reboot normalises the HTML5 sectioning elements with
   `nav{display:block}`. Unlayered, that beats both .hidden and .lg:flex on
   #main-nav, so the menu stacks vertically at every width; and .overflow-auto
   is one of its !important utilities, so lg:overflow-visible loses too and the
   nav grows a scrollbar and clips its own dropdowns. #main-nav is the only
   chrome element this hits - the rest are block either way - so restore its
   toggle by hand: below lg, hidden when .hidden is set and block otherwise
   (that is the mobile menu); at lg and up, always a flex row. */
#main-nav {
  display: block;
}
#main-nav.hidden {
  display: none;
}
@media (width >= 64rem) {
  #main-nav,
  #main-nav.hidden {
    display: flex;
    flex-direction: row;
    height: auto;
    overflow: visible !important;
  }
}
#main-header button {
  text-transform: uppercase;
}
#site-footer h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}
@media (width >= 80rem) {
  #site-footer h4 {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------------ *
 * D. Content guard
 *
 * The other direction: app-c.css's preflight zeroes list padding, drops
 * bullets, blocks images and strips form control chrome. Bootstrap's reboot
 * covers most of it, but not those. :where() holds these at zero specificity
 * so any real Bootstrap class (.list-unstyled, .d-block, .form-control) or
 * per-page rule still wins - they only outrank preflight, which is layered.
 * ------------------------------------------------------------------ */
:where(#legacy-body) :where(ul, ol) {
  list-style: revert;
  padding-left: revert;
}
:where(#legacy-body) :where(img) {
  display: inline-block;
}
:where(#legacy-body) :where(input, select, textarea, button) {
  background-color: revert;
  border: revert;
  border-radius: revert;
  color: revert;
}

/* ------------------------------------------------------------------ *
 * E. Gallery Instagram grid
 *
 * The gallery page's {{INSTAGRAM_FEED}} token renders this market's own posts
 * (includes/instagram-feed.php). A market with no feed of its own gets the
 * shared third-party embed instead, which brings its own styling and never
 * matches these selectors.
 *
 * Everything is scoped under .ig-feed so none of it can reach the rest of a
 * content page, and the img rule deliberately carries real specificity: the
 * content guard above sets legacy images to inline-block at zero specificity,
 * which would leave a descender-sized gap under every tile.
 * ------------------------------------------------------------------ */
.ig-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.ig-feed .ig-feed__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f0f0f0;
  text-decoration: none;
}
.ig-feed .ig-feed__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.ig-feed .ig-feed__item:hover img,
.ig-feed .ig-feed__item:focus-visible img {
  transform: scale(1.04);
}
.ig-feed .ig-feed__badge {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ig-feed .ig-feed__item img {
    transition: none;
  }
  .ig-feed .ig-feed__item:hover img,
  .ig-feed .ig-feed__item:focus-visible img {
    transform: none;
  }
}