/**
 * ESPRit brand stylesheet for YOOtheme Pro / UIkit.
 *
 * Derived from template-style.md.
 * Palette: primary #23a9da, accent #c93727, tint #f4f9fd, frame #eaedf1.
 * Typography: Merriweather (serif, body + headings) + Source Sans Pro (ui/meta).
 */

/* ===========================================================================
   1. Webfonts — self-hosted, woff2 with woff fallback
   ======================================================================== */

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Merriweather Regular'), local('Merriweather-Regular'),
         url('../fonts/merriweather-v21-latin-regular.woff2') format('woff2'),
         url('../fonts/merriweather-v21-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Merriweather Bold'), local('Merriweather-Bold'),
         url('../fonts/merriweather-v21-latin-700.woff2') format('woff2'),
         url('../fonts/merriweather-v21-latin-700.woff') format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
         url('../fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'),
         url('../fonts/source-sans-pro-v13-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
         url('../fonts/source-sans-pro-v13-latin-600.woff2') format('woff2'),
         url('../fonts/source-sans-pro-v13-latin-600.woff') format('woff');
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
         url('../fonts/source-sans-pro-v13-latin-700.woff2') format('woff2'),
         url('../fonts/source-sans-pro-v13-latin-700.woff') format('woff');
}

/* ===========================================================================
   2. Brand tokens as CSS custom properties
   ======================================================================== */

:root {
    --esprit-primary:       #0f6c91;   /* accessible foreground blue — 4.8:1 on white, 4.8:1 behind white text */
    --esprit-primary-light: #23a9da;   /* original brand sky-blue — decorative use only (facets, accents, backgrounds with no text over them) */
    --esprit-primary-dark:  #0a4e6b;   /* hover/active darker step */
    --esprit-accent:        #c93727;
    --esprit-accent-dark:   #a82d20;
    --esprit-tint:          #f4f9fd;
    --esprit-frame:         #eaedf1;
    --esprit-border:        #9ca0a5;
    --esprit-muted:         #6a6c6f;   /* accessible muted — 4.9:1 on frame, 6.2:1 on white */
    --esprit-stripe:        #e0e4ec;
    --esprit-text:          #000000;
    --esprit-on-dark:       #ffffff;

    --esprit-font-serif:    'Merriweather', Georgia, 'Times New Roman', serif;
    --esprit-font-sans:     'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Override a handful of UIkit 3 CSS custom properties where they exist. */
    --uk-breakpoint-s:      640px;
    --uk-breakpoint-m:      960px;
    --uk-breakpoint-l:      1200px;
    --uk-breakpoint-xl:     1600px;
}

/* ===========================================================================
   3. Global typography (body, headings, paragraphs)
   ======================================================================== */

html {
    font-family: var(--esprit-font-serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--esprit-text);
    background-color: var(--esprit-frame);
}

body {
    font-family: var(--esprit-font-serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--esprit-text);
    background-color: var(--esprit-frame);
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge {
    font-family: var(--esprit-font-serif);
    font-weight: 700;
    color: var(--esprit-primary);
    letter-spacing: 0;
    text-transform: none;
}

h1, .uk-h1 { font-size: 32px; line-height: 1.25; }
h2, .uk-h2 { font-size: 24px; line-height: 1.3; }
h3, .uk-h3 { font-size: 20px; line-height: 1.3; }
h4, .uk-h4 { font-size: 17px; line-height: 1.3; }
h5, .uk-h5 { font-size: 14px; line-height: 1.3; }
h6, .uk-h6 { font-size: 13px; line-height: 1.3; }

p {
    font-family: var(--esprit-font-serif);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: var(--esprit-text);
}

/* UI elements that in the legacy template used Source Sans Pro. */
.uk-navbar, .uk-nav, .uk-subnav, .uk-breadcrumb,
.uk-button, .uk-label, .uk-badge,
.uk-pagination, .uk-form,
.tm-footer, footer {
    font-family: var(--esprit-font-sans);
}

/* ===========================================================================
   4. Links — blue default, red-orange hover (global);
      black + bold inside article content, red-orange hover.
   ======================================================================== */

a,
.uk-link {
    color: var(--esprit-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}
a:hover,
a:focus,
.uk-link:hover {
    color: var(--esprit-accent);
    text-decoration: underline;
}

/* Menu-type links, buttons and the logo stay un-underlined. */
.uk-navbar-nav a,
.uk-navbar-nav a:hover,
.uk-navbar-dropdown-nav a,
.uk-navbar-dropdown-nav a:hover,
.uk-breadcrumb a,
.uk-breadcrumb a:hover,
.uk-button,
.uk-button:hover,
.uk-logo,
.uk-logo:hover,
.uk-logo a,
.uk-logo a:hover,
.uk-icon-button,
.uk-pagination a,
.uk-pagination a:hover {
    text-decoration: none;
}

/* Article body links — echoes the legacy "#content a" rule. */
.uk-article a:not(.uk-button):not(.uk-icon-button):not(.uk-logo),
article a:not(.uk-button):not(.uk-icon-button):not(.uk-logo),
.tm-content a:not(.uk-button):not(.uk-icon-button):not(.uk-logo) {
    color: var(--esprit-text);
    font-weight: 700;
}
.uk-article a:not(.uk-button):not(.uk-icon-button):not(.uk-logo):hover,
article a:not(.uk-button):not(.uk-icon-button):not(.uk-logo):hover,
.tm-content a:not(.uk-button):not(.uk-icon-button):not(.uk-logo):hover {
    color: var(--esprit-accent);
}

/* ===========================================================================
   5. Navigation — primary navbar items + hover/active pill
   ======================================================================== */

.uk-navbar-nav > li > a {
    font-family: var(--esprit-font-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--esprit-text);
    padding: 14px 15px 10px 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 0;
    border-radius: 0;
    position: relative;
}

.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li.uk-open > a {
    background-color: var(--esprit-primary);
    color: var(--esprit-on-dark);
}

/* Dropdown (sub-menu) — pale-blue tint, sans font, slightly smaller than primary nav. */
.uk-navbar-dropdown,
.uk-navbar-dropdown-nav {
    background-color: var(--esprit-tint);
    font-family: var(--esprit-font-sans);
    font-size: 16px;
    line-height: 1.45;
    border-radius: 0;
    box-shadow: none;
}
.uk-navbar-dropdown {
    width: 350px;
}
.uk-navbar-dropdown-nav > li > a {
    color: var(--esprit-text);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 5px 10px 20px;
}
.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li.uk-active > a {
    color: var(--esprit-primary);
    background-color: transparent;
}

/* Collapse the gap between primary navbar items at @m and up
   (mirrors @navbar-nav-gap-m: 0px from the YOOtheme Customizer export). */
@media (min-width: 960px) {
    .uk-navbar-nav { gap: 0; }
}

/* Footer / sidebar Nav (UIkit Nav component, .uk-nav-default).
   Mirrors the @nav-default-* values from the YOOtheme Customizer export. */
.uk-nav-default {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: none;
}
.uk-nav-default > li > a {
    color: #0F6C91;                    /* @esprit-primary */
}
.uk-nav-default > li > a:hover,
.uk-nav-default > li > a:focus {
    color: #C93727;                    /* @esprit-accent */
}

/* ===========================================================================
   6. Header band — 23 px faceted strip above the header
   ======================================================================== */

body::before {
    content: "";
    display: block;
    height: 23px;
    background: url('../images/header-band.png') repeat-x left top;
    background-size: auto 23px;
}

/* ===========================================================================
   7. Footer band — 114 px faceted strip
   ======================================================================== */

footer,
.tm-footer {
    background: var(--esprit-frame) url('../images/footer-band.png') repeat-x left top;
    min-height: 114px;
    margin-top: 60px;
    padding: 30px 0;
    color: var(--esprit-on-dark);
    font-family: var(--esprit-font-sans);
    font-weight: 600;
    font-size: 10px;
    line-height: 17px;
}
footer a,
.tm-footer a {
    color: var(--esprit-on-dark);
}
footer a:hover,
.tm-footer a:hover {
    color: var(--esprit-text);
}

/* ===========================================================================
   8. Breadcrumb — editorial strip: chevron dividers, sentence-case sans, muted.
   Sizes/colours mirror the YOOtheme Customizer @breadcrumb-* export.
   ======================================================================== */

.uk-breadcrumb {
    font-family: var(--esprit-font-sans);
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    padding: 5px 0;
    border-top: 1px solid var(--esprit-frame);
    border-bottom: 1px solid var(--esprit-frame);
    list-style: none;
}
.uk-breadcrumb > * {
    font-size: 26px;
}
.uk-breadcrumb > * > * {
    color: var(--esprit-primary);               /* #0f6c91 */
    font-size: 22px;
    text-decoration: none;
    transition: color 0.15s ease-out;
}
.uk-breadcrumb > * > :hover,
.uk-breadcrumb > * > :focus {
    color: var(--esprit-accent);                /* #C93727 */
    text-decoration: none;
}
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
    content: "\203A";
    display: inline-block;
    margin: 0 12px;
    color: var(--esprit-border);
    font-weight: 400;
}
.uk-breadcrumb > .uk-active > span {
    color: var(--esprit-accent);                /* #C93727 */
    font-weight: 600;
}

/* ===========================================================================
   9. Buttons — primary = blue fill, hover = white fill + blue text/border
   ======================================================================== */

.uk-button,
.uk-button-primary,
.uk-button-default {
    font-family: var(--esprit-font-sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 0;
    padding: 15px 32px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.uk-button-primary,
.uk-button.joinbutton {
    background-color: var(--esprit-primary);
    color: var(--esprit-on-dark);
    border-color: var(--esprit-primary);
}
.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-button.joinbutton:hover {
    background-color: var(--esprit-on-dark);
    color: var(--esprit-primary);
    border-color: var(--esprit-primary);
}

.uk-button-secondary {
    background-color: var(--esprit-accent);
    color: var(--esprit-on-dark);
    border-color: var(--esprit-accent);
}
.uk-button-secondary:hover,
.uk-button-secondary:focus {
    background-color: var(--esprit-on-dark);
    color: var(--esprit-accent);
    border-color: var(--esprit-accent);
}

/* ===========================================================================
   10. Sidebar module cards — the signature "diagonal corner" pattern
       Opt-in via .tm-module-events / .tm-module-twitter on the module wrapper.
   ======================================================================== */

.tm-module-events,
.tm-module-twitter {
    width: 100%;
    max-width: 261px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.tm-module-events .uk-panel-title,
.tm-module-events h3,
.tm-module-twitter .uk-panel-title,
.tm-module-twitter h3 {
    font-family: var(--esprit-font-serif);
    font-weight: 700;
    font-size: 20px;
    height: 58px;
    margin: 0;
    padding: 25px 0 0 30px;
}

/* Events — white heading over a red-orange body */
.tm-module-events .uk-panel-title,
.tm-module-events h3 {
    background-color: var(--esprit-on-dark);
    color: var(--esprit-accent);
}
.tm-module-events > .uk-panel-title::after,
.tm-module-events > h3::after {
    content: "";
    display: block;
    height: 39px;
    margin: 0 0 0 -30px;
    background-color: var(--esprit-accent);
    clip-path: polygon(0 100%, 0 0, 100% 100%);
}
.tm-module-events .uk-panel > :not(.uk-panel-title):not(h3),
.tm-module-events > :not(.uk-panel-title):not(h3) {
    background-color: var(--esprit-accent);
    color: var(--esprit-on-dark);
    padding: 5px 20px 20px 30px;
    font-family: var(--esprit-font-sans);
    font-size: 15px;
    line-height: 20px;
}
.tm-module-events a {
    color: var(--esprit-on-dark);
    font-style: italic;
}
.tm-module-events a:hover {
    color: var(--esprit-text);
}

/* Twitter — inverse: blue heading + body, white cutout */
.tm-module-twitter .uk-panel-title,
.tm-module-twitter h3 {
    background-color: var(--esprit-primary);
    color: var(--esprit-on-dark);
}
.tm-module-twitter > .uk-panel-title::after,
.tm-module-twitter > h3::after {
    content: "";
    display: block;
    height: 39px;
    margin: 0 0 0 -30px;
    background-color: var(--esprit-primary);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.tm-module-twitter .uk-panel > :not(.uk-panel-title):not(h3),
.tm-module-twitter > :not(.uk-panel-title):not(h3) {
    background-color: var(--esprit-on-dark);
    color: var(--esprit-primary);
    padding: 10px 30px 20px 30px;
    font-family: var(--esprit-font-sans);
    font-size: 15px;
    line-height: 20px;
}

/* ===========================================================================
   11. Tables, forms, misc
   ======================================================================== */

.uk-table {
    font-family: var(--esprit-font-serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--esprit-text);
}
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--esprit-stripe);
    border-top: 0;
    border-bottom: 0;
}

.uk-form-label,
label {
    font-family: var(--esprit-font-serif);
    font-weight: 400;
    font-size: 17px;
    color: var(--esprit-text);
}

/* Logo sizing to match legacy 220 × 150 */
.uk-logo img {
    max-height: 150px;
    width: auto;
}

/* Reset the "img { max-width: none; }" hostile rule — let UIkit be responsive. */
img {
    max-width: 100%;
    height: auto;
}

/* ===========================================================================
   12. Section — vertical padding (mirrors @section-padding-vertical /
       @section-padding-vertical-m from the YOOtheme Customizer export).
   ======================================================================== */

.uk-section {
    padding-top: 10px;
    padding-bottom: 10px;
}
@media (min-width: 960px) {
    .uk-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* Top section (header row) — keep top spacing, remove bottom spacing. */
.tm-top.uk-section-default.uk-section {
    padding-top: 30px;
    padding-bottom: 0;
}