/* ================================================================
   BedRock Tools — site-specific overrides
   Loaded AFTER the shared template stylesheet (theme.custom_css).
   This file is never touched by generate.py, so bespoke styling
   and future animations live here without forking the template.
   ================================================================ */

/* ── Kill the blue: neutral stone palettes ────────────────────── */
/* The shared template's palettes are slate-tinted. BedRock is
   strictly monochrome — warm-neutral greys in light mode, and
   neutral black/grey for both OS-preference and manual dark mode.
   Order matters: light base first so the dark overrides win. */
:root {
  --clr-bg:         #ffffff;
  --clr-surface:    #f2f2f3;
  --clr-border:     #dedee1;
  --clr-text:       #17171a;
  --clr-text-muted: #55555e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --clr-bg:         #0f0f11;
    --clr-surface:    #17171a;
    --clr-border:     #2a2a2e;
    --clr-text:       #f4f4f5;
    --clr-text-muted: #9d9da6;
  }
}

[data-theme="dark"] {
  --clr-bg:         #0f0f11;
  --clr-surface:    #17171a;
  --clr-border:     #2a2a2e;
  --clr-text:       #f4f4f5;
  --clr-text-muted: #9d9da6;
}

/* ── Buttons: black pills, white text (Nothing-style) ─────────── */
.btn-primary,
.nav-cta {
  color: #fff !important;
}

/* keep dark pills visible on the dark header / hero */
.site-header .nav-cta,
.hero .btn-primary {
  border-color: rgba(255, 255, 255, .35);
}

/* the shared stylesheet swaps the CTA text to --clr-primary on
   hover — near-black here, on an accent-dark (#000) background.
   Keep the text white on the black pill. */
.nav-cta:hover,
.nav-cta:focus-visible {
  color: #fff !important;
}

/* ── About badges: quiet monochrome chips ─────────────────────── */
/* The shared .badge uses accent-light + accent-dark, which on this
   near-black theme collapses to black-on-black in OS dark mode.
   Surface/border/text always track light & dark correctly and fit
   the monochrome look. */
.badge {
  background: var(--clr-surface);
  color: var(--clr-text);
  border-color: var(--clr-border);
}

/* ── Unify accent-light across all four theme states ──────────── */
/* The generated inline theme block pins --clr-accent-light to
   #ececee, but the shared stylesheet's OS-dark override
   (:root:not([data-theme]), higher specificity) swaps it to a
   near-invisible dark tint, while the manual-dark override loses
   to the inline block and stays #ececee. Result: chips (prices,
   icon chips) were dark-on-dark in OS dark mode and light-grey
   with white text in manual dark mode. Pin one subtle white tint
   for BOTH dark paths; html[data-theme] out-ranks the inline :root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --clr-accent-light: rgba(255, 255, 255, .08);
  }
}

html[data-theme="dark"] {
  --clr-accent-light: rgba(255, 255, 255, .08);
}

/* service icons sit on the accent-light chip and were accent-
   coloured (near-black) — follow the text colour in both modes */
.service-icon {
  color: var(--clr-text);
}

/* card-hover recolours the quote link with accent-dark (#000) at
   higher specificity than the earlier override — invisible in dark
   mode. Keep it on the text colour. */
.service-card:hover .service-link {
  color: var(--clr-text);
}

/* form focus ring was accent-coloured — near-black border on the
   dark background gave no visible focus state. Neutral grey works
   in both modes. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--clr-text-muted);
  box-shadow: 0 0 0 3px rgba(128, 128, 128, .18);
}

/* keyboard focus outline on gallery photos — same accent issue */
.gallery-item:focus-visible {
  outline-color: var(--clr-text);
}

/* ── Monochrome first, orange only as the odd splash ──────────── */
/* Section labels + hero stats go quiet grey/white; the orange pop
   stays only on the logo accent and the hero title accent. */
.section-label {
  color: var(--clr-text-muted);
}

.hero-stats .stat strong {
  color: #fff;
}

/* the near-black accent vanishes on dark surfaces — card links
   follow the text colour instead */
.service-link,
.service-link:hover {
  color: var(--clr-text);
}

/* same near-black accent problem on the "About Google Workspace"
   outbound link — match the "Get a quote" text colour */
.service-external-link,
.service-external-link:hover {
  color: var(--clr-text);
}

/* ...and the same in the contact panel (always dark): the labels,
   icon chips and emergency box are accent-tinted in the shared
   stylesheet, which here means black-on-black. Go white/grey. */
.contact-item strong {
  color: rgba(255, 255, 255, .92);
}

.contact-icon {
  background: rgba(255, 255, 255, .08);
}

.contact-icon svg {
  color: rgba(255, 255, 255, .85);
}

.contact-item a:hover {
  color: #fff;
}

.contact-emergency {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}

.contact-emergency strong {
  color: rgba(255, 255, 255, .92);
}

/* hero badge: quiet monochrome chip instead of an orange one */
.hero-badge {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .22);
}

/* hairline grey rule inside the hero's bottom edge (the shared
   ::after — previously the orange bar — is repurposed below as the
   animated diagonal layer) */
.hero {
  isolation: isolate;              /* keep -z pseudo layers inside   */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22);
}

/* ── "Rocky" technical background: faint grid lines ───────────── */
/* Fine grey engineering-paper grid across the hero, fading out —
   replaces the default colour blob. Gentle opacity "breathing"
   makes it feel alive; opacity animates on the compositor. */
.hero::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 65% 10%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 95% 90% at 65% 10%, #000 0%, transparent 78%);
  animation: bedrock-grid-breathe 8s ease-in-out infinite alternate;
}

/* Drifting diagonal lines over the hero — transform-only animation,
   so it runs entirely on the GPU compositor thread (no layout, no
   paint, no main-thread latency). The layer is oversized and slides
   exactly one pattern period, so the loop is seamless. */
.hero::after {
  inset: -280px;
  height: auto;
  z-index: -1;
  pointer-events: none;
  background:
    /* fine diagonal lines, every 96px */
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .085) 0 1px, transparent 1px 96px),
    /* wide soft "sheen" band, every 384px — kept whisper-faint so it
       reads as movement, not stripes */
    repeating-linear-gradient(45deg,
      transparent 0 288px, rgba(255, 255, 255, .018) 320px 352px, transparent 384px);
  animation: bedrock-drift 32s linear infinite;
  will-change: transform;
}

@keyframes bedrock-drift {
  /* 384px along the 45° gradient axis = (384/√2, -384/√2) */
  to { transform: translate3d(271.53px, -271.53px, 0); }
}

@keyframes bedrock-grid-breathe {
  from { opacity: .55; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after { animation: none; }
}

/* whisper-faint grid on the page body — neutral grey so it works
   in both light and dark mode, with faint diagonals in the corners */
main {
  background-image:
    linear-gradient(rgba(128, 128, 128, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, .08) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* footer matches the hero's quiet grid */
.site-footer {
  position: relative;
}