/*
 * SmartPAL brand palette — sourced from smartpal-admin-scripts/assets/color-palette
 * Cross-referenced with assets/logo/README.md brand colors
 */

:root {
  /* Core palette (color-palette/globals.css) */
  --color-burnt-orange-10: rgb(191, 87, 0);
  --color-burnt-orange-20: rgb(166, 75, 0);
  --color-burgundy-10: rgb(122, 0, 25);
  --color-burgundy-20: rgb(91, 0, 19);
  --color-bright-snow-10: rgb(247, 249, 249);
  --color-almond-cream-10: rgb(224, 208, 193);
  --color-gold-pollen-5: rgb(255, 222, 122);
  --color-gold-pollen-10: rgb(255, 204, 51);
  --color-gold-pollen-20: rgb(255, 183, 30);
  --color-rich-cerulean-10: rgb(162, 174, 187);

  /* Logo kit brand colors */
  --color-smartpal-maroon: rgb(128, 0, 0);
  --color-burnt-coral: rgb(216, 100, 69);
  --color-brand-orange: rgb(241, 107, 6);
  --color-brand-gold: rgb(212, 170, 0);
  --color-trademark: rgb(170, 166, 160);

  /* Semantic tokens (light mode — matches web app) */
  --primary: var(--color-burnt-orange-10);
  --primary-hover: var(--color-burnt-orange-20);
  --secondary: var(--color-burgundy-10);
  --secondary-hover: var(--color-burgundy-20);
  --tertiary: var(--color-gold-pollen-10);
  --tertiary-hover: var(--color-gold-pollen-20);

  /*
   * Text links on light bands need ≥4.5:1 (WCAG AA). --primary (#BF5700) is ~4.18:1
   * on --background and is reserved for buttons/CTAs. These tokens are for body/legal links.
   */
  --link: #a84800;
  --link-hover: #8f3c00;

  --background: rgb(246, 244, 242);
  --foreground: rgb(18, 22, 27);
  --foreground-secondary: rgb(75, 85, 99);
  --card: rgb(253, 253, 253);
  --border: rgb(220, 224, 229);

  /* Legacy alias used throughout ud-styles.css */
  --primary-color: var(--primary);

  /* Text on dark surfaces (footer, etc.) */
  --on-dark-text: var(--color-bright-snow-10);
  --on-dark-text-muted: var(--color-trademark);
  --on-dark-link: var(--color-almond-cream-10);
  --on-dark-link-hover: var(--color-gold-pollen-5);
  --on-dark-heading: var(--color-gold-pollen-10);
  --on-dark-border: rgba(255, 255, 255, 0.18);

  /* Alternating page bands (1EdTech-style section separation) */
  --band-default: var(--background);
  --band-surface: var(--card);
  --band-accent: rgb(250, 245, 238);

  /* Footer surface */
  --footer-bg: rgb(45, 48, 54);
  --footer-bg-deep: rgb(36, 39, 44);
}

/* Skip link — first focusable control; visually hidden until focused */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--secondary);
  color: var(--on-dark-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

/* Primary CTAs — burnt orange (web app convention) */
.btn-primary,
.collapse .btn,
.hero-buttons .btn-primary,
.navbar .btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--card) !important;
}

.btn-primary:hover,
.collapse .btn:hover,
.hero-buttons .btn-primary:hover,
.navbar .btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--card) !important;
}

/* Footer — dark grey with logo-kit on-dark colors */
.ud-footer {
  background: var(--footer-bg);
}

.ud-footer .ud-widget .ud-widget-desc {
  color: var(--on-dark-text);
  font-size: 16px;
  line-height: 26px;
  max-width: 260px;
}

/* Compact dark master is drawn for a ~180px rendered width (see logo kit) */
.ud-footer .ud-widget .ud-footer-logo {
  max-width: 180px;
  margin-bottom: 14px;
}

/*
 * The master reserves its clear space inside the viewBox (9% left/right,
 * 15.3% top/bottom), which pushes the artwork out of line with the tagline
 * below it. Negative margins in percent stay correct at any cap width, since
 * percentage margins resolve against the container width and the artwork
 * height is a fixed ratio of it.
 */
.ud-footer .ud-widget .ud-footer-logo img {
  margin: -5.1% 0 -5.1% -9%;
}

.ud-footer .ud-widget .ud-widget-title {
  margin-bottom: 30px;
}

.ud-footer .ud-widget .ud-widget-links a {
  margin-bottom: 6px;
  line-height: 28px;
}

/*
 * Three-column footers only (legacy template pages carry four or five).
 * The brand block holds the left edge; auto margins split the remaining
 * space evenly so the link groups span the full width instead of crowding
 * into the left half.
 */
@media (min-width: 992px) {
  .ud-footer-widgets .row > div:first-child:nth-last-child(3) {
    flex: 0 1 320px;
    max-width: 320px;
  }

  .ud-footer-widgets .row > div:first-child:nth-last-child(3) ~ div {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }
}

.ud-footer .ud-widget-title {
  color: var(--on-dark-heading);
}

.ud-footer .ud-widget-links a {
  color: var(--on-dark-link);
}

.ud-footer .ud-widget-links a:hover,
.ud-footer .ud-widget-links a:focus {
  color: var(--on-dark-link-hover);
  padding-left: 10px;
}

.ud-footer .ud-widget-links a.active {
  color: var(--on-dark-link-hover);
  padding-left: 0;
}

.ud-footer .ud-footer-bottom {
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--on-dark-border);
  background: var(--footer-bg-deep);
}

.ud-footer .ud-footer-legal {
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.7;
  margin: 0;
}

.ud-footer .ud-footer-legal-copy {
  color: var(--on-dark-text-muted);
}

.ud-footer .ud-footer-legal a {
  color: var(--on-dark-link);
  text-decoration: none;
  display: inline;
}

.ud-footer .ud-footer-legal a:hover,
.ud-footer .ud-footer-legal a:focus,
.ud-footer .ud-footer-legal a.active {
  color: var(--on-dark-link-hover);
  text-decoration: underline;
}

.ud-footer .ud-footer-legal-sep {
  margin: 0 0.625rem;
  color: rgba(170, 166, 160, 0.55);
}

@media (max-width: 767px) {
  .ud-footer .ud-footer-legal {
    font-size: 0.75rem;
    line-height: 1.9;
  }

  .ud-footer .ud-footer-legal-sep {
    margin: 0 0.4rem;
  }
}

/* Full-bleed content bands */
.ud-band-bg {
  position: relative;
  isolation: isolate;
}

.ud-band-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 0;
  bottom: 0;
  background: var(--band-bg, var(--band-default));
}

.ud-band-bg--default {
  --band-bg: var(--band-default);
}

.ud-band-bg--surface {
  --band-bg: var(--band-surface);
}

.ud-band-bg--accent {
  --band-bg: var(--band-accent);
}