/* =============================================================================
   HAIRZ OFFICIAL ACADEMY — BRAND SKIN
   -----------------------------------------------------------------------------
   This file is loaded AFTER main.css in every layout, so everything here is a
   deliberate override of the stock template. Nothing in main.css is edited apart
   from the webfont import, which keeps future template updates mergeable.

   Palette
     Blush Pink   #E8B7C8   hsl(339 52% 81%)   surfaces, washes, soft fills
     Charcoal     #2E2E2E   hsl(0 0% 18%)      type, header, footer, buttons
     Gold Accent  #C9A24D   hsl(41 53% 55%)    rules, icons, prices, details

   A note on contrast: the stock template puts white text on --base. Blush pink
   is a very light tint (L 81%), so white on it measures 1.74:1 — unreadable.
   Section 5 re-points every text-bearing --base fill at charcoal, which measures
   7.78:1. Gold is likewise too light for body text on white (2.4:1), so a
   deepened gold is used wherever gold type sits on a light background (5.04:1).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* --- Type ------------------------------------------------------------- */
    --heading-font: "Fraunces", "Georgia", "Times New Roman", serif;
    --body-font: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* --- Brand constants -------------------------------------------------- */
    --blush: 339 52% 81%;
    --blush-tint: 339 52% 97%;
    --blush-deep: 339 34% 62%;
    --charcoal: 0 0% 18%;
    --charcoal-soft: 0 0% 26%;
    --gold: 41 53% 55%;
    --gold-deep: 41 59% 34%; /* gold that passes AA as text on light ground */
    --base-ink: 339 44% 40%; /* blush deepened until it is legible AS text */

    /* Text colour for anything sitting on a blush/gold fill. */
    --on-base: 0 0% 12%;

    /* --- Re-pointed template tokens --------------------------------------- */
    --heading-color: 0, 0%, 15%;
    --body-color: 0, 0%, 32%;
    --border-color: 339 30% 89%;
    --background: 339, 45%, 98%;
    --footer-bg: 0, 0%, 18%;

    --card-bg: hsl(var(--blush-tint));
    --section-bg: hsl(var(--blush-tint));
    --header-bg: hsl(0 0% 100%);

    /* --- Shape -------------------------------------------------------------
       Ezersphere runs a uniform 16px radius with 4px buttons. This site uses a
       softer, rounder silhouette so the two read differently at a glance. */
    --border-radius: 22px;
    --border-radius-sm: 12px;
    --radius-pill: 999px;

    --box-shadow: 0 14px 38px hsl(var(--charcoal) / 0.08);
    --box-shadow-lift: 0 22px 54px hsl(var(--blush-deep) / 0.26);

    --gradient-bg: linear-gradient(118deg, hsl(var(--blush)) 0%, hsl(var(--gold)) 100%);
    --background-gradient: linear-gradient(118deg, hsl(var(--blush)) 0%, hsl(var(--gold)) 100%);
}


/* -----------------------------------------------------------------------------
   2. TYPOGRAPHY
   -----------------------------------------------------------------------------
   The stock template sets `body { font-family: var(--heading-font) }`, so every
   paragraph inherits the display face. Split them properly: Fraunces for
   headings only, Jost for running text.
   -------------------------------------------------------------------------- */

body {
    font-family: var(--body-font);
    background-color: hsl(var(--background));
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.title,
.hero-title {
    font-family: var(--heading-font);
    color: hsl(var(--heading-color));
    font-weight: 600;
    letter-spacing: -0.015em;
}

.hero-title,
h1 {
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* The template reuses .sub-title / .subtitle for two different jobs: short
   section kickers AND multi-line body copy inside cards. Styling them as
   uppercase eyebrows sets long descriptions in caps, which is unreadable — so
   these stay sentence case, and the eyebrow treatment is applied only where the
   text is known to be short (see .mission-section .subtitle below). */
.sub-title,
.subtitle {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* A short gold rule sits under every section heading block. */
.title-wrap {
    position: relative;
    padding-bottom: 18px;
}

.title-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, hsl(var(--gold)) 0%, hsl(var(--blush)) 100%);
}

.title-wrap.text-center::after,
.text-center .title-wrap::after {
    left: 50%;
    transform: translateX(-50%);
}


/* -----------------------------------------------------------------------------
   3. SHAPE LANGUAGE
   -----------------------------------------------------------------------------
   Pill buttons + deeper card radii. Ezersphere's buttons are 4px rectangles.
   -------------------------------------------------------------------------- */

.btn,
.btn--base,
.btn--sm,
.btn--ssm,
.btn--small,
.btn--base.outline,
.btn--base.outline-2 {
    border-radius: var(--radius-pill);
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn--base:hover,
.btn--base:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px hsl(var(--blush-deep) / 0.38);
}

.base-card,
.card,
.blog-item,
.premium-item {
    border-radius: var(--border-radius);
    border: 1px solid hsl(var(--border-color));
    background-color: hsl(0 0% 100%);
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.base-card:hover,
.blog-item:hover,
.premium-item:hover {
    transform: translateY(-6px);
    border-color: hsl(var(--blush));
    box-shadow: var(--box-shadow-lift);
}

.base-card img,
.blog-item img {
    border-radius: var(--border-radius-sm);
}


/* -----------------------------------------------------------------------------
   4. SURFACES
   -------------------------------------------------------------------------- */

/* Hero: a blush-to-gold wash rather than the stock orange/teal. */
.hero {
    background: linear-gradient(
        124deg,
        hsl(var(--blush) / 0.55) 0%,
        hsl(var(--blush-tint)) 46%,
        hsl(var(--gold) / 0.18) 100%
    );
}

.hero-subtitle {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
}

/* Alternating section grounds give the page a rhythm Ezersphere does not have. */
.key-section,
.testimonial-section {
    background-color: hsl(var(--blush-tint));
}

.premium,
.faq-section {
    background-color: hsl(0 0% 100%);
}

/* Section rhythm.
   The stock template gives sections a top padding only (.pt-120, and
   .category-section's 188px 0 0) and relies on the NEXT section's top padding
   to create the gap. That works while every section shares one background, but
   this skin alternates white and blush grounds — so without a bottom padding a
   card's last row butts straight into the next colour band. */
.premium,
.category-section,
.how-work,
.faq-section,
.key-section,
.testimonial-section,
.blog-section {
    padding-bottom: 120px;
}

@media (max-width: 767px) {
    .premium,
    .category-section,
    .how-work,
    .faq-section,
    .key-section,
    .testimonial-section,
    .blog-section,
    .mission-section {
        padding-bottom: 72px;
    }
}

/* Header — white resting, charcoal once stuck, with a blush hairline. */
.header {
    border-bottom: 1px solid hsl(var(--border-color));
}

.header.fixed-header {
    background: hsl(var(--charcoal)) !important;
    border-bottom: 2px solid hsl(var(--blush));
    box-shadow: 0 10px 30px hsl(var(--charcoal) / 0.22);
}

.header.fixed-header .main-menu a,
.header.fixed-header .login a {
    color: hsl(0 0% 100%);
}

/* Footer — charcoal ground, gold headings, blush links on hover. */
.footer-area {
    background-color: hsl(var(--footer-bg));
    color: hsl(0 0% 82%);
}

.footer-item__title {
    font-family: var(--heading-font);
    color: hsl(var(--gold));
    letter-spacing: 0.01em;
}

.footer-item__desc,
.footer-menu__item a,
.bottom-footer-text {
    color: hsl(0 0% 78%);
}

.footer-menu__item a {
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-menu__item a:hover,
.footer-menu__item a:focus {
    color: hsl(var(--blush));
    padding-left: 6px;
}

.bottom-footer {
    border-top: 1px solid hsl(0 0% 100% / 0.1);
}


/* -----------------------------------------------------------------------------
   5. CONTRAST GUARD
   -----------------------------------------------------------------------------
   Every selector below is one the stock template fills with a solid --base
   colour while painting its text white. With blush pink as --base that pairing
   is 1.74:1, so the text is re-pointed at charcoal (7.78:1).

   `!important` is used deliberately and only on `color`: several of these are
   hover/active states that the template declares late and at higher specificity,
   and a half-applied fix here would leave unreadable buttons.
   -------------------------------------------------------------------------- */

.bg--base,
.btn--sm,
.btn--ssm,
.btn--base,
.btn--base.outline:hover,
.btn--base.outline:focus,
.btn--base.outline-2:hover,
.btn--base.outline-2:focus,
.btn--copy.outline:hover,
.btn--copy.outline:focus,
.btn--copy.outline-2:hover,
.btn--copy.outline-2:focus,
.btn--base-2.outline:hover,
.btn--base-2.outline:focus,
.btn--base-2.outline-2:hover,
.btn--base-2.outline-2:focus,
.btn--base-3.outline:hover,
.btn--base-3.outline:focus,
.btn--base-3.outline-2:hover,
.btn--base-3.outline-2:focus,
.btn--small:hover,
.btn--small:focus,
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:active,
.base-card .dis-tag,
.header.fixed-header,
.bottom-app-bar .botton-bar,
.bottom-app-bar .botton-bar .tapTo-hom,
.hero-left-content .hero-grp-btn .hero-btn1,
.header-wrapper .count-item,
.header-wrapper-2 .count-item,
.search-box.header-search .form--control,
.search-box.header-search button.search-box__button,
.language-dropdown .language-dropdown-menu,
.blog-details__share ul li,
.blog-details__share ul li:hover,
.text-list.style-tag .text-list__link.active,
.text-list.style-tag .text-list__link:hover,
.text-list.style-category .text-list__item a span,
.sign-up_box .input-group .input-group-text,
.dashboard .dashboard-body__bar-icon,
.nice--select .option:hover,
.nice--select .option.selected.focus,
.nice--select .option.selected.focus:hover,
button.mfp-close,
.home-icon .btn,
.ecommerce-product__thumb .product-action-wrap .cart-btn:hover,
.ecommerce-product__thumb .product-action-wrap .cart-btn .tooltip,
.ecommerce-product__rating-view a:hover,
.form--control[type="file"]::file-selector-button:hover,
.search-form--control[type="file"]::file-selector-button:hover {
    color: hsl(var(--on-base)) !important;
}

/* The sticky header is the one exception: it is a charcoal bar, not a blush
   fill, so its contents stay white. */
.header.fixed-header,
.header.fixed-header a {
    color: hsl(0 0% 100%) !important;
}

/* Gold used as type on a light ground needs the deepened value. */
.text--base-two,
.price,
.course-price {
    color: hsl(var(--gold-deep));
}


/* -----------------------------------------------------------------------------
   6. PRELOADER — three-strand braid
   -----------------------------------------------------------------------------
   Markup: resources/views/presets/default/components/preloader.blade.php
   Replaces the stock rotating-square loader entirely.
   -------------------------------------------------------------------------- */

#loading {
    background-color: hsl(var(--charcoal));
}

#loading-center-absolute {
    height: 260px;
    width: 260px;
    margin-top: -130px;
    margin-left: -130px;
}

.braid-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.braid-loader__svg {
    width: 64px;
    height: 168px;
    overflow: visible;
}

/* Dark halo under each strand so crossings read as over-and-under. */
.braid-loader__halo path {
    fill: none;
    stroke: hsl(var(--charcoal));
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.braid-loader__strand {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* paths carry pathLength="100", so the dash maths is resolution-independent */
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: braid-weave 2.6s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

.braid-loader__strand--one   { stroke: hsl(var(--blush));  animation-delay: 0s; }
.braid-loader__strand--two   { stroke: hsl(var(--gold));   animation-delay: 0.18s; }
.braid-loader__strand--three { stroke: hsl(0 0% 96%);      animation-delay: 0.36s; }

@keyframes braid-weave {
    0%   { stroke-dashoffset: 100; }
    45%  { stroke-dashoffset: 0; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
}

.braid-loader__wordmark {
    font-family: var(--heading-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: hsl(var(--gold));
    text-align: center;
    max-width: 240px;
    line-height: 1.5;
    animation: braid-wordmark 2.6s ease-in-out infinite;
}

@keyframes braid-wordmark {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .braid-loader__strand,
    .braid-loader__wordmark {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}


/* -----------------------------------------------------------------------------
   7. MISSION & VISION SECTION
   -----------------------------------------------------------------------------
   Markup: resources/views/presets/default/sections/mission.blade.php
   A section the stock template does not ship, so it has no counterpart on the
   sister site.
   -------------------------------------------------------------------------- */

.mission-section {
    padding-bottom: 120px;
    background-color: hsl(var(--blush-tint));
}

/* Short, authored kicker — safe to set as a letterspaced gold eyebrow. */
.mission-section .subtitle {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    color: hsl(var(--gold-deep));
    margin-bottom: 10px;
}

.mission-card {
    position: relative;
    height: 100%;
    padding: 44px 38px;
    border-radius: var(--border-radius);
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(var(--border-color));
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow-lift);
}

/* A soft blush corner wash, mirrored on the vision card so the pair reads as
   a matched set rather than two identical boxes. */
.mission-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(var(--blush) / 0.55) 0%, transparent 70%);
    pointer-events: none;
}

.mission-card--vision::before {
    right: auto;
    left: -70px;
    background: radial-gradient(circle, hsl(var(--gold) / 0.3) 0%, transparent 70%);
}

.mission-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, hsl(var(--blush)) 0%, hsl(var(--gold) / 0.75) 100%);
    color: hsl(var(--on-base));
    font-size: 26px;
}

.mission-card--vision .mission-card__icon {
    background: linear-gradient(135deg, hsl(var(--gold)) 0%, hsl(var(--blush) / 0.8) 100%);
}

.mission-card__title {
    font-family: var(--heading-font);
    font-size: var(--heading-four);
    margin-bottom: 14px;
    color: hsl(var(--heading-color));
}

.mission-card__desc,
.mission-card__desc p {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 0;
}

/* Supporting value pillars beneath the two cards. */
.mission-values {
    margin-top: 46px;
}

.mission-value {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 26px 24px;
    border-radius: var(--border-radius-sm);
    background-color: hsl(0 0% 100% / 0.72);
    border: 1px solid hsl(var(--border-color));
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.mission-value:hover {
    border-color: hsl(var(--blush));
    background-color: hsl(0 0% 100%);
}

.mission-value__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    background-color: hsl(var(--blush) / 0.4);
    color: hsl(var(--gold-deep));
    font-size: 18px;
}

.mission-value__title {
    font-family: var(--heading-font);
    margin-bottom: 6px;
    color: hsl(var(--heading-color));
}

.mission-value__desc {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
    font-size: 0.94rem;
    line-height: 1.65;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .mission-card {
        padding: 32px 24px;
    }
}


/* -----------------------------------------------------------------------------
   8. INK — brand colour used AS TEXT
   -----------------------------------------------------------------------------
   Section 5 fixed text sitting ON blush fills. This is the mirror image: the
   template also uses --base as a foreground colour in 88 places (links, icons,
   active states). At L 81% that is 1.61:1 on the page ground — the "All
   Categories" link was effectively invisible.

   --base-ink is the same 339 hue taken down to L 40%, so it still reads as the
   brand rose but measures 7.07:1 on white. Gold as text gets the same treatment
   via --gold-deep (2.4:1 -> 5.04:1).

   Generated from main.css rather than hand-listed, so nothing was missed.
   -------------------------------------------------------------------------- */

    .section-heading .subtitle,
    .slick-arrow:hover,
    .photo_upload .container_area .image .delete,
    .text--base,
    a:hover,
    .btn--ssm:hover, .btn--ssm:focus,
    .btn--copy.outline,
    .btn--copy.outline-2,
    .btn--base-2.outline,
    .btn--base-2.outline-2,
    .btn--base-3.outline,
    .btn--base-3.outline-2,
    .btn--small,
    .base-card:hover .content-wrap .title,
    .base-card .content-wrap .product-status li i,
    .details-card1 .content-wrap .cart-btn,
    .details-card2 .key-wrap li i,
    .input--icon,
    #send-amount input[type="file"],
    .form--check .form-check-input:checked::before,
    .custom--modal .modal-icon i,
    .modal-btn-wrap button i,
    .btn-wrap button i,
    .modal-body .modal--header P span,
    .pagination .page-item .page-link.active, .pagination .page-item .page-link:hover,
    .btn-check:active + .btn, .btn-check:checked + .btn, .btn.active, .btn.show, .btn:active:hover,
    .input--floating a:hover,
    .offcanvas .offcanvas-body .side-Nav li .active,
    .offcanvas .search-box .search-btn,
    .category-card:hover .content-wrap .title,
    .price-cardBody .price-card-head h2,
    .footer-item .social-list__item .social-list__link,
    .footer-menu__link i,
    .footer-menu__link:hover,
    .subscribe-box .sub-btn i,
    .footer-contact-info i,
    .breadcumb__link:hover,
    .breadcumb-2__link:hover,
    .scroll-top svg,
    .scroll-top::after,
    .sidebar-menu-list__link.active .text,
    .sidebar-menu__close,
    .sidebar-menu-list__item.has-dropdown.active > a,
    .sidebar-menu-list__link:hover,
    .header-two .language-box i,
    .header-two .header-wrapper .ham__menu,
    .header-wrapper .ham__menu,
    .header-wrapper-2 .ham__menu,
    .mobile-search-box button i,
    .header.fixed-header .header-wrapper .menu-wrapper ul.main-menu a:hover,
    .header.fixed-header .header-wrapper .menu-wrapper ul.main-menu a.active,
    .language-box i,
    li.login-registration-list__item .social-list__item .social-list__link:hover,
    .section-content .section-link,
    .popup-video-wrap .play-video i,
    .login-box .login-meta .condition-text p a,
    .login-box .social-option p a,
    .login-left-section .content-wrap .title span,
    .product-info .info-wrap .key-wrap li i,
    .product-details .key .key-points-wrap li i,
    .product-details .key .curriculam-list .curriculum-item li .content-name .pre,
    .product-details .key .curriculam-list .curriculum-item li .content-name .pre-i,
    .product-details .key .curriculam-list .show-more,
    .ecommerce-product__content .price-wrap .product-price,
    .ecommerce-product__price-title span i,
    .ecommerce-product__rating-view .social-list__item,
    .about-bottom ul li p span,
    .about-bottom ul li,
    .project-details .quantity_box button i,
    .product-details__bottom ul li i,
    .search-box__button,
    .social-list__item .social-list__link:hover,
    .text-list.style-category .text-list__link:hover,
    .latest-blog__title a:hover,
    .contact-right-side ul li .icon-wrap i,
    .dashboard .dashboard_profile__details ul li a i,
    .dashboard .dashboard-card__link a:hover,
    .dashboard .dashboard-card__icon,
    .dashboard-header ul li .notification a i,
    .dashboard-header .home-mobile a i,
    .notification-dropdown .notification-dropdown-menu .notification-item-footer a p,
    .error__text span:nth-child(2),
    .lds-spinner,
    .sub-manu-active,
    .home-icon .btn:hover,
    .video-show .uploadvideo-icon i,
    .forgot-password,
    .unactive {
    color: hsl(var(--base-ink));
}

    .dashboard-product .content .tag,
    .input--floating .form--control,
    .input--floating .form--control:focus ~ .form--label,
    .input--floating .form--label,
    .dashboard-header ul li .search-box input,
    .dash-box h2 span {
    color: hsl(var(--gold-deep));
}

/* Dark grounds are the exception. On the charcoal footer and sticky header the
   light blush is already 7.78:1 while the deep ink would be 1.92:1, so those
   contexts keep the original blush. */
.footer-area a:hover,
.footer-area i,
.footer-area .social-list__link,
.footer-menu__link:hover,
.header.fixed-header .main-menu a:hover,
.header.fixed-header .main-menu a.active,
.header.fixed-header .ham__menu,
.header.fixed-header .language-box i {
    color: hsl(var(--blush));
}


/* -----------------------------------------------------------------------------
   9. STICKY HEADER — logo swap + gold-fill contrast
   -----------------------------------------------------------------------------
   The header is white at rest and charcoal once main.js adds .fixed-header, so
   the dark wordmark vanishes into it. header.blade.php now carries both marks
   and they swap here.
   -------------------------------------------------------------------------- */

.logo-wrapper .logo-inverse {
    display: none;
}

.header.fixed-header .logo-wrapper .logo-default {
    display: none;
}

.header.fixed-header .logo-wrapper .logo-inverse {
    display: inline-block;
}

/* Section 5 guarded text on --base fills but not --base-two. Gold is mid-tone:
   white on it is 2.4:1, charcoal on it is 5.66:1. The Sign In button is the
   visible offender, but every gold fill in the template has the same problem. */
.btn--base-2,
.btn--base-3,
.hero-left-content .hero-grp-btn .hero-btn2,
.login-registration-list__item a,
.purchase-action,
.nice--select .list,
.custom--modal .modal-content {
    color: hsl(var(--on-base)) !important;
}

/* Pill the Sign In button so it matches the rest of the button language. */
.login-registration-list__item a {
    border-radius: var(--radius-pill);
}

/* --- Sticky-bar exceptions -------------------------------------------------
   Section 5 paints every link in the sticky bar white (.header.fixed-header a,
   specificity 0-2-1 + !important). That outranks the gold-fill guard above, so
   the Sign In pill was landing back on white-on-gold at 2.38:1. Re-assert the
   charcoal ink at higher specificity. */
.header.fixed-header .login-registration-list__item a {
    color: hsl(var(--on-base)) !important;
}

/* The language picker is a <select>, not an <a>, so that white rule never
   reached it — main.css leaves it at pure black, which is invisible on the
   charcoal bar. */
.header.fixed-header .language-box .select {
    color: hsl(0 0% 100%);
}

/* main.css paints the option list with --dark in every header state, so the
   option text has to be light or the open dropdown is black on black. */
.language-box .select option {
    color: hsl(0 0% 100%);
    background-color: hsl(var(--charcoal));
}