/* ==========================================================================
   Site wide UI corrections

   Three faults that show on every page carrying the component, plus the
   numbered list change. Kept in its own file, loaded last, because theme.css
   and site-ui.css are replaced by an external sync and would take any fix
   made inside them with it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The promo band heading was invisible: dark on dark

   `.sya-discount-title` sits on a #3f3832 band and theme.css sets it to
   white, but site-ui.css then paints every heading inside a section with
   `body#bg .section-full h1 ... h6 { color: var(--site-ink) !important }`.
   That rule has both !important and higher specificity, so the heading
   rendered #352f2a on #3f3832: a contrast ratio of 1.15 to 1, which is to
   say invisible. 22 headings across 12 pages.
   -------------------------------------------------------------------------- */
body#bg .sya-discount-title,
body#bg .sya-discount-content,
body#bg .section-full .sya-discount-title,
body#bg .section-full .sya-discount-content,
body#bg .content-area .sya-discount-title,
body#bg .content-area .sya-discount-content {
    color: #fff !important;
}

body#bg .section-full .sya-discount-content p,
body#bg .sya-discount-content p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* the Note pill on the same band was white on #c39458, which is 2.73 to 1.
   Dark ink on the gold reads at 4.6 to 1 and keeps the pill gold. */
body#bg .sya-discount-badge,
body#bg .section-full .sya-discount-badge,
.sya-discount-badge {
    color: #35302a !important;
}

/* --------------------------------------------------------------------------
   2. Icons inside the coloured icon tiles were invisible

   site-ui.css darkens `.text-white` inside a section, which is right for
   body copy that would otherwise be white on white, but it also caught the
   icon sitting inside a solid brown tile. The mask fill of `.hicon` is
   `currentColor`, so the arrow inherited the darkened colour and rendered
   #625a53 on #7b6d61: 1.35 to 1.

   Setting the fill on the icon itself sidesteps the whole inheritance chain
   and only needs to beat `.hicon { background-color: currentColor }`.
   -------------------------------------------------------------------------- */
body#bg .bg-primary .hicon,
body#bg .bg-secondary .hicon,
body#bg .icon-bx-xs .hicon,
body#bg .icon-bx-sm .hicon,
body#bg .icon-bx-md .hicon,
body#bg .med-policy-icon .hicon {
    background-color: #fff !important;
}

/* the same tiles may hold a Font Awesome or Line Awesome glyph rather than a
   mask icon, and that one does read `color`. The selector is padded to
   outweigh site-ui's `.text-white:not(...)` chain, which carries five
   classes of its own. */
body#bg .section-full .bg-primary .icon-cell.text-white,
body#bg .section-full .icon-bx-xs .icon-cell.text-white,
body#bg .section-full .med-policy-card .med-policy-icon .icon-cell.text-white,
body#bg .content-area .bg-primary .icon-cell.text-white {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Section rhythm and heading sizes

   Every section carried 72px of padding top and bottom, so two stacked
   sections put 144px of empty space between their content. On a page with
   fourteen sections that is close to 2000px of nothing. 50px matches what
   the mobile breakpoint already uses, so the two now agree.

   Headings had drifted apart as well: 44px for h1, 34px for most h2s and 38px
   for the photo section's, which made one section heading visibly larger than
   its neighbours for no reason. One scale for each level.
   -------------------------------------------------------------------------- */
/* Same selector as site-ui.css uses, deliberately. It sets
   `body#bg .section-full { padding: 72px 0 !important }`, which beats an
   ordinary declaration however specific, and even beats an inline style.
   Matching the selector exactly and loading later wins the tie, and it
   catches every section rather than only those carrying `.content-inner`,
   which several do not. */
body#bg .section-full,
body#bg .page-content > .content-area,
body#bg .section-full.content-inner,
body#bg .content-area.content-inner {
    padding-bottom: 50px !important;
    padding-top: 50px !important;
}

body#bg .sya-life {
    padding-bottom: 54px !important;
    padding-top: 50px !important;
}

body#bg .sya-discount-banner-section {
    padding-bottom: 34px !important;
    padding-top: 34px !important;
}

/* the gap under a section heading was set for the larger type */
body#bg .section-head,
body#bg .sya-life-head {
    margin-bottom: 26px;
}

body#bg .section-full h1,
body#bg .content-area h1,
body#bg .section-full .container h1 {
    font-size: clamp(28px, 3.1vw, 38px);
    line-height: 1.22;
}

body#bg .section-full h2,
body#bg .content-area h2,
body#bg .section-full .container h2,
body#bg .sya-life .sya-life-head h2 {
    font-size: clamp(23px, 2.5vw, 30px);
    line-height: 1.25;
}

body#bg .section-full h3,
body#bg .content-area h3 {
    font-size: clamp(18px, 1.7vw, 20px);
    line-height: 1.35;
}

/* the ornament was spaced for the old heading size */
body#bg .section-full .container :is(h1, h2)::after,
body#bg .sya-life-head h2::after,
body#bg .content-area > .container > h1::after {
    margin-bottom: 12px;
    margin-top: 16px;
}

@media (max-width: 767px) {
    body#bg .section-full,
    body#bg .page-content > .content-area,
    body#bg .section-full.content-inner,
    body#bg .content-area.content-inner,
    body#bg .sya-life {
        padding-bottom: 40px !important;
        padding-top: 40px !important;
    }

    body#bg .section-head,
    body#bg .sya-life-head {
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   Organic Healthy Food strip

   That tab describes chapati, rice, daal, seasonal vegetables, salad and
   yoghurt, then showed one photograph of rice. Three pictures side by side
   cover what the paragraph actually claims. A fixed two by two would strand
   the third, so the first photo spans the row and the other two share the
   one below it.
   -------------------------------------------------------------------------- */
body#bg .sya-food-strip,
.sya-food-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body#bg .sya-food-strip > figure,
.sya-food-strip > figure {
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(63, 56, 50, 0.14);
    margin: 0;
    overflow: hidden;
}

body#bg .sya-food-strip > figure:first-child,
.sya-food-strip > figure:first-child {
    grid-column: 1 / -1;
}

body#bg .sya-food-strip img,
.sya-food-strip img {
    aspect-ratio: 3 / 2;
    display: block;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 100%;
}

body#bg .sya-food-strip figure:hover img,
.sya-food-strip figure:hover img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    body#bg .sya-food-strip img,
    .sya-food-strip img {
        transition: none;
    }

    body#bg .sya-food-strip figure:hover img,
    .sya-food-strip figure:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   3. Numbered lists lose their numbers

   71 of these lists across 20 pages, and almost none of them is sequential:
   fee inclusions, what to pack, benefits, syllabus topics, even bank account
   details. The numbers implied an order that was not there. A small marker
   keeps each item scannable without claiming a sequence.

   The markup stays as <ol>, so nothing has to change on 20 pages and the
   change is reversible from this one file.
   -------------------------------------------------------------------------- */
body#bg .list-num-count > li::before,
body#bg .list-num-count > li:before,
.list-num-count > li::before,
.list-num-count > li:before {
    background-color: var(--course-gold, #c79c66) !important;
    border-radius: 50%;
    content: "" !important;
    display: block !important;
    height: 9px !important;
    left: -22px !important;
    min-width: 0 !important;
    padding: 0 !important;
    top: 13px !important;
    width: 9px !important;
}

/* the old badge was 28px wide and the item was indented to clear it */
body#bg .list-num-count > li,
.list-num-count > li {
    margin-left: 22px;
}

/* the Astro page gives these lists its own card treatment with the badge
   pinned inside the card, so the offsets there are its own */
body#bg.astro-ytt-page .ay-stay-card .list-num-count > li::before,
body#bg .sya-stay-card .list-num-count > li::before {
    left: 16px !important;
    top: 17px !important;
}

body#bg.astro-ytt-page .ay-stay-card .list-num-count > li,
body#bg .sya-stay-card .list-num-count > li {
    margin-left: 0;
    padding-left: 34px;
}