/*--------------------------------------------------------------
# H4H skins: Ocean and Sand (plus the theme picker styles)
# Loaded LAST in src/app/layout.js so these rules win.
#
# How it works: the head script sets <html data-skin="ocean|sand"> on top
# of the base theme. Ocean sits on data-theme="dark" and Sand on
# data-theme="light", so every fix in dark-mode.css and forms.css still
# applies; this file only changes colors and adds stronger edges.
#
# Both skins are high contrast (checked against WCAG):
#   Ocean: text 17.9:1, blue links 10.7:1, red headings 9.1:1,
#          white on blue buttons 5.8:1
#   Sand:  text 16:1, blue links 6.8:1, red headings 7.3:1,
#          white on blue buttons 7.4:1
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Ocean: near-black, bright blue, warm red (like Windows "Aquatic")
--------------------------------------------------------------*/
html[data-theme="dark"][data-skin="ocean"] {
  --skin-border: #5b6b78;

  --accent-fill: #1d6a9c;

  --background-color: #05090d;
  --default-color: #eef3f7;
  --heading-color: #ff8f8f;
  --secondary-color: #ff8f8f;
  --accent-color: #7cc6f2;
  --surface-color: #0e171f;
  --contrast-color: #ffffff;

  --nav-color: #ffffff;
  --nav-hover-color: #7cc6f2;
  --nav-mobile-background-color: #0e171f;
  --nav-dropdown-background-color: #0e171f;
  --nav-dropdown-color: #ffffff;
  --nav-dropdown-hover-color: #7cc6f2;
}

html[data-theme="dark"][data-skin="ocean"] .light-background {
  --background-color: #0a1117;
  --surface-color: #111c25;
}

html[data-theme="dark"][data-skin="ocean"] .scrolled .header {
  --background-color: rgba(5, 9, 13, 0.9);
}

html[data-theme="dark"][data-skin="ocean"] .footer.footer-bg {
  background-image: linear-gradient(rgba(5, 9, 13, 0.96), rgba(5, 9, 13, 0.96)), url("/assets/img/bg/footerbg.webp");
}

html[data-theme="dark"][data-skin="ocean"] .language-selector__control,
html[data-theme="dark"][data-skin="ocean"] .mobile-nav-toggle,
html[data-theme="dark"][data-skin="ocean"] .quote-modal__close {
  background: var(--surface-color);
  border-color: var(--skin-border);
}

html[data-theme="dark"][data-skin="ocean"] .language-selector__control select option {
  background-color: var(--surface-color);
}

html[data-theme="dark"][data-skin="ocean"] .form-control,
html[data-theme="dark"][data-skin="ocean"] .form-select,
html[data-theme="dark"][data-skin="ocean"] .contact .php-email-form .form-control {
  border-color: var(--skin-border);
}

html[data-theme="dark"][data-skin="ocean"] .form-control::placeholder,
html[data-theme="dark"][data-skin="ocean"] .contact .php-email-form .form-control::placeholder {
  color: #a9b6c0;
}

/*--------------------------------------------------------------
# Sand: warm cream, deep navy text, deeper blue and red (like "Desert")
--------------------------------------------------------------*/
html[data-theme="light"][data-skin="sand"] {
  color-scheme: light;

  --skin-border: #857a66;

  --background-color: #fbf5e8;
  --default-color: #1d1a16;
  --heading-color: #a3121a;
  --secondary-color: #a3121a;
  --accent-color: #1b5a85;
  --surface-color: #fffdf7;
  --contrast-color: #ffffff;

  --nav-color: #1d1a16;
  --nav-hover-color: #1b5a85;
  --nav-mobile-background-color: #fffdf7;
  --nav-dropdown-background-color: #fffdf7;
  --nav-dropdown-color: #1d1a16;
  --nav-dropdown-hover-color: #1b5a85;

  /* globals.css body text */
  --background: #fbf5e8;
  --foreground: #1d1a16;
}

html[data-theme="light"][data-skin="sand"] .light-background {
  --background-color: #f2e8d3;
  --surface-color: #fffdf7;
}

html[data-theme="light"][data-skin="sand"] .scrolled .header {
  --background-color: rgba(251, 245, 232, 0.94);
}

/* Fields: cream surface with a clear edge */
html[data-theme="light"][data-skin="sand"] .form-control,
html[data-theme="light"][data-skin="sand"] .form-select {
  border-color: var(--skin-border);
  background-color: var(--surface-color);
  color: var(--default-color);
}

html[data-theme="light"][data-skin="sand"] .form-control::placeholder {
  color: #6b6252;
}

/* Self-enrollment styles in globals.css hard-code white */
html[data-theme="light"][data-skin="sand"] .home-self-enrollment {
  background: linear-gradient(180deg, var(--background-color) 0%, rgba(27, 90, 133, 0.07) 100%);
}

html[data-theme="light"][data-skin="sand"] .self-enrollment {
  background:
    linear-gradient(180deg, rgba(27, 90, 133, 0.07), rgba(0, 0, 0, 0) 46%),
    var(--background-color);
}

html[data-theme="light"][data-skin="sand"] .self-enrollment-partner,
html[data-theme="light"][data-skin="sand"] .self-enrollment-feature,
html[data-theme="light"][data-skin="sand"] .btn-enrollment-secondary {
  background: var(--surface-color);
}

/*--------------------------------------------------------------
# Both skins: stronger card edges (the "high contrast" part)
--------------------------------------------------------------*/
html[data-skin] :is(
  .self-enrollment-partner,
  .self-enrollment-feature,
  .departments .department-item,
  .services .service-card,
  .contact .info-box,
  .contact .php-email-form,
  .testimonials .testimonial-item,
  .appointmnet .appointment-form-wrapper
) {
  border: 1px solid var(--skin-border);
}

html[data-skin] :focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# Theme picker (ThemeToggle.jsx)
--------------------------------------------------------------*/
.theme-picker {
  position: relative;
}

.theme-picker--icon {
  display: inline-flex;
}

/* The picker sits in the top bar, and the navbar below it is drawn later,
   so it would cover the open menu. While the menu is open, lift the top
   bar above the navbar. */
.header .topbar:has(.theme-picker__menu) {
  position: relative;
  z-index: 1100;
}

.theme-picker__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1050;
  width: 220px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-radius: 12px;
  background: var(--surface-color);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.theme-picker__menu .theme-picker__options {
  display: grid;
  gap: 4px;
}

.theme-picker__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px; /* comfortable tap target */
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--default-color);
  background: transparent;
  font-family: var(--nav-font);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.theme-picker__option:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.theme-picker__option[aria-checked="true"] {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 86%);
  font-weight: 600;
}

/* Each swatch previews its own theme, whatever theme is active */
.theme-picker__swatch {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.45);
  font-size: 0.9rem;
}

.theme-picker__option--light .theme-picker__swatch { background: #ffffff; color: #3685b4; }
.theme-picker__option--dark .theme-picker__swatch { background: #0f161c; color: #5aaedf; }
.theme-picker__option--ocean .theme-picker__swatch { background: #05090d; color: #7cc6f2; }
.theme-picker__option--sand .theme-picker__swatch { background: #fbf5e8; color: #a3121a; }

/* Mobile menu row: title + 2x2 grid of options */
.theme-picker--menu {
  display: grid;
  gap: 10px;
  padding: 12px 0;
}

.theme-picker__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-color);
  font-family: var(--nav-font);
  font-weight: 500;
}

.theme-picker--menu .theme-picker__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theme-picker--menu .theme-picker__option {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.theme-picker--menu .theme-picker__option[aria-checked="true"] {
  border-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Windows contrast themes (Aquatic, Desert, Dusk, Night sky)
# Windows replaces site colors with its own; these keep edges, focus
# rings and the gradient site name visible when that happens.
--------------------------------------------------------------*/
@media (forced-colors: active) {
  .btn,
  button,
  .btn-getstarted,
  .btn-enrollment-primary,
  .btn-enrollment-secondary,
  .quote-primary-action,
  .floating-quote-tab,
  .theme-toggle,
  .theme-picker__option,
  .form-control,
  .form-select,
  .self-enrollment-partner,
  .self-enrollment-feature {
    border: 1px solid ButtonText;
  }

  .theme-picker__option[aria-checked="true"] {
    border: 2px solid Highlight;
  }

  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  /* Gradient-clipped text would turn invisible */
  .header .logo .sitename span {
    background: none !important;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }

  /* Swatches are previews, keep their real colors */
  .theme-picker__swatch {
    forced-color-adjust: none;
  }
}