/* Elektro-mag - Base / Design system
   Extracted from style.css. Loaded after parent styles via functions.php. */

/*
Design system
Surfaces use a 16px radius. Controls use an 8px radius. Red is reserved for
actions and emphasis; navy carries the corporate structure.
*/

:root {
    color-scheme: light;
    --em-navy-950: #10253d;
    --em-navy-900: #173556;
    --em-navy-800: #214568;
    --em-red-700: #bd312d;
    --em-red-600: #cc3a35;
    --em-cyan-600: #1683a9;
    --em-ink: #172536;
    --em-muted: #596979;
    --em-line: #d9e1e8;
    --em-surface: #f3f6f8;
    --em-surface-strong: #e8eef2;
    --em-paper: #fdfdfc;
    --em-radius-surface: 16px;
    --em-radius-control: 8px;
    --em-transition: 180ms cubic-bezier(.16, 1, .3, 1);
    --em-font-sans: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--em-paper);
    color: var(--em-ink);
    font-family: var(--em-font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.006em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
input,
select,
textarea,
button {
    font-family: var(--em-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.header,
.footerHeading,
#menu a {
    font-family: var(--em-font-sans);
}

::selection {
    background: #f2d6d4;
    color: var(--em-navy-950);
}

a {
    color: var(--em-red-700);
    transition: color var(--em-transition), background-color var(--em-transition), border-color var(--em-transition), transform var(--em-transition);
}

a:hover {
    color: var(--em-navy-900);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(22, 131, 169, .42);
    outline-offset: 3px;
}

img {
    max-width: 100%;
    height: auto;
}

/*
The parent theme centres legacy card media with a translate transform when .center is used.
*/
.safirthumb .center > img {
    transform: translate(-50%, -50%);
}

body {
    overflow-x: clip;
}

.innerContainer {
    width: min(1240px, calc(100% - 64px));
    max-width: 1240px;
    margin-inline: auto;
}