/* =============================================================
   Velocity Club — Central Custom Styles
   All Velocity Club overrides and custom components live here.
   Base design system: motion.css (Momentum CDN)
   Breakpoints: mobile/tablet < 1248px | desktop >= 1248px
   ============================================================= */


/* -------------------------------------------------------------
   Header bar
   ------------------------------------------------------------- */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #f3f3f3;
    padding: 8px 0;
    box-shadow: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#main-nav.scrolled {
    background-color: #fff; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}


/* -------------------------------------------------------------
   Inner container
   ------------------------------------------------------------- */
#main-nav .container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
}

@media (max-width: 992px) {
    #main-nav .container {
        padding: 0 1rem;
    }
}


/* -------------------------------------------------------------
   Logo / branding
   ------------------------------------------------------------- */
.branding a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.branding img {
    width: 128px;
    height: auto;
    max-height: 60px;
    display: block;
}


/* -------------------------------------------------------------
   Hamburger toggle icon — mobile right side
   ------------------------------------------------------------- */
.mdc-top-app-bar__navigation-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000;
    text-decoration: none;
    line-height: 1;
    padding: 4px;
    border: none;
    background: transparent;
    margin-left: auto;
}

.mdc-top-app-bar__navigation-icon .uil {
    color: #000;
}

.mdc-top-app-bar__navigation-icon:hover {
    color: #d70f12;
}

.nav-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    pointer-events: none;
}

.drawer_visible .nav-dot {
    display: none;
}

.drawer_visible #main-nav {
    background-color: transparent !important;
    box-shadow: none !important;
}

.drawer_visible .mdc-top-app-bar__navigation-icon {
    position: relative;
    z-index: 6;
    color: #fff;
}

.drawer_visible .mdc-top-app-bar__navigation-icon .uil {
    color: #fff;
}


/* -------------------------------------------------------------
   Right column — nav links + CTA
   ------------------------------------------------------------- */
#vc-top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    padding: 0 16px;
    gap: 8px;
}


/* -------------------------------------------------------------
   Nav links
   ------------------------------------------------------------- */
#vc-top-bar-right .mdc-top-app-bar__toplinks {
    color: #323232 !important;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    padding: 0 8px;
    line-height: 32px;
    white-space: nowrap;
    transition: color 0.2s ease-in-out;
}

#vc-top-bar-right .mdc-top-app-bar__toplinks.active {
    font-weight: 600;
    color: #323232;
}

#vc-top-bar-right .mdc-top-app-bar__toplinks:hover {
    color: #d70f12;
}


/* -------------------------------------------------------------
   CTA button
   ------------------------------------------------------------- */
#vc-top-bar-right .mdc-button.mdc-button--raised {
    min-width: 44px;
    max-width: 144px;
    width: 100%;
    white-space: nowrap;
}


/* -------------------------------------------------------------
   Home page banner — responsive sizing & background
   ------------------------------------------------------------- */
.inpage-banner {
    min-height: 480px;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 1247px) {
    .inpage-banner {
        min-height: 420px;
        background-position: center right;
    }
}

@media (max-width: 599px) {
    .inpage-banner {
        min-height: 520px;
        background-position: top center;
    }

    .inpage-banner .motion-homebanner__heading-container {
        padding: 2rem 1.5rem 2.5rem;
        text-align: left !important;
    }

    .inpage-banner .motion-homebanner__heading-body {
        text-align: left !important;
        float: none;
        width: 100%;
        margin: 0;
    }

    .inpage-banner .motion-homebanner__heading-body * {
        text-align: left !important;
    }

    .inpage-banner .banner-subscribe__form {
        margin-top: 1.25rem;
    }
}


/* -------------------------------------------------------------
   Home page banner — subscribe form
   ------------------------------------------------------------- */
.banner-subscribe__form {
    margin-top: 1.5rem;
}

.banner-subscribe__row {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 420px;
}

.banner-subscribe__input {
    flex: 1;
    height: 35px !important;
    min-height: 35px;
    padding: 0 16px;
    font-size: 1rem;
    color: #323232;
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.banner-subscribe__input:focus {
    border-color: #323232;
}

.banner-subscribe__input--error {
    border-color: #e11825;
}

.banner-subscribe__btn {
    height: 35px;
    padding: 0 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #e11825;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-subscribe__btn:hover {
    background-color: #c2101b;
}

.banner-subscribe__btn:disabled {
    cursor: default;
}

/* spinner element — hidden by default */
.banner-subscribe__spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: banner-spin 0.7s linear infinite;
    will-change: transform;
}

/* loading state */
.banner-subscribe__btn.is-loading .banner-subscribe__btn-label {
    display: none;
}

.banner-subscribe__btn.is-loading .banner-subscribe__spinner {
    display: block;
}

/* success state */
.banner-subscribe__btn.is-success {
    background-color: #e11825;
}

@keyframes banner-spin {
    to { transform: rotate(360deg); }
}

.banner-subscribe__error {
    display: block;
    margin-top: 6px;
    font-size: 0.875rem;
    color: #e11825;
    min-height: 1.2em;
}

@media (max-width: 599px) {
    .banner-subscribe__form {
        width: 100%;
    }

    .banner-subscribe__row {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    .banner-subscribe__input {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 4px;
        border-right: 1px solid #ccc;
        height: 35px;
    }

    .banner-subscribe__btn {
        width: auto !important;
        padding: 0 32px;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .banner-subscribe__input:focus {
        border-color: #323232;
    }

    .banner-subscribe__input--error {
        border-color: #e11825;
    }
}


/* -------------------------------------------------------------
   Home page — red nav (all states locked to red)
   Class added to <html> by inline script before first paint
   to prevent flash of grey on page load.
   ------------------------------------------------------------- */
html.nav--home #main-nav,
html.nav--home #main-nav.scrolled {
    background-color: #e11825;
    box-shadow: none;
}

html.nav--home #main-nav .branding img {
    filter: brightness(0) invert(1);
}

html.nav--home #main-nav #vc-top-bar-right .mdc-top-app-bar__toplinks,
html.nav--home #main-nav #vc-top-bar-right .mdc-top-app-bar__toplinks.active {
    color: #fff !important;
}

html.nav--home #main-nav #vc-top-bar-right .mdc-top-app-bar__toplinks:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.nav--home #main-nav .mdc-top-app-bar__navigation-icon,
html.nav--home #main-nav .mdc-top-app-bar__navigation-icon .uil {
    color: #fff;
}

html.nav--home #main-nav .nav-dot {
    background: #fff;
}

html.nav--home .drawer_visible #main-nav {
    background-color: transparent !important;
}


/* -------------------------------------------------------------
   Mobile overlay / backdrop
   Sits outside #main-nav so position:fixed covers the full
   viewport. z-index 100 puts it above page content but below
   the nav bar (999) and drawer.
   Uses opacity + pointer-events to avoid ghost-click issues.
   ------------------------------------------------------------- */
.nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer_visible .nav-overlay {
    opacity: 1;
    pointer-events: all;
}


/* -------------------------------------------------------------
   Mobile — drawer nav (< 1248px)
   ------------------------------------------------------------- */
@media (max-width: 1247px) {
    #vc-top-bar-right {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100%;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 80px 24px 24px;
        z-index: 5;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        gap: 16px;
        overflow-y: auto;
    }

    .drawer_visible #vc-top-bar-right {
        display: flex;
    }

    #vc-top-bar-right .mdc-top-app-bar__toplinks {
        font-size: 1.125rem;
        line-height: 1.5;
        padding: 8px 0;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Home page: drawer has white bg so links must be dark.
       Uses #main-nav + !important to beat the desktop white rule which also uses !important */
    html.nav--home .drawer_visible #main-nav #vc-top-bar-right .mdc-top-app-bar__toplinks,
    html.nav--home .drawer_visible #main-nav #vc-top-bar-right .mdc-top-app-bar__toplinks.active {
        color: #323232 !important;
    }

    html.nav--home .drawer_visible #main-nav #vc-top-bar-right .mdc-top-app-bar__toplinks:hover {
        color: #e11825 !important;
    }

    #vc-top-bar-right .mdc-button.mdc-button--raised {
        max-width: 100%;
        width: 100%;
        margin-top: 8px;
    }
}


/* -------------------------------------------------------------
   Desktop — horizontal nav (>= 1248px)
   ------------------------------------------------------------- */
@media (min-width: 1248px) {
    .mdc-top-app-bar__navigation-icon {
        display: none;
    }

    #vc-top-bar-right {
        display: flex !important;
    }
}


/* -------------------------------------------------------------
   Spotlight subscribe — mobile layout
   ------------------------------------------------------------- */
@media (max-width: 1247px) {
    /* Image sits above content on mobile/tablet */
    .spotlight-row__cell--image {
        width: 100%;
    }

    .spotlight-row__cell--image picture,
    .spotlight-row__cell--image img {
        width: 100%;
        height: auto;
        display: block;
    }
}

@media (max-width: 599px) {
    /* Tighten up spotlight body padding on small screens */
    .spotlight .motion-z-layout-content,
    .spotlight .spotlight-body {
        padding: 1.5rem 1rem !important;
    }

    /* Ensure subscribe form row stacks (same as banner) */
    .spotlight .banner-subscribe__row {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    .spotlight .banner-subscribe__input {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 4px;
        border-right: 1px solid #ccc;
        height: 35px;
    }

    .spotlight .banner-subscribe__btn {
        width: auto !important;
        padding: 0 32px;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .spotlight .banner-subscribe__input--error {
        border-color: #e11825;
    }
}


/* -------------------------------------------------------------
   Global page content typography
   Targets .vc-page-content (wraps all page body content in
   every layout — excludes nav and footer).
   Only applies to elements with no existing class so it never
   overrides MDC or motion.css classes set by the CMS.
   Values mirror the MDC typography scale from motion.css.
   ------------------------------------------------------------- */
.vc-page-content h1:not([class]) {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2em;
    margin: 0 0 16px;
}

.vc-page-content h2:not([class]) {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.04167em;
    margin: 0 0 16px;
}

.vc-page-content h3:not([class]) {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.36364em;
    margin: 0 0 16px;
}

.vc-page-content h4:not([class]) {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.17647em;
    margin: 0 0 16px;
}

.vc-page-content p:not([class]),
.vc-page-content ul:not([class]),
.vc-page-content ol:not([class]) {
    font-size: 1.03125rem;
    line-height: 1.6875em;
    font-weight: 300;
    letter-spacing: 1.25px;
}

@media (min-width: 1248px) {
    .vc-page-content h1:not([class]) {
        font-size: 3rem;
    }

    .vc-page-content h2:not([class]) {
        font-size: 2.3125rem;
    }

    .vc-page-content h4:not([class]) {
        font-size: 1.875rem;
    }
}


/* -------------------------------------------------------------
   Article pullquote — specific override within .article-body
   ------------------------------------------------------------- */
.article-body .pullquote p {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.17647em;
    margin: 0 0 16px;
}
.pullquote p {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.17647em;
    letter-spacing: .6px;
    margin: 0 0 16px;
}

@media (min-width: 1248px) {
    .article-body .pullquote p {
        font-size: 1.875rem;
    }
    .pullquote p {
        font-size: 1.9375rem!important;
    }
}


/* =============================================================
   Site-wide utility styles
   ============================================================= */

/* Social share grid */
.grid.grid-inner__full.social-share__grid {
    margin-bottom: 0;
    margin-top: 0;
}

/* Home banner */
.motion-homebanner {
    max-width: 1920px;
    width: 100%;
    margin-top: 12px;
}

/* Category / article card — read more pinned to bottom */
.category-article-card {
    display: flex;
    flex-direction: column;
}

.category-article-card .card-footer {
    margin-top: auto;
}

/* Utility colour */
.bg-red {
    background: #e11825;
    color: #fff;
}

/* Numbered blocks */
.num-block {
    display: flex;
    padding-bottom: 12px;
    border-bottom: 1px dashed #d1d1d1;
    margin-bottom: 32px;
}

.num-block h2 {
    color: #fff;
    font-style: italic;
}

.num-block-yellow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffbe00;
    color: #2c2c2c;
    height: 56px;
    width: 56px;
    margin-right: 24px;
    border-radius: 4px;
    font-style: italic;
    font-weight: bold;
    flex-shrink: 0;
}

.num-block-red {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e01f26;
    color: #fff;
    height: 56px;
    width: 56px;
    margin-right: 24px;
    border-radius: 4px;
}

/* Info box */
.info-box {
    padding: 48px 16px;
    background: #323232;
    background: var(--color-black);
    border-radius: 4px;
}

.info-box > * {
    color: #fff;
}

.info-box .heading_with_divider,
.info-box .heading_with_divider-white {
    border-bottom-color: #fff;
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    z-index: 999;
    top: -25%;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;
    will-change: opacity;
}

/* Page section spacing */
.wrapper .masthead,
.wrapper .alpha__row {
    padding-top: 90px;
}

.wrapper .omega__row {
    padding-bottom: 144px;
}

.section {
    padding: 72px 0;
}

@media (min-width: 1248px) {
    .section {
        padding: 28px auto;
    }
}

.section__complimentary {
    padding-top: 72px;
    padding-bottom: 32px;
}

.section__complimentary-end {
    padding-bottom: 72px;
}

.content__container {
    border-radius: 4px;
    background-color: #fff;
}

@media (min-width: 1248px) {
    .content__pr {
        padding-right: 48px;
    }

    .content__pl {
        padding-left: 48px;
    }
}


/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
footer {
    background-color: #323232;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:active,
footer a:focus,
footer a:visited {
    color: #fff;
}

footer ul {
    margin: 32px 0 40px;
    list-style-type: none;
    padding-left: 0;
}

footer li {
    padding: 16px 0;
}

footer li:last-child { padding-bottom: 0; }
footer li:first-child { padding-top: 0; }

footer .footer__title {
    color: #fff;
    margin: 0;
    padding-bottom: 32px;
    border-bottom: 1px dashed #fff;
}

.footer__container {
    padding: 40px 0;
}

.footer__container .grid {
    grid-column-gap: 0;
    border-bottom: 1px solid #fff;
}

@media (min-width: 840px) {
    .footer__container {
        padding: 40px 24px;
    }
}

@media (max-width: 600px) {
    .footer__container .grid__cell {
        padding-bottom: 16px;
    }
}

.copyright {
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    padding-top: 32px;
}

@media (min-width: 1248px) {
    .copyright {
        width: 80%;
    }
}

.copyright .grid__cell {
    color: #fff;
    text-align: center;
}

.copyright p {
    margin: 0;
}

.copyright .list-unstyled {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

@media (min-width: 768px) {
    .copyright .list-unstyled {
        width: 40%;
        margin: 24px auto 0;
        justify-content: space-between;
    }
}

.copyright .list-unstyled li {
    padding: 0;
}

@media (max-width: 767px) {
    .copyright .list-unstyled li:not(:last-child) {
        margin-right: 12px;
    }
}

.copyright .list-unstyled li a {
    text-decoration: underline;
}

.social--media {
    width: 190px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social--media li {
    padding: 0;
}

/* ================================
   Button: primary-text (Read more)
   Migrated from style.css
   ================================ */

.btn--primary-text {
  background-color: transparent;
  color: #e01f26 !important;
  border-color: transparent;
  border-radius: 4px;
  padding: 8px 20px;
}
.btn--primary-text:hover,
.btn--primary-text:focus,
.btn--primary-text:active {
  background-color: rgba(224, 31, 38, 0.12);
}

/* ================================
   Card layout: equal-height grid
   Migrated from style.css
   ================================ */

.grid-cards__equal .card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

/* ================================
   Blog post card footer
   Migrated from style.css
   ================================ */

.blog__posts .card-footer {
  background-color: #f9f9f9;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 0 8px 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}
.blog__posts .card-footer__text {
  margin-right: 8px;
  font-size: 14px;
}
.blog__posts .card-footer__socials {
  display: inherit;
  flex-direction: row;
  justify-content: flex-start;
}
.blog__posts .card-footer__socials a {
  text-decoration: none;
}
.blog__posts .card-footer__socials a:hover {
  text-decoration: none;
}
.blog__posts .card-footer__socials span {
  color: #fff;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 10px;
}
.blog__posts .card-footer__socials a:not(:last-child) {
  margin-right: 4px;
}
.blog__posts .card-footer__socials .twitter {
  background-color: #1da1f2;
}
.blog__posts .card-footer__socials .facebook {
  background-color: #1877f2;
}