/* ============================================================================
   PUE overrides on the QF chrome
   Loaded after qf-tokens.css and qf-chrome.css so this is the one place local
   deviations from the design system live. Nothing in qf-tokens.css (verbatim DS
   tokens) or qf-chrome.css (a faithful port of the DS SiteHeader / PueFooter) is
   edited, so both can be refreshed from the design system without losing this.

   Keep this file small, and note why each rule exists.
   ============================================================================ */

:root {
    /* Header lockup height. The DS ships 40px (2.5rem) and treats 36px as the
       floor, below which the Arabic strokes close up — there is no documented
       ceiling, so a larger lockup is a local choice, not a violation.
       rem, so it scales with the reader's root font size like the type does. */
    --pue-header-logo-height: 3.5rem;    /* 56px at the default 16px root */
    --pue-header-logo-height-sm: 2.75rem;/* 44px on narrow screens */

    /* Header text. The DS puts the utility row and the small button at 12px;
       both read as too small next to a 56px lockup, so they come up to the body
       size. The nav was already at body size. */
    --pue-header-nav-size: 1.125rem;     /* 18px, was 1rem */
    --pue-header-utility-size: 1rem;     /* 16px, was 0.875rem */
    --pue-header-button-size: 1rem;      /* 16px, was 0.875rem */

    /* Footer, matched to the header so the two ends of the page agree. The DS
       ships the footer lockup at 46px against a 40px header one; both are now
       the same height. */
    --pue-footer-logo-height: 3.5rem;    /* 56px, was 46px — same as the header */
    --pue-footer-logo-height-sm: 2.75rem;/* 44px on narrow screens */
    --pue-footer-link-size: 1.125rem;    /* 18px, matches the nav */
    --pue-footer-legal-size: 0.9375rem;  /* 15px, was 13px */
    --pue-footer-social-size: 1.5rem;    /* 24px, was 22px */
}

/* Targets the lockup only: the nav tree glyph (.qf-nav a img) and the footer
   lockup (.pue-footer-lockup) are untouched. */
.qf-page .qf-header-logo img {
    height: var(--pue-header-logo-height);
    width: auto;
}

/* Header text only — page content and forms keep the DS scale. */
.qf-page .qf-nav a { font-size: var(--pue-header-nav-size); }
.qf-page .qf-utility { font-size: var(--pue-header-utility-size); }
.qf-page .qf-header-actions .qf-btn { font-size: var(--pue-header-button-size); }

/* ---- Footer (PueFooter), matched to the header ---- */
.qf-page .pue-footer-lockup { height: var(--pue-footer-logo-height); }
.qf-page .pue-footer-link { font-size: var(--pue-footer-link-size); }
.qf-page .pue-footer-legal .qf-shell { font-size: var(--pue-footer-legal-size); }
.qf-page .pue-credit { font-size: var(--pue-footer-legal-size); }
.qf-page .pue-footer-socials svg {
    width: var(--pue-footer-social-size);
    height: var(--pue-footer-social-size);
}

/* Nav-less header (layout: 'nav' => false): the hairline the nav row used to
   carry moves onto the header itself. */
.qf-page .qf-header--bare { border-bottom: var(--border-hairline); }

/* The DS nav scrolls horizontally with a hidden scrollbar, which on a phone just
   looks like a clipped last item. Wrap instead, so every destination is visible. */
@media (max-width: 700px) {
    .qf-page .qf-nav {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0 var(--space-5);
    }
}

@media (max-width: 560px) {
    .qf-page .qf-header-logo img {
        height: var(--pue-header-logo-height-sm);
    }
    .qf-page .pue-footer-lockup {
        height: var(--pue-footer-logo-height-sm);
    }
    /* Full-width so the tap target is not a narrow strip beside the lockup. */
    .qf-page .qf-header-actions { width: 100%; }
    .qf-page .qf-header-actions .qf-btn { flex: 1 1 auto; }
}

/* ---- Sign in / sign out control (PUE hub pages only) ----
   Local addition, not part of the design system chrome — kept here so
   qf-chrome.css stays refreshable from the DS. Sits in the header's action row
   beside the existing buttons. */
.qf-page .qf-auth {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.qf-page .qf-auth-who {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: end;
}
.qf-page .qf-auth-label {
    font-size: var(--text-micro);
    color: var(--text-subtle);
}
.qf-page .qf-auth-name {
    font-size: var(--text-body-sm);
    color: var(--qf-ink);
}
/* How long this sign-in has left. Quiet by default: it is reassurance, and a
   fortnight of it shouting would train people not to see it. .is-soon is the last
   day, where it becomes something to act on. */
/* Its own line under the name, and never a reason for the header to grow: the
   row already carries a name, a Hub link and a sign-out button. nowrap keeps
   "Expires in 14 days renew" from breaking mid-phrase when the name is long. */
.qf-page .qf-auth-left {
    display: block;
    margin-top: 2px;
    font-size: var(--text-micro);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.qf-page .qf-auth-left.is-soon {
    color: var(--qf-adham);
    font-weight: var(--weight-medium);
}
/* The way out of the countdown, underlined so it reads as the action it is. */
.qf-page .qf-auth-renew {
    margin-inline-start: var(--space-2);
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.qf-page .qf-auth-left.is-soon .qf-auth-renew { color: var(--qf-adham); }
.qf-page .qf-auth-form { margin: 0; }
.qf-page .qf-auth-link {
    font-size: var(--text-body-sm);
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* The sign-out submit has to look like the links beside it without losing the
   button semantics a POST needs. No outline reset: the focus ring stays. */
.qf-page .qf-auth-link--button {
    appearance: none;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 560px) {
    .qf-page .qf-auth {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-3);
    }
    .qf-page .qf-auth-who { text-align: start; }
    /* The sign-in button is a .qf-btn, which the rule above stretches; the auth
       row manages its own width, so opt back out. */
    .qf-page .qf-header-actions .qf-auth .qf-btn { flex: 0 0 auto; }
}

/* ---- The account menu ----
   One control in the header instead of five. The name is the trigger; the status,
   the countdown, the hub link and the way out are behind it. See the note in
   qf.partials.auth-nav for why this is a <details> and not a scripted dropdown. */
.qf-page .qf-account {
    position: relative;
}

.qf-page .qf-account-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--text-body-sm);
    color: var(--qf-ink);
    cursor: pointer;
    /* The disclosure triangle is replaced by the caret inside the summary. */
    list-style: none;
}

.qf-page .qf-account-button::-webkit-details-marker {
    display: none;
}

.qf-page .qf-account-button:hover {
    background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
}

.qf-page .qf-account[open] .qf-account-button {
    background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
}

.qf-page .qf-account-name {
    font-weight: var(--weight-medium);
}

/* The one state that cannot wait behind a click: a sign-in about to lapse. */
.qf-page .qf-account-alert {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qf-adham);
}

.qf-page .qf-account-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--space-2));
    z-index: 40;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-page, #fff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    text-align: start;
}

.qf-page .qf-account-who {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.qf-page .qf-account-label {
    font-size: var(--text-micro);
    color: var(--text-subtle);
}

.qf-page .qf-account-email {
    font-size: var(--text-body-sm);
    color: var(--qf-ink);
    word-break: break-all;
}

.qf-page .qf-account-left {
    font-size: var(--text-micro);
    line-height: 1.4;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.qf-page .qf-account-left.is-soon {
    color: var(--qf-adham);
    font-weight: var(--weight-medium);
}

.qf-page .qf-account-renew {
    margin-inline-start: var(--space-2);
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qf-page .qf-account-left.is-soon .qf-account-renew { color: var(--qf-adham); }

.qf-page .qf-account-item {
    font-size: var(--text-body-sm);
    color: var(--text-link);
    text-decoration: none;
    text-align: start;
}

.qf-page .qf-account-item:hover { text-decoration: underline; }

/* The sign-out submit has to look like the link above it without losing the button
   semantics a POST needs. No outline reset: the focus ring stays. */
.qf-page .qf-account-item--button {
    appearance: none;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 560px) {
    /* Anchored to the header rather than to the name, which is too near the edge
       to hang a 230px panel off on a phone. */
    .qf-page .qf-account-menu {
        inset-inline-end: 0;
        min-width: min(280px, calc(100vw - var(--space-6)));
    }
}

/* ---- Code sign-in: the header popup and the standalone page ----
   One set of rules for both, since qf.partials.sign-in-form is shared. Square
   corners and hairlines like the rest of the hub; the dialog leans on the
   browser's own backdrop and focus handling rather than reimplementing them. */
.qf-signin-dialog {
    width: min(92vw, 30rem);
    padding: var(--space-8);
    color: var(--qf-ink);
    background: var(--surface-page);
    border: 1px solid var(--qf-ink);
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-overlay);
}
.qf-signin-dialog::backdrop { background: rgba(17, 17, 17, .45); }

.qf-signin-dismiss { display: flex; justify-content: flex-end; margin: 0 0 calc(-1 * var(--space-4)); }
.qf-signin-dismiss button {
    appearance: none;
    padding: 0 var(--space-1);
    font-size: var(--text-title-2);
    line-height: 1;
    color: var(--text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
}
.qf-signin-dismiss button:hover { color: var(--qf-ink); }

.qf-signin-title,
.qf-signin-heading {
    font-family: var(--font-serif-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-title-1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-5);
}

/* The page variant sits in a reading column rather than filling the shell. */
.qf-signin-page { max-width: 34rem; padding-block: var(--space-8) var(--space-16); }
.qf-signin-eyebrow { font-size: var(--text-body-sm); margin-bottom: var(--space-4); }
.qf-signin-heading { margin-bottom: var(--space-4); }
.qf-signin-lead {
    margin-bottom: var(--space-6);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--text-muted);
}

.qf-signin-form { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.qf-signin-label { font-size: var(--text-caption); font-weight: var(--weight-medium); }
.qf-signin-input {
    width: 100%;
    padding: var(--space-3);
    font-family: inherit;
    font-size: var(--text-body);
    color: var(--qf-ink);
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    outline: none;
}
.qf-signin-input:focus { border-color: var(--qf-ink); }
/* The code is six characters read off a phone: spaced out and large enough to
   check against the notification without squinting. */
.qf-signin-input--code {
    font-size: var(--text-title-2);
    letter-spacing: 0.4em;
    text-align: center;
}
.qf-signin-submit { margin-top: var(--space-3); align-self: flex-start; }
.qf-signin-sent { font-size: var(--text-body-sm); color: var(--text-muted); }
.qf-signin-note {
    margin-top: var(--space-3);
    font-size: var(--text-caption);
    color: var(--text-subtle);
    line-height: var(--leading-body);
}
.qf-signin-status {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    font-size: var(--text-body-sm);
    background: var(--surface-tint);
    border-inline-start: 2px solid var(--qf-sidra-green);
}
.qf-signin-error { font-size: var(--text-caption); color: var(--qf-adham); }
.qf-signin-resend { margin-top: var(--space-5); }
.qf-signin-textlink {
    appearance: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--text-caption);
    color: var(--text-link);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ---- Breadcrumbs (qf.partials.breadcrumbs) ----
   Sits above the page head, so it needs no space of its own beyond a margin —
   .qf-main already carries the section padding. */
.qf-page .qf-crumbs { margin-bottom: var(--space-6); }
.qf-page .qf-crumbs-list {
    display: flex;
    /* Never wraps into a ladder: the last crumb truncates instead. */
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-body-sm);
}
.qf-page .qf-crumbs-item { flex: 0 0 auto; color: var(--text-muted); }

/* The separator is generated content on purpose. No browser exposes it to the
   accessibility tree, and you cannot put aria-hidden on a pseudo-element — so
   this is the accessible construction, not a shortcut. "/" rather than a chevron:
   square-first, and direction-neutral for RTL. */
.qf-page .qf-crumbs-item + .qf-crumbs-item::before {
    content: "/";
    margin-inline-end: var(--space-2);
    color: var(--qf-ink-30);
}

.qf-page .qf-crumbs-item a { color: var(--text-muted); text-decoration: none; }
.qf-page .qf-crumbs-item a:hover {
    color: var(--qf-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.qf-page .qf-crumbs-item [aria-current="page"] { color: var(--qf-ink); }

/* The current crumb is the one safe to truncate: it repeats the <h1> directly
   beneath it, so an ellipsis loses nothing. Deliberately NOT hidden on narrow
   screens — that would drop aria-current from the DOM on a phone, so a screen
   reader would hear a different trail depending on viewport width. */
.qf-page .qf-crumbs-item:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================================
   DOHA MUN — this project's deviations from the shared file
   ----------------------------------------------------------------------------
   Everything above this line is the shared Pre-University Education overrides
   file, copied verbatim. Everything below is specific to dohamun.org and each
   rule states why it exists, which is the contract this file is under: local
   deviations live here, with a reason, so qf-tokens.css and qf-chrome.css stay
   refreshable from the design system.

   This section used to be four times as long. It carried a programme co-brand
   beside the PUE lockup, a restyled utility row and a set of narrow-screen rules
   holding the three of them on one line — all of it work to fit a conference into
   a header slot that belonged to somebody else. The chrome is Doha MUN's own now
   (inc/chrome.php, and the `.dmc-*` block in dm-identity.css), so none of that
   markup exists any more and the CSS for it went with it. Rules kept only because
   deleting them felt riskier than reading them are how a stylesheet gets to 3,000
   lines.

   What is left is the four things that are genuinely deviations from the shared
   file rather than identity, plus the sticky-header anchor offset that every page
   on this site depends on.

   Nothing here restyles the chrome for anybody else — every selector is scoped to
   `.dm`, the body class this theme adds.
   ============================================================================ */

/* ---- The full-bleed main ---------------------------------------------------
   The DS constrains .qf-main to 1180px and gives it the section padding, which is
   right for a document. This site is a set of full-width bands — a maroon theme
   band, a navy reference table, a scrolling strip — each of which puts its own
   .qf-shell inside to bring the *text* back to 1180px. So the constraint moves
   inward one level rather than being removed: the measure is unchanged, the
   grounds run edge to edge. */
.dm .qf-main {
    max-width: none;
    padding: 0;
}

/* ---- Skip link -------------------------------------------------------------
   The frozen baseline has none, and <main> there carries no id for one to point
   at; both are recorded as the baseline's own gaps rather than as drift. This site
   repeats a masthead and a seven-item nav above every page, which is exactly the
   amount of chrome a skip link exists to bypass, so it is added here and
   header.php gives <main> the id and tabindex it needs.

   The ground is --surface-brand rather than a named colour, so it follows whatever
   the brand currently is and there is one place to change it. */
.dm .dm-skip {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -100px;
    z-index: 60; /* Above .dmc-header, which sits at 30. */
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-brand);
    color: var(--qf-white);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: inset-block-start var(--duration-fast) var(--ease-out);
}

.dm .dm-skip:focus {
    inset-block-start: var(--space-4);
    color: var(--qf-white);
}

/* <main> is focused by the skip link, so it must not draw a focus ring around the
   entire page — the visible result of the jump is the page having scrolled. */
.dm .qf-main:focus { outline: none; }

/* ---- In-page anchors under a sticky header --------------------------------
   .dmc-header is sticky at z-index 30, so an anchor jump lands the target
   underneath it. The offset is the header's own height plus a breath, and both
   tiers of that height are declared as tokens in dm-identity.css so this cannot
   drift away from the thing it is compensating for. Without it, every "skip to"
   and every #committees link appears not to have worked. */
.dm :target,
.dm .dm-section[id],
.dm .dm-hero[id],
.dm [id^="committee-"] {
    scroll-margin-block-start: calc(var(--dmc-masthead-h) + var(--dmc-navbar-h) + var(--space-4));
}

@media (max-width: 620px) {
    .dm :target,
    .dm .dm-section[id],
    .dm .dm-hero[id],
    .dm [id^="committee-"] { scroll-margin-block-start: 96px; }
}

/* Anchor scrolling is smooth, but never for a reader who has asked otherwise —
   a long smooth scroll is one of the motions that actually causes symptoms. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.dm) { scroll-behavior: smooth; }
}