/* Just Add Water rebrand - Kobault 2026-09-21
   Pantone 295C -> #002855 (navy) | Pantone 466C -> #C6AA76 (tan)
   Loaded after style.css as an override layer; revert = remove enqueue. */

:root {
  /* Exact values sampled from the supplied logo artwork (JAW_Logo_CMYK.svg) */
  --jaw-navy: #193059;
  --jaw-tan:  #bb9f7c;
}

/* 2026 logo (206x105 vector, ~2:1) - size it for the header row */
.logo                { padding: 14px 0 10px; }
.logo-img            { height: 92px; width: auto; }
@media (max-width: 767px) {
  .logo-img          { height: 72px; }
}

/* Top utility bar, main nav, dropdowns, mobile nav */
.callout                    { background: var(--jaw-navy); }
.nav                        { background-color: var(--jaw-navy); }
.nav .sub-menu              { background-color: var(--jaw-navy); }
.nav .navContainer          { background: var(--jaw-navy); }
.nav a:hover,
.nav .current-menu-item > a { color: var(--jaw-tan); }

/* Mobile menu toggle */
.menu-toggle .menuIcon span,
.menu-toggle .menuIcon span:before,
.menu-toggle .menuIcon span:after,
.menu-toggle.open .menuIcon span:before,
.menu-toggle.open .menuIcon span:after { background: var(--jaw-navy); }

/* Headings & links */
h1, h2, h3,
.panel h2, .panel h3        { color: var(--jaw-navy); }
a                           { color: var(--jaw-navy); }
a:hover, a:focus            { color: var(--jaw-tan); }

/* Buttons */
a.button, .buttonWrap a     { color: var(--jaw-navy); border-color: var(--jaw-navy); }
a.button:hover,
.buttonWrap a:hover         { background: var(--jaw-navy); color: #fff; border-color: var(--jaw-navy); }

/* Quick-link banner strip */
.banner .bannerLink         { color: var(--jaw-navy); }
.banner .bannerLink:hover   { background: var(--jaw-navy); color: #fff; }

/* Footer */
.footer                     { background: var(--jaw-navy); }
.footer a:hover             { color: var(--jaw-tan); }

/* Location cards / opening times */
.locationList .location:before,
.locationList .location.active:before,
.locationList .openingTimes,
.locationList .location .openTimesToggle { background: var(--jaw-navy); }

/* Nav lead-in gradient (was white->black) */
@media (min-width: 768px) {
  .nav:before {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, #193059 100%);
  }
}

/* Active/hover location card (was grey #aeaeaf) */
.locationList .location.active,
.locationList .location:hover { background: var(--jaw-navy); color: #fff; }
.locationList .location.active:before,
.locationList .location:hover:before { background: var(--jaw-tan); }
.locationList .location.active a,
.locationList .location:hover a { color: #fff; }

/* Brand logo carousel: uniform box, no stretching, slightly smaller */
.brandCarousel .carouselItem       { line-height: 80px; padding: 10px 18px; }
.brandCarousel .carouselItem img   {
  max-height: 56px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Google review cards: breathing room inside the card */
.rpi-slide.grw-review {
  padding: 20px !important;
  box-sizing: border-box;
}

/* Text selection */
::selection                 { background: var(--jaw-navy); color: #fff; }
::-moz-selection            { background: var(--jaw-navy); color: #fff; }

/* Tan accent: thin keyline under the quick-link strip + panel image titles */
.banner                     { border-bottom: 3px solid var(--jaw-tan); }
.panel .panelTitle,
.imgPanel .title            { background: var(--jaw-navy); }