/*
 * RugWeather - shared web aesthetic
 *
 * Colours and typography are shared by browser and installed PWA modes.
 * Layout rules remain browser-only so the PWA keeps its app shell and bottom navigation.
 * The visual language is based on index.html:
 * - near-black cinematic canvas
 * - warm cream typography
 * - restrained orange accents
 * - subtle borders / glassy surfaces
 * - Inter throughout (no Merriweather/serif headings)
 */

html:is(.browser-mode, .pwa-mode) {
  --web-black: #090909;
  --web-black-2: #10100f;
  --web-panel: #151412;
  --web-panel-2: #1b1815;
  --web-cream: #f4eee4;
  --web-white: #f8f2e9;
  --web-muted: #a9a197;
  --web-muted-2: #7f786f;
  --web-line: rgba(244, 238, 228, 0.12);
  --web-orange: #e47a35;
  --web-orange-2: #f09a5a;
  --web-green: #53604b;
  --web-radius: 18px;
}

html:is(.browser-mode, .pwa-mode),
html:is(.browser-mode, .pwa-mode) body {
  background: var(--web-black) !important;
  color: var(--web-cream) !important;
}

html:is(.browser-mode, .pwa-mode) body {
  background:
    radial-gradient(ellipse 75% 55% at 82% 8%, rgba(118, 67, 37, .18), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 55%, rgba(69, 41, 25, .13), transparent 65%),
    linear-gradient(180deg, #090909 0%, #11100e 55%, #090909 100%) !important;
}

html:is(.browser-mode, .pwa-mode) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 24%, rgba(228, 122, 53, .045), transparent 24rem),
    radial-gradient(circle at 12% 78%, rgba(132, 76, 43, .045), transparent 26rem);
}

/* ---------------- Shared web navbar ---------------- */

html.browser-mode .site-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 1.05rem clamp(1.25rem, 5vw, 4rem) !important;
  background: rgba(9, 9, 9, .84) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 238, 228, .08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html.browser-mode .site-navbar-inner {
  width: 100%;
  max-width: 1180px !important;
}

html.browser-mode .site-brand {
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}

html.browser-mode .site-brand-wordmark {
  width: 160px;
  height: auto;
  display: block;
  object-fit: contain;
}

html.browser-mode .site-menu-toggle,
html.browser-mode .site-nav-login {
  display: none;
}

html.browser-mode .site-menu-toggle:focus-visible {
  outline: 2px solid var(--web-orange-2);
  outline-offset: 3px;
}

html.browser-mode .site-nav-links {
  gap: .15rem !important;
}

html.browser-mode .site-nav-links a,
html.browser-mode .site-nav-links .nav-link-button {
  color: rgba(255,255,255,.78) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  padding: .58rem .78rem !important;
  background: transparent !important;
}

html.browser-mode .site-nav-links a:hover,
html.browser-mode .site-nav-links a:focus-visible,
html.browser-mode .site-nav-links .nav-link-button:hover,
html.browser-mode .site-nav-links .nav-link-button:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}

html.browser-mode .site-nav-links .nav-pill {
  background: var(--web-cream) !important;
  color: #171310 !important;
  padding-inline: 1.15rem !important;
}

html.browser-mode .site-nav-links .nav-pill:hover,
html.browser-mode .site-nav-links .nav-pill:focus-visible {
  background: #fffaf2 !important;
  color: #171310 !important;
}

/* ---------------- Typography ---------------- */

html:is(.browser-mode, .pwa-mode) h1,
html:is(.browser-mode, .pwa-mode) h2,
html:is(.browser-mode, .pwa-mode) h3,
html:is(.browser-mode, .pwa-mode) h4,
html:is(.browser-mode, .pwa-mode) h5,
html:is(.browser-mode, .pwa-mode) h6,
html:is(.browser-mode, .pwa-mode) .page-title,
html:is(.browser-mode, .pwa-mode) .app-hero h1,
html:is(.browser-mode, .pwa-mode) .card-title h2,
html:is(.browser-mode, .pwa-mode) .card-title h3,
html:is(.browser-mode, .pwa-mode) .auth-copy h1,
html:is(.browser-mode, .pwa-mode) .offline-card h1 {
  color: var(--web-white) !important;
}

html:is(.browser-mode, .pwa-mode) p,
html:is(.browser-mode, .pwa-mode) li,
html:is(.browser-mode, .pwa-mode) label,
html:is(.browser-mode, .pwa-mode) .muted,
html:is(.browser-mode, .pwa-mode) .page-subtitle,
html:is(.browser-mode, .pwa-mode) .form-help {
  color: var(--web-muted) !important;
}

html:is(.browser-mode, .pwa-mode) .eyebrow,
html:is(.browser-mode, .pwa-mode) .section-label,
html:is(.browser-mode, .pwa-mode) .rw-eyebrow {
  color: #c8b9a5 !important;
}

/* ---------------- Common page shells ---------------- */

html:is(.browser-mode, .pwa-mode) .app-page,
html:is(.browser-mode, .pwa-mode) .dashboard-page,
html:is(.browser-mode, .pwa-mode) .auth-page,
html:is(.browser-mode, .pwa-mode) .offline-page {
  background: transparent !important;
  color: var(--web-cream) !important;
}

html.browser-mode .app-page {
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem) !important;
}

html.browser-mode .app-container {
  max-width: 1180px !important;
}

html:is(.browser-mode, .pwa-mode) .app-hero,
html:is(.browser-mode, .pwa-mode) .topbar-panel,
html:is(.browser-mode, .pwa-mode) .auth-copy,
html:is(.browser-mode, .pwa-mode) .auth-card,
html:is(.browser-mode, .pwa-mode) .legal-card,
html:is(.browser-mode, .pwa-mode) .offline-card,
html:is(.browser-mode, .pwa-mode) .app-card,
html:is(.browser-mode, .pwa-mode) .settings-card,
html:is(.browser-mode, .pwa-mode) .horses-manager-card,
html:is(.browser-mode, .pwa-mode) .horse-row {
  color: var(--web-cream) !important;
  background:
    linear-gradient(145deg, rgba(24, 22, 19, .96), rgba(15, 15, 14, .97)) !important;
  border: 1px solid rgba(244, 238, 228, .11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.25) !important;
}

html.browser-mode .app-hero {
  border-radius: 20px !important;
}

html.browser-mode .app-card,
html.browser-mode .settings-card,
html.browser-mode .horse-row {
  border-radius: 18px !important;
}

html:is(.browser-mode, .pwa-mode) .app-card:hover,
html:is(.browser-mode, .pwa-mode) .horse-row:hover {
  border-color: rgba(228,122,53,.25) !important;
}

/* Make the page-specific light backgrounds transparent so they inherit the
   same cinematic canvas rather than creating white blocks between sections. */
html:is(.browser-mode, .pwa-mode) .dashboard-page,
html:is(.browser-mode, .pwa-mode) .dashboard-main,
html:is(.browser-mode, .pwa-mode) .horses-page,
html:is(.browser-mode, .pwa-mode) .account-page,
html:is(.browser-mode, .pwa-mode) .learn-page,
html:is(.browser-mode, .pwa-mode) .auth-page,
html:is(.browser-mode, .pwa-mode) .legal-page,
html:is(.browser-mode, .pwa-mode) .marketing-page {
  background: transparent !important;
}

/* ---------------- Forms ---------------- */

html:is(.browser-mode, .pwa-mode) .form-control,
html:is(.browser-mode, .pwa-mode) .form-select,
html:is(.browser-mode, .pwa-mode) input[type="text"],
html:is(.browser-mode, .pwa-mode) input[type="email"],
html:is(.browser-mode, .pwa-mode) input[type="password"],
html:is(.browser-mode, .pwa-mode) input[type="number"],
html:is(.browser-mode, .pwa-mode) input[type="file"],
html:is(.browser-mode, .pwa-mode) select,
html:is(.browser-mode, .pwa-mode) textarea,
html:is(.browser-mode, .pwa-mode) .rw-register-form input {
  background: rgba(255,255,255,.045) !important;
  color: var(--web-white) !important;
  border: 1px solid rgba(244,238,228,.13) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
}

html:is(.browser-mode, .pwa-mode) input::placeholder,
html:is(.browser-mode, .pwa-mode) textarea::placeholder {
  color: #746d65 !important;
}

html:is(.browser-mode, .pwa-mode) .form-control:focus,
html:is(.browser-mode, .pwa-mode) .form-select:focus,
html:is(.browser-mode, .pwa-mode) input:focus,
html:is(.browser-mode, .pwa-mode) select:focus,
html:is(.browser-mode, .pwa-mode) textarea:focus {
  border-color: rgba(228,122,53,.72) !important;
  box-shadow: 0 0 0 4px rgba(228,122,53,.12) !important;
}

/* ---------------- Buttons / links ---------------- */

html:is(.browser-mode, .pwa-mode) .btn,
html:is(.browser-mode, .pwa-mode) button.btn,
html:is(.browser-mode, .pwa-mode) .primary-button,
html:is(.browser-mode, .pwa-mode) .primary-link-button {
  background: var(--web-cream) !important;
  color: #171310 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

html:is(.browser-mode, .pwa-mode) .btn:hover,
html:is(.browser-mode, .pwa-mode) button.btn:hover,
html:is(.browser-mode, .pwa-mode) .primary-button:hover,
html:is(.browser-mode, .pwa-mode) .primary-link-button:hover {
  background: #fffaf2 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
}

html:is(.browser-mode, .pwa-mode) .btn-secondary,
html:is(.browser-mode, .pwa-mode) .secondary-link-button,
html:is(.browser-mode, .pwa-mode) .btn-outline {
  background: transparent !important;
  color: var(--web-cream) !important;
  border: 1px solid rgba(244,238,228,.18) !important;
  box-shadow: none !important;
}

html:is(.browser-mode, .pwa-mode) .btn-secondary:hover,
html:is(.browser-mode, .pwa-mode) .secondary-link-button:hover,
html:is(.browser-mode, .pwa-mode) .btn-outline:hover {
  background: rgba(255,255,255,.06) !important;
}

html:is(.browser-mode, .pwa-mode) .btn-dark {
  background: #f4eee4 !important;
  color: #171310 !important;
}

/* ---------------- App-specific shared surfaces ---------------- */

html:is(.browser-mode, .pwa-mode) .card-icon,
html:is(.browser-mode, .pwa-mode) .empty-mark,
html:is(.browser-mode, .pwa-mode) .horse-photo.placeholder {
  background: rgba(228,122,53,.10) !important;
  color: var(--web-orange-2) !important;
}

html:is(.browser-mode, .pwa-mode) .location-chip,
html:is(.browser-mode, .pwa-mode) .location-summary,
html:is(.browser-mode, .pwa-mode) .meta-list div,
html:is(.browser-mode, .pwa-mode) .subscription-notice,
html:is(.browser-mode, .pwa-mode) .recommendation-feedback,
html:is(.browser-mode, .pwa-mode) .forecast-tabs,
html:is(.browser-mode, .pwa-mode) .forecast-timeline,
html:is(.browser-mode, .pwa-mode) .yard-location-card,
html:is(.browser-mode, .pwa-mode) .install-app-card,
html:is(.browser-mode, .pwa-mode) .collapsible-chevron,
html:is(.browser-mode, .pwa-mode) .suggestion-chevron {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(244,238,228,.10) !important;
  color: var(--web-cream) !important;
}

html:is(.browser-mode, .pwa-mode) .location-chip small,
html:is(.browser-mode, .pwa-mode) .meta-list dt,
html:is(.browser-mode, .pwa-mode) .location-summary span,
html:is(.browser-mode, .pwa-mode) .horse-main p,
html:is(.browser-mode, .pwa-mode) .quiet-note {
  color: var(--web-muted-2) !important;
}

html:is(.browser-mode, .pwa-mode) .badge {
  background: rgba(228,122,53,.10) !important;
  color: #efc5a8 !important;
  border-color: rgba(228,122,53,.14) !important;
}

html:is(.browser-mode, .pwa-mode) .badge.premium {
  background: var(--web-cream) !important;
  color: #171310 !important;
}

/* ---------------- Legal / auth ---------------- */

html:is(.browser-mode, .pwa-mode) .legal-card h2,
html:is(.browser-mode, .pwa-mode) .legal-card h3 {
  color: var(--web-white) !important;
}

html:is(.browser-mode, .pwa-mode) .legal-updated,
html:is(.browser-mode, .pwa-mode) .legal-note,
html:is(.browser-mode, .pwa-mode) .auth-helper-link,
html:is(.browser-mode, .pwa-mode) .auth-footer {
  background: rgba(255,255,255,.035) !important;
  color: var(--web-muted) !important;
  border-color: rgba(244,238,228,.10) !important;
}

html:is(.browser-mode, .pwa-mode) .auth-helper-link a,
html:is(.browser-mode, .pwa-mode) .auth-footer a,
html:is(.browser-mode, .pwa-mode) .legal-card a {
  color: var(--web-orange-2) !important;
}

html.browser-mode .offline-card {
  text-align: left;
}

html:is(.browser-mode, .pwa-mode) .offline-icon {
  background: rgba(228,122,53,.10) !important;
  color: var(--web-orange-2) !important;
}

/* ---------------- Footer ---------------- */

html.browser-mode .site-footer {
  background: #090909 !important;
  color: #aaa39a !important;
  padding: 1.35rem 0.75rem !important;
}

html.browser-mode .site-footer-inner {
  max-width: 900px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.browser-mode .site-footer-links a {
  color: #eee9e2 !important;
}

html.browser-mode .site-footer-links a:hover,
html.browser-mode .site-footer-links a:focus-visible {
  color: #fff !important;
}

/* ---------------- Keep PWA completely out of this layer ---------------- */

@media (max-width: 900px) {
  html.browser-mode .site-navbar {
    padding: .85rem 1rem !important;
  }

  html.browser-mode .site-nav-links {
    gap: .05rem !important;
  }

  html.browser-mode .site-nav-links a,
  html.browser-mode .site-nav-links .nav-link-button {
    padding: .5rem .55rem !important;
    font-size: .78rem !important;
  }

  html.browser-mode .site-nav-links a:nth-child(n+5),
  html.browser-mode .site-nav-links .nav-inline-form {
    /* Keep the shared desktop navbar usable on small browser widths. */
  }

  html.browser-mode .app-page {
    padding: .9rem .85rem 2rem !important;
  }
}

@media (max-width: 900px) {
  html.browser-mode .site-navbar-inner {
    position: relative;
    align-items: center !important;
    flex-direction: row !important;
    gap: .75rem !important;
  }

  html.browser-mode .site-brand-wordmark {
    display: none;
  }

  html.browser-mode .site-brand-mobile-mark {
    width: 52px;
    height: 32px;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  html.browser-mode .site-menu-toggle {
    display: grid;
    margin-left: auto;
  }

  html.browser-mode .site-nav-login {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    border-radius: 999px;
    color: #171310 !important;
    background: var(--web-cream) !important;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
  }

  html.browser-mode .site-nav-login:focus-visible {
    outline: 2px solid var(--web-orange-2);
    outline-offset: 3px;
  }

  html.browser-mode .site-nav-links--menu {
    position: absolute;
    top: calc(100% + .7rem);
    right: 0;
    z-index: 20;
    width: min(280px, calc(100vw - 2rem));
    display: none !important;
    grid-template-columns: 1fr;
    gap: .2rem !important;
    padding: .55rem !important;
    overflow: visible;
    border: 1px solid rgba(244, 238, 228, .12);
    border-radius: 18px;
    background: rgba(19, 16, 13, .98);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
  }

  html.browser-mode .site-nav-links--menu.is-open {
    display: grid !important;
  }

  html.browser-mode .site-nav-links--menu a,
  html.browser-mode .site-nav-links--menu .nav-link-button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: .78rem .9rem !important;
    border-radius: 12px;
    font-size: .86rem !important;
    text-align: left;
  }

  html.browser-mode .site-nav-links--menu .nav-pill {
    display: none;
  }

  html.browser-mode .site-nav-links--menu .site-nav-login-menu {
    color: rgba(255,255,255,.78) !important;
    background: transparent !important;
  }

  html.browser-mode .site-nav-links--menu .nav-pill:hover,
  html.browser-mode .site-nav-links--menu .nav-pill:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
  }

  html.browser-mode .site-nav-links--menu .nav-inline-form {
    width: 100%;
    margin: 0;
  }
}

/* ---------------- Shared legal-page aesthetic (web + installed PWA) ---------------- */
html.browser-mode body.legal-page,
html.pwa-mode body.legal-page {
  background:
    radial-gradient(ellipse 75% 55% at 82% 8%, rgba(118, 67, 37, .18), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 55%, rgba(69, 41, 25, .13), transparent 65%),
    linear-gradient(180deg, #090909 0%, #11100e 55%, #090909 100%) !important;
  color: #f4eee4 !important;
}

html.browser-mode body.legal-page::before,
html.pwa-mode body.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 24%, rgba(228, 122, 53, .045), transparent 24rem),
    radial-gradient(circle at 12% 78%, rgba(132, 76, 43, .045), transparent 26rem);
}

html.browser-mode body.legal-page .app-page,
html.pwa-mode body.legal-page .app-page {
  background: transparent !important;
  color: #f4eee4 !important;
}

html.browser-mode body.legal-page .app-hero,
html.browser-mode body.legal-page .legal-card,
html.pwa-mode body.legal-page .app-hero,
html.pwa-mode body.legal-page .legal-card {
  color: #f4eee4 !important;
  background:
    linear-gradient(145deg, rgba(24, 22, 19, .96), rgba(15, 15, 14, .97)) !important;
  border: 1px solid rgba(244, 238, 228, .11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.25) !important;
}

html.browser-mode body.legal-page .app-hero,
html.pwa-mode body.legal-page .app-hero {
  border-radius: 20px !important;
}

html.browser-mode body.legal-page .legal-card,
html.pwa-mode body.legal-page .legal-card {
  border-radius: 18px !important;
}

html.browser-mode body.legal-page .legal-card h2,
html.browser-mode body.legal-page .legal-card h3,
html.pwa-mode body.legal-page .legal-card h2,
html.pwa-mode body.legal-page .legal-card h3 {
  color: #f8f2e9 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.045em !important;
}

html.browser-mode body.legal-page .legal-card h2,
html.pwa-mode body.legal-page .legal-card h2 {
  font-weight: 500 !important;
}

html.browser-mode body.legal-page .legal-card h3,
html.pwa-mode body.legal-page .legal-card h3 {
  font-weight: 650 !important;
}

html.browser-mode body.legal-page .legal-card p,
html.browser-mode body.legal-page .legal-card li,
html.pwa-mode body.legal-page .legal-card p,
html.pwa-mode body.legal-page .legal-card li {
  color: #a9a197 !important;
}

html.browser-mode body.legal-page .legal-card a,
html.pwa-mode body.legal-page .legal-card a {
  color: #f09a5a !important;
}

html.browser-mode body.legal-page .eyebrow,
html.pwa-mode body.legal-page .eyebrow {
  color: #c8b9a5 !important;
}

html.browser-mode body.legal-page .app-hero > p:last-child,
html.pwa-mode body.legal-page .app-hero > p:last-child {
  color: #a9a197 !important;
}

html.browser-mode body.legal-page .legal-updated,
html.browser-mode body.legal-page .legal-note,
html.pwa-mode body.legal-page .legal-updated,
html.pwa-mode body.legal-page .legal-note {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(244,238,228,.10) !important;
  color: #a9a197 !important;
}

html.browser-mode body.legal-page .legal-updated strong,
html.browser-mode body.legal-page .legal-note strong,
html.pwa-mode body.legal-page .legal-updated strong,
html.pwa-mode body.legal-page .legal-note strong {
  color: #f4eee4 !important;
}

html.browser-mode body.legal-page .btn,
html.pwa-mode body.legal-page .btn {
  background: #f4eee4 !important;
  color: #171310 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

html.browser-mode body.legal-page .site-footer,
html.pwa-mode body.legal-page .site-footer {
  background: #090909 !important;
  color: #777168 !important;
}