/* =========================================================================
   RanchoWebDesigns — site theme engine + global footer widget
   -------------------------------------------------------------------------
   Loaded after /_astro/about.*.css and /site-nav.css on every brand page.

   The compiled Tailwind palette baked three brand colors as literal values:
     navy        rgb(15 42 68)      #0f2a44   (dark surfaces + primary text)
     sand        rgb(232 220 196)   #e8dcc4   (light surfaces + light text)
     terracotta  rgb(194 106 74)    #c26a4a   (accent)

   Here we re-point every brand utility class at three CSS variables, so a
   whole theme is a matter of swapping the three triplets. The DEFAULT values
   use Forest, including before JavaScript runs. Coastal retains the original
   colors as an explicit palette.

   Alternate palettes keep navy dark / sand light (structure preserved), which
   guarantees existing contrast (text-white on navy, text-navy on sand) stays
   legible. "Midnight" is a true dark theme and additionally overrides the
   content utilities explicitly, because navy can't be both a dark surface and
   light text from one token.
   ========================================================================= */

:root {
  --rwd-navy: 22 46 33;
  --rwd-sand: 230 236 224;
  --rwd-terracotta: 183 134 54;
  --rwd-secondary: 183 134 54;
  --rwd-nav-compact: 246 249 243;
}

/* ---- Solid / opacity-driven utilities ---------------------------------- */
.bg-navy { background-color: rgb(var(--rwd-navy) / var(--tw-bg-opacity, 1)); }
.bg-sand { background-color: rgb(var(--rwd-sand) / var(--tw-bg-opacity, 1)); }
.bg-terracotta { background-color: rgb(var(--rwd-terracotta) / var(--tw-bg-opacity, 1)); }
.text-navy { color: rgb(var(--rwd-navy) / var(--tw-text-opacity, 1)); }
.text-sand { color: rgb(var(--rwd-sand) / var(--tw-text-opacity, 1)); }
.text-terracotta { color: rgb(var(--rwd-terracotta) / var(--tw-text-opacity, 1)); }
.border-navy { border-color: rgb(var(--rwd-navy) / var(--tw-border-opacity, 1)); }
.hover\:bg-navy:hover { background-color: rgb(var(--rwd-navy) / var(--tw-bg-opacity, 1)); }
.hover\:bg-terracotta:hover { background-color: rgb(var(--rwd-terracotta) / var(--tw-bg-opacity, 1)); }
.hover\:text-navy:hover { color: rgb(var(--rwd-navy) / var(--tw-text-opacity, 1)); }
.hover\:text-sand:hover { color: rgb(var(--rwd-sand) / var(--tw-text-opacity, 1)); }
.hover\:text-terracotta:hover { color: rgb(var(--rwd-terracotta) / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:text-terracotta { color: rgb(var(--rwd-terracotta) / var(--tw-text-opacity, 1)); }
.focus\:ring-terracotta:focus { --tw-ring-color: rgb(var(--rwd-terracotta) / var(--tw-ring-opacity, 1)); }

/* ---- Alpha tints (were baked 8-digit hex) ------------------------------- */
.bg-navy\/5 { background-color: rgb(var(--rwd-navy) / .05); }
.bg-sand\/45 { background-color: rgb(var(--rwd-sand) / .45); }
.bg-sand\/55 { background-color: rgb(var(--rwd-sand) / .55); }
.bg-terracotta\/5 { background-color: rgb(var(--rwd-terracotta) / .05); }
.border-navy\/10 { border-color: rgb(var(--rwd-navy) / .1); }
.border-navy\/20 { border-color: rgb(var(--rwd-navy) / .2); }
.border-sand\/15 { border-color: rgb(var(--rwd-sand) / .15); }
.border-terracotta\/30 { border-color: rgb(var(--rwd-terracotta) / .3); }
.divide-navy\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--rwd-navy) / .1); }
.text-navy\/45 { color: rgb(var(--rwd-navy) / .45); }
.text-navy\/55 { color: rgb(var(--rwd-navy) / .55); }
.text-navy\/60 { color: rgb(var(--rwd-navy) / .6); }
.text-navy\/70 { color: rgb(var(--rwd-navy) / .7); }
.text-navy\/75 { color: rgb(var(--rwd-navy) / .75); }
.text-navy\/85 { color: rgb(var(--rwd-navy) / .85); }
.text-sand\/55 { color: rgb(var(--rwd-sand) / .55); }
.text-sand\/60 { color: rgb(var(--rwd-sand) / .6); }
.text-sand\/70 { color: rgb(var(--rwd-sand) / .7); }
.text-sand\/75 { color: rgb(var(--rwd-sand) / .75); }
.text-sand\/80 { color: rgb(var(--rwd-sand) / .8); }
.text-sand\/85 { color: rgb(var(--rwd-sand) / .85); }

/* ---- Hero gradient overlay --------------------------------------------- */
.from-sand\/85 {
  --tw-gradient-from: rgb(var(--rwd-sand) / .85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--rwd-sand) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-sand\/65 {
  --tw-gradient-to: rgb(var(--rwd-sand) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--rwd-sand) / .65) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-sand\/35 { --tw-gradient-to: rgb(var(--rwd-sand) / .35) var(--tw-gradient-to-position); }

/* =========================================================================
   Palettes
   ========================================================================= */

/* Coastal — original navy, sand and terracotta */
html[data-theme="coastal"] {
  --rwd-navy: 15 42 68;
  --rwd-sand: 232 220 196;
  --rwd-terracotta: 194 106 74;
  --rwd-secondary: 194 106 74;
  --rwd-nav-compact: 255 250 240;
}

/* Dusk — cool violet, structure preserved (navy dark / sand light) */
html[data-theme="dusk"] {
  --rwd-navy: 38 30 66;
  --rwd-sand: 236 230 242;
  --rwd-terracotta: 173 92 158;
  --rwd-secondary: 232 220 196;
  --rwd-nav-compact: 248 244 252;
}

/* Forest — deep green, structure preserved */
html[data-theme="forest"] {
  --rwd-navy: 22 46 33;
  --rwd-sand: 230 236 224;
  --rwd-terracotta: 183 134 54;
  --rwd-secondary: 183 134 54;
  --rwd-nav-compact: 246 249 243;
}

/* Midnight — true dark. Tokens flip for the header; content utilities are
   overridden explicitly below so dark surfaces keep light text. */
html[data-theme="midnight"] {
  --rwd-navy: 233 227 214;   /* now the light "ink" used as text/nav links */
  --rwd-sand: 20 24 31;      /* now the dark surface used as nav/page base  */
  --rwd-terracotta: 224 138 102;
  --rwd-secondary: 224 138 102;
  --rwd-nav-compact: 16 20 27;
}
html[data-theme="midnight"] .bg-sand { background-color: rgb(18 22 29 / var(--tw-bg-opacity, 1)); }
html[data-theme="midnight"] .bg-sand\/45 { background-color: rgb(42 48 60 / .45); }
html[data-theme="midnight"] .bg-sand\/55 { background-color: rgb(42 48 60 / .55); }
html[data-theme="midnight"] .bg-white { background-color: rgb(28 34 46 / var(--tw-bg-opacity, 1)); }
html[data-theme="midnight"] .bg-navy { background-color: rgb(11 16 24 / var(--tw-bg-opacity, 1)); }
html[data-theme="midnight"] .bg-navy\/5 { background-color: rgb(255 255 255 / .04); }
html[data-theme="midnight"] .text-navy { color: rgb(233 227 214 / var(--tw-text-opacity, 1)); }
html[data-theme="midnight"] .text-navy\/45 { color: rgb(233 227 214 / .45); }
html[data-theme="midnight"] .text-navy\/55 { color: rgb(233 227 214 / .55); }
html[data-theme="midnight"] .text-navy\/60 { color: rgb(233 227 214 / .6); }
html[data-theme="midnight"] .text-navy\/70 { color: rgb(233 227 214 / .7); }
html[data-theme="midnight"] .text-navy\/75 { color: rgb(233 227 214 / .75); }
html[data-theme="midnight"] .text-navy\/85 { color: rgb(233 227 214 / .85); }
/* text-sand sits on dark navy surfaces (buttons/footer), which stay dark in
   midnight, so it must remain light even though the sand token is flipped
   dark for the header's benefit. */
html[data-theme="midnight"] .text-sand { color: rgb(233 227 214 / var(--tw-text-opacity, 1)); }
html[data-theme="midnight"] .hover\:text-sand:hover { color: rgb(233 227 214 / var(--tw-text-opacity, 1)); }
html[data-theme="midnight"] .text-sand\/55 { color: rgb(233 227 214 / .55); }
html[data-theme="midnight"] .text-sand\/60 { color: rgb(233 227 214 / .6); }
html[data-theme="midnight"] .text-sand\/70 { color: rgb(233 227 214 / .7); }
html[data-theme="midnight"] .text-sand\/75 { color: rgb(233 227 214 / .75); }
html[data-theme="midnight"] .text-sand\/80 { color: rgb(233 227 214 / .8); }
html[data-theme="midnight"] .text-sand\/85 { color: rgb(233 227 214 / .85); }
html[data-theme="midnight"] .border-navy { border-color: rgb(255 255 255 / .18); }
html[data-theme="midnight"] .border-navy\/10 { border-color: rgb(255 255 255 / .08); }
html[data-theme="midnight"] .border-navy\/20 { border-color: rgb(255 255 255 / .15); }
html[data-theme="midnight"] .border-sand\/15 { border-color: rgb(255 255 255 / .12); }
html[data-theme="midnight"] .divide-navy\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(255 255 255 / .08); }
html[data-theme="midnight"] .hover\:bg-navy:hover { background-color: rgb(11 16 24 / var(--tw-bg-opacity, 1)); }
html[data-theme="midnight"] .hover\:text-navy:hover { color: rgb(233 227 214 / var(--tw-text-opacity, 1)); }
/* Hero overlay darkens instead of lightens */
html[data-theme="midnight"] .from-sand\/85 {
  --tw-gradient-from: rgb(18 22 29 / .88) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(18 22 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="midnight"] .via-sand\/65 {
  --tw-gradient-to: rgb(18 22 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(18 22 29 / .7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="midnight"] .to-sand\/35 { --tw-gradient-to: rgb(18 22 29 / .45) var(--tw-gradient-to-position); }

/* Smooth the recolor when switching themes (not on first paint) */
html.rwd-theme-ready body,
html.rwd-theme-ready footer { transition: background-color .25s ease, color .25s ease; }
html.rwd-theme-ready .site-header {
  transition: var(--nav-slide-transition, transform 0.45s ease-in-out), background-color .25s ease, color .25s ease;
}

/* =========================================================================
   Global footer base row (theme button, copyright, tagline)
   ========================================================================= */
.rwd-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  text-align: left;
}
.rwd-footer-copyline {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rwd-footer-tagline { opacity: .8; }

/* =========================================================================
   Theme adjuster widget
   ========================================================================= */
.rwd-theme { position: relative; display: inline-flex; }
.rwd-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .02em;
  color: inherit;
  background: rgb(var(--rwd-sand) / .1);
  border: 1px solid rgb(var(--rwd-sand) / .25);
  border-radius: 999px;
  padding: .4rem .7rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.rwd-theme-toggle:hover { background: rgb(var(--rwd-sand) / .18); border-color: rgb(var(--rwd-sand) / .4); }
.rwd-theme-toggle:focus-visible { outline: 2px solid rgb(var(--rwd-terracotta)); outline-offset: 2px; }
.rwd-theme-toggle svg { width: 14px; height: 14px; display: block; }
.rwd-theme-toggle-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgb(var(--rwd-terracotta));
  box-shadow: inset 0 0 0 2px rgb(var(--rwd-sand) / .6);
}

.rwd-theme-panel {
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 0;
  transform: translateY(6px);
  width: min(20rem, calc(100vw - 2rem));
  background: rgb(var(--rwd-sand));
  color: rgb(var(--rwd-navy));
  border: 1px solid rgb(var(--rwd-terracotta) / .4);
  border-radius: .9rem;
  box-shadow: 0 1.2rem 2.5rem rgb(0 0 0 / .35);
  padding: 1rem;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 50;
}
.rwd-theme[data-open="true"] .rwd-theme-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.rwd-theme-panel h3 {
  margin: 0 0 .5rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .65;
  font-weight: 600;
}
.rwd-theme-panel h3:not(:first-child) { margin-top: 1rem; }

.rwd-theme-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.rwd-swatch {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .55rem;
  border: 1px solid rgb(var(--rwd-navy) / .15);
  border-radius: .6rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.rwd-swatch:hover { background: rgb(var(--rwd-navy) / .05); }
.rwd-swatch[aria-pressed="true"] { border-color: rgb(var(--rwd-terracotta)); background: rgb(var(--rwd-terracotta) / .08); }
.rwd-swatch-chips { display: inline-flex; flex: none; }
.rwd-swatch-chip { width: 13px; height: 18px; }
.rwd-swatch-chip:first-child { border-radius: 4px 0 0 4px; }
.rwd-swatch-chip:last-child { border-radius: 0 4px 4px 0; }
.rwd-swatch-name { font-weight: 500; }

.rwd-logo-select {
  width: 100%;
  font: inherit;
  font-size: .82rem;
  padding: .5rem .6rem;
  border: 1px solid rgb(var(--rwd-navy) / .2);
  border-radius: .6rem;
  background: rgb(var(--rwd-sand));
  color: rgb(var(--rwd-navy));
  cursor: pointer;
}
.rwd-logo-select:focus-visible { outline: 2px solid rgb(var(--rwd-terracotta)); outline-offset: 1px; }

.rwd-theme-reset {
  margin-top: .9rem;
  width: 100%;
  font: inherit;
  font-size: .74rem;
  padding: .45rem;
  border: none;
  border-radius: .6rem;
  background: rgb(var(--rwd-navy));
  color: rgb(var(--rwd-sand));
  cursor: pointer;
  transition: background-color .15s ease;
}
.rwd-theme-reset:hover { background: rgb(var(--rwd-terracotta)); }

/* =========================================================================
   Header (site-nav) theming
   -------------------------------------------------------------------------
   site-nav.css ships with fixed brand colors; these overrides re-point the
   header at the theme tokens. Loaded after site-nav.css, so same-specificity
   rules win. Defaults equal the original colors, so Coastal is unchanged.
   ========================================================================= */
.site-header {
  background: rgb(var(--rwd-sand) / var(--nav-bg-opacity, 1));
  border-bottom-color: rgb(var(--rwd-navy) / .1);
  box-shadow: 0 0.5rem 1.5rem rgb(var(--rwd-navy) / var(--nav-shadow-opacity, 0));
}
.site-brand[aria-current="page"] { color: rgb(var(--rwd-navy)); }
.site-link { color: rgb(var(--rwd-navy)); }
.site-link:hover { color: rgb(var(--rwd-terracotta)); }
.site-link[aria-current="page"] { background: rgb(var(--rwd-navy) / .05); color: rgb(var(--rwd-navy)); }
.site-link--cta { background: rgb(var(--rwd-navy)); color: rgb(var(--rwd-sand)); }
.site-link--cta:hover,
.site-link--cta[aria-current="page"] { background: rgb(var(--rwd-terracotta)); color: rgb(var(--rwd-sand)); }
.site-menu-toggle {
  border-color: rgb(var(--rwd-navy) / .18);
  background: rgb(var(--rwd-navy));
  color: rgb(var(--rwd-sand));
}
.site-menu-toggle:focus-visible { outline-color: rgb(var(--rwd-terracotta) / .45); }
.site-nav.is-menu-open .site-menu-toggle { background: rgb(var(--rwd-terracotta)); }

@media (max-width: 920px) {
  .site-links {
    border-color: rgb(var(--rwd-navy) / .12);
    background: rgb(var(--rwd-nav-compact) / .96);
    box-shadow: 0 1rem 2rem rgb(var(--rwd-navy) / .12);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.rwd-theme-ready body,
  html.rwd-theme-ready .site-header,
  html.rwd-theme-ready footer,
  .rwd-theme-panel,
  .rwd-theme-toggle { transition: none; }
}