/* ==========================================================================
   CORINTH GAS & WATER — HOMEPAGE
   Loaded after components.css. Was a 520-line inline <style> block inside
   index.html — moved out here and every hardcoded colour retokenised.

   That inline block was the actual reason the site didn't feel uniform: it
   pre-dated tokens.css and was still built entirely on the old teal
   (rgba(13,128,160,*), #0D80A0, #0D6178, #43ACC9...). Interior pages picked
   up the new blue through components.css; the homepage's own cards, tiles
   and panels never did, because this block's higher-specificity selectors
   were silently winning over the shared recipe. Retokenising here is what
   makes the homepage and interior pages finally match.

   Also removed: a second, duplicate `.emergency-callout` definition that
   used to live in this block (flat pink, no relation to the chrome panel in
   components.css). It wasn't used anywhere on this page — dead CSS left
   over from an earlier pass — so components.css's version is now the only
   one and can't be silently overridden here again.
   ========================================================================== */

/* Customize modal size */
.modal-dialog {
  max-width: 75%;
  margin: 1.75rem auto;
}
/* Adjust video size */
.modal-body video {
  width: 100%;
  height: auto;
}
.blue-border {
  border: 4px solid var(--brand-primary);
  padding: 20px;
}
.grey-border {
  border: 2px solid #b4b4b4;
  padding: 20px;
}

/* --- Below-hero wave crest --- */
.below-hero-wave {
  position: relative;
  line-height: 0;
  margin-top: -70px;
  margin-bottom: 10px;
  pointer-events: none;
  z-index: 3;
}
.below-hero-wave svg {
  display: block;
  width: 100%;
  height: 70px;
}

/* --- Glass panel wrapping the homepage content --- */
.home-glass-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 42%),
    radial-gradient(circle at 95% 105%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 45%),
    linear-gradient(180deg, var(--brand-wash) 0%, #ffffff 55%);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
  border-radius: 18px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  padding: 28px;
}
.home-glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-primary) 9%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .6;
  pointer-events: none;
}
.home-glass-panel > .row { position: relative; }
@media (max-width: 575px) {
  .home-glass-panel { padding: 18px; }
}

/* --- Unified quick-actions grid (Pay Bill / Call 811 / Gas Leak / Emergency / 811 / TGA) --- */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}
@media (max-width: 991px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .quick-grid { grid-template-columns: 1fr; }
}
.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--edge);
  border-radius: 14px;
  box-shadow: var(--shadow-s);
  padding: 16px;
  height: 100%;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.quick-card:hover, .quick-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-l);
}
.quick-card .tile-frame,
.quick-card .logo-card { margin-bottom: 10px; }
.quick-card .logo-card { max-width: 100%; box-shadow: none; padding: 12px 14px; }
.quick-card-link { display: block; width: 100%; text-decoration: none; }
.quick-card-link:hover, .quick-card-link:focus-visible { text-decoration: none; }
.quick-card .tile-cap { margin-top: 4px; }

/* --- Notice / info button grid --------------------------------------------
   Layout only. Colour, bevel, hover and pressed state all come from the
   shared .btn-homepage metal recipe in components.css (these buttons already
   carry that class) — this file used to redeclare its own flat teal fill on
   top of it, which is why the buttons never picked up the site's palette or
   the specular-sweep hover. Removing that override was the actual fix. --- */
.notice-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0;
}
@media (max-width: 991px) {
  .notice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .notice-grid { grid-template-columns: 1fr; }
}
.notice-grid button.btn-notice {
  position: relative;
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  line-height: 1.25;
  padding: 8px 30px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: normal;
}
/*
.notice-grid .btn-notice__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: .92;
}
*/
.notice-grid button.btn-notice::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .55;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.notice-grid button.btn-notice[aria-expanded="true"]::after {
  transform: translateY(-30%) rotate(225deg);
}
/* Amber left rail marks the expanded state — layered on top of the shared
   recipe's own pressed-in bevel, so it reads as "open" through colour AND
   shape, never colour alone. */
.notice-grid button.btn-notice[aria-expanded="true"] {
  border-left: 4px solid var(--accent);
  padding-left: 27px;
}

/* --- Wide card (Water Quality Report / Manage account) --- */
.wide-card {
  display: block;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
  padding: 16px;
  margin-bottom: 20px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.wide-card:hover, a.wide-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
  text-decoration: none;
}
a.wide-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.tile-frame.tile-frame-wide {
  aspect-ratio: 3 / 1;
  width: 100%;
  height: auto;
  background: #ffffff;
  overflow: hidden;
  display: block;
}
.tile-frame-wide img { width: 100%; height: 100%; object-fit: cover; }
.tile-frame-wide-video { position: relative; }
.tile-frame-wide-video video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; pointer-events: none; }

/* --- Video tiles (Pay Bill / Emergency / TGA / Water Quality Report) --- */
.tile-frame.tile-frame-video {
  position: relative;
  background: var(--brand-deep);
}
.tile-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-frame-wide-video .tile-video-fallback { object-position: center 70%; }
.tile-frame-video video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
a.tile-cap-phone {
  display: block;
  color: var(--signal);
  text-decoration: none;
}
a.tile-cap-phone:hover,
a.tile-cap-phone:focus-visible {
  color: #d13a2c;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(179, 38, 30, 0.35);
}
a.tile-cap:hover,
a.tile-cap:focus-visible {
  text-decoration: none;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

/* --- 811 / TGA logo tiles --- */
.tile-frame-white {
  background: linear-gradient(135deg, var(--brand-wash) 0%, #ffffff 100%);
  padding: 14px;
}
.tile-frame-white img { object-fit: contain; }

.wide-card-spacing { margin-bottom: 20px; }
.collapse.show > .card.card-body { margin-bottom: 20px; }

/* --- Info panel card wrapping the notice-button grid --- */
.info-panel-card {
  background: #ffffff;
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
  padding: 22px;
  margin-bottom: 20px;
}
.info-panel-card__title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 500;
  color: var(--brand-primary);
  margin: 0 0 14px;
}

/* --- Hover lift for the image links (Call 811 / Gas Leak) --- */
.img-link-tile {
  display: block;
  text-align: center;
  border-radius: 12px;
  padding: 10px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.img-link-tile img { transition: transform var(--dur) var(--ease-out); }
.img-link-tile:hover,
.img-link-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  background-color: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  text-decoration: none;
}
.img-link-tile:hover img,
.img-link-tile:focus-visible img { transform: scale(1.06); }
.img-link-tile:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* --- Uniform media tiles (Pay Bill / Call 811 / Gas Leak) --- */
.tile-frame {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-mid);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.tile-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-frame.tile-contain img { object-fit: contain; }
.tile-frame.tile-contain img.tile-video-fallback { object-fit: cover; }
.tile-frame.tile-frame-white { background: #ffffff; }

/* --- Logo cards (811 / TGA) --- */
.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  width: 100%;
  max-width: 281px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.logo-card img { max-width: 100%; height: auto; display: block; }

.tile-cap {
  text-align: center;
  margin-top: 10px;
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
}