/*
 * Header and hero.
 *
 * Measured before touching anything. At 1280px the header stood 135px tall and
 * its menu row was 90px of that, because every label was breaking in half: the
 * information list above it was 10px wider than its container, wrapped to a
 * second 32px row, and that row landed on top of the menu. "Accreditations"
 * sat above "& Rankings", "UAE" above "Recognition", with a 50px gap between —
 * so the top of the page read as two rows of unrelated words.
 *
 * Two of the three fixes were editorial, not visual: the 349px registration
 * badge came out of the bar (it is in the footer, with room), and the labels
 * were shortened to fit on one line. This file holds the third: the rules that
 * stop any of it happening again.
 */

/* --------------------------------------------------------------- header --- */

/* A navigation label must never break. A wrapped menu item is not a styling
   preference — it is the defect this file exists to fix. */
.mainmenu > li > a,
.rbt-information-list a,
.rbt-btn-link {
    white-space: nowrap;
}

.rbt-information-list {
    flex-wrap: nowrap;
    gap: 24px;
    overflow: hidden;
}

/* Below the width where the information list genuinely cannot fit, the phone
   number and the WhatsApp link stay and the address goes: an email you cannot
   tap is the least useful of the three on a narrow screen. */
@media (max-width: 1399px) {
    .rbt-information-list > li:first-child { display: none; }
}

.rbt-header-top { padding-block: 6px; }

.rbt-header-top .rbt-information-list a {
    font-size: 13px;
    line-height: 1.5;
}

/* 90px of menu row for a 20px label. The height came from the theme's own
   padding, not from anything in it. */
.rbt-header-wrapper .mainmenu-nav .mainmenu > li > a {
    padding-block: 18px;
    font-size: 15px;
    letter-spacing: .01em;
}

/* The one gold rule in the header: it marks where you are. A filled gold tab
   would be a field, which the brand rule forbids; a 2px underline is a rule,
   which is exactly what gold is for. */
.mainmenu > li > a {
    position: relative;
    border-bottom: 2px solid transparent;
    transition: border-color .2s var(--ease, ease), color .2s var(--ease, ease);
}

.mainmenu > li > a:hover,
.mainmenu > li.current-menu-item > a,
.mainmenu > li > a[aria-current="page"] {
    border-bottom-color: var(--sc-accent);
}

/* ----------------------------------------------------------------- hero --- */

/* The hero was 627px under a 135px header on a 900px viewport — 85% of the
   fold spent before a single programme is named. With the header back to a
   sane height this sets the hero to a measured share of the screen rather
   than a fixed block, so the section below it is always visible enough to
   invite a scroll. */
.hero { min-height: min(72vh, 620px); }

.hero-title {
    font-family: var(--sc-font-display);
    /* 1.1 was too tight for a three-line headline at this size: the descenders
       of one line sat in the capitals of the next. */
    line-height: 1.16;
    text-wrap: balance;
    max-width: 18ch;
}

@media (max-width: 767px) {
    .hero-title { max-width: none; }
}

.hero-lead {
    max-width: 58ch;
    font-size: var(--t-lg);
    line-height: 1.7;
    color: color-mix(in srgb, var(--sc-paper) 86%, transparent);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-5);
}

/* The demoted second action. A link, not a second button — the pattern calls
   for one dominant CTA, and two filled buttons of equal weight make the reader
   choose before they know anything. */
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sc-paper);
    text-decoration: underline;
    text-underline-offset: .25em;
    text-decoration-color: color-mix(in srgb, var(--sc-paper) 45%, transparent);
    transition: text-decoration-color .2s ease;
}

.hero-link:hover,
.hero-link:focus-visible {
    color: var(--sc-paper);
    text-decoration-color: var(--sc-accent);
}

.hero-link-arrow {
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The arrow points the way the language runs. */
[dir="rtl"] .hero-link-arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------- hero trust --- */

/* Three checkable facts, in the first screen, because the trust pattern puts
   credibility there and because every one of these is a number a reader can
   look up. Set as a list so assistive technology announces it as three items
   rather than one run-on sentence. */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px var(--s-4);
    margin: var(--s-5) 0 0;
    padding: var(--s-3) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--sc-paper) 16%, transparent);
    list-style: none;
    max-width: 62ch;
}

.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--sc-paper) 72%, transparent);
}

/* The mark is the gold word — a registration number, a regulator, a count.
   Gold on the navy ground reads at 5.53:1, which clears AA for this size. */
.hero-trust-mark {
    font-family: var(--sc-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sc-accent);
    white-space: nowrap;
}

[dir="rtl"] .hero-trust-mark { letter-spacing: normal; }

@media (max-width: 767px) {
    .hero-actions { gap: var(--s-3); }
    .hero-trust { gap: 10px var(--s-3); }
}

/* ------------------------------------------------------- the one action --- */

/* The header's single call to action. Cream on navy — the same pair as the
   hero's primary button, because they are the same promise — with a gold rule
   around it. Sized to itself rather than stretched to the 80px menu row, which
   is what turned the previous one into an oval. */
.sc-header-cta {
    display: inline-flex;
    align-items: center;
    height: 44px;                    /* a real touch target, not a tall oval */
    padding-inline: 22px;
    border-radius: var(--r-pill);
    background: var(--sc-paper) !important;
    background-image: none !important;
    border: 1px solid var(--sc-accent) !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease;
}

/* Two classes and a type, because palette-enforce's own blanket
   `html body.active-dark-mode a { color: cream }` is (0,2,2) and a weaker
   selector here loses to it — my rule, not the theme's, was the one winning. */
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-ink) !important; }

/* The button carries no theme classes at all now.
   `.btn-border-gradient` kept the surface transparent from a rule more
   specific than anything reasonable to write against it, which left navy text
   on a navy header. Rather than escalate, the element was stripped back to one
   class of our own — the theme has nothing to say about it. */

.sc-header-cta:hover,
.sc-header-cta:focus-visible {
    background: #fff !important;
    transform: translateY(-1px);
}

/* The menu row was 80px for a 20px label, which is where most of the header's
   135px came from. */
.rbt-header-wrapper .mainmenu-nav .mainmenu > li > a {
    height: auto;
    line-height: 1.5;
}

.rbt-header-wrapper .mainmenu-nav .mainmenu > li { height: auto; }