/*
 * UNOC Brand Overrides
 *
 * Corrects the global colour, typography and component tokens to align with the
 * official UNOC Brand Guide / Identity Manual 2026, while preserving the existing
 * layout and component structure.
 */

/* Import Poppins as the primary brand typeface */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Re-map legacy template variables to official brand tokens where possible */
  --background: 0 0% 100%;              /* white page background */
  --foreground: 0 1% 25%;               /* charcoal text */
  --card: 0 0% 100%;
  --card-foreground: 0 1% 25%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 1% 25%;
  --primary: 349 100% 44%;              /* UNOC red */
  --primary-foreground: 0 0% 100%;
  --secondary: 45 100% 51%;             /* UNOC yellow */
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 1% 45%;
  --accent: 45 100% 51%;                /* UNOC yellow */
  --accent-foreground: 0 0% 0%;
  --destructive: 349 100% 44%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 89%;
  --input: 0 0% 89%;
  --ring: 349 100% 44%;

  /* Alias the design-system tokens */
  --unoc-background: var(--unoc-white);
  --unoc-foreground: var(--unoc-charcoal);
  --unoc-page-bg: var(--unoc-white);
  --unoc-page-text: var(--unoc-text);
}

html {
  scroll-behavior: smooth;
}

body,
body.unoc-theme,
body.unoc-inner-page,
body.unoc-redesigned-page {
  font-family: var(--unoc-font-brand) !important;
  background: var(--unoc-background) !important;
  color: var(--unoc-page-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Neutralise old decorative serif/display faces on public pages */
body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body li,
body span,
body button,
body input,
body textarea,
body select,
body label,
body strong,
body small,
body blockquote,
body figcaption {
  font-family: inherit;
}

.font-sans,
.font-serif,
.font-mono {
  font-family: var(--unoc-font-brand) !important;
}

/* Global focus */
:focus-visible {
  outline: var(--unoc-focus-outline) !important;
  outline-offset: 3px !important;
  box-shadow: var(--unoc-focus-ring) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  border-radius: var(--unoc-radius-sm);
}

/* Header / navigation ------------------------------------------------------ */
.unoc-site-header,
header.unoc-site-header,
nav.unoc-site-header {
  --header-surface: rgba(255, 255, 255, 0.94);
  --header-text: var(--unoc-charcoal);
  --header-border: rgba(65, 64, 66, 0.12);
  background: var(--header-surface) !important;
  color: var(--header-text) !important;
  border-color: var(--header-border) !important;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.unoc-site-header a,
.unoc-site-header button,
.unoc-site-header .unoc-nav-trigger {
  color: var(--header-text) !important;
}

.unoc-site-header a:hover,
.unoc-site-header button:hover,
.unoc-site-header .unoc-nav-trigger:hover {
  color: var(--unoc-red) !important;
}

/* Logo swap: normal logo on inner pages / when scrolled; dark logo on transparent dark hero */
.unoc-site-header .unoc-logo-light,
body.unoc-scrolled .unoc-site-header .unoc-logo-light {
  display: block !important;
}

.unoc-site-header .unoc-logo-dark,
body.unoc-scrolled .unoc-site-header .unoc-logo-dark {
  display: none !important;
}

body.unoc-dark-hero:not(.unoc-scrolled) .unoc-site-header,
body.unoc-careers-dark-hero:not(.unoc-scrolled) .unoc-site-header {
  --header-surface: linear-gradient(to bottom, rgba(26, 25, 26, 0.55), rgba(26, 25, 26, 0.18));
  --header-text: var(--unoc-white);
  --header-border: rgba(255, 255, 255, 0.14);
  background: var(--header-surface) !important;
  box-shadow: none !important;
}

body.unoc-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-light,
body.unoc-careers-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-light {
  display: none !important;
}

body.unoc-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-dark,
body.unoc-careers-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-dark {
  display: block !important;
}

/* Mega-menu dropdowns */
.unoc-submenu {
  background: var(--unoc-white) !important;
  border: 1px solid var(--unoc-border) !important;
  box-shadow: var(--unoc-shadow-medium) !important;
  border-radius: var(--unoc-radius-md) !important;
}

.unoc-submenu h4 {
  color: var(--unoc-charcoal) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--unoc-text-xs);
}

.unoc-submenu a {
  color: var(--unoc-text-secondary) !important;
}

.unoc-submenu a:hover,
.unoc-submenu a:focus-visible {
  color: var(--unoc-red) !important;
  background: var(--unoc-surface-soft);
}

/* Mobile drawer */
.unoc-mobile-drawer {
  background: var(--unoc-white) !important;
  color: var(--unoc-charcoal) !important;
}

.unoc-mobile-drawer a,
.unoc-mobile-drawer button {
  color: var(--unoc-charcoal) !important;
}

.unoc-mobile-group.is-open .unoc-mobile-group-toggle {
  color: var(--unoc-red) !important;
}

/* Hero (homepage) ---------------------------------------------------------- */
.unoc-hero-enhanced {
  color: var(--unoc-white) !important;
  background-color: var(--unoc-charcoal) !important;
}

/* Remove Elementor's default 10px column padding inside the full-bleed hero widget */
body.unoc-dark-hero .elementor-section:has(.unoc-hero-enhanced) .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-element-populated:has(.unoc-hero-enhanced) {
  padding: 0 !important;
}

.unoc-hero-enhanced h1,
.unoc-hero-enhanced h1 *,
.unoc-hero-enhanced h2,
.unoc-hero-enhanced h3,
.unoc-hero-enhanced p,
.unoc-hero-enhanced [class*="text-foreground"] {
  color: var(--unoc-white) !important;
}

.unoc-hero-enhanced [class*="text-primary"],
.unoc-hero-enhanced h1 em,
.unoc-hero-enhanced h1 [class*="text-primary"] {
  color: var(--unoc-yellow) !important;
}

.unoc-hero-enhanced .bg-gradient-to-t {
  background-image: linear-gradient(to top, rgba(26, 25, 26, 0.98), rgba(26, 25, 26, 0.68), rgba(26, 25, 26, 0.24)) !important;
}

.unoc-hero-enhanced button,
.unoc-hero-enhanced .btn {
  background-color: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
}

.unoc-hero-enhanced button:hover,
.unoc-hero-enhanced .btn:hover {
  background-color: #b8002b !important;
}

.unoc-hero-enhanced button svg,
.unoc-hero-enhanced button svg * {
  stroke: var(--unoc-white) !important;
}

/* Footer ------------------------------------------------------------------- */
.unoc-site-footer,
footer.unoc-site-footer,
.site-footer {
  background: var(--unoc-charcoal) !important;
  color: var(--unoc-white) !important;
  border-top: 0;
}

.unoc-site-footer *,
footer.unoc-site-footer * {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.unoc-site-footer h1,
.unoc-site-footer h2,
.unoc-site-footer h3,
.unoc-site-footer h4,
.unoc-site-footer h5,
.unoc-site-footer strong,
.unoc-site-footer .footer-logo span {
  color: var(--unoc-white) !important;
}

.unoc-site-footer p,
.unoc-site-footer li,
.unoc-site-footer span,
.unoc-site-footer a {
  color: rgba(255, 255, 255, 0.78) !important;
}

.unoc-site-footer a:hover,
.unoc-site-footer a:focus-visible {
  color: var(--unoc-yellow) !important;
}

.unoc-site-footer .footer-logo-mark img {
  filter: none !important;
}

.unoc-site-footer .social-row a {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--unoc-white) !important;
}

.unoc-site-footer .social-row a:hover,
.unoc-site-footer .social-row a:focus-visible {
  background: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
}

.unoc-site-footer .gov-badge {
  color: rgba(255, 255, 255, 0.8) !important;
}

.unoc-site-footer .back-to-top {
  background: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
}

/* Containers and readable measure ------------------------------------------ */
.unoc-site-header > .container,
.unoc-site-footer > .container,
main .container,
.unoc-main .container,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--unoc-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--unoc-gutter) !important;
  padding-right: var(--unoc-gutter) !important;
}

.unoc-site-header > .container-wide,
.unoc-site-footer > .container-wide,
.container-wide {
  max-width: var(--unoc-content-wide) !important;
}

/* Utility: readable prose */
.unoc-prose,
.unoc-reading,
.reading-column,
.editorial-body {
  max-width: var(--unoc-content-narrow);
}

/* Buttons ------------------------------------------------------------------ */
.btn,
.button,
.wp-block-button__link,
.elementor-button {
  font-family: var(--unoc-font-brand) !important;
  font-weight: 600 !important;
  border-radius: var(--unoc-radius-sm) !important;
  transition: background-color var(--unoc-transition-fast), transform var(--unoc-transition-fast), box-shadow var(--unoc-transition-fast);
}

.btn-primary,
.button-primary,
.elementor-button-primary,
[type="submit"],
.btn.unoc-red {
  background-color: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
  border-color: var(--unoc-red) !important;
}

.btn-primary:hover,
.button-primary:hover,
.elementor-button-primary:hover,
[type="submit"]:hover {
  background-color: #b8002b !important;
  border-color: #b8002b !important;
}

.btn-secondary,
.button-secondary,
.elementor-button-secondary {
  background-color: var(--unoc-yellow) !important;
  color: var(--unoc-black) !important;
  border-color: var(--unoc-yellow) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.elementor-button-secondary:hover {
  background-color: #e6b400 !important;
  border-color: #e6b400 !important;
}

/* Links -------------------------------------------------------------------- */
a {
  color: var(--unoc-red);
  transition: color var(--unoc-transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--unoc-charcoal);
}

/* Form fields -------------------------------------------------------------- */
input,
textarea,
select {
  font-family: var(--unoc-font-brand) !important;
  border: 1px solid var(--unoc-border);
  border-radius: var(--unoc-radius-sm);
  background: var(--unoc-white);
  color: var(--unoc-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--unoc-red);
  box-shadow: var(--unoc-focus-ring);
}

/* Fixed header offset for non-dark-hero pages ------------------------------ */
/* The nav is fixed, so inner pages with a light hero need top padding to
 * prevent content from sliding underneath the header. Dark-hero pages
 * (homepage and careers) keep the transparent header overlay. */
body:not(.unoc-dark-hero):not(.unoc-careers-dark-hero) .site-main {
  padding-top: 96px;
}

@media (max-width: 768px) {
  body:not(.unoc-dark-hero):not(.unoc-careers-dark-hero) .site-main {
    padding-top: 88px;
  }
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Eyebrow text contrast ---------------------------------------------------- */
/* Gold (#FFC808) on white fails WCAG contrast, so use charcoal text on light
 * backgrounds while keeping the gold accent line. Dark heroes and dark panels
 * retain the gold eyebrow. */
.unoc-redesigned-page .ey {
  color: var(--unoc-charcoal);
}

body.unoc-dark-hero .hero .ey,
body.unoc-careers-dark-hero .hero .ey,
.unoc-redesigned-page .dark .ey,
.unoc-redesigned-page .band .ey,
.unoc-redesigned-page .unoc-site-footer .ey {
  color: var(--unoc-yellow);
}

/* Local unoc8 mobile header and shared footer contrast correction. */
.unoc-shared-footer h4,
.unoc-shared-footer h5 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Who We Are: the statistics band uses a charcoal surface, so its labels and
 * values must stay readable even when Elementor's inline palette is present. */
body.page-id-145 main .unoc-stats,
body.page-id-145 main .unoc-stats .unoc-stat b,
body.page-id-145 main .unoc-stats .unoc-stat span,
body.page-id-145 main .unoc-stats .ey {
  color: #fff !important;
}

body.page-id-145 main .unoc-stats .unoc-stat b::after {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin: 12px 0;
  background: #ededed !important;
}

@media (max-width: 1024px) {
  .unoc-site-header .unoc-mobile-burger,
  .unoc-mobile-burger {
    color: #e51d48 !important;
  }

  .unoc-site-header .unoc-mobile-burger svg,
  .unoc-site-header .unoc-mobile-burger svg * {
    stroke: #e51d48 !important;
  }
}

/* Interior pages use the same readable mobile header treatment as the home
 * page: dark text on a white header, with the UNOC red menu control. */
@media (max-width: 1024px) {
  body.unoc-theme:not(.page-id-473) .unoc-site-header,
  body.unoc-theme:not(.page-id-473) header.unoc-site-header,
  body.unoc-theme:not(.page-id-473) nav.unoc-site-header {
    background: rgba(255,255,255,.98) !important;
    color: #414042 !important;
    border-color: rgba(65,64,66,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-site-header a,
  body.unoc-theme:not(.page-id-473) .unoc-site-header button,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-main-menu > li > a,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-nav-trigger {
    color: #414042 !important;
    -webkit-text-fill-color: #414042 !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-mobile-burger,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-mobile-burger svg,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-mobile-burger svg * {
    color: #e51d48 !important;
    stroke: #e51d48 !important;
    -webkit-text-fill-color: #e51d48 !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-mobile-menu,
  body.unoc-theme:not(.page-id-473) .unoc-mobile-nav,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .mobile-menu {
    background: #fff !important;
    color: #414042 !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-mobile-menu a,
  body.unoc-theme:not(.page-id-473) .unoc-mobile-nav a,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .mobile-menu a {
    color: #414042 !important;
    -webkit-text-fill-color: #414042 !important;
  }
}

/* Local unoc8 About page restoration: scoped to page 145, excluding homepage. */
body.page-id-145 .unoc-about-reference{background:#fff;color:#231f20}
body.page-id-145 .unoc-about-wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
body.page-id-145 .pghero{position:relative;background:linear-gradient(180deg,#fff 0%,#f6f5f3 100%);padding:34px 0 76px;overflow:hidden}
body.page-id-145 .pghero:after{content:"";position:absolute;right:-90px;top:30px;width:430px;height:560px;border:2px solid rgba(65,64,66,.08);border-radius:50%;transform:rotate(-18deg);pointer-events:none}
body.page-id-145 .crumbs{display:flex;gap:12px;margin:0 0 34px;font-size:13px;color:#5f5e60}
body.page-id-145 .crumbs a{color:#e10032;text-decoration:none}
body.page-id-145 .pghero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
body.page-id-145 .pghero h1{font:700 clamp(38px,5.2vw,64px)/1.04 Poppins,sans-serif;letter-spacing:-.03em;margin:20px 0 0;color:#231f20}
body.page-id-145 .pghero h1 em{font-style:normal;color:#e10032}
body.page-id-145 .pghero .lead{margin-top:22px;font-size:18px;line-height:1.65;max-width:520px;color:#5f5e60}
body.page-id-145 .unoc-tri{display:block;width:96px;height:4px;margin-top:18px;background:linear-gradient(90deg,#414042 0 62%,#e10032 62% 100%)}
body.page-id-145 .unoc-about-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
body.page-id-145 .unoc-about-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:6px;font:600 14px/1 Poppins,sans-serif;text-decoration:none}
body.page-id-145 .unoc-about-btn.primary{background:#e10032;color:#fff}.unoc-about-btn.outline{border:1.5px solid #414042;color:#414042}
body.page-id-145 .about-hero-image{aspect-ratio:3/2;border-radius:8px;background:url('/unoc8/wp-content/uploads/2026/10/unoc-about-hero-reference.png') center/cover no-repeat;box-shadow:18px 18px 0 #e10032;min-height:360px}
body.page-id-145 .unoc-about-contact-replacement{background:#242224;color:#fff;padding:72px 0;margin:0}
body.page-id-145 .unoc-about-contact-replacement h2{font:700 clamp(34px,4vw,56px)/1.05 Poppins,sans-serif;margin:16px 0;color:#fff}
body.page-id-145 .unoc-about-contact-replacement p{max-width:620px;color:#d6d4d7;font-size:18px;line-height:1.6}
body.page-id-145 .unoc-about-contact-replacement ul{max-width:760px;margin:34px 0 0;padding:0;list-style:none}.unoc-about-contact-replacement li{border-bottom:1px solid rgba(255,255,255,.24)}
body.page-id-145 .unoc-about-contact-replacement li a{display:flex;justify-content:space-between;padding:20px 0;color:#fff;text-decoration:none;font-size:18px}.unoc-about-contact-replacement li a span{color:#ff2b57}
@media(max-width:900px){body.page-id-145 .pghero-grid{grid-template-columns:1fr;gap:44px}body.page-id-145 .about-hero-image{min-height:280px}body.page-id-145 .unoc-about-wrap{width:min(100% - 32px,1200px)}}