/* ────────────────────────────────────────────────────────────────
   ARABIC TOOLS — SITE CHROME
   Footer, policy documents, cookie banner.

   Loaded on every page, not just tool routes, because the footer is on
   every page. Tokens come from tools.css (arabtools-shell), which is a
   declared dependency, so --at-* is always defined by the time this
   parses.

   House rule applies throughout: !important on any visual property a
   theme habitually hijacks — background, color, text-transform,
   list-style, ::marker. Astra sets all five on footer and list markup,
   and PMPro adds its own table rules on top.

   Changelog
   2026-08-11  Created.
   2026-08-13  Prose-link underline no longer eats .at-btn buttons
               inside a document section.
   ──────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   TOP BAR

   The above-header row is set to the same ink as the footer, so the
   page is bracketed by the same colour top and bottom instead of
   opening on a white strip that belonged to no part of the design.

   The background comes from Astra's own setting
   (`hba-header-bg-obj-responsive`), because that is what the customiser
   will show if anyone opens it later. The link colours have to be here:
   Astra derives them from per-element options that are only written
   once someone touches that control in the customiser, so on a site
   where nobody has, there is nothing to override and the menu keeps
   its default near-black — invisible on this ground.
   ══════════════════════════════════════════════════════════════ */

.ast-above-header-wrap {
    background-color: var(--at-ink-deep) !important;
}

.ast-above-header-wrap,
.ast-above-header-wrap .ast-builder-menu a,
.ast-above-header-wrap .menu-link,
.ast-above-header-wrap .ast-header-account-wrap,
.ast-above-header-wrap p,
.ast-above-header-wrap span {
    color: #BFBAD4 !important;
}

/* Carrying the id as well, so these cannot be out-specified by a
   generic header rule the way they were once already. Astra's own
   dark-on-light defaults sit at low specificity; ours have to sit
   above anything we might add later for the main row. */
#ast-desktop-header .ast-above-header-wrap a,
#ast-desktop-header .ast-above-header-wrap .menu-item > .menu-link,
.ast-above-header-wrap a,
.ast-above-header-wrap .menu-item > a {
    color: #BFBAD4 !important;
    text-decoration: none !important;
    transition: color .16s var(--at-ease);
}

#ast-desktop-header .ast-above-header-wrap a:hover,
#ast-desktop-header .ast-above-header-wrap .menu-item:hover > .menu-link,
.ast-above-header-wrap a:hover,
.ast-above-header-wrap a:focus-visible,
.ast-above-header-wrap .menu-item:hover > a,
.ast-above-header-wrap .current-menu-item > a {
    color: #FFFFFF !important;
}

/* The submenu chevron is drawn from currentColor via a border, so it
   went dark-on-dark with the links and left a lone arrow floating in
   the bar. */
#ast-desktop-header .ast-above-header-wrap .ast-icon,
#ast-desktop-header .ast-above-header-wrap .ast-icon svg,
.ast-above-header-wrap .ast-icon svg {
    fill: currentColor !important;
    color: #BFBAD4 !important;
}

/* Astra draws the row's own separator from a customiser option that is
   likewise unset here, so it lands as a light hairline on dark. */
.ast-above-header-wrap .ast-above-header-bar {
    border-bottom-color: rgba(255, 255, 255, .1) !important;
}

/* The main header row stays light, and now needs a defined ground
   rather than inheriting the page background it used to match. */
.ast-main-header-wrap .main-header-bar,
.ast-primary-header-bar.ast-primary-header {
    background-color: var(--at-surface) !important;
}

/* Top-level nav items take Astra's body-text colour by default, which
   left them a shade lighter than the dropdown entries beneath them once
   those were fixed — a parent item reading weaker than its own children.
   Both sit at the heading colour now.

   ⚠️ SCOPED TO THE MAIN ROW, AND IT HAS TO BE.

   The first version of this rule was written
   `#ast-desktop-header .main-header-menu > .menu-item > .menu-link`,
   and it turned the top bar's links dark-on-dark — invisible, which
   read as the menu having disappeared entirely.

   The account menu in the top bar and the main navigation are the same
   markup: identical classes, identical nesting, `.main-header-menu >
   .menu-item > .menu-link` in both. The only thing that tells them
   apart is the wrapper — `.ast-above-header-wrap` against
   `.ast-main-header-wrap`. And because the broken selector carried an
   ID it out-specified the above-header rule below (1-3-0 against
   0-2-1), so `!important` on both did not save it: `!important` settles
   ties between origins, not between selectors, and specificity still
   decides which of two important declarations wins.

   Anything colouring one header row must therefore name that row's
   wrapper, never `#ast-desktop-header`, which contains both. */
.ast-main-header-wrap .main-header-menu > .menu-item > .menu-link,
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
    color: var(--at-ink-deep) !important;
    font-weight: 500 !important;
}

.ast-main-header-wrap .main-header-menu > .menu-item:hover > .menu-link,
.ast-main-header-wrap .main-header-menu > .current-menu-item > .menu-link,
.ast-primary-header-bar .main-header-menu > .menu-item:hover > .menu-link {
    color: var(--at-primary-deep) !important;
}

/* ── The nav dropdown ────────────────────────────────────────────
   Astra colours submenu links from the *body text* palette slot,
   not the heading one, so against the top-level items — which take
   the heading colour — every entry in the AI tools dropdown read a
   step lighter than the menu it dropped out of. It was legible
   (#4A4661 on white is about 8.6:1) and still looked faded, because
   the eye judges it against the black-ish item directly above it
   rather than against the background.

   So this is a hierarchy problem rather than a contrast one: a
   submenu entry is a destination in its own right and should carry
   the same weight as the item that opened it. */

.ast-main-header-wrap .sub-menu,
#ast-desktop-header .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
    background-color: var(--at-surface) !important;
    border: 1px solid var(--at-line) !important;
    border-radius: var(--at-radius-sm) !important;
    box-shadow: var(--at-shadow-md) !important;
    padding: 6px !important;
}

#ast-desktop-header .sub-menu .menu-link,
#ast-desktop-header .sub-menu a,
.ast-desktop .main-header-menu .sub-menu .menu-link {
    color: var(--at-ink-deep) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    border-bottom: 0 !important;
    transition: background-color .14s var(--at-ease), color .14s var(--at-ease);
}

#ast-desktop-header .sub-menu .menu-item:hover > .menu-link,
#ast-desktop-header .sub-menu .menu-item:focus-within > .menu-link,
#ast-desktop-header .sub-menu a:hover,
#ast-desktop-header .sub-menu a:focus-visible,
.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link {
    background-color: var(--at-primary-tint) !important;
    color: var(--at-primary-deep) !important;
}

/* The dropdown belongs to the last item in the bar, so it opened
   rightwards off the edge of the window and the tool names were cut
   in half. Anchoring the last item's submenu to the right edge keeps
   it on screen at any width; `auto` on the left is what stops Astra's
   own positioning fighting it. */
#ast-desktop-header .main-header-menu > .menu-item:last-child > .sub-menu,
#ast-desktop-header .ast-nav-menu > .menu-item:last-child > .sub-menu {
    left: auto !important;
    right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */

.at-footer {
    background: var(--at-ink-deep) !important;
    color: #CFCBE0 !important;
    font-family: var(--at-font);
    font-size: 15px;
    line-height: 1.6;
    /* Astra's #colophon has no padding of its own once the builder is
       empty, so every edge here is ours. */
    padding: 0;
    margin: 0;
    text-align: left;
}

.at-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px 32px;
    align-items: start;
}

/* ── Brand column ────────────────────────────────────────────── */

.at-footer__brand {
    max-width: 340px;
}

.at-footer__logo {
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: none !important;
    border: 0 !important;
}

.at-footer__logo img {
    max-width: 150px;
    height: auto;
    display: block;
    /* The logo file is black artwork on transparent, which is invisible
       on this ground. Inverting is cheaper and stays correct if the
       artwork is ever re-exported. */
    filter: invert(1) brightness(1.9);
}

.at-footer__wordmark {
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF !important;
    letter-spacing: -.01em;
}

.at-footer__tagline {
    margin: 0 0 16px !important;
    color: #A9A4C2 !important;
    font-size: 14.5px;
}

.at-footer__pledge {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 !important;
    padding: 12px 14px;
    background: rgba(111, 99, 201, .18) !important;
    border-left: 3px solid var(--at-primary-soft);
    border-radius: 0 var(--at-radius-sm) var(--at-radius-sm) 0;
    font-size: 13.5px;
    color: #DAD6EA !important;
}

.at-footer__pledge i {
    color: var(--at-primary-soft) !important;
    font-size: 18px;
    line-height: 1.35;
    flex: 0 0 auto;
}

/* ── Link columns ────────────────────────────────────────────── */

.at-footer__col h2 {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em;
    color: #FFFFFF !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
}

.at-footer__col ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.at-footer__col ul li {
    list-style: none !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
}

.at-footer__col ul li::marker { content: none !important; }

.at-footer__col a {
    color: #BFBAD4 !important;
    text-decoration: none !important;
    font-size: 14.5px;
    transition: color .16s var(--at-ease);
}

.at-footer__col a:hover,
.at-footer__col a:focus-visible {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* ── Bottom bar ──────────────────────────────────────────────── */

.at-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .11);
    background: rgba(0, 0, 0, .16) !important;
}

.at-footer__barinner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
}

.at-footer__copy {
    margin: 0 !important;
    font-size: 13.5px;
    color: #928DAD !important;
}

.at-footer__barlinks {
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.at-footer__barlinks a {
    color: #928DAD !important;
    text-decoration: none !important;
    font-size: 13.5px;
}

.at-footer__barlinks a:hover,
.at-footer__barlinks a:focus-visible {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* A button that has to sit in a row of links without looking like a
   stray form control. */
.at-footer__cookiebtn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit;
    font-size: 13.5px;
    color: #928DAD !important;
    cursor: pointer;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.at-footer__cookiebtn:hover { color: #FFFFFF !important; }

@media (max-width: 980px) {
    .at-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 34px 24px;
        padding: 44px 22px 32px;
    }
    .at-footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) {
    .at-footer__inner { grid-template-columns: 1fr; }
    .at-footer__barinner { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   POLICY DOCUMENTS
   ══════════════════════════════════════════════════════════════ */

.at-doc {
    background: var(--at-paper) !important;

    /* Astra's .ast-container is `display:flex; flex-flow:row nowrap`, and
       a flex item defaults to `flex: 0 1 auto` — so this shrink-wrapped
       to its own max-content width (804px of a 1240px container) and the
       paper background stopped dead two thirds across the page, with the
       body colour showing beyond it.

       Nothing here was wrong: max-width on .at-doc__inner sets the
       measure, and the flex item then sized itself to that instead of
       filling the row. The basis has to be stated explicitly.

       This is the same fault, with the same fix, as the Araboo player
       page. Any full-width block dropped into an Astra container needs
       both declarations. */
    width: 100%;
    flex: 1 1 100%;
}

.at-doc__inner {
    /* Narrower than the tool pages on purpose. These are the only
       documents on the site anyone reads top to bottom, and a 1180px
       measure is a large part of why nobody reads terms and
       conditions.

       It started at 760px, which is the textbook measure — about 90
       characters — and read as shrunken next to the 1180px tool pages
       either side of it. 920px is the compromise: still a controlled
       line length, no longer a narrow column stranded in a wide page.
       Tables and the contents list benefit from the extra width too. */
    max-width: 920px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}

.at-doc__crumbs {
    font-size: 13.5px;
    color: var(--at-ink-muted) !important;
    margin-bottom: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.at-doc__crumbs a {
    color: var(--at-ink-soft) !important;
    text-decoration: none !important;
}

.at-doc__crumbs a:hover { text-decoration: underline !important; }

.at-doc__head { margin-bottom: 30px; }

.at-doc__head h1 {
    font-size: clamp(30px, 4.6vw, 42px) !important;
    line-height: 1.15;
    font-weight: 800 !important;
    color: var(--at-ink-deep) !important;
    margin: 0 0 14px !important;
    letter-spacing: -.015em;
}

.at-doc__summary {
    font-size: 18px !important;
    line-height: 1.55;
    color: var(--at-ink-soft) !important;
    margin: 0 0 12px !important;
}

.at-doc__meta {
    font-size: 13.5px !important;
    color: var(--at-ink-muted) !important;
    margin: 0 !important;
}

/* ── Contents ────────────────────────────────────────────────── */

.at-doc__toc {
    background: var(--at-lilac) !important;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    padding: 20px 24px;
    margin-bottom: 34px;
}

.at-doc__toc h2 {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .09em;
    font-weight: 700 !important;
    color: var(--at-ink-soft) !important;
    margin: 0 0 12px !important;
}

/* No list numbers: the section headings are already numbered ("1. Who
   is responsible…"), so an ordered list rendered them twice — "2. 1.
   Who is responsible for your data". The list stays an <ol> because the
   order is meaningful; only the marker goes. */
.at-doc__toc ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    columns: 2;
    column-gap: 28px;
}

.at-doc__toc li {
    margin: 0 0 7px !important;
    padding: 0 !important;
    break-inside: avoid;
    list-style: none !important;
    color: var(--at-ink-soft) !important;
}

.at-doc__toc li::marker { content: none !important; }

.at-doc__toc a {
    color: var(--at-primary-deep) !important;
    text-decoration: none !important;
    font-size: 14.5px;
}

.at-doc__toc a:hover { text-decoration: underline !important; }

@media (max-width: 620px) {
    .at-doc__toc ol { columns: 1; }
}

/* ── Sections ────────────────────────────────────────────────── */

.at-doc__section {
    margin: 0 0 34px;
    scroll-margin-top: 90px;
}

.at-doc__section h2 {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: var(--at-ink-deep) !important;
    margin: 0 0 12px !important;
    line-height: 1.3;
}

.at-doc__section h3 {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: var(--at-ink-deep) !important;
    margin: 22px 0 8px !important;
}

.at-doc__section p {
    margin: 0 0 14px !important;
    color: var(--at-ink) !important;
    font-size: 16px;
    line-height: 1.68;
}

/* Underline every link in the prose — and nothing that is dressed as a
   button. This rule is two classes deep and carries !important, so it
   beat .at-btn/.at-btn--primary and turned the mailto button on /about/
   and /contact/ into an underlined purple-on-purple pill. Excluding
   .at-btn here is the fix; do not answer it with a louder rule in
   tools.css, which would have to be re-shouted for every variant. */
.at-doc__section a:not(.at-btn) {
    color: var(--at-primary-deep) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.at-doc__section strong { color: var(--at-ink-deep) !important; }

.at-doc__section code {
    background: var(--at-lilac) !important;
    border: 1px solid var(--at-line);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 13px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--at-ink-deep) !important;
    white-space: nowrap;
}

/* The opening "In short" block, which is the part most people will
   actually read, so it is given the weight to match. */
.at-doc__section--lead {
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line);
    border-left: 4px solid var(--at-accent);
    border-radius: var(--at-radius);
    padding: 24px 26px 12px;
    box-shadow: var(--at-shadow-xs);
}

.at-doc__section--lead h2 {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .09em;
    color: var(--at-accent-deep) !important;
}

.at-doc__keys {
    list-style: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.at-doc__keys li {
    list-style: none !important;
    position: relative;
    margin: 0 0 12px !important;
    padding: 0 0 0 28px !important;
    color: var(--at-ink) !important;
    font-size: 16px;
    line-height: 1.6;
}

.at-doc__keys li::marker { content: none !important; }

.at-doc__keys li::before {
    content: '' !important;
    position: absolute;
    left: 4px;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--at-accent) !important;
}

.at-doc__note {
    font-size: 14px !important;
    color: var(--at-ink-muted) !important;
    font-style: italic;
}

.at-doc__list {
    margin: 0 0 14px !important;
    padding: 0 0 0 22px !important;
    list-style: disc !important;
}

.at-doc__list li {
    margin: 0 0 8px !important;
    color: var(--at-ink) !important;
    font-size: 16px;
    line-height: 1.62;
    list-style: disc !important;
}

.at-doc__list li::marker { color: var(--at-primary-soft) !important; }

.at-doc__addr {
    background: var(--at-lilac) !important;
    border-radius: var(--at-radius-sm);
    padding: 14px 18px;
    font-size: 15px !important;
    line-height: 1.55;
    color: var(--at-ink) !important;
}

.at-doc__cta { margin: 18px 0 !important; }

/* ── Tables ──────────────────────────────────────────────────── */

.at-doc__tablewrap {
    /* Wide content scrolls inside its own box; the page body must never
       scroll sideways. */
    overflow-x: auto;
    margin: 0 0 18px;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius-sm);
    background: var(--at-surface) !important;
}

.at-doc__table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 !important;
    background: var(--at-surface) !important;
}

.at-doc__table th,
.at-doc__table td {
    padding: 11px 14px;
    text-align: left !important;
    vertical-align: top;
    border-bottom: 1px solid var(--at-line);
    color: var(--at-ink) !important;
    line-height: 1.5;
}

.at-doc__table thead th {
    background: var(--at-lilac) !important;
    color: var(--at-ink-deep) !important;
    font-weight: 700 !important;
    font-size: 12.5px;
    text-transform: uppercase !important;
    letter-spacing: .05em;
    white-space: nowrap;
}

.at-doc__table tbody th {
    font-weight: 600 !important;
    color: var(--at-ink-deep) !important;
    white-space: nowrap;
}

.at-doc__table tbody tr:last-child th,
.at-doc__table tbody tr:last-child td { border-bottom: 0; }

/* ── Contact rows ────────────────────────────────────────────── */

.at-doc__contact {
    display: grid;
    gap: 14px;
}

.at-doc__contact-row {
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    padding: 18px 20px;
}

.at-doc__contact-row h3 { margin: 0 0 6px !important; }
.at-doc__contact-row p { margin: 0 0 10px !important; }
.at-doc__contact-row p:last-child { margin: 0 !important; }

/* ── Foot of a document ──────────────────────────────────────── */

.at-doc__foot {
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--at-line);
}

.at-doc__foot h2 {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .09em;
    color: var(--at-ink-muted) !important;
    margin: 0 0 12px !important;
    font-weight: 700 !important;
}

.at-doc__siblings {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.at-doc__siblings li { list-style: none !important; margin: 0 !important; }
.at-doc__siblings li::marker { content: none !important; }

.at-doc__siblings a {
    color: var(--at-primary-deep) !important;
    text-decoration: none !important;
    font-size: 14.5px;
}

.at-doc__siblings a:hover { text-decoration: underline !important; }

/* ── The index of documents ──────────────────────────────────── */

.at-doc__index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.at-doc__indexcard {
    display: block;
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    padding: 20px 22px;
    text-decoration: none !important;
    box-shadow: var(--at-shadow-xs);
    transition: transform .16s var(--at-ease), box-shadow .16s var(--at-ease), border-color .16s var(--at-ease);
}

.at-doc__indexcard:hover,
.at-doc__indexcard:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--at-shadow-md);
    border-color: var(--at-primary-soft);
}

.at-doc__indexcard h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--at-ink-deep) !important;
    margin: 0 0 8px !important;
}

.at-doc__indexcard p {
    font-size: 14.5px !important;
    line-height: 1.55;
    color: var(--at-ink-soft) !important;
    margin: 0 0 10px !important;
}

.at-doc__indexmeta {
    font-size: 12.5px;
    color: var(--at-ink-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   COOKIE BANNER

   Not a modal. It does not trap focus, does not dim the page and does
   not block reading, because a visitor who ignores it has refused —
   and refusing must not cost them the site.
   ══════════════════════════════════════════════════════════════ */

.at-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 99990;
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line-strong);
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow-lg);
    padding: 18px 22px;
    font-family: var(--at-font);
    max-width: 760px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s var(--at-ease), transform .2s var(--at-ease);
}

.at-consent.is-open {
    opacity: 1;
    transform: translateY(0);
}

.at-consent[hidden] { display: none !important; }

.at-consent__inner {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.at-consent__text { flex: 1 1 380px; }

.at-consent__text h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--at-ink-deep) !important;
    margin: 0 0 5px !important;
}

.at-consent__text p {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.55;
    color: var(--at-ink-soft) !important;
}

.at-consent__text a {
    color: var(--at-primary-deep) !important;
    text-decoration: underline !important;
}

/* On its own line and given room around it. Trailing a link off the end
   of a paragraph made it a 134px target wedged against the full stop —
   easy to miss and easy to mis-tap on a phone. */
.at-consent__more {
    margin: 8px 0 0 !important;
    font-size: 13.5px;
}

.at-consent__more a {
    display: inline-block;
    padding: 4px 0;
    text-underline-offset: 3px;
}

/* Both buttons the same size. The ICO is explicit that refusing must
   be as easy as accepting, and "as easy" includes looking like an
   equal choice rather than a link beside a button. */
.at-consent__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.at-consent__actions .at-btn {
    min-width: 132px;
    justify-content: center;
}

@media (max-width: 600px) {
    .at-consent { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
    .at-consent__actions { width: 100%; }
    .at-consent__actions .at-btn { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .at-consent,
    .at-doc__indexcard { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
   Chrome is not part of a printed policy.
   ══════════════════════════════════════════════════════════════ */

@media print {
    .at-footer,
    .at-consent,
    .at-doc__crumbs,
    .at-doc__toc,
    .at-doc__foot { display: none !important; }

    .at-doc { background: #FFFFFF !important; }
    .at-doc__inner { max-width: none; padding: 0; }
    .at-doc__section { page-break-inside: avoid; }
    .at-doc__section--lead { border: 1px solid #CCC; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════
   THE LANGUAGE SWITCHER

   Two of them, and both belong here rather than in ar.css.

   ar.css is enqueued only on /ar/ routes, and the switcher is drawn on
   English pages too — that is its whole job. So the styling never
   reached the side of the site that needed it most: the one link out of
   the English pages rendered as an unstyled 41px word, 4,023px down a
   4,046px page, and the owner's report was "I can't see how to switch
   language". Nothing about a pill or a rail is language-specific.
   ═══════════════════════════════════════════════════ */

/* ── The rail: a fixed control, because a footer link is not findable ──
   Modelled on Araboo's .araboo-rail, deliberately: the same gesture in
   the same place across both sites is worth more than a bespoke one
   here. A column, so a second button (cookie preferences, help) can be
   added without moving anything. */

.at-rail {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9991;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--at-font-ar, 'Noto Sans Arabic', 'Inter', system-ui, sans-serif);
}

.at-rail__btn {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--at-line, #E9E5F1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .97) !important;
    color: var(--at-ink-deep, #2E2B3F) !important;
    cursor: pointer;
    box-shadow: var(--at-shadow-md, 0 8px 24px rgba(46, 43, 63, .09));
    text-decoration: none !important;
    transition: transform .18s var(--at-ease, ease), background .18s, color .18s;
}

.at-rail__btn:hover,
.at-rail__btn:focus-visible {
    background: var(--at-primary, #6F63C9) !important;
    color: #fff !important;
    transform: scale(1.07);
    outline: none;
}

.at-rail__btn svg { width: 23px; height: 23px; display: block; }

/* The label is a hover tooltip on the left, so the rail stays a small
   circle at rest and still says what it does. */
.at-rail__lbl {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--at-ink-deep, #2E2B3F);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.at-rail__btn:hover .at-rail__lbl,
.at-rail__btn:focus-visible .at-rail__lbl { opacity: 1; }

/* Mobile: dock bottom-right rather than sit at the vertical centre, on
   top of the reading column. Raised clear of Astra's scroll-top button. */
@media (max-width: 767px) {
    .at-rail {
        right: 8px;
        gap: 8px;
        top: auto;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        transform: none;
    }
    .at-rail__btn { width: 42px; height: 42px; }
    .at-rail__btn svg { width: 21px; height: 21px; }
    .at-rail__lbl { display: none; }
}

@media print { .at-rail { display: none !important; } }

/* ── The footer link, kept as well ────────────────────────────────
   In flow, crawlable, and there for anyone who scrolls rather than
   hunts for a floating control. It costs nothing to keep both. */

.at-langbar {
    padding: .7rem 1rem 1.2rem;
    text-align: center;
}

.at-langbar__link {
    display: inline-block;
    padding: .3rem .9rem;
    border: 1px solid var(--at-line, #E9E5F1);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--at-ink-soft, #6E698A) !important;
    background: var(--at-paper, #FBF9F6) !important;
}

.at-langbar__link:hover,
.at-langbar__link:focus-visible {
    border-color: var(--at-primary, #6F63C9);
    color: var(--at-primary, #6F63C9) !important;
}

@media print { .at-langbar { display: none; } }