/* Scoutletic brand design system — 2026-09-23
   Canonical palette and font-family rules. Loaded after sl-main.css and sl-typography.css. */
:root{
  --sl-blue:#04455d;
  --sl-bright:#35d7e8;
  --sl-light:#19aadf;
  --sl-black:#000000;
  --sl-white:#ffffff;
  --sl-text:#000000;
  --sl-muted:rgba(0,0,0,.68);
  --sl-border:rgba(4,69,93,.16);
  --sl-surface:#ffffff;
  --sl-surface-soft:rgba(25,170,223,.055);
  --sl-font-body:'Scoutletic-Web-Regular-Embedded',Arial,sans-serif;
  --sl-font-heading:'Scoutletic-Web-Regular-Embedded',Arial,sans-serif;
  --bs-primary:#04455d;
  --bs-primary-rgb:4,69,93;
  --bs-link-color:#04455d;
  --bs-link-color-rgb:4,69,93;
  --bs-link-hover-color:#19aadf;
  --bs-link-hover-color-rgb:25,170,223;
}
html,body,button,input,select,textarea,p,a,li,label,small,blockquote,table,th,td{
  font-family:var(--sl-font-body)!important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
main h1,main h2,main h3,main h4,main h5,main h6{
  font-family:var(--sl-font-heading)!important;
  font-style:normal;
  font-synthesis:none;
}
body{color:var(--sl-text)!important;background:var(--sl-white)!important;}
main:not(.text-light) p,main:not(.text-light) li{color:inherit;}
a{color:var(--sl-blue);}
a:hover{color:var(--sl-light);}

/* Standard light-section text */
main .site-heading h1,main .site-heading h2,main .site-heading h3,
main .scoutletic-split-section h1,main .scoutletic-split-section h2,main .scoutletic-split-section h3,
main .value-card h1,main .value-card h2,main .value-card h3,
main .pricing-card h1,main .pricing-card h2,main .pricing-card h3,
main .sl-about-role-chip h3{color:var(--sl-black)!important;}
main .scoutletic-split-section p,main .value-card p,main .sl-about-role-chip p,
main .site-heading p{color:var(--sl-muted)!important;}

/* Brand accents */
main .eyebrow,main .pricing-eyebrow,main .inner-hero-copy>span,
main .sl-role-price strong{color:var(--sl-light)!important;}
main em:not(.plain),main .hero-about h1 em,main .hero-contact h1 em,
main .contact-photo-hero h1 em{color:var(--sl-bright)!important;}

/* Buttons and interactive brand controls */
.btn.btn-style-one,.btn-style-one,.attr-nav .button a,.scout-final-cta .btn:not(.light){
  background:var(--sl-blue)!important;border-color:var(--sl-blue)!important;color:var(--sl-white)!important;
}
.btn.btn-style-one:hover,.btn-style-one:hover,.attr-nav .button a:hover{
  background:var(--sl-light)!important;border-color:var(--sl-light)!important;color:var(--sl-white)!important;
}
.btn-outline,.btn-outline-primary{
  color:var(--sl-blue)!important;border-color:var(--sl-blue)!important;
}
.btn-outline:hover,.btn-outline-primary:hover{
  color:var(--sl-white)!important;background:var(--sl-blue)!important;border-color:var(--sl-blue)!important;
}
:focus-visible{outline:3px solid var(--sl-bright)!important;outline-offset:2px;}

/* Cards, borders and soft surfaces */
.value-card,.pricing-card,.sl-about-role-chip,.faq-style-one .accordion-item,
.contact-form,.contact-info-card{border-color:var(--sl-border)!important;}
.bg-gray,.bg-light{background-color:var(--sl-surface-soft)!important;}

/* Dark/brand sections: use only canonical SL blue + approved accents. */
.bg-dark,.scoutletic-footer,.scout-final-cta{background-color:var(--sl-blue)!important;}
.bg-dark,.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark p,
.scoutletic-footer,.scoutletic-footer a,.scoutletic-footer p,
.scout-final-cta,.scout-final-cta h2,.scout-final-cta p{color:var(--sl-white)!important;}

/* Inner heroes */
main.inner-page .hero-about,
main.inner-page .hero-faq{
  background:linear-gradient(135deg,var(--sl-blue) 0%,var(--sl-blue) 52%,var(--sl-light) 145%)!important;
}
main.inner-page .hero-about .inner-hero-copy h1,
main.inner-page .hero-faq .inner-hero-copy h1,
main.inner-page .hero-contact .inner-hero-copy h1,
main.inner-page .contact-photo-hero .inner-hero-copy h1{color:var(--sl-white)!important;}
main.inner-page .hero-about .inner-hero-copy>span,
main.inner-page .hero-contact .inner-hero-copy>span,
main.inner-page .contact-photo-hero .inner-hero-copy>span{color:var(--sl-bright)!important;}

/* Navigation / active states */
.navbar .navbar-nav>li>a{color:var(--sl-black);}
.navbar .navbar-nav>li>a:hover,.navbar .navbar-nav>li.active>a{color:var(--sl-light)!important;}

/* Form accents */
.form-control:focus,.form-select:focus{border-color:var(--sl-light)!important;box-shadow:0 0 0 .2rem rgba(53,215,232,.18)!important;}

/* Preserve explicit white CTA variants. */
.btn.btn-style-one.light,.scout-final-cta .btn.light,.hero-about .about-hero-btn{
  background:var(--sl-white)!important;border-color:var(--sl-white)!important;color:var(--sl-blue)!important;
}
.btn.btn-style-one.light:hover,.scout-final-cta .btn.light:hover,.hero-about .about-hero-btn:hover{
  background:var(--sl-bright)!important;border-color:var(--sl-bright)!important;color:var(--sl-blue)!important;
}

/* Font policy: Bold face is reserved ONLY for the SCOUTLETIC wordmark in header/footer/mobile menu. */
html,body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,a,li,label,small,strong,b,em,blockquote,table,th,td,
.h1,.h2,.h3,.h4,.h5,.h6,main h1,main h2,main h3,main h4,main h5,main h6{
  font-family:'Scoutletic-Web-Regular-Embedded',Arial,sans-serif!important;
}
header .navbar-brand .scoutletic-name,
header .sl-brand-mobile .scoutletic-name,
footer .scoutletic-name{
  font-family:'Scoutletic-Web-Main-Bold-Embedded',Arial,sans-serif!important;
  font-weight:700!important;
  font-style:normal!important;
  font-synthesis:none!important;
}
/* Keep homepage hero artwork visible while retaining the standardized SL blue fallback. */
.banner-style-one.bg-dark.bg-cover{background-color:var(--sl-blue)!important;}


/* ============================================================
   GLOBAL BUTTON STANDARD — Scoutletic
   Default: white / SL blue. Hover: SL blue / white.
   Applied after legacy component rules so every page is consistent.
   ============================================================ */
:where(a.btn, .btn, a.btn-style-one, .btn-style-one, .attr-nav .button > a,
       .scout-final-cta .btn, .about-hero-btn, .contact-hero-btn,
       button:not(.navbar-toggle), input[type="button"], input[type="submit"], input[type="reset"]){
  background:#ffffff!important;
  background-color:#ffffff!important;
  color:#04455d!important;
  border-color:#04455d!important;
  box-shadow:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
:where(a.btn, .btn, a.btn-style-one, .btn-style-one, .attr-nav .button > a,
       .scout-final-cta .btn, .about-hero-btn, .contact-hero-btn,
       button:not(.navbar-toggle), input[type="button"], input[type="submit"], input[type="reset"]):hover,
:where(a.btn, .btn, a.btn-style-one, .btn-style-one, .attr-nav .button > a,
       .scout-final-cta .btn, .about-hero-btn, .contact-hero-btn,
       button:not(.navbar-toggle), input[type="button"], input[type="submit"], input[type="reset"]):focus,
:where(a.btn, .btn, a.btn-style-one, .btn-style-one, .attr-nav .button > a,
       .scout-final-cta .btn, .about-hero-btn, .contact-hero-btn,
       button:not(.navbar-toggle), input[type="button"], input[type="submit"], input[type="reset"]):active{
  background:#04455d!important;
  background-color:#04455d!important;
  color:#ffffff!important;
  border-color:#04455d!important;
}
/* Keep icons/arrows inheriting the same foreground color as their button. */
:where(a.btn, .btn, a.btn-style-one, .btn-style-one, .attr-nav .button > a,
       .scout-final-cta .btn, .about-hero-btn, .contact-hero-btn) i,
:where(a.btn, .btn, a.btn-style-one, .btn-style-one, .attr-nav .button > a,
       .scout-final-cta .btn, .about-hero-btn, .contact-hero-btn) svg{
  color:inherit!important;
  fill:currentColor;
}

/* ============================================================
   FINAL GLOBAL BUTTON POLICY — 2026-09-23
   Every CTA/action button: white + SL blue; hover/focus: SL blue + white.
   Navigation toggles and FAQ accordion controls are intentionally excluded.
   ============================================================ */
html body a.btn,
html body button.btn,
html body input.btn,
html body a.btn-style-one,
html body button.btn-style-one,
html body a.btn-simple,
html body .navbar .attr-right .attr-nav li.button > a,
html body .scout-final-cta a.btn,
html body a.about-hero-btn,
html body a.contact-hero-btn,
html body button.btn-outline,
html body button.btn-glow,
html body input[type="submit"],
html body input[type="button"],
html body input[type="reset"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #04455d !important;
  border: 2px solid #04455d !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
html body a.btn:hover,
html body button.btn:hover,
html body input.btn:hover,
html body a.btn-style-one:hover,
html body button.btn-style-one:hover,
html body a.btn-simple:hover,
html body .navbar .attr-right .attr-nav li.button > a:hover,
html body .scout-final-cta a.btn:hover,
html body a.about-hero-btn:hover,
html body a.contact-hero-btn:hover,
html body button.btn-outline:hover,
html body button.btn-glow:hover,
html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body input[type="reset"]:hover,
html body a.btn:focus,
html body button.btn:focus,
html body a.btn-style-one:focus,
html body a.btn-simple:focus,
html body .navbar .attr-right .attr-nav li.button > a:focus {
  background: #04455d !important;
  background-color: #04455d !important;
  color: #ffffff !important;
  border-color: #04455d !important;
}
/* Disable legacy animated button overlays that can visually cover the standardized colors. */
html body .btn-style-one::before,
html body .btn-style-one::after,
html body .btn-simple::before,
html body .btn-simple::after,
html body .navbar .attr-right .attr-nav li.button > a::before,
html body .navbar .attr-right .attr-nav li.button > a::after {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
html body a.btn i, html body button.btn i,
html body a.btn-style-one i, html body a.btn-simple i,
html body a.btn svg, html body button.btn svg,
html body a.btn-style-one svg, html body a.btn-simple svg,
html body .navbar .attr-right .attr-nav li.button > a i,
html body .navbar .attr-right .attr-nav li.button > a svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* === SCOUTLETIC CANONICAL BUTTON OVERRIDE v3 === */
html body .btn:not(.navbar-toggle),
html body a.btn:not(.navbar-toggle),
html body button.btn:not(.navbar-toggle),
html body .btn-style-one,
html body a.btn-style-one,
html body .btn-style-two,
html body a.btn-style-two,
html body .btn-simple,
html body a.btn-simple,
html body .attr-nav li.button > a,
html body input[type="submit"],
html body input[type="button"],
html body input[type="reset"] {
  background-image: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #04455d !important;
  border-color: #04455d !important;
  border-style: solid !important;
  border-width: 2px !important;
  text-decoration: none !important;
}
html body .btn:not(.navbar-toggle):hover,
html body a.btn:not(.navbar-toggle):hover,
html body button.btn:not(.navbar-toggle):hover,
html body .btn-style-one:hover,
html body a.btn-style-one:hover,
html body .btn-style-two:hover,
html body a.btn-style-two:hover,
html body .btn-simple:hover,
html body a.btn-simple:hover,
html body .attr-nav li.button > a:hover,
html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body input[type="reset"]:hover,
html body .btn:not(.navbar-toggle):focus,
html body .btn:not(.navbar-toggle):active {
  background-image: none !important;
  background: #04455d !important;
  background-color: #04455d !important;
  color: #ffffff !important;
  border-color: #04455d !important;
}
html body .btn:not(.navbar-toggle) *,
html body .btn-style-one *,
html body .btn-style-two *,
html body .btn-simple *,
html body .attr-nav li.button > a * { color: inherit !important; }
html body .btn-style-one::before, html body .btn-style-one::after,
html body .btn-style-two::before, html body .btn-style-two::after,
html body .btn-simple::before, html body .btn-simple::after,
html body .attr-nav li.button > a::before, html body .attr-nav li.button > a::after { display:none !important; content:none !important; }

/* About role cards: preserve colors on hover; motion only */
.sl-about-roles .sl-about-role-chip:hover,
.sl-about-roles .sl-about-role-chip:focus,
.sl-about-roles .sl-about-role-chip:active {
  background: #f2f8f9 !important;
  color: #000000 !important;
  border-color: #d8e7ea !important;
}
.sl-about-roles .sl-about-role-chip:hover h3,
.sl-about-roles .sl-about-role-chip:focus h3,
.sl-about-roles .sl-about-role-chip:active h3,
.sl-about-roles .sl-about-role-chip:hover p,
.sl-about-roles .sl-about-role-chip:focus p,
.sl-about-roles .sl-about-role-chip:active p {
  color: #000000 !important;
}
.sl-about-roles .sl-about-role-chip:hover > .sl-sport-icon,
.sl-about-roles .sl-about-role-chip:focus > .sl-sport-icon,
.sl-about-roles .sl-about-role-chip:active > .sl-sport-icon {
  filter: none !important;
}
.sl-about-roles .sl-about-role-chip:hover {
  transform: translateY(-6px) !important;
}

/* Index role tabs: animation only, never change colors on hover/focus/active */
.sl-roles-section .sl-role-tab,
.sl-roles-section .sl-role-tab:hover,
.sl-roles-section .sl-role-tab:focus,
.sl-roles-section .sl-role-tab:focus-visible,
.sl-roles-section .sl-role-tab:active,
.sl-roles-section .sl-role-tab.active,
.sl-roles-section .sl-role-tab.active:hover,
.sl-roles-section .sl-role-tab.active:focus,
.sl-roles-section .sl-role-tab.active:active {
  background: transparent !important;
  color: #405d68 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.sl-roles-section .sl-role-tab {
  transition: transform .22s ease !important;
}
.sl-roles-section .sl-role-tab:hover {
  transform: translateY(-3px) !important;
}
.sl-roles-section .sl-role-tab:active {
  transform: translateY(-1px) !important;
}
.sl-roles-section .sl-role-tab .sl-icon-img {
  filter: none !important;
  opacity: 1 !important;
}

/* Index role tabs: animation only, never change colors on hover/focus/active */
.sl-roles-section .sl-role-tab,
.sl-roles-section .sl-role-tab:hover,
.sl-roles-section .sl-role-tab:focus,
.sl-roles-section .sl-role-tab:focus-visible,
.sl-roles-section .sl-role-tab:active,
.sl-roles-section .sl-role-tab.active,
.sl-roles-section .sl-role-tab.active:hover,
.sl-roles-section .sl-role-tab.active:focus,
.sl-roles-section .sl-role-tab.active:active {
  background: transparent !important;
  color: #405d68 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.sl-roles-section .sl-role-tab { transition: transform .22s ease !important; }
.sl-roles-section .sl-role-tab:hover { transform: translateY(-3px) !important; }
.sl-roles-section .sl-role-tab:active { transform: translateY(-1px) !important; }
.sl-roles-section .sl-role-tab .sl-icon-img { filter:none !important; opacity:1 !important; }

/* Features profile navigation: animation only, never recolor on hover/active/focus */
.sl-profile-tab,
.sl-profile-tab:hover,
.sl-profile-tab:focus,
.sl-profile-tab:active,
.sl-profile-tab.active,
.sl-profile-tab.active:hover,
.sl-profile-tab.active:focus {
  background: transparent !important;
  color: #52656d !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.sl-profile-tab:hover { transform: translateX(6px) !important; }
.sl-profile-tab:focus,
.sl-profile-tab:active,
.sl-profile-tab.active { transform: none !important; }
.sl-profile-tab .sl-icon-img,
.sl-profile-tab:hover .sl-icon-img,
.sl-profile-tab:focus .sl-icon-img,
.sl-profile-tab:active .sl-icon-img,
.sl-profile-tab.active .sl-icon-img {
  filter: none !important;
  opacity: 1 !important;
}

/* Scoutletic marketing/app authentication-aware header */
.sl-auth-nav>ul{display:flex!important;align-items:center;gap:12px;margin:0;padding:0;list-style:none}.sl-auth-nav .sl-auth-login a{display:inline-flex;align-items:center;justify-content:center;color:#04455d!important;font-weight:700;text-decoration:none;white-space:nowrap;padding:10px 4px}.sl-auth-nav .sl-auth-login a:hover{opacity:.72}.sl-auth-nav [hidden]{display:none!important}@media(max-width:1199px) and (min-width:992px){.sl-auth-nav>ul{gap:8px}.sl-auth-nav .sl-auth-login a{font-size:14px}.sl-auth-nav .btn{padding-left:15px!important;padding-right:15px!important}}@media(max-width:991px){.sl-auth-nav>ul{gap:8px}.sl-auth-nav .sl-auth-login a{font-size:14px}.sl-auth-nav .btn{padding:10px 14px!important;font-size:13px!important}.sl-auth-nav .btn i{display:none!important}}

/* Auth navigation contrast: match standard header menu colors */
@media (min-width: 992px) {
  nav.navbar.validnavs.no-background:not(.sticked) .sl-auth-nav .sl-auth-login > a {
    color: #fff !important;
  }
  nav.navbar.validnavs.sticked .sl-auth-nav .sl-auth-login > a,
  nav.navbar.validnavs:not(.no-background) .sl-auth-nav .sl-auth-login > a {
    color: #04455d !important;
  }
}
@media (max-width: 991px) {
  .sl-auth-nav .sl-auth-login > a {
    color: #04455d !important;
  }
}

/* Mobile authentication link inside slide-out menu */
.sl-mobile-auth{display:none!important}
@media (max-width:991px){
  .collapse-mobile .navbar-nav .sl-mobile-auth{display:block!important}
  .collapse-mobile .navbar-nav .sl-mobile-auth[hidden]{display:none!important}
  .collapse-mobile .navbar-nav .sl-mobile-auth>a{color:#04455D!important;font-weight:700!important}
}