/* ============================================================
   Ricky's Gutters: site chrome: utility bar, header, mobile nav
   ============================================================ */

/* ---------- the shine ----------
   Restored from the original header.css `.one:after`. A white panel
   sweeps left→right while fading out, and snaps back instantly on
   mouse-out so it can replay. Applied to every primary action. */
.rg-shine { position: relative; overflow: hidden; }
.rg-shine::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 0; height: 100%;
  border-radius: inherit;
  background: rgba(255,255,255,.42);
  pointer-events: none;
  transition: none;
}
.rg-shine:hover::after,
.rg-shine:focus-visible::after {
  width: 120%;
  background: rgba(255,255,255,0);
  transition: width .45s ease-in-out, background .45s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .rg-shine::after { display: none; }
}

/* ---------- utility bar ---------- */

.rg-utility {
  /* The brand gradient the logo is built on. */
  background-image: linear-gradient(to right, #0043ea 0%, #00c8ff 100%);
  position: relative;
  z-index: 999;
}
.rg-utility__in {
  max-width: var(--rg-max);
  margin: 0 auto;
  padding: 0 var(--rg-gutter);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rg-utility__social { display: flex; align-items: center; gap: 15px; min-width: 190px; }
.rg-utility__social a { display: flex; transition: transform .2s ease-in-out; }
.rg-utility__social a:hover { transform: scale(1.18); }
.rg-utility__social img { width: 17px; height: auto; }

.rg-utility__hours {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,20,56,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-utility__hours i { font-style: normal; opacity: .72; padding: 0 7px; }

.rg-utility__action { display: flex; justify-content: flex-end; min-width: 190px; }
/* Sits at the cyan end of the gradient. No backing plate by choice. The
   shadow is what keeps it readable there. */
.rg-utility__action a {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,20,56,.55);
  transition: transform .2s ease-in-out, color .2s ease-in-out;
}
.rg-utility__action a:hover { transform: scale(1.05); color: #eaf7ff; }

@media (max-width: 990px) {
  .rg-utility__social,
  .rg-utility__action { display: none; }
  .rg-utility__in { justify-content: center; }
}
@media (max-width: 430px) {
  /* was .68rem (10.88px), too small to read. 12px still fits the full
     line at 375px, so no need to truncate or drop "SUN CLOSED". */
  .rg-utility__hours { font-size: .75rem; letter-spacing: 0; }
  .rg-utility__hours i { padding: 0 4px; }
}

/* ---------- header ---------- */

.rg-header {
  background: var(--rg-surface);
  border-bottom: 1px solid var(--rg-hairline);
  position: sticky;
  top: 0;
  z-index: 900;
  transition: transform .3s ease;
}
/* The logo pill hangs ~12px below the bar, so a percentage translate leaves a
   sliver of it showing when the header hides on scroll. Translating the full
   height plus the overhang clears it. */
.rg-header.is-hidden { transform: translateY(calc(-100% - 22px)); }

.rg-header__in {
  max-width: var(--rg-max);
  margin: 0 auto;
  padding: 14px var(--rg-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rg-header__logo img { height: 76px; display: block; width: auto; }

.rg-nav { display: flex; align-items: center; gap: 30px; }

/* underline grows from the left on hover, in the brand gradient */
.rg-nav__link {
  position: relative;
  font-family: var(--rg-font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--rg-navy);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
  transition: color .2s ease;
}
.rg-nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; border-radius: 2px;
  background-image: linear-gradient(to right, #0043ea 0%, #00c8ff 100%);
  transition: width .28s cubic-bezier(.4,0,.2,1);
}
.rg-nav__link:hover { color: var(--rg-blue); }
.rg-nav__link:hover::after,
.rg-nav__link:focus-visible::after,
.rg-nav__link[aria-current="page"]::after { width: 100%; }

.rg-header__call {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--rg-navy);
  color: #fff;
  font-family: var(--rg-font-head);
  font-size: 20px;
  font-weight: 800;
  padding: 14px 24px;
  border-radius: var(--rg-r-sm);
  min-height: var(--rg-tap);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rg-header__call img { width: 22px; height: auto; }
.rg-icon { display:inline-block; width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rg-header__call .rg-icon { width:21px; height:21px; }
.rg-header__phone-mobile .rg-icon { width:26px; height:26px; color:var(--rg-navy); }
.rg-header__call:hover {
  background: var(--rg-navy-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,20,56,.22);
}
.rg-header__call:active { transform: translateY(0); }

/* ---------- mobile header ----------
   Restores the original arrangement: phone circle left, logo floating in a
   rounded white pill in the centre, hamburger right. */

.rg-header__phone-mobile {
  display: none;
  width: 48px; height: 48px;
  flex: 0 0 48px;              /* never shrink, the icon skewed when it did */
  align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.rg-header__phone-mobile:active { transform: scale(.94); }
.rg-header__phone-mobile img {
  width: 36px; height: 36px;   /* sized to sit alongside the 26px burger */
  flex: 0 0 auto;              /* the img is a flex item here; without this it
                                  squashes horizontally and ovals the circle */
  object-fit: contain;
  display: block;
}

.rg-burger {
  display: none;
  width: var(--rg-tap); height: var(--rg-tap);
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.rg-burger span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--rg-text); position: relative; }
.rg-burger span::before,
.rg-burger span::after {
  content: ""; position: absolute; left: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--rg-text);
  transition: transform .25s ease, top .25s ease;
}
.rg-burger span::before { top: -8px; }
.rg-burger span::after  { top: 8px; }
.rg-burger[aria-expanded="true"] span { background: transparent; }
.rg-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.rg-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .rg-nav { gap: 20px; }
  .rg-nav__link { font-size: 14px; }
  .rg-header__call { font-size: 17px; padding: 12px 18px; }
}

@media (max-width: 990px) {
  .rg-nav { display: none; }
  .rg-burger,
  .rg-header__phone-mobile { display: inline-flex; }

  .rg-header__in { position: relative; height: 66px; padding: 0 var(--rg-gutter); }

  .rg-header__logo {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 244px; max-width: 58vw;
    background: #fff;
    border-radius: 0 0 2.25rem 2.25rem;
    box-shadow: 0 8px 16px -6px rgba(0,20,56,.28);
    padding: 6px 20px 24px;
    display: flex; justify-content: center;
    z-index: 2;
  }
  .rg-header__logo img { height: 56px; margin: 0 auto; }
}

@media (max-width: 420px) {
  .rg-header__in { height: 60px; }
  .rg-header__logo { width: 196px; padding: 5px 14px 21px; }
  .rg-header__logo img { height: 46px; }
  .rg-header__phone-mobile { width: 44px; height: 44px; flex: 0 0 44px; }
}

/* ---------- mobile drawer ----------
   Modelled on the original sidebar: a partial-width panel that slides in from
   the left and sits BELOW the header, so the page stays visible on the right.
   The header itself is untouched. Its burger animates into the X. The panel
   sits under the header's z-index so the header stays on top and clickable.
   js/rg-chrome.js sets --rg-drawer-top from the header's live position, since
   the utility bar scrolls away and the sticky header's offset changes. */

.rg-drawer {
  position: fixed; inset: 0; z-index: 850;
  opacity: 0; visibility: hidden;
  overflow: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.rg-drawer.is-open { opacity: 1; visibility: visible; }

.rg-drawer__panel {
  /* Full screen, matching the original sidebar (width:100%; height:100vh).
     The top padding is the original's padding-top:70px/90px plus the 2rem
     that sat on the first link, so it clears the header and leaves the margin
     above the first row. --rg-drawer-top is the header's live bottom edge,
     set by rg-chrome.js, because the utility bar scrolls away above it. */
  position: absolute;
  inset: 0;
  width: 100%;
  padding-top: calc(var(--rg-drawer-top, 104px) + 20px);
  background: var(--rg-surface);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.rg-drawer.is-open .rg-drawer__panel { transform: none; }

.rg-drawer__links { display: flex; flex-direction: column; }
.rg-drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px;
  padding: 12px var(--rg-gutter);
  border-bottom: 1px solid var(--rg-hairline);
  font-family: var(--rg-font-head);
  font-size: 17px; font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--rg-navy);
  text-decoration: none;
  transition: padding-left .2s ease, color .2s ease, background .2s ease;
}
.rg-drawer__link svg { flex: 0 0 auto; transition: transform .2s ease; }
.rg-drawer__link:hover,
.rg-drawer__link:focus-visible {
  padding-left: calc(var(--rg-gutter) + 10px);
  color: var(--rg-blue);
  background: var(--rg-surface-alt);
}
.rg-drawer__link:hover svg { transform: translateX(4px); }

.rg-drawer__link--quote {
  justify-content: center; gap: 12px;
  border-top: 2px solid var(--rg-navy);
  border-bottom: 2px solid var(--rg-navy);
  margin-top: 12px;
}
.rg-drawer__link--quote:hover { padding-left: var(--rg-gutter); }

.rg-drawer__phone {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--rg-tap);
  padding: 16px var(--rg-gutter);
  background: var(--rg-navy);
  color: #fff;
  font-family: var(--rg-font-head);
  font-size: 19px; font-weight: 800;
  text-decoration: none;
  transition: background .2s ease;
}
.rg-drawer__phone:hover { background: var(--rg-navy-deep); color: #fff; }
.rg-drawer__phone img { width: 20px; height: 20px; flex: 0 0 auto; }

.rg-drawer__social {
  margin-top: auto;
  display: flex; gap: 6px; justify-content: center;
  padding: 20px 12px;
  background: #ECEFF4;
}
.rg-drawer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px;
  transition: transform .2s ease;
}
.rg-drawer__social a:hover { transform: scale(1.15); }
.rg-drawer__social img { width: 24px; height: 24px; flex: 0 0 auto; }

@media (max-width: 320px) {
  .rg-drawer__link { font-size: 15px; letter-spacing: .2px; }
  .rg-drawer__phone { font-size: 16px; }
  .rg-drawer__social a { min-width: 44px; min-height: 44px; }
  .rg-drawer__social img { width: 22px; height: 22px; }
}

/* ---------- mobile sticky call bar ---------- */

.rg-sticky-call { display: none; }
@media (max-width: 750px) {
  .rg-sticky-call {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
    background: var(--rg-action);
    color: var(--rg-action-ink);
    align-items: center; justify-content: center; gap: 10px;
    min-height: var(--rg-tap);
    font-family: var(--rg-font-head); font-size: 18px; font-weight: 800;
    text-decoration: none;
    box-shadow: 0 -4px 18px rgba(0,20,56,.25);
  }
  body { padding-bottom: var(--rg-tap); }
}

/* ---------- shared helpers ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Mobile audit fixes
   ============================================================ */
@media (max-width: 750px) {
  /* drawer social icons were 26px tap targets */
  .rg-drawer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
}


/* ============================================================
   Very narrow screens (down to 250px)
   ============================================================ */

/* Drop "SUN CLOSED" rather than letting the hours truncate mid-word */
@media (max-width: 430px) {
  .rg-utility__hours .opt { display: none; }
}

/* Below 320px the overhanging logo pill stops making sense. It eats the
   width the burger and phone need. The logo goes inline and the pill
   (rounded lip, shadow, overhang) is removed entirely. */
@media (max-width: 320px) {
  .rg-header__in {
    height: auto;
    padding: 8px var(--rg-gutter);
    gap: 6px;
  }
  .rg-header__logo {
    position: static;
    transform: none;
    width: auto; max-width: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .rg-header__logo img { height: 32px; }
  /* keep the logo a legitimate tap target once the pill is gone */
  .rg-header__logo { min-height: 44px; align-items: center; }

  .rg-burger { width: 44px; height: 44px; flex: 0 0 44px; }
  .rg-burger span,
  .rg-burger span::before,
  .rg-burger span::after { width: 21px; }

  .rg-header__phone-mobile { width: 44px; height: 44px; flex: 0 0 44px; }
  .rg-header__phone-mobile img { width: 32px; height: 32px; }

  /* nothing overhangs any more, so the hide-on-scroll translate can be exact */
  .rg-header.is-hidden { transform: translateY(-100%); }

  .rg-utility__hours { font-size: .68rem; }
  .rg-sticky-call { font-size: 16px; }
}

/* Rotating utility message. */
.rg-utility__hours { position: relative; min-height: 18px; }
.rg-utility__hours > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.rg-utility__hours > span.is-active { opacity: 1; transform: none; }
.rg-utility__action > span {
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0,20,56,.55);
}
.rg-drawer__trust { display:flex; align-items:center; gap:11px; padding:16px 18px; color:var(--rg-navy); font-family:var(--rg-font-head); font-weight:800; }
.rg-drawer__trust svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--rg-blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }


@media (prefers-reduced-motion:reduce) { .rg-utility__hours > span { transition:none; } }