/* WP-B/C/E: preserve the existing palette, copy, imagery and route destinations. */
/* ============================================================
   Type scale — single source of truth for heading/body sizes.
   Base: body { font-size: 16px } in main.css, so 1rem = 16px.
   FONT-05: introduced to normalize font-size drift across legacy
   component CSS (main.css) without touching that file directly.
   Values chosen to match the sizes already dominant on the site,
   so wiring these up here is a no-op until a selector opts in below.
   ============================================================ */
:root {
    --fs-hero: 4.6875rem;     /* 75px  - homepage hero heading */
    --fs-display: 3.75rem;    /* 60px  - large feature/stat headings */
    --fs-h1: 2.5rem;          /* 40px  - page-level h1 */
    --fs-section: 2.25rem;    /* 36px  - section headings (peers: featured courses, skill benchmarking, testimonials) */
    --fs-h3: 1.875rem;        /* 30px  - sub-section headings */
    --fs-h4: 1.5rem;          /* 24px  - card/block headings */
    --fs-h5: 1.125rem;        /* 18px  - small headings/labels */
    --fs-h6: 1rem;            /* 16px  - micro headings */
    --fs-body: 1rem;          /* 16px  - body text */
    --fs-small: 0.875rem;     /* 14px  - meta/secondary text */
    --fs-caption: 0.75rem;    /* 12px  - captions/fine print */
}

/* FONT-05: homepage top-of-page headings normalized to the type scale above.
   Fixes visible drift between the hero (75px), the unstyled Bootstrap-default
   "Featured Courses" / "Skill Benchmarking" headings (~40px / ~28px), and the
   testimonials heading (35px) — these four are peers in the page hierarchy
   (hero, then three section intros) and should read as one consistent family. */
.professional__education--left h2 { font-size: var(--fs-hero); }
.gallery-title,
.skill-benchmarking-section h3,
.testimonials__heading h1,
.testimonials__heading h3 { font-size: var(--fs-section); }

/* FONT-05b: sitewide outlier normalization — only selectors whose size was
   NOT already on the type scale above are listed here (most of the site
   already clusters around 14/16/18/24/30/36/40/60px; these are the real
   drift cases). Verified each selector's class is used in live (non-commented)
   Blade markup before adding an override — main.css itself is untouched. */
h4 { font-size: var(--fs-h3); }                                    /* 28 -> 30 */
.schedule__session--left h2 { font-size: var(--fs-hero); }         /* 98 -> 75 */
.sub__hero--main h2 { font-size: var(--fs-display); }               /* 65 -> 60 */
.start__reasons--block .commen__head h3 { font-size: var(--fs-h1); }/* 48 -> 40 */
.start__reasons--countbox h3 { font-size: var(--fs-h1); }           /* 48 -> 40 */
.how__being--block h3 { font-size: var(--fs-h1); }                  /* 48 -> 40 */
.company__top--right h6 { font-size: var(--fs-h4); }                /* 26 -> 24 */
.course__objective h5 { font-size: var(--fs-h4); }                  /* 22 -> 24 */
.course__generic h5 { font-size: var(--fs-h4); }                    /* 22 -> 24 */
.spread__accross--block h4 { font-size: var(--fs-h4); }             /* 22 -> 24 */
.ceo__contant--heading h1 { font-size: var(--fs-section); }         /* 38 -> 36 */
.coe--detail-popup h1 { font-size: var(--fs-h3); }                  /* 32 -> 30 */

/* FONT-06: weight normalization. Same investigation as FONT-05, but for
   font-weight rather than font-size — these are all still "objektiv-mk1"
   (confirmed: no other font-family is declared anywhere in the site's CSS),
   but wildly different weights on visually-adjacent elements reads as
   "the fonts don't match" even though it's technically one typeface. */
.testimonials__heading h3 { font-weight: 700; }   /* was 800 */
.gallery-title { font-weight: 700; }              /* was unstyled -> Bootstrap default ~500 */
.skill-benchmarking-section h3 { font-weight: 700; } /* was unstyled -> Bootstrap default ~500 */
/* .gpt_ask_btn label weight fixed at the source: fw-semibold -> fw-bold in welcome.blade.php */

/* FONT-06b: footer column headings ("Company" / "Follow Us" / "Contact Us")
   are peers but only "Company" ever got styled as part of the nav redesign —
   the other two were left at their original 13px caption-style treatment.
   Unify all three so the footer reads as one design, not two. */
.footer-company-navigation h5,
.footer__contact--social h5,
.footer__contact h5 {
    font-size: var(--fs-h5);   /* 18px */
    font-weight: 700;
    color: #08190c;
}

/* INTERACTION-01: course-category filter buttons had no transition, so
   hover/active state changed instantly while every other button on the site
   (.primary__btn, .medium__btn) animates over 0.3s. Match that. */
.filter-button,
.category-btn { transition: all 0.25s ease; }

/* CARD-01: course cover images are user-uploaded and vary a lot in quality —
   some are full-bleed photos, some are thin logo graphics with a lot of
   built-in white space. The card template/box itself is already uniform
   (.dashboard__mycourse--image is a fixed 195px box with object-fit: cover),
   so this doesn't fix sparse source images, but gives them a branded tinted
   backdrop instead of looking like blank/broken white space. */
.dashboard__mycourse--image { background: #E8F1DF; }

/* WP-C follow-up: GPT prompt card given its own surface — updated to
   Surface Soft 1 (#E8F1DF), the confirmed palette's standard soft-green
   tint (same tone used by the search box and the audience-strip originally),
   replacing the earlier off-palette #acde89. Button wording is data-driven
   per selected course category (see .gpt-category-text swap in main.js)
   and is untouched. Body text kept on brand ink — contrast against this
   lighter surface is comfortably above AA either way. */
.gpt-prompt-card { background: #E8F1DF; }
.gpt-prompt-card #gpt_desc { color: #223310; }

/* HDR-strip: audience-strip redesigned as a segmented control — dark green
   bar, white links, and the current page's link gets an inverted white
   pill so visitors can see which audience view they're in. Overrides the
   original light-green/dark-text treatment in public-navigation.css. */
.audience-strip { background: #223310; }
.audience-strip nav { padding-top: 4px; padding-bottom: 4px; }
.audience-strip .audience-link {
    display: inline-block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
}
.audience-strip .audience-link:hover { background: rgba(255, 255, 255, 0.15); }
.audience-strip .audience-link.active { background: #ffffff; color: #223310; }
.audience-strip .audience-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.footer-solutions-navigation { padding: 0 0 28px; }
.footer-solutions-navigation a { display: inline-block; margin: 0 28px 12px 0; }
.mobile-audience-links { border-top: 1px solid #BCC7B1; margin-top: 12px; padding: 12px 8px; display: grid; gap: 16px; }
.mobile-audience-links a { color: #28332C; font-size: 14px; }
.audience-hero { background: #E8F1DF; padding: 80px 0; }
.audience-eyebrow { font-size: 14px; font-weight: 700; color: #28332C; margin-bottom: 20px; }
.audience-page h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.12; color: #223310; max-width: 760px; margin-bottom: 24px; }
.audience-intro { max-width: 640px; font-size: 20px; line-height: 1.65; margin-bottom: 30px; }
.audience-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.audience-benefits { padding: 64px 0; }
.audience-benefit { padding: 28px; border: 1px solid #BCC7B1; border-radius: 12px; }
.audience-benefit > i { display: block; font-size: 28px; color: #69AE21; margin-bottom: 24px; }
.audience-benefit h2, .audience-contact h2 { font-size: 25px !important; line-height: 1.3 !important; margin-bottom: 16px; }
.audience-benefit p { line-height: 1.7; margin-bottom: 0; }
.audience-benefit > a { display: inline-flex; margin-top: 20px; }
/* Continuous smooth-scroll testimonials track. .testimonial--carosel holds
   two back-to-back copies of the same cards (see testimonials.blade.php);
   sliding it exactly -50% lands on the start of the second copy, so the
   loop point is exact rather than approximate. */
.testimonial-track { overflow: hidden; }
.testimonial--carosel {
    display: inline-flex;
    gap: 24px;
    padding: 20px 0;
    margin: 0;
    animation: testimonial-scroll 45s linear infinite;
}
.testimonial--carosel:hover, .testimonial--carosel:focus { animation-play-state: paused; }
.testimonial--carosel .testimonial--item { flex: 0 0 380px; }
@keyframes testimonial-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .testimonial--carosel { animation: none; }
}
/* Plans and Pricing: these are static info cards, not a form control, so
   "selecting" one just means hover/keyboard-focus — highlight it clearly. */
.Pricing .card { transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; }
.Pricing .card:hover, .Pricing .card:focus-visible { transform: translateY(-10px) scale(1.03); box-shadow: 0 16px 32px rgba(34, 51, 16, 0.25); }
.Pricing .card:focus-visible { outline: 2px solid #69AE21; outline-offset: 3px; }
.audience-contact { padding-bottom: 64px; }
.audience-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; border-radius: 16px; background: #E8F1DF; }
.audience-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; flex-shrink: 0; }
.company-related { display: flex; flex-wrap: wrap; gap: 20px 32px; padding-top: 24px; padding-bottom: 40px; }
.hero__section .bringing__intelligence--banner { position: relative; isolation: isolate; }
.hero__section .bringing__intelligence--banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(34,51,16,.78), rgba(34,51,16,.25)); pointer-events: none; }
#pricing, #plan-and-price { scroll-margin-top: 110px; }
.home__features--list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home__features--list > li { width: auto; min-width: 0; }
.course-gallery .owl-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.course-gallery .owl-nav button.owl-prev, .course-gallery .owl-nav button.owl-next { position: static; transform: none; width: 44px; height: 44px; margin: 0; }
.btn-close:focus-visible, .carousel__button:focus-visible, .owl-nav button:focus-visible,
.audience-page a:focus-visible { outline: 2px solid #223310; outline-offset: 4px; }
@media (max-width: 919.98px) {
    .audience-hero { padding: 40px 0; }
    .audience-intro { font-size: 18px; }
    .audience-contact-inner { display: block; padding: 24px; }
    .audience-actions { margin-top: 24px; }
    .course-category-chips { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px; }
    .course-category-chips .category-btn { flex: 0 0 auto; white-space: nowrap; margin: 0 !important; }
    .home__features--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home__features--list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .home__features--list > li:last-child:nth-child(odd) .commen__link { position: static; }
    .home__features--list > li:last-child:nth-child(odd) { padding-bottom: 24px; text-align: center; }
}
.audience-page .secondary__btn { max-width: 100%; white-space: normal; }
@media (max-width: 575px) {
    .audience-page .secondary__btn { padding-left: 20px; padding-right: 20px; }
}
.audience-benefit h2, .audience-contact h2 { color: #223310; }
/* Reference button geometry; retain existing brand fills and destinations. */
.primary__btn, .secondary__btn, .audience-outline-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px; padding: 12px 22px; min-height: 44px;
    font-size: 14.5px; font-weight: 800; line-height: 1.4; text-align: center;
}
.audience-outline-btn { border: 1.5px solid #223310; color: #223310; }
/* Without this, the site-wide `a:hover { color: #3ba4ff }` (main.css) wins on hover. */
.audience-outline-btn:hover, .audience-outline-btn:focus-visible { color: #223310; border-color: #69AE21; }
.public-header .header__search, .public-header #searchBox { border-radius: 999px; }
.audience-benefits .row { row-gap: 24px; }
.audience-benefits .audience-section-title { margin-bottom: 28px; font-size: 30px; }
.primary__btn::after { position: static; flex-shrink: 0; }
.public-header .pub-search { border-radius: 999px; }
.public-header .header__signup > a { border-radius: 999px; }
/* Shape-matched to .medium__btn (the "Enroll" button) at the requester's
   ask — colors/sizing untouched, only the corner radius changes. */
.public-header .header__signup--btn { display: inline-flex; align-items: center; border-radius: 30px; min-height: 44px; font-weight: 800; }