/* ==========================================================================
   Countryside Pet Care — corrections layer
   --------------------------------------------------------------------------
   Loads AFTER cpc-styles.css. That file is compiled from scss/cpc-styles.scss,
   so hand-edits to it are lost on the next build; fixes live here instead.

   The matching change has also been made in scss/cpc-styles.scss, with the
   same values, so a rebuild produces the same result rather than fighting it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero readability
   --------------------------------------------------------------------------
   The hero overlay sat at 20% opacity, which is not enough to carry white
   text across the bright sky in the photograph — the h1 washed out almost
   completely on the home and services pages. The text-shadows underneath were
   doing all the work and losing.

   45% keeps the photo clearly visible while giving the headline a consistent
   background to sit on, wherever the image happens to be light.
   -------------------------------------------------------------------------- */

.hero-section::before {
  background: rgba(40, 62, 89, 0.45);
}

/* The headline is the one piece of text that must survive any background, so
   it keeps a tighter, darker shadow in addition to the stronger overlay. */
.hero-section h1 {
  text-shadow: 0 0.125rem 0.5rem rgba(25, 39, 56, 0.85),
               0 0 1.25rem rgba(25, 39, 56, 0.55);
}

.hero-section p {
  text-shadow: 0 0.125rem 0.375rem rgba(25, 39, 56, 0.9);
}

/* --------------------------------------------------------------------------
   Scrollbar
   --------------------------------------------------------------------------
   Same treatment as the CSKC site. What was here before:

       ::-webkit-scrollbar       { width: 1rem; height: 2px; }
       ::-webkit-scrollbar-track { background: <cpc-dark-blue>; }

   A solid dark-blue track a full 1rem wide, which read as a heavy painted
   stripe down the side of the page rather than as a scrollbar — and a
   horizontal bar only 2px tall, too thin to grab.

   Now: no visible track at all, and a slim rounded thumb. The thumb gets its
   inset from a transparent border plus background-clip, so it floats clear of
   the edge instead of filling the gutter.
   -------------------------------------------------------------------------- */

html {
  /* Reserve the gutter permanently. Without it the page reflows sideways the
     moment content grows past one screen and the scrollbar appears — most
     visible when moving between a short page and a long one. */
  scrollbar-gutter: stable;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--cpc-light-blue) transparent;
}

/* These override the nested `html ::-webkit-scrollbar` rules in cpc-styles.css,
   which are descendant selectors of html and so match the same elements. */
html ::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem; /* was 2px — a horizontal scrollbar nobody could grab */
}

html ::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

html ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: var(--cpc-light-blue);
  border-radius: 99rem;
  border: 0.1875rem solid transparent;
  background-clip: content-box;
}

html ::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background-color: var(--cpc-dark-blue);
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}