/* Chakwal IT House - the only bespoke CSS in the project.
   Everything else is the licensed template's own classes. Keep this file small. */

/* Brand palette - retones the template's lime accent to the logo's orange/gold.
   Contrast: #f89010 on #313e3b is 4.8:1 (AA), but only 2.3:1 on white - so the
   bright accent is for backgrounds and icons, never small text on a light ground.
   --cith-accent-ink is the darker tint for that (5.0:1 on white). */
:root {
    --base-color: #f89010;
    --yellow: #f8c000;
    --cith-accent-ink: #a85c00;
}

/* Accent text on a light ground uses the accessible ink... */
.text-base-color {
    color: var(--cith-accent-ink);
}

/* ...while icons, and anything sitting on one of the dark grounds, keep the
   bright brand orange, where it has the contrast to carry it. */
i.text-base-color,
.review-star-icon.text-base-color,
footer .text-base-color,
.bg-dark-gray .text-base-color,
.bg-gradient-aztec-green .text-base-color,
.bg-gradient-deep-zuccini-green .text-base-color,
.page-title-big-typography .text-base-color,
.text-white .text-base-color {
    color: var(--base-color);
}

/* Logo - a stacked lockup, so it needs more height than the template's 39px cap or the
   wordmark goes unreadable. Transparent ground reads on both the dark hero and the
   white sticky header, so one file serves all three logo slots. */
.navbar-brand .cith-logo {
    max-height: 58px;
    width: auto;
    height: auto;
    transition: max-height .3s ease-in-out;
}

header.sticky .navbar-brand .cith-logo {
    max-height: 46px;
}

@media (max-width: 991px) {
    .navbar-brand .cith-logo,
    header.sticky .navbar-brand .cith-logo {
        max-height: 44px;
    }
}

.cith-logo-footer {
    max-height: 78px;
    width: auto;
    height: auto;
}

/* Header phone number. The template colours `.widget-text` but not the <a> inside, which
   kept the global medium-gray - 3.2:1 on the dark hero, so it read as disabled. Scoped to
   the un-stuck header; once it turns white the template's own rule is right. */
header:not(.sticky-active) .widget-text a {
    color: var(--white);
}

header:not(.sticky-active) .widget-text a i {
    color: var(--base-color);
}

/* The template markup asks for this tint behind the phone icon but no stylesheet in the
   build defines it, so the circle was invisible. */
.bg-base-color-transparent {
    background-color: rgba(248, 144, 16, .16);
}

/* The submenu chevrons are <button>, not the template's <i role="button">, so they focus and
   respond to Enter. Undoes the button chrome, and hides them on desktop - the template's
   `.nav-item>i` is an element selector a button escapes. No `.navbar` ancestor, because the
   template's script clones the menu outside the header for the phone panel. */
.navbar-nav .dropdown-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

/* Bootstrap's caret, which would sit next to the chevron glyph the class already draws. */
.navbar-nav .dropdown-toggle::after {
    display: none;
}

/* The header CTA is the site's primary action and shipped at 12px/500 - smaller than the
   nav links next to it. Dark ink on brand orange is 4.8:1, so it passes AA at this size. */
.header-icon .header-button .btn.btn-small {
    font-size: 15px;
    font-weight: 700;
    padding: 14px 30px;
}

/* Courses mega menu - combines the template's `dropdown-with-icon` (icon rows, but
   pinned at 310px) with `submenu-content` (full-width panel). These rules only undo
   the fixed width and reconcile where the two disagree. Selectors carry an extra
   class to outrank the template's own. */
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu.submenu-content {
    width: 100%;
    padding: 0;
}

/* The template centres icon rows because its icon dropdown is a narrow single column.
   In a four-column panel they have to start at the left edge instead. */
.navbar .navbar-nav .dropdown.dropdown-with-icon .submenu-content li {
    justify-content: flex-start;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon .submenu-content li.sub-title {
    border-top: 0;
}

/* The icon column is sized for line-icon glyphs at 36px. Bootstrap Icons are drawn
   on a tighter body and would sit oversized next to the caption, so they get a
   size of their own. */
.navbar .navbar-nav .dropdown.dropdown-with-icon .submenu-content li a i {
    width: 30px;
    font-size: 21px;
}

/* Some template decorations have the original lime baked into the PNG, so retoning
   the CSS variables leaves them behind. This shifts such a graphic onto the brand
   orange/gold. Only put it on flat decorative shapes - never on a photograph,
   which it would wreck. Values solved against #d5d52b -> the logo's gold. */
.cith-recolor-accent {
    filter: saturate(1.3) hue-rotate(-30deg);
}

/* Initial badge for reviews by real named people we have no photograph of.
   A stock portrait next to a real name would misrepresent them. */
.cith-initial {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
    background: var(--base-color);
    color: var(--dark-gray);
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon-font WOFF2 overrides. icon.min.css is a vendor file shipping no .woff2, so
   browsers pulled the .woff - 1.1 MB for icomoon alone. Redeclared here because
   cith.css loads last and the later @font-face wins on matching descriptors.
   The .eot/.svg/.ttf variants are pruned - don't reference them. */

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon.woff2) format("woff2"),
         url(../fonts/icomoon.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: feather;
    src: url(../fonts/feather.woff2) format("woff2"),
         url(../fonts/feather.woff) format("woff");
    font-display: block;
}

@font-face {
    font-family: themify;
    src: url(../fonts/themify.woff2) format("woff2"),
         url(../fonts/themify.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* Image sizing. Container-sized <img> carry width/height so the browser reserves
   the box before bytes arrive (CLS). Icons with a CSS-pinned height (.h-70px,
   .h-95px) deliberately carry none - a width attribute against an auto CSS width
   would stretch them. */

/* Icon art panel - stands in for photography CITH doesn't have yet, and the stock
   that shipped with the template was actively wrong (a doctor in scrubs on graphic
   design). Same 3:2 box a photo would take, so a real one replaces it with no
   layout work. */
.cith-card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
}

.cith-card-art i {
    font-size: 74px;
    line-height: 1;
}

/* Team cards: a monogram where the portrait goes. Taller than the card art because
   team-style-05 expects a 600x756 portrait crop. */
.cith-team-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
}

.cith-team-art span {
    font-size: 84px;
    line-height: 1;
}

/* The detail-page banner is the same idea in a wider, shorter box. */
.cith-page-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 6px;
}

.cith-page-art i {
    font-size: 96px;
    line-height: 1;
}

/* The photograph behind the icon. Available photography is licensed stock that doesn't
   depict what CITH teaches, so it sits under the brand gradient at low opacity with the
   course icon on top - atmosphere, not a claim. object-fit keeps the crop centred, so a
   real classroom photo of any size drops in later. */

.cith-art-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slightly desaturated so the stock's colours do not fight the brand wash.
       Drop this line along with the stock, once the photos are CITH's own. */
    filter: grayscale(.2);
}

/* The brand wash over the photograph. A marker class rather than :has(), so the
   rule is plain and works everywhere. Dark enough that the brand orange icon and
   the white title keep their contrast whatever the photograph underneath is
   doing - that has to hold for a replacement photo nobody has seen yet. */
.cith-art-has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(49, 62, 59, .62) 0%, rgba(49, 62, 59, .84) 100%);
}

/* The icon is an earlier sibling than ::after, so without this the wash paints
   over it. */
.cith-art-has-photo i {
    position: relative;
    z-index: 1;
}

@media (max-width: 575px) {
    .cith-card-art i { font-size: 60px; }
    .cith-page-art i { font-size: 68px; }
}

/* Content images arrive at whatever size the client supplied (course art is a mix
   of 600x385 and 600x425, article art is unconstrained), so a fixed width/height
   pair cannot match every file. Pinning the ratio in CSS and
   cropping to fill makes the reserved box exact and the card grid even. */
.cith-media-3x2 {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Floating WhatsApp button - the one colour not from a brand token, since WhatsApp
   fix their own green. White on #25d366 is 2.4:1, hence the 28px glyph: large-scale
   graphics are exempt from the AA text ratio. Kept clear of .scroll-progress. */
.cith-whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
    transition: transform .3s ease-in-out;
}

.cith-whatsapp-float:hover,
.cith-whatsapp-float:focus {
    color: #fff;
    transform: scale(1.08);
}

/* The button occupies the bottom 76px of the viewport, and on a phone the footer's last
   row of links runs the full width - so "Terms" sat underneath it and could not be tapped
   on any page. Clear the landing zone rather than move the button. */
@media (max-width: 991px) {
    footer {
        padding-bottom: 100px;
    }
}

/* Tile on a dark ground. The template's .bg-white-transparent-very-light (.2 alpha) lifts
   the panel enough that the brand orange on it drops to 2.8:1, under the 3:1 that
   non-text UI graphics need. Half the white puts the icon back at 3.8:1. */
.cith-tile-dark {
    background-color: rgba(255, 255, 255, .1);
    transition: background-color .3s ease-in-out;
}

.cith-tile-dark:hover,
.cith-tile-dark:focus {
    background-color: rgba(255, 255, 255, .18);
}

/* Skip link - _Layout's first focusable element. Without these rules it shows as a
   visible link on every page. Off-screen until focused. */

.cith-skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--base-color);
    color: var(--dark-gray);
    font-family: var(--alt-font);
    font-weight: 600;
    text-decoration: none;
}

.cith-skip-link:focus {
    left: 0;
}

/* The menu button is four 22x2px bars, so its box is 22x14 - the most-tapped control on
   the site and half the 24px WCAG minimum. A centred pseudo-element gives it a 46px hit
   area without moving the bars, which matters because five media queries reposition this
   button and changing its own box would have to be undone in each. */
.navbar-toggler::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
}

/* Filtered-out course cards on /courses/. Isotope hides a card with opacity:0 and
   scale(0.001) - visually gone but still in the tab order, so filtering to "Design"
   leaves a keyboard user tabbing through invisible links. Costs the fade-out, since
   visibility isn't transitionable; the fade-in still runs. */

.portfolio-wrapper .grid-item[style*="opacity: 0"] {
    visibility: hidden;
}

/* Tab strips on a phone. tab-style-04 stacks below 768px, turning the course tabs
   and the eight-category filter into 280px of what reads as a menu. One scrollable
   row keeps them reading as tabs. responsive.min.css sets inline-block/table on
   these, so both go back to flex before nowrap means anything - hence the doubled
   class to outweigh it. Centring lives here rather than on Bootstrap's
   justify-content-center, which is !important and centred a strip wider than the screen -
   pushing overflow off both ends, and scrollLeft cannot go negative. */
.tab-style-04 .nav-tabs.cith-scroll-tabs {
    justify-content: center;
}

/* Scrolling headline band (_MarqueeText). Autoplay never stops, and WCAG 2.2.2 wants
   motion over five seconds pausable - with no script to add a control, the moving
   layer is hidden for reduced-motion users. visibility not display, so the band
   keeps its height and the heading over it doesn't move. */

@media (prefers-reduced-motion: reduce) {
    .cith-marquee .swiper {
        visibility: hidden;
    }
}

@media (max-width: 767px) {
    .tab-style-04 .nav-tabs.cith-scroll-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* width matters as much as flex here: responsive.min.css gives `.nav-tabs li` a
       width of 100%, and flex-basis:auto then defers to it - so every category sat one
       full screen apart and reaching "For children" took nine swipes. */
    .tab-style-04 .nav-tabs.cith-scroll-tabs > li {
        display: block;
        width: auto;
        flex: 0 0 auto;
        margin: 0;
        padding: 0 15px;
    }
}

/* Honeypot (_SpamTrap). Moved off screen rather than display:none or visibility:hidden,
   because the bots worth catching skip anything the browser would not render. */
.cith-spam-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}