/**
 * base.css — element defaults every page builds on: reset, box-sizing, body,
 * headings, links and form-control normalisation.
 *
 * Why a separate file: these are element-level rules (no classes). They must
 * load right after tokens.css and before forms.css / ds.css / page CSS so that
 * any component class wins without !important — the position the retired
 * main.css held. Everything else that main.css, responsive.css and
 * main-ltr.css carried either moved to the file that owns its area or was
 * deleted because nothing on the site could match it (Phase 4 / Brief Z).
 *
 * Tokens and logical properties only. Fonts and colours come from ds.css §1.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Components set their own spacing; nothing inherits UA margins. */
* {
    margin: 0;
    padding: 0;
}

html {
    /* The visitor's own browser font size (16px unless they changed it). */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    background-color: var(--surface-base);
    /* Floor for text without a ds- type class (Arabic needs 1.5 or more). */
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
/* A bare link inside running text must look like a link (components and
   .ds-prose style their own). */
main :is(p, dd) > a:not([class]) {
    color: var(--ink-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
main :is(p, dd) > a:not([class]):focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* No double-tap zoom delay on controls; the tap flash is replaced by each
   component's own pressed state. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"],
[role="tab"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Bare headings fall back to the design system's type scale; component and
   ds- type classes override these. Family: ds.css §1 (display face). */
h1 { font-size: var(--type-large-title-size); line-height: var(--type-large-title-leading); }
h2 { font-size: var(--type-title-1-size); line-height: var(--type-title-1-leading); }
h3 { font-size: var(--type-title-2-size); line-height: var(--type-title-2-leading); }
h4 { font-size: var(--type-title-3-size); line-height: var(--type-title-3-leading); }
h5,
h6 { font-size: var(--type-headline-size); line-height: var(--type-headline-leading); }
/* Balanced lines, and a long word or URL in a CMS title wraps instead of
   overflowing the page. */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

/* Buttons are unstyled until a component class styles them. */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    border-width: 0;
    border-style: none;
}
button,
input {
    overflow: visible;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

/* Reading pages (article / success-story detail) sit on the raised surface. */
body.page-raised {
    background-color: var(--surface-raised);
}