/* ── AASA Validator: v2 theme overrides ──
   Scoped to the validator content area so the
   Bootstrap-based form renders correctly inside
   the dark v2 brand shell.                       */

/* Use WordPress theme-provided custom properties directly.
   Avoid redefining --wp--preset-* tokens here so footer/layout spacing
   stays aligned with the live site values. */

/* === Global reset against Bootstrap defaults in static/css/style.css === */
html {
  font-size: 16px !important;
}

body {
  background-color: #090113 !important;
  /* coffee-bean */
  color: #ffffff !important;
  font-family: var(--wp--preset--font-family--tt-hoves-pro) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Prevent legacy Bootstrap-era `footer { font-size: 14px; }` rules in style.css
   from changing the WordPress footer typography/metrics. */
.wp-site-blocks > footer.wp-block-template-part {
  font-size: 1rem !important;
}

/* Match live footer social icon scale and prevent flex/image shrink from legacy CSS. */
.wp-site-blocks .footer-social-icon-section .wp-block-image {
  margin: 0 !important;
  width: 46px !important;
  min-width: 46px !important;
  flex: 0 0 46px !important;
  background-color: transparent !important;
}

.wp-site-blocks .footer-social-icon-section .wp-block-image > a {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 0 !important;
  background-color: #cad5e218 !important;
}

.wp-site-blocks .footer-social-icon-section .wp-block-image > a img {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}

/* Header nav/button: keep text color stable on hover/focus/active and remove underline. */
.branch-header .wp-block-navigation-item__content,
.branch-header .wp-block-navigation-item__content:hover,
.branch-header .wp-block-navigation-item__content:focus,
.branch-header .wp-block-navigation-item__content:active {
  color: inherit !important;
  text-decoration: none !important;
}

.branch-header .wp-block-button__link.wp-element-button:hover,
.branch-header .wp-block-button__link.wp-element-button:focus,
.branch-header .wp-block-button__link.wp-element-button:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Hide header dropdown/mega-menu panels. Keep top-level nav items visible. */
.branch-header .wp-block-navigation .wp-block-navigation__submenu-container,
.branch-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  display: none !important;
}

.branch-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.branch-header .wp-block-navigation .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* === Main content area: dark brand hero background === */
main.ng-scope {
  background-color: #090113;
  /* coffee-bean */
  background-image: url('https://www.branch.io/wp-content/uploads/2026/01/digital-fabric-background-gradient-glow.svg');
  background-position: 50% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--tt-hoves-pro);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  padding-top: 60px;
  padding-bottom: 60px;
  min-height: 60vh;
}

/* Headings inside main default to white (v2 theme), overridden inside .well below */
main.ng-scope h1,
main.ng-scope h2,
main.ng-scope h3,
main.ng-scope h4,
main.ng-scope h5,
main.ng-scope h6 {
  color: #ffffff;
  font-family: inherit;
}

main.ng-scope p,
main.ng-scope label {
  color: #e8e0f4;
}
 
 

/* === Form card (well) – light card floating on dark bg === */
main.ng-scope .well {
  background-color: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(127, 34, 243, 0.12);
  margin-bottom: 0;
}

/* Re-darken text *inside* the white card */
main.ng-scope .well h1,
main.ng-scope .well h2,
main.ng-scope .well h3,
main.ng-scope .well h4,
main.ng-scope .well h5,
main.ng-scope .well h6 {
  color: #1D043B;
  font-family: inherit;
}

main.ng-scope .well p,
main.ng-scope .well label,
main.ng-scope .well .control-label {
  color: #333333;
}

main.ng-scope .well a {
  color: #580DB5;
}

main.ng-scope .well a:hover {
  color: #7F22F3;
}

main.ng-scope .validator-title {
  font-family: var(--wp--preset--font-family--tt-hoves-pro-expanded, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: #1D043B;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  line-height: 1.3;
  max-width: 760px; margin:0 auto 18px;
  text-transform: none !important;
}

main.ng-scope .form-control {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #ccc;
}

main.ng-scope .form-control:focus {
  border-color: #7F22F3;
  box-shadow: 0 0 0 3px rgba(127, 34, 243, 0.15);
}

/* === Test / Results buttons === */
main.ng-scope .new-button,
.section-get-started .new-button {
  background-color: #580DB5;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 10px 28px;
  font-family: var(--wp--preset--font-family--tt-hoves-pro-expanded, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

main.ng-scope .new-button:hover,
.section-get-started .new-button:hover {
  background-color: #7F22F3;
  color: #ffffff;
  text-decoration: none;
}

/* === Spacing: gap between form card and results section === */
main.ng-scope .container+.container {
  margin-top: 36px;
}

/* === Result alerts === */
main.ng-scope .alert {
  color: #333333;
  margin-top: 0;
  margin-bottom: 16px;
}

main.ng-scope .alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

main.ng-scope .alert-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

main.ng-scope .alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* === List-group result items === */
main.ng-scope .list-group-item {
  background-color: #ffffff;
  color: #333333;
  border-color: #e0e0e0;
}

main.ng-scope .list-group-item-success {
  background-color: #d4edda;
  color: #155724;
}

main.ng-scope .list-group-item-danger {
  background-color: #f8d7da;
  color: #721c24;
}

main.ng-scope .list-group-item-warning {
  background-color: #fff3cd;
  color: #856404;
}

/* === Pre / code blocks in results === */
main.ng-scope pre {
  background-color: #f5f5f5;
  color: #333333;
  border: 1px solid #e0e0e0;
  margin-top: 16px;
  border-radius: 8px;
  padding: 20px;
}

/* === Disclaimer footer row – always the last .container in main === */
main.ng-scope>.container:last-child h6,
main.ng-scope>.container:last-of-type h6 {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 400;
}

main.ng-scope>.container:last-child h6 a,
main.ng-scope>.container:last-of-type h6 a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

/* Ensure h6 inside .well stays dark */
main.ng-scope .well h6 {
  color: #666666;
}

/* === Links inside alert boxes === */
main.ng-scope .alert a {
  font-weight: 600;
}

main.ng-scope .alert-success a {
  color: #0a4b1a;
}

main.ng-scope .alert-warning a {
  color: #5c3d00;
}

main.ng-scope .alert-danger a {
  color: #4a0e10;
}

/* === Links inside error list-group rows === */
main.ng-scope .list-group-item a {
  color: #580DB5;
  margin-left: 6px;
  font-size: 0.9em;
}

main.ng-scope .list-group-item-danger a {
  color: #721c24;
}

main.ng-scope .list-group-item-warning a {
  color: #856404;
}

main.ng-scope .list-group-item-success a {
  color: #155724;
}

/* === Error header row – first danger li ("has some validation issues") === */
main.ng-scope .list-group>.list-group-item-danger:first-child {
  border-radius: 8px 8px 0 0;
  font-size: 1em;
  padding: 14px 16px;
  /* Cancel legacy icon/background from static/css/style.css to avoid text overlap. */
  background-color: #f8d7da !important;
  background-image: none !important;
}

/* === CTA section === */
/* Use body + !important to override the branch theme's teal color */
body .section-get-started {
  background-color: #1D043B !important;
  background-image: none !important;
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
  border-top: 1px solid rgba(127, 34, 243, 0.3);
}

body .section-get-started h1 {
  color: #ffffff;
  font-family: var(--wp--preset--font-family--tt-hoves-pro-expanded, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-weight: 600;
}

body .section-get-started p {
  color: rgba(255, 255, 255, 0.85);
}

body .section-get-started .new-button {
  border: 2px solid rgba(255, 255, 255, 0.6);
  background-color: transparent;
  color: #ffffff;
  letter-spacing: 1px;
  font-size: 13px;
  padding: 12px 36px;
}

body .section-get-started .new-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.color-white {
  color: #ffffff !important;
}

/* Footer uses live Branch theme styles directly. No local footer overrides. */