/* =========================================================================
   International Trainer - brand tokens & helpers
   Navy #0B2685 · Blue #1456C8 (primary) · Light blue #2F7BE5
   Orange #F39C12 (accent) · Dark orange #E07B00
   Loaded after the theme CSS by the admin panel, portals and public pages.
   ========================================================================= */
:root {
    --it-navy: #0B2685;
    --it-navy-deep: #081B5E;
    --it-blue: #1456C8;
    --it-blue-light: #2F7BE5;
    --it-blue-50: #E8F0FC;
    --it-blue-100: #C7D9F6;
    --it-orange: #F39C12;
    --it-orange-dark: #E07B00;
    --it-orange-50: #FEF3E2;
}

/* Accent helpers */
.text-brand-navy { color: var(--it-navy) !important; }
.text-brand-blue { color: var(--it-blue) !important; }
.text-brand-orange { color: var(--it-orange-dark) !important; }
.bg-brand-navy { background-color: var(--it-navy) !important; }
.bg-brand-blue { background-color: var(--it-blue) !important; }
.bg-brand-orange { background-color: var(--it-orange) !important; }
.bg-brand-orange-soft { background-color: var(--it-orange-50) !important; }
.bg-brand-gradient { background: linear-gradient(135deg, var(--it-navy) 0%, var(--it-blue) 100%) !important; }

.btn-accent,
.btn-accent:visited {
    background-color: var(--it-orange);
    border-color: var(--it-orange);
    color: #ffffff !important;
}
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
    background-color: var(--it-orange-dark) !important;
    border-color: var(--it-orange-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .2rem rgba(243, 156, 18, .25);
}

/* Short orange underline used under section titles (matches the logo rule) */
.brand-rule {
    display: inline-block;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--it-orange);
}

/* Bootstrap primary hover/focus on the brand navy */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--it-navy) !important;
    border-color: var(--it-navy) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--it-blue) !important;
    border-color: var(--it-blue) !important;
    color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   Trainer photo slideshow (story style): crossfading photos with a slow zoom,
   synced captions and progress segments. Two slides, 14s loop.
   Markup: .it-slides > .it-slide x2 (background-image inline)
           .it-captions > .it-caption x2, .it-progress > span x2
   ------------------------------------------------------------------------- */
.it-slides {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: var(--it-navy-deep);
    z-index: 0;
}
.it-slides .it-slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: itSlideFade 14s ease-in-out infinite;
    will-change: opacity, transform;
}
.it-slides .it-slide:nth-child(2) { animation-delay: -7s; }
.it-slides::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(8, 27, 94, 0.25) 0%, rgba(8, 27, 94, 0.55) 50%, rgba(8, 27, 94, 0.92) 100%);
}
@keyframes itSlideFade {
    0%   { opacity: 0; transform: scale(1.08); }
    7%   { opacity: 1; }
    50%  { opacity: 1; }
    57%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1); }
}

.it-captions {
    position: relative;
    min-height: 64px;
}
.it-captions .it-caption {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    animation: itCaption 14s ease-in-out infinite;
}
.it-captions .it-caption:nth-child(2) { animation-delay: -7s; }
@keyframes itCaption {
    0%   { opacity: 0; transform: translateY(10px); }
    7%   { opacity: 1; transform: translateY(0); }
    46%  { opacity: 1; transform: translateY(0); }
    52%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; }
}

.it-progress {
    display: flex;
    gap: 10px;
}
.it-progress span {
    position: relative;
    flex: 0 0 56px;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
}
.it-progress span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #ffffff;
    animation: itProgress 14s linear infinite;
}
.it-progress span:nth-child(2)::after { animation-delay: -7s; }
@keyframes itProgress {
    0%     { width: 0; opacity: 1; }
    50%    { width: 100%; opacity: 1; }
    50.5%  { width: 100%; opacity: 0; }
    100%   { width: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .it-slides .it-slide,
    .it-captions .it-caption,
    .it-progress span::after { animation: none; }
    .it-slides .it-slide:first-child,
    .it-captions .it-caption:first-child { opacity: 1; transform: none; }
    .it-progress span:first-child::after { width: 100%; }
}