/* Real cuts for the existing theme families, so bold/italic is not faked by the browser.
   "Vito-Regular" (running text) gets its italics only: there is no upright Vito Bold, so
   <strong> stays as before (adding Black would turn every <strong> into Black). */
@font-face {
    font-family: "Vito-Regular";
    src: url("../fonts/vito-italic.woff2") format("woff2");
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito-Regular";
    src: url("../fonts/vito-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito-Wide-Regular";
    src: url("../fonts/vito-wide-light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
/* Main menu (.uk-navbar-nav) is set to weight 500 in the theme */
@font-face {
    font-family: "Vito-Wide-Regular";
    src: url("../fonts/vito-wide-medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Vito-Wide-Regular";
    src: url("../fonts/vito-wide-italic.woff2") format("woff2");
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito-Wide-Regular";
    src: url("../fonts/vito-wide-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Vito-Wide-Regular";
    src: url("../fonts/vito-wide-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Vito: Regular 400, Italic 400 italic, Bold Italic 700 italic, Black 900 */
@font-face {
    font-family: "Vito";
    src: url("../fonts/vito-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Vito";
    src: url("../fonts/vito-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito";
    src: url("../fonts/vito-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito";
    src: url("../fonts/vito-black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

/* Vito Wide: Light 300, Regular 400, Italic 400 italic, Medium 500, Bold 700,
   Bold Italic 700 italic, Black Italic 900 italic */
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-black-italic.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Vito Wide";
    src: url("../fonts/vito-wide-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Utility classes for editors (YOOtheme: element > Advanced > CSS class) */
.aav-wide-light { font-family: "Vito Wide", sans-serif; font-weight: 300; }
.aav-wide-medium { font-family: "Vito Wide", sans-serif; font-weight: 500; }
.aav-wide-black-italic { font-family: "Vito Wide", sans-serif; font-weight: 900; font-style: italic; }
.aav-wide-bold { font-family: "Vito Wide", sans-serif; font-weight: 700; }
.aav-accent { font-family: "Vito Wide", sans-serif; font-weight: 700; font-style: italic; }
.aav-emphasis { font-family: "Vito", sans-serif; font-weight: 700; font-style: italic; }
.aav-black { font-family: "Vito", sans-serif; font-weight: 900; }

/* Backdrop headings as in the catalogue: text on the black backdrop in Vito Wide Medium,
   accent phrase in Vito Wide Bold Italic. Editors mark backdrops with inline
   `background: #000000`; the accent is the span marked `font-style: bold-italic` (not valid
   CSS, so browsers ignored it until now) or set in an accent colour (anything not white). */
/* Vertical position (catalogue: baseline 0.825em below the bar top, 0.15em above the caps).
   An inline bar is as tall as the font's ascent+descent, so the top padding makes up the
   difference: Medium OTF ascent 0.75 -> 0.075em; Bold Italic TTF ascent 1573/2048 = 0.768
   -> 0.057em. Padding instead of ascent-override because Safari does not support that. */
:is(h1, h2, h3, h4, h5, h6) span:is([style*="background: #000"], [style*="background:#000"]) {
    font-family: "Vito Wide", sans-serif;
    font-weight: 500;
    font-style: normal;
    padding-top: 0.075em !important;
    padding-bottom: 0 !important;
}
:is(h1, h2, h3, h4, h5, h6) span:is([style*="background: #000"], [style*="background:#000"]):is([style*="bold-italic"], :not([style*="color: #fff"], [style*="color:#fff"])) {
    font-weight: 700;
    font-style: italic;
    padding-top: 0.057em !important;
    padding-bottom: 0.018em !important;   /* descent 0.232 -> same 1.075em bar as Medium */
}

/* Homepage intro band (section class "aav-intro-band", below the hero video): the headline
   (class "aav-edge-headline") is pulled up so the top of its SECOND bar sits exactly on the
   bottom edge of the video. Bar 2 top below the h1 top = 1 line + half-leading + strut ascent
   (Vito-Wide-Regular 0.792em) - bar baseline offset (0.825em) = 1.5lh - 0.533em. */
.aav-intro-band { padding-top: 0 !important; padding-bottom: 70px !important; }
.aav-edge-headline {
    position: relative;
    z-index: 2;
    margin-top: calc(0.533em - 1.5lh - 2px) !important;   /* -2px: rather overlap the video than leave a white hairline */
    margin-bottom: 0 !important;
}
.aav-intro-lead {
    font-family: "Vito Wide", sans-serif;
    font-weight: 300;
    font-size: 23px;
    line-height: 1.5;
    color: #231f20;
    max-width: 860px;
    margin-top: 36px !important;
}
.aav-intro-lead strong { font-weight: 700; }
@media (max-width: 959px) { .aav-intro-lead { font-size: 19px; } }

/* Homepage buttons. Small buttons keep their shape, typography only. All others: black bar,
   Vito Wide Medium caps, arrow in the tile's accent colour (cyan if the tile headline uses
   cyan, else magenta); hover fills the bar with the accent. */
.home .uk-button-small {
    font-family: "Vito Wide", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}
.home .uk-button:not(.uk-button-small) {
    --aav-acc: #e32ca0;
    font-family: "Vito Wide", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    line-height: 44px;
    padding: 0 20px;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
    transition: background-color 0.15s, color 0.15s;
}
.home .uk-grid > *:has(h1 span[style*="#40efff"], h2 span[style*="#40efff"], h2 span[style*="#00ffff"]) .uk-button:not(.uk-button-small) { --aav-acc: #40efff; }
.home .uk-button:not(.uk-button-small)::after { content: "\2192"; color: var(--aav-acc); margin-left: 0.7em; font-weight: 700; }
.home .uk-button:not(.uk-button-small):hover { background: var(--aav-acc); color: #000; }
.home .uk-button:not(.uk-button-small):hover::after { color: #000; }