/*
    AGTS brand palette.

    The theme ships in crimson (#D3224D) with a yellow second accent. Everything
    that colour touches — buttons, links, the scrollbar, the scroll-to-top ring —
    is driven by the two custom properties below, so re-pointing them at the
    crest's own colours re-skins the site in one place. The rules after the
    palette exist only for the handful of spots where the theme hard-codes the
    crimson or its pink tint instead of reading the variable.

    Colours sampled from public/img/agtslogo.jpg:
        shield  #0001FC      border  #FEFF1F      cross  #FD0002
*/
:root {
    --agts-blue: #0D0DEE;
    --agts-blue-deep: #08088F;
    --agts-blue-ink: #06064B;
    --agts-yellow: #FFE81F;
    --agts-yellow-deep: #E3CB00;
    --agts-red: #FD0002;

    /* Theme variables, re-pointed. */
    --theme-color: var(--agts-blue);
    --theme-color2: var(--agts-yellow);
    --yellow-color: var(--agts-yellow);
    --error-color: var(--agts-red);

    /* Headings and dark surfaces: the crest's blue taken down to ink. */
    --title-color: #0A1240;
    --title-color2: #060B33;
    --title-color3: #070C2A;
    --title-color4: #101637;
    --black-color: #0A1240;
    --black-color2: #171D3E;
    --black-color8: #070C2A;

    /* Section tints. The theme's are warm pink; these are the same lightness
       shifted onto the blue and yellow. */
    --smoke-color: #F2F3FF;
    --smoke-color2: #F5F7FF;
    --smoke-color3: #FFFCEC;
}

/* The scrollbar track is the one place the crimson is written as an rgba
   literal rather than read from the variable. */
body::-webkit-scrollbar-track {
    background: rgba(13, 13, 238, 0.1);
}

html {
    scrollbar-color: var(--agts-blue) rgba(13, 13, 238, 0.12);
}

/* Section tints written as literals in the theme. */
.widget_info,
.contact-feature .box-icon,
.team-area,
.why-bg,
.faculty-area,
.accordion-card.style3 .accordion-button:not(.collapsed)::after,
.top-rated,
.process-area,
.feature-card,
.community-card2:nth-child(4) .community-icon,
.banner-area-1 {
    background-color: var(--smoke-color);
}

.team-author .box-content {
    background: var(--agts-blue);
}

/* Breadcrumb banner. The theme's version sits on campus photography; until
   that exists the banner carries the crest's blue rather than a stock navy. */
.breadcumb-wrapper {
    background-color: var(--agts-blue-ink);
    background-image: linear-gradient(120deg, var(--agts-blue-ink) 0%, var(--agts-blue) 100%);
}

.breadcumb-wrapper .breadcumb-title,
.breadcumb-wrapper .breadcumb-menu,
.breadcumb-wrapper .breadcumb-menu a,
.breadcumb-wrapper .breadcumb-menu li {
    color: var(--white-color);
}

.breadcumb-wrapper .breadcumb-menu a:hover {
    color: var(--agts-yellow);
}

/*
    Footer.

    footer-layout1 paints no background of its own — the theme's own demo puts
    one on the markup — so the whole footer was rendering on white with the
    layout's pale grey body colour and white widget titles, i.e. invisible.
    Giving it the crest's blue is what the palette below assumes: every accent
    inside the footer switches from blue to yellow, because blue-on-blue would
    disappear the same way.
*/
.footer-wrapper.footer-layout1 {
    background-color: var(--agts-blue);
    background-image: linear-gradient(165deg, var(--agts-blue) 0%, var(--agts-blue-deep) 100%);
    color: var(--white-color);

    --body-color: rgba(255, 255, 255, 0.85);
    --border-color: rgba(255, 255, 255, 0.28);
    --th-border-color: rgba(255, 255, 255, 0.45);
    --th-border-color3: rgba(255, 255, 255, 0.28);
}

.footer-layout1 .about-text,
.footer-layout1 .footer-widget.widget_nav_menu a,
.footer-layout1 .footer-widget.widget_nav_menu a:before,
.footer-layout1 .footer-info a,
.footer-layout1 .footer-links a,
.footer-layout1 .copyright-wrap .copyright-text {
    color: rgba(255, 255, 255, 0.85);
}

.footer-layout1 .footer-widget .widget_title {
    color: var(--white-color);
}

/* The dots between the bottom links read --theme-color, which is now the
   footer's own background. */
.footer-layout1 .footer-links li:not(:last-child)::after {
    background-color: var(--agts-yellow);
}

.footer-layout1 .footer-widget.widget_nav_menu a:hover,
.footer-layout1 .footer-widget.widget_nav_menu a:hover:before,
.footer-layout1 .footer-info a:hover,
.footer-layout1 .footer-links a:hover,
.footer-layout1 .copyright-wrap .copyright-text a {
    color: var(--agts-yellow);
}

.footer-layout1 .copyright-wrap .copyright-text a:hover {
    color: var(--white-color);
}

.footer-layout1 .footer-info a:hover .footer-info-icon {
    color: var(--agts-yellow);
    border-color: var(--agts-yellow);
}

.footer-layout1 .th-social a:hover {
    background-color: var(--agts-yellow);
    border-color: var(--agts-yellow);
    color: var(--agts-blue-ink);
}

/* The crest is a JPEG on a white ground. On blue that reads as a bare white
   rectangle, so give it a deliberate edge. */
.footer-layout1 .about-logo img {
    background-color: var(--white-color);
    padding: 10px 14px;
    border-radius: 8px;
}

/* A contact line that wraps ran its second line back under the icon. */
.footer-layout1 .footer-info a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.footer-layout1 .footer-info-icon {
    flex: 0 0 32px;
    margin-right: 0;
}

/* footer-layout1 zeroes the copyright padding because the theme's version of
   this row carries a full-height logo block that supplies its own. Ours does
   not, so the row needs its own breathing space. */
.footer-layout1 .copyright-wrap {
    padding: 24px 0;
    background-color: rgba(6, 6, 75, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* The scroll-to-top button is fixed at the bottom-right and lands on top of
   the last link in this row once the page is scrolled all the way down. */
@media (min-width: 992px) {
    .footer-layout1 .copyright-wrap .footer-links {
        padding-right: 50px;
    }
}

/*
    Header.

    The crest used to sit in a band of its own above the menu, and the theme
    sizes this row on that assumption: it gives the logo no height limit (the
    old band set one inline) and pulls the row up by 36px so it overhangs the
    hero beneath. With both rows merged into one strip, neither holds.
*/
.header-layout1 .menu-area {
    margin-bottom: 0;
    padding: 8px 0;
    background-color: var(--white-color);
    box-shadow: 0 1px 0 rgba(10, 18, 64, 0.10);
}

.header-layout1 .menu-area .header-logo img {
    max-height: 62px;
    width: auto;
}

.header-layout1 .sticky-wrapper.sticky .menu-area {
    padding: 4px 0;
    box-shadow: 0 4px 18px rgba(10, 18, 64, 0.12);
}

.header-layout1 .sticky-wrapper.sticky .menu-area .header-logo img {
    max-height: 48px;
}

/* The top strip is dark navy and the theme hovers its links to --theme-color,
   which is now a blue too close to that ground to read. */
.header-top .header-links a:hover {
    color: var(--agts-yellow);
}

/*
    The top strip carries more than the theme budgeted for: an email address on
    the left and a fourth portal link on the right. At the theme's 45px gaps the
    two groups need ~1285px, so they drop onto separate lines on any screen
    narrower than about 1500px. These tiers close the gap instead, and below
    1200px the location — the one item that is not a link and repeats in the
    footer and on the contact page — gives up its place to the email and phone.
*/
@media (max-width: 1499px) {
    .header-top .header-links li:not(:last-child) {
        margin-right: 24px;
    }

    .header-top .header-links li > i {
        margin-right: 7px;
    }

    .header-top .header-right-wrap li:not(:last-child) {
        margin-right: 22px;
    }

    .header-top .header-right-wrap li:not(:last-child)::after {
        right: -12px;
    }
}

@media (max-width: 1399px) {
    .header-top .header-links li {
        font-size: 15px;
    }

    .header-top .header-links li:not(:last-child),
    .header-top .header-right-wrap li:not(:last-child) {
        margin-right: 18px;
    }

    .header-top .header-right-wrap li:not(:last-child)::after {
        right: -10px;
    }
}

/* Below ~1300px the container steps down to 1140 while the strip still wants
   1258, so the location gives up its place here — it is the one item that is
   not a link, and it repeats in the footer and on the contact page. */
@media (max-width: 1299px) {
    .header-top .header-links > ul:not(.header-right-wrap) > li:first-child {
        display: none;
    }
}

/* At 992-1199 the container is 960 and the two groups still want ~961. */
@media (max-width: 1199px) {
    .header-top .header-links li {
        font-size: 14px;
    }

    .header-top .header-links li:not(:last-child),
    .header-top .header-right-wrap li:not(:last-child) {
        margin-right: 14px;
    }

    .header-top .header-right-wrap li:not(:last-child)::after {
        right: -8px;
    }
}

/*
    Home banner carousel.

    Carried over from the current live site. It runs on the theme's own
    `.th-slider`, so the sizing and the caption are all that is needed here —
    Swiper handles the rest.

    The caption sits over a gradient rather than the flat dark wash the old site
    used: these are photographs with bright skies, and white text on an
    unweighted image is unreadable across the top third of every one of them.
*/
.agts-carousel {
    position: relative;
    overflow: hidden;
}

.agts-carousel__slide {
    position: relative;
}

.agts-carousel__img {
    width: 100%;
    /* Tall enough to be a banner, capped so a wide monitor does not push the
       page's first real content below the fold. */
    height: clamp(320px, 62vh, 620px);
    object-fit: cover;
    object-position: center;
    display: block;
}

.agts-carousel__caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(6, 6, 75, 0.82) 0%, rgba(6, 6, 75, 0.55) 45%, rgba(6, 6, 75, 0.15) 100%);
}

.agts-carousel__inner {
    max-width: 760px;
    color: #fff;
}

.agts-carousel__kicker {
    display: inline-block;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--agts-yellow);
}

.agts-carousel__title {
    color: #fff;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.15;
    margin-bottom: 28px;
}

.agts-carousel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* The theme places .slider-pagination in the flow; over a banner it belongs on
   the image. */
.agts-carousel .slider-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 3;
    text-align: center;
}

/* Bottom right, as a pair. Centred vertically at the sides they sat on top of
   the heading, which runs the full width of the caption on the first slide. */
.agts-carousel .slider-arrow {
    position: absolute;
    /* The theme anchors these with top/left/margin-top and a --pos-x of -120px,
       which parks them outside the slider for the carousels it ships. All three
       have to be unset, not just overridden with a bottom. */
    top: auto;
    left: auto;
    margin-top: 0;
    bottom: 24px;
    z-index: 4;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.3s ease, color 0.3s ease;
}

.agts-carousel .slider-arrow:hover {
    background: var(--agts-yellow);
    color: var(--title-color);
}

.agts-carousel .slider-prev {
    right: 80px;
}

.agts-carousel .slider-next {
    right: 24px;
}

/* On a phone the arrows sit on top of the words; the bullets are enough. */
@media (max-width: 767px) {
    .agts-carousel .slider-arrow {
        display: none;
    }

    .agts-carousel__caption {
        background: linear-gradient(180deg, rgba(6, 6, 75, 0.55) 0%, rgba(6, 6, 75, 0.85) 100%);
    }
}

/*
    The hero, when the carousel sits above it.

    .hero-style1 carries padding: 180px 0 229px, which exists because the theme's
    hero normally sits directly beneath a transparent header that overlaps it -
    the top padding is clearance for the menu. With the banner carousel above it
    that clearance is doubled up and reads as a gap between the two.

    Scoped to the adjacent case rather than changing .hero-style1 outright, so
    the padding is still correct if the carousel is ever removed.
*/
.agts-carousel + .th-hero-wrapper .hero-style1 {
    padding-top: 80px;
    /* The bottom padding is 229px (210px under 1299px), and the section that
       follows carries its own 120px of --section-space on top of it - close to
       350px of nothing between the two. Dropped to zero so the gap is the
       theme's ordinary section rhythm, the same as everywhere else on the page,
       rather than that rhythm plus a hero's worth of clearance. */
    padding-bottom: 0;
}

@media (max-width: 991px) {
    .agts-carousel + .th-hero-wrapper .hero-style1 {
        padding-top: 60px;
    }
}

@media (max-width: 575px) {
    .agts-carousel + .th-hero-wrapper .hero-style1 {
        padding-top: 48px;
    }
}

/*
    unDraw illustrations on programme and faculty cards.

    The theme sizes .program-item .box-img at 372px with object-fit: cover,
    which is right for the photography it ships with and wrong for a line
    illustration — cover crops the drawing to a corner of itself. These sit
    contained, on a tinted panel, with room to breathe.
*/
.program-item .box-img.program-illustration {
    background-color: #F3F5FF;
    padding: 36px;
}

.program-item .box-img.program-illustration a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* All three of width, height and object-fit have to be restated: the theme sets
   them on the same element for its photographs. */
.program-item .box-img.program-illustration img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* Named agts- rather than .faculty-card: the theme already ships a
   .faculty-card component for staff profiles, with its own image, title and
   button rules. Reusing that name meant this tile inherited them, and the
   illustration came out with no height at all. */
.agts-faculty-tile {
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.agts-faculty-tile:hover {
    border-color: var(--agts-blue) !important;
    box-shadow: 0 10px 30px rgba(6, 6, 75, 0.08);
}

/* The selector carries the tag and both classes on purpose. The theme's reset
   has `img:not([draggable]) { max-width: 100%; height: auto }`, and :not() takes
   the specificity of its argument - so that rule is 0,1,1 and beats a lone
   class. With a single class only object-fit was getting through, and the
   illustrations kept their natural heights, so no two cards lined up. */
.agts-faculty-tile img.agts-faculty-tile__img {
    display: block;
    margin-inline: auto;
    height: 130px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/*
    Rich text bodies.

    News articles and staff biographies are written in an editor in schmanager
    and arrive here as markup. Until they did, .article-body only needed
    white-space: pre-line to keep the line breaks of plain text — which, once
    the content became HTML, added the newlines between tags on top of the
    paragraph margins and double-spaced the lot. That rule is gone and this
    gives the elements the editor actually produces somewhere to stand.
*/
.article-body > *:first-child {
    margin-top: 0;
}

.article-body > *:last-child {
    margin-bottom: 0;
}

.article-body p {
    margin-bottom: 1.1em;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    color: var(--title-color);
}

.article-body ul,
.article-body ol {
    margin-bottom: 1.1em;
    padding-left: 1.4em;
}

.article-body ul {
    list-style: disc;
}

.article-body ol {
    list-style: decimal;
}

.article-body li {
    margin-bottom: 0.4em;
}

.article-body a {
    color: var(--agts-blue);
    text-decoration: underline;
}

.article-body a:hover {
    color: var(--agts-blue-deep);
}

/* No blockquote rule here on purpose. The theme styles blockquote already -
   quote mark, padding, cite - and a border-left plus padding of our own fought
   that layout and clipped the first character of the quotation. */

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1em 0;
}

.article-body table {
    width: 100%;
    margin-bottom: 1.2em;
}

.article-body table td,
.article-body table th {
    border: 1px solid #e4e6ed;
    padding: 8px 12px;
}