/* The only CSS of our own (everything else is the live site's CSS, served as-is).
   1. The editor's island wrappers must not change the layout: they take no box.
   2. The consent banner, the footer line and the media placeholders (not on the live site): Anton + Roboto and the
      kit orange #FF9C00 of the live site.
   3. No sideways scroll: the live marquee is 10000vw wide and scrolls the page at 1440 px; clipping it changes
      nothing a visitor sees at the top of the page. */
.replica-island { display: contents; }

.replica-consent { position: fixed; z-index: 99999; left: 16px; right: 16px; bottom: 16px; max-width: 440px; margin-left: auto;
  background: #fff; color: #1c244b; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); padding: 20px 22px;
  font-family: "Roboto", sans-serif; font-size: 14px; line-height: 1.5; }
.replica-consent[hidden] { display: none; }
.replica-consent__title { font-family: "Anton", sans-serif; font-size: 22px; text-transform: uppercase; color: #ff9c00; margin: 0 0 6px; }
.replica-consent p { margin: 0 0 12px; }
.replica-consent a { color: #1c244b; text-decoration: underline; }
.replica-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.replica-consent button { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 15px; letter-spacing: .5px; border-radius: 5px;
  padding: 10px 18px; cursor: pointer; border: 2px solid #ff9c00; }
/* "Refuse all" and "Accept all" look exactly the same on purpose (GBA checklist: no nudging by
   colour); "Settings" is a button of the same size, outlined. Second layer: one switch per purpose, none ticked. */
.replica-consent { max-height: calc(100vh - 32px); overflow-y: auto; }
.replica-consent__list { margin: 0 0 10px; padding-left: 18px; }
.replica-consent__list li { margin: 0 0 2px; }
.replica-consent__btn { background: #ff9c00; color: #1c244b; flex: 1 1 0; min-width: 120px; } /* navy on orange: 6.9:1 */
.replica-consent button.replica-consent__btn--settings { background: #fff; }
/* the theme styles every button:hover (Astra: blue); here hover/focus/active change NOTHING but a darker edge, the same
   for "Refuse all" and "Accept all", so no colour ever favours one answer (EDPB cookie banner taskforce, type D/E) */
.replica-consent button.replica-consent__btn:hover, .replica-consent button.replica-consent__btn:focus, .replica-consent button.replica-consent__btn:active { background: #ff9c00; color: #1c244b; border-color: #1c244b; }
.replica-consent button.replica-consent__btn--settings:hover, .replica-consent button.replica-consent__btn--settings:focus, .replica-consent button.replica-consent__btn--settings:active { background: #fff; color: #1c244b; border-color: #1c244b; }
.afroton-media-ph__load:hover, .afroton-media-ph__load:focus, .afroton-media-ph__load:active, .replica-cookie-settings:hover, .replica-cookie-settings:focus, .replica-cookie-settings:active { background: #ff9c00; color: #1c244b; border-color: #1c244b; }
.replica-consent button[hidden] { display: none; }
.replica-consent__options { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.replica-consent__options[hidden] { display: none; }
.replica-consent__options label { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; cursor: pointer; }
.replica-consent__options label.is-fixed { cursor: default; opacity: .85; }
.replica-consent__options input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: #ff9c00; }
.replica-consent button:focus-visible, .replica-consent a:focus-visible { outline: 3px solid #1c244b; outline-offset: 2px; }
.replica-consent__title:focus { outline: none; }
@media print { .replica-consent { display: none !important; } }

/* the footer line on every page: privacy policy + cookie settings (Astra's footer is empty on live) */
.replica-footer-links { margin: 0; padding: 14px 16px 18px; text-align: center; font-family: "Roboto", sans-serif; font-size: 13px; line-height: 1.6; background: #fff; color: #1c244b; }
.replica-footer-links a { color: #1c244b; text-decoration: underline; }
.replica-footer-links a:focus-visible { outline: 3px solid #1c244b; outline-offset: 2px; }

/* a YouTube or Spotify player held back until the visitor allows external media */
.afroton-media-ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  min-height: 152px; overflow: hidden; border-radius: 12px; background: #1c244b; color: #fff; font-family: "Roboto", sans-serif; }
.elementor-video .afroton-media-ph { aspect-ratio: 16 / 9; border-radius: 0; }
.afroton-media-ph__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.afroton-media-ph__box { position: relative; max-width: 420px; padding: 14px 16px; text-align: center; font-size: 13px; line-height: 1.45; }
.afroton-media-ph__box p { margin: 0 0 10px; color: #fff; }
.afroton-media-ph__load { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 15px; letter-spacing: .5px; border-radius: 5px;
  padding: 9px 16px; cursor: pointer; border: 2px solid #ff9c00; background: #ff9c00; color: #1c244b; }
.afroton-media-ph__settings { display: block; margin-top: 8px; color: #fff; text-decoration: underline; }
.afroton-media-ph__load:focus-visible, .afroton-media-ph__settings:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.afroton-embed template { display: none; }

html, body { overflow-x: clip; }

/* /privacy/: the measured cookie table (scrolls sideways inside its own box on a phone, never the page) */
.replica-cookie-table-wrap { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.replica-cookie-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.replica-cookie-table th, .replica-cookie-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(28, 36, 75, .2); }
.replica-cookie-table th { font-weight: 700; }
.replica-cookie-table code { font-size: 13px; word-break: break-all; }
.replica-cookie-settings { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 15px; letter-spacing: .5px; border-radius: 5px;
  padding: 10px 18px; cursor: pointer; border: 2px solid #ff9c00; background: #ff9c00; color: #1c244b; }
.replica-cookie-settings:focus-visible { outline: 3px solid #1c244b; outline-offset: 2px; }
/* live's legal bar: "Privacy Policy" is now a link, in the bar's own colour */
a[data-afroton-legal] { color: inherit; text-decoration: underline; }

/* the e-mail box under "JOIN OUR COMMUNITY" in the footer (20/10/2026): the same sign-up as the orange home card, on
   the footer's white, in the site's orange and fonts. Field and button share one row where it fits and wrap below
   that; both stay at least 46 px tall, so they are easy to tap. The theme styles every input and button:hover itself,
   hence the explicit colours on every state. */
form.afro-signup { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; max-width: 460px; font-family: "Arial", sans-serif; }
form.afro-signup *, form.afro-signup *::before, form.afro-signup *::after { box-sizing: border-box; }
form.afro-signup .afro-signup__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form.afro-signup .afro-signup__row { display: flex; flex-wrap: wrap; gap: 8px; }
form.afro-signup .afro-signup__input { flex: 1 1 180px; min-width: 0; min-height: 46px; margin: 0; padding: 10px 14px; border: 2px solid #ff9c00; border-radius: 3px;
  background: #fff; color: #111; font-family: "Arial", sans-serif; font-size: 16px; line-height: 1.3; box-shadow: none; }
form.afro-signup .afro-signup__input::placeholder { color: #6b6b6b; opacity: 1; }
form.afro-signup .afro-signup__input:focus { border-color: #1c244b; outline: none; }
form.afro-signup .afro-signup__btn { flex: 0 0 auto; min-height: 46px; min-width: 104px; margin: 0; padding: 10px 22px; border: 2px solid #ff9c00; border-radius: 3px;
  background: #ff9c00; color: #fff; font-family: "Anton", sans-serif; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; cursor: pointer; }
form.afro-signup .afro-signup__btn:hover, form.afro-signup .afro-signup__btn:focus, form.afro-signup .afro-signup__btn:active { background: #111; border-color: #111; color: #fff; }
form.afro-signup .afro-signup__btn[disabled] { opacity: .6; cursor: wait; }
form.afro-signup .afro-signup__input:focus-visible, form.afro-signup .afro-signup__btn:focus-visible { outline: 3px solid #1c244b; outline-offset: 2px; }
form.afro-signup .afro-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.afro-signup .afro-signup__consent { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--e-global-color-text, #54595f); }
form.afro-signup .afro-signup__consent a { color: inherit; text-decoration: underline; }
form.afro-signup .afro-signup__msg { min-height: 1.4em; margin: 0; font-size: 14px; font-weight: 700; color: #111; }
form.afro-signup .afro-signup__msg a { color: inherit; text-decoration: underline; }