/*
 * Three changes the owner asked for after reviewing the page.
 *
 *   1. The header inverts: cream ground, navy text.
 *   2. "Browse by subject" becomes a grid of large tiles, three to a row,
 *      instead of a horizontal rail.
 *   3. The awarding-body logos go large and wide, filling their card the way
 *      almasaadv.com/en/about/partners does.
 *
 * Loaded after header.css so it can invert what that file set.
 */

/* ============================================================ 1. header ===
 *
 * A cream header on a navy page. Note what this fixes on the way: the mark in
 * use, `logonew.png`, averages RGB(64,69,98) — it is a *dark* logo, and it was
 * sitting on the navy bar nearly invisible. The cream ground is the surface it
 * was drawn for, and the template now serves `logo-black.png`, the navy
 * lockup, at a size you can actually read.
 */

html body.active-dark-mode header .rbt-header-top,
html body.active-dark-mode header .rbt-header-top-1,
html body.active-dark-mode header .rbt-header-wrapper,
html body.active-dark-mode .rbt-header-top,
html body.active-dark-mode .rbt-header-top-1,
html body.active-dark-mode .rbt-header-wrapper,
html body .rbt-header-top,
html body .rbt-header-top-1,
html body .rbt-header-wrapper {
    background: var(--sc-paper) !important;
    background-image: none !important;
}

/* One hairline between the two bars, and one under the header, so the cream
   band reads as a deliberate surface rather than a gap in the page. */
html body .rbt-header-top { border-bottom: 1px solid var(--sc-line) !important; }
html body .rbt-header-wrapper { border-bottom: 1px solid var(--sc-line) !important; }

/* Every text colour in the header flips. The theme's blanket dark-mode rule is
   (0,1,2) and this is (0,2,3), which is what it takes to reach into a header
   it has already painted white. */
html body.active-dark-mode header .rbt-header-top a,
html body.active-dark-mode header .rbt-header-top span,
html body.active-dark-mode header .rbt-header-wrapper a,
html body.active-dark-mode header .rbt-header-wrapper span,
html body.active-dark-mode header .mainmenu > li > a,
html body.active-dark-mode .rbt-header-top a,
html body.active-dark-mode .rbt-header-top span,
html body.active-dark-mode .rbt-header-top i,
html body.active-dark-mode .rbt-header-wrapper a,
html body.active-dark-mode .rbt-header-wrapper span,
html body.active-dark-mode .rbt-header-wrapper i,
html body .rbt-header-top a,
html body .rbt-header-top span,
html body .rbt-header-top i,
html body .rbt-header-wrapper a,
html body .rbt-header-wrapper span,
html body .rbt-header-wrapper i {
    color: var(--sc-ink) !important;
}

/* The phone and WhatsApp marks: gold on cream needs the deep gold, because the
   bright one measures 2.71:1 there and fails at every size. */
html body .rbt-header-top i.feather-phone,
html body .rbt-header-top i.feather-mail,
html body .rbt-header-top i.feather-message-square {
    color: var(--sc-accent-deep) !important;
}

/* Secondary weight for the contact strip, so the navigation below it leads. */
html body .rbt-header-top a { color: var(--sc-muted) !important; }
html body .rbt-header-top a:hover { color: var(--sc-ink) !important; }

/* The current-page rule stays gold: it is the one accent in the header, and a
   2px underline is a rule rather than a field. */
html body .mainmenu > li > a:hover,
html body .mainmenu > li.current-menu-item > a {
    color: var(--sc-ink) !important;
    border-bottom-color: var(--sc-accent) !important;
}

/* The call to action inverts with the bar: on cream it has to be the navy
   field, or it disappears into its own background. */
html body.active-dark-mode a.sc-header-cta,
html body a.sc-header-cta {
    background: var(--sc-ink) !important;
    border-color: var(--sc-ink) !important;
}

html body.active-dark-mode a.sc-header-cta,
html body.active-dark-mode a.sc-header-cta span,
html body a.sc-header-cta,
html body a.sc-header-cta span { color: var(--sc-paper) !important; }

html body a.sc-header-cta:hover {
    background: var(--sc-ink-mid) !important;
    border-color: var(--sc-accent) !important;
}

/* The logo was sized for a dark bar. On cream it can simply be bigger. */
html body .rbt-header-wrapper .logo img,
html body .header-left .logo img { max-height: 54px; width: auto; }

/* Social icons and the theme toggle, which the theme leaves white. */
html body .rbt-header-top .social-share-transparent a,
html body .rbt-header-top .social-icon a { color: var(--sc-muted) !important; }
html body .rbt-header-top .social-share-transparent a:hover { color: var(--sc-accent-deep) !important; }


/* NOTE ON SPECIFICITY, and it matters here.
   `home.css` and `subjects.css` are linked inside home.blade.php — in the
   BODY, after this file's <link> in the <head>. Source order therefore favours
   them, and a rule here written at the same specificity silently loses. Every
   selector below is scoped one level deeper than the rule it replaces so it
   wins on specificity instead of position. */

/* ========================================================== 2. subjects ===
 *
 * Was a horizontal rail: 168px tiles in a scroller, which hid two thirds of
 * the fifteen subjects behind a drag nobody makes. A grid shows them all.
 */

.subj .subj-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;                 /* the scroller is gone */
    scroll-snap-type: none;
    padding-block: 6px;
}

@media (min-width: 768px) {
    .subj .subj-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.subj .subj-tile {
    inline-size: auto;                 /* was a fixed 168px */
    min-block-size: 168px;
    scroll-snap-align: none;
    padding: 24px 22px;
    justify-content: space-between;
}

.subj .subj-tile-name {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

/* The scrollbar and the arrows belonged to the rail. */
.subj .subj-rail::-webkit-scrollbar { display: none; }
.subj-nav,
.subj-rail-nav { display: none !important; }

/* ==================================================== 3. awarding bodies ===
 *
 * The logo sat in a 52x52 square beside the name — a thumbnail, when the thing
 * a reader is scanning for *is* the logo. On almasaadv.com the mark fills the
 * full width of its card at `object-fit: contain`, and that is what this does:
 * a wide cream plate across the top of the card, the name and count beneath.
 */

.hp .hp-body-card {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 0;
    overflow: hidden;
}

.hp .hp-body-card .hp-mark {
    inline-size: auto;
    width: auto;
    height: 112px;
    flex: 0 0 112px;
    display: grid;
    place-items: center;
    padding: 20px 28px;
    border-radius: 0;
    /* Always the cream plate, whatever tone the logo is: a logo drawn for
       white paper on a navy gradient is the reason these were unreadable. */
    background: #fff !important;
    border-bottom: 1px solid var(--sc-line);
}

.hp .hp-body-card .hp-mark img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
}

/* When there is no logo the monogram stands in, and it needs to be large
   enough to carry a 112px plate. */
.hp .hp-body-card .hp-mark:not(:has(img)) {
    background: linear-gradient(135deg, var(--sc-ink) 0%, var(--sc-ink-mid) 100%) !important;
    color: var(--sc-paper);
    font-family: var(--sc-font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .04em;
    border-bottom-color: transparent;
}

.hp .hp-body-card > span:last-child { padding: 0 22px 22px; }

.hp .hp-body-card .hp-tile-name {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}

.hp .hp-body-card .hp-tile-count {
    display: block;
    margin-top: 6px;
    font-size: var(--t-sm);
    color: var(--sc-muted);
}

/* Three to a row, matching the subject grid above it and the Al Masa page the
   treatment comes from. */
.hp .hp-grid--bodies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (min-width: 768px) {
    .hp .hp-grid--bodies { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ------------------------------------------- the compound that won ------- */

/* Diagnosed by removing one class at a time in the live DOM: dropping either
   `rbt-header-top` or `rbt-header-top-1` turned the bar cream, so the navy was
   coming from a rule that requires **both** — a compound selector at (0,2,0).
   Every rule above targeted one class or the other and quietly lost.
   Matching the compound, with html and body in front, settles it. */
html body .rbt-header-top.rbt-header-top-1,
html body.active-dark-mode .rbt-header-top.rbt-header-top-1 {
    background: var(--sc-paper) !important;
    background-color: var(--sc-paper) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--sc-line) !important;
}

/* With the bar cream, its text has to leave navy-on-navy behind. */
html body .rbt-header-top.rbt-header-top-1 a,
html body .rbt-header-top.rbt-header-top-1 span,
html body.active-dark-mode .rbt-header-top.rbt-header-top-1 a,
html body.active-dark-mode .rbt-header-top.rbt-header-top-1 span {
    color: var(--sc-muted) !important;
}

html body .rbt-header-top.rbt-header-top-1 a:hover,
html body.active-dark-mode .rbt-header-top.rbt-header-top-1 a:hover {
    color: var(--sc-ink) !important;
}

html body .rbt-header-top.rbt-header-top-1 i,
html body.active-dark-mode .rbt-header-top.rbt-header-top-1 i {
    color: var(--sc-accent-deep) !important;
}

/* --------------------------------------------------- section alternation --- */

/* The content sections were cream before the palette moved the page's own
   background to navy; being transparent, they simply inherited it, and navy
   cards on a navy ground lost their edges. The rhythm the brand rule implies
   is an alternation, not a single tone: navy for the hero and the figures,
   cream for the sections you read, navy again for the footer. */
html body .subj,
html body .hp-section,
html body .hp-section--tint {
    background-color: var(--sc-paper) !important;
    background-image: none !important;
}

/* The figures band keeps its navy ground and its pattern. */
html body .sc-stats { background-color: var(--sc-ink-deep) !important; background-image: var(--sc-pattern) !important; }

/* On cream, the section's own type goes back to ink. */
html body .subj .subj-title,
html body .hp-section .hp-h2,
html body .hp-section h2 { color: var(--sc-ink) !important; }

html body .subj .subj-lead,
html body .hp-section .hp-lead,
html body .hp-section > .container > p { color: var(--sc-muted) !important; }

/* The subject tiles stay navy — they are the cards, and a navy card on cream
   is the inversion that gives the grid its edges back. Their own text was
   written for a dark tile and still is. */
html body .subj .subj-tile .subj-tile-name,
html body .subj .subj-tile .subj-tile-count { color: var(--sc-paper) !important; }

/* The awarding-body cards are white plates on the cream ground. */
html body .hp .hp-body-card {
    background: #fff !important;
    border: 1px solid var(--sc-line) !important;
}

html body .hp .hp-body-card .hp-tile-name { color: var(--sc-ink) !important; }
html body .hp .hp-body-card .hp-tile-count { color: var(--sc-muted) !important; }

/* The logo was measuring 121px inside a 112px plate: `max-block-size` is the
   logical property and the theme sets `height` on these images, which wins.
   Explicit max-height in both axes, and the plate gets its own padding back. */
html body .hp .hp-body-card .hp-mark img {
    max-height: 72px !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

/* The awarding-body section keeps a navy ground — white plates read best on
   it, and it separates this band from the cream subject grid above. */
html body .hp .hp-body-card { box-shadow: var(--shadow-raised); }