/*
* SG Accessibility Fixes - styles
* "html body" prefixes are deliberate: Elementor prints some of its CSS inside
* the page body, after this file, so equal-specificity rules would lose.
*/
/* ---------- Screen-reader-only text used by the script ---------- */
.sg-a11y-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Skip link target: no outline box around the whole page when it receives focus */
#content[tabindex="-1"]:focus {
outline: none;
}
/* ---------- 1.4.3 Colour contrast ---------- */
/* Brand blue #007BB5 fails on the pale grey sections (4.28:1 and 4.43:1).
Darken it to #00699B (6.0:1 on white, 5.5:1 on #F1F6F8) for text widgets and
buttons only; container backgrounds and the footer gradient keep the original. */
html body .elementor-widget-heading,
html body .elementor-widget-text-editor,
html body .elementor-widget-theme-post-title,
html body .elementor-widget-theme-post-content,
html body .elementor-widget-button,
html body .elementor-widget-icon-list,
html body .elementor-widget-icon-box {
--e-global-color-602fb74: #00699B;
}
/* Links inside body text: dark blue and underlined (were light blue, 2.2-2.4:1) */
html body .elementor-widget-text-editor a:not(.elementor-button),
html body .elementor-widget-theme-post-content a:not(.elementor-button) {
color: #00699B;
text-decoration: underline;
text-underline-offset: 0.15em;
}
html body .elementor-widget-text-editor a:not(.elementor-button):hover,
html body .elementor-widget-theme-post-content a:not(.elementor-button):hover {
color: #004666;
text-decoration-thickness: 2px;
}
/* Text typed into the editor with an inline brand-blue colour (style="color: #007bb5"),
e.g. the quote attribution on /greenberg-prize/ (4.28:1 on #F1F6F8) */
html body .elementor-widget-text-editor [style*="color: #007bb5" i],
html body .elementor-widget-text-editor [style*="color:#007bb5" i],
html body .elementor-widget-theme-post-content [style*="color: #007bb5" i],
html body .elementor-widget-theme-post-content [style*="color:#007bb5" i] {
color: #00699B !important;
}
/* Footer menus: hover was 40% white (1.9-2.9:1); active item was #EFF2F6.
Use solid white plus an underline so the state doesn't rely on colour. */
html body .elementor-location-footer .elementor-nav-menu--main .elementor-item:hover,
html body .elementor-location-footer .elementor-nav-menu--main .elementor-item:focus,
html body .elementor-location-footer .elementor-nav-menu--main .elementor-item.elementor-item-active {
color: #FFFFFF !important;
opacity: 1 !important;
text-decoration: underline !important;
text-underline-offset: 0.2em;
}
/* Header search. The widget's own custom CSS uses !important with
".elementor-73 .elementor-element.elementor-element-7c78b51 ..." selectors, so these
rules repeat that chain behind "html body" to win. */
/* Visible field edge: the field's outer box (.e-search) had a #DCE4EA border (1.3:1).
#6B7785 is 4.7:1 on white. The input itself sits inside that box, so it gets no border of its own. */
html body .elementor-73 .elementor-element.elementor-element-7c78b51 .e-search {
border: 1px solid #6B7785 !important;
}
/* Placeholder: was #98A6B3 at 13.6px (2.49:1) */
html body .elementor-73 .elementor-element.elementor-element-7c78b51 .e-search-input::placeholder {
color: #5F6B78 !important;
opacity: 1 !important;
font-size: 1rem !important;
}
/* Focus ring on the input (the widget set outline:0 !important) */
html body .elementor-73 .elementor-element.elementor-element-7c78b51 .e-search-input:focus,
html body .elementor-73 .elementor-element.elementor-element-7c78b51 .e-search-input:focus-visible {
outline: 3px solid #004666 !important;
outline-offset: 1px !important;
}
/* Fallback for any other search widget */
html body .e-search-input::placeholder {
color: #5F6B78;
opacity: 1;
}
/* ---------- 2.4.7 / 2.4.11 Visible keyboard focus ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [role="button"]:focus-visible,
html body [tabindex]:not([tabindex="-1"]):focus-visible {
outline: 3px solid #004666 !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 5px #FFFFFF !important;
}
/* Form fields show a ring whenever they have focus, including mouse clicks */
html body .elementor-field-group .elementor-field-textual:focus,
html body .e-search-input:focus {
outline: 3px solid #004666 !important;
outline-offset: 1px !important;
}
/* On the blue footer a white ring is the visible one */
html body .elementor-location-footer a:focus-visible,
html body .elementor-location-footer button:focus-visible {
outline-color: #FFFFFF !important;
box-shadow: 0 0 0 5px #004666 !important;
}
/* ---------- 1.4.10 Reflow ---------- */
/* Desktop header. The row (d58004f) was a fixed 1369px, wider than the 1300px content area,
so the search box ran off-screen and pages scrolled sideways below ~1440px.
Make the row fluid and let the menu + search line (19bc2a2) share the space.
Item spacing tightens a little below 1440px so the whole menu stays on one line.
Only above 1024px: tablet and phone use the hamburger layout, which is unchanged. */
@media (min-width: 1025px) {
html body .elementor-73 .elementor-element.elementor-element-d58004f {
--width: 100%;
--flex-shrink: 1;
max-width: 100%;
}
html body .elementor-73 .elementor-element.elementor-element-ff563ec {
--width: auto;
--flex-grow: 1;
--flex-shrink: 1;
min-width: 0;
}
html body .elementor-73 .elementor-element.elementor-element-19bc2a2 {
--width: 100%;
min-width: 0;
/* Fits on one line from about 1240px up; narrower desktop windows
drop the search box onto its own line instead of scrolling sideways */
flex-wrap: wrap;
column-gap: 16px;
row-gap: 8px;
}
html body .elementor-73 .elementor-element.elementor-element-fe90f1b {
flex: 0 0 auto;
width: auto;
max-width: none;
/* 15px each side (30px between items) from 1440px up, about 7.5px each side (15px between items) at 1280px */
--e-nav-menu-horizontal-menu-item-margin: clamp(7px, calc(4.375vw - 48.5px), 15px);
}
html body .elementor-73 .elementor-element.elementor-element-7c78b51.ds-header-search {
/* original width 266px; may narrow to 200px before it moves to its own line */
--flex-grow: 1;
--flex-shrink: 1;
flex: 1 1 200px;
min-width: 200px;
max-width: 266px;
margin-left: auto;
}
}
/* Contact page: a 3px side margin pushed the form 3px past the screen edge on phones */
@media (max-width: 1024px) {
html body .elementor-1714 .elementor-element.elementor-element-e3a465b {
--margin-left: 0px;
--margin-right: 0px;
}
}
/* ---------- 1.4.4 Small text (minimum ~14px) ---------- */
html body.elementor-kit-8 {
--e-global-typography-f9db513-font-size: 0.875rem; /* was 11.6px */
}
@media (max-width: 767px) {
html body.elementor-kit-8 {
--e-global-typography-4121b43-font-size: 0.875rem; /* home hero line, was 9.6px */
--e-global-typography-738f7ab-font-size: 0.9rem; /* was 12.8px */
}
}
/* Video library: duration labels in the video loop template (919), were 12px */
html body .elementor-919 .elementor-element.elementor-element-b99b73c .elementor-icon-list-item > .elementor-icon-list-text,
html body .elementor-919 .elementor-element.elementor-element-b99b73c .elementor-icon-list-item > a {
font-size: 0.875rem;
}
/* Podcasts: duration and date labels in the podcast loop template (2857), were 12px */
html body .elementor-2857 .elementor-element.elementor-element-b99b73c .elementor-icon-list-item > .elementor-icon-list-text,
html body .elementor-2857 .elementor-element.elementor-element-b99b73c .elementor-icon-list-item > a {
font-size: 0.875rem;
}
/* The Movie page (2371): eyebrow headings "The Movie", "Inside the Film", "The Film" and
"The Story Continues", 0.8rem (12.8px) on phones */
@media (max-width: 767px) {
html body .elementor-2371 .elementor-element.elementor-element-e6e6a9e .elementor-heading-title,
html body .elementor-2371 .elementor-element.elementor-element-f7f3391 .elementor-heading-title,
html body .elementor-2371 .elementor-element.elementor-element-8e8b30a .elementor-heading-title,
html body .elementor-2371 .elementor-element.elementor-element-9f67458 .elementor-heading-title {
font-size: 0.875rem;
}
}
/* ---------- 2.2.2 Pause control for background video (button added by the script) ---------- */
.sg-a11y-video-toggle {
position: absolute;
z-index: 20;
right: 1rem;
bottom: 1rem;
padding: 0.5rem 0.9rem;
font: 600 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: #FFFFFF;
background: rgba(0, 0, 0, 0.75);
border: 2px solid #FFFFFF;
border-radius: 4px;
cursor: pointer;
}
.sg-a11y-video-toggle:hover {
background: #000000;
}
/* ---------- 2.1.1 / 2.4.3 Keyboard access to animated sections ----------
Elementor entrance animations keep sections at visibility:hidden (.elementor-invisible)
until they scroll into view, so Tab skipped them (the whole footer included).
On the first Tab key press the script adds .sg-a11y-kbd to and marks those
sections .sg-a11y-shown: they appear at once, without the animation.
Mouse and touch visitors keep the animations. */
html body.sg-a11y-kbd .elementor-invisible,
html body .sg-a11y-shown {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
}
/* ---------- 2.3.3 Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html body .elementor-invisible {
visibility: visible !important;
opacity: 1 !important;
}
}