/* ==========================================================================
   site.css — small additions for the static site (loaded last).
   Safe place for visual tweaks. Brand colours: orange #F77000, dark #333645.
   ========================================================================== */

/* Home "Tire & Auto Services" boxes: the /01–/08 numbers were removed, so centre each title + text block vertically in its box. */
.elementor-element-110196f1 > a.e-con { justify-content: center; }

:root { --nbt-orange: #F77000; --nbt-dark: #333645; --nbt-text: #333333; --nbt-light: #F0F0F0; }

.skip-link:focus { position: fixed !important; z-index: 100000; }

/* ---------- Header menu: dropdowns open on hover/focus (replaces SmartMenus) ---------- */
.elementor-nav-menu--main .elementor-nav-menu ul { width: auto; min-width: 12em; }
.elementor-nav-menu--main .elementor-nav-menu li:hover > ul,
.elementor-nav-menu--main .elementor-nav-menu li:focus-within > ul { display: block; }
.elementor-nav-menu--main .elementor-nav-menu > li > ul { left: 0; }
.elementor-nav-menu--dropdown .elementor-nav-menu li.nbt-open > ul { display: block; }
.elementor-nav-menu--dropdown .elementor-nav-menu li.nbt-open > a .sub-arrow svg { transform: rotate(180deg); }

/* ---------- Popups (team bios) ---------- */
.nbt-popup[hidden] { display: none !important; }
.dialog-widget.elementor-popup-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: all; }
.elementor-popup-modal .dialog-widget-content { background-color: #fff; width: auto; max-width: 100%; max-height: 100%; overflow: visible; position: relative; pointer-events: all; }
.elementor-popup-modal .dialog-widget-content.animated { animation-duration: .5s; }
.elementor-popup-modal .dialog-message { width: 640px; max-width: 100vw; max-height: 100vh; padding: 0; overflow: auto; display: flex; }
.elementor-popup-modal .elementor { width: 100%; }
.elementor-popup-modal .dialog-close-button { position: absolute; top: 20px; right: 20px; z-index: 9999; cursor: pointer; line-height: 1; align-items: center; justify-content: center; padding: .25em; }
.elementor-popup-modal .dialog-close-button svg { fill: #1f2124; height: 1em; width: 1em; }
html.nbt-popup-open { overflow: hidden; }
.eael-wrapper-link { display: block; color: inherit; cursor: pointer; }

/* ---------- Forms ---------- */
.nbt-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.elementor-form button.nbt-sending { opacity: .6; cursor: progress; }
.elementor-widget-form .elementor-message { line-height: 1.4; margin-top: 12px; }

/* ---------- Post grids / legacy post content ---------- */
/* Infinite scroll like WordPress: no visible button; the 0-height wrapper triggers the next posts. */
/* News / category post cards: every card the same rectangle. Photo cropped to one shape (no grey fill),
   title held to 3 lines, excerpt to 4 lines, so "Read More" and the date line up across each row. */
.elementor-posts--skin-cards .elementor-post__card { display: flex; flex-direction: column; height: 100%; }
.elementor-posts--skin-cards .elementor-post__thumbnail__link { margin-bottom: 0 !important; }
.elementor-posts--skin-cards .elementor-post__thumbnail__link:after { display: none; }
.elementor-posts--skin-cards .elementor-post__thumbnail { position: relative; padding-bottom: 0 !important; height: auto; aspect-ratio: 3 / 2; overflow: hidden; }
.elementor-posts--skin-cards .elementor-post__thumbnail img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transform: none; }
.elementor-posts--skin-cards .elementor-post__text { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 20px; }
.elementor-posts--skin-cards .elementor-post__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: calc(3lh); }
.elementor-posts--skin-cards .elementor-post__excerpt { flex: 0 0 auto; }
.elementor-posts--skin-cards .elementor-post__excerpt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; min-height: calc(4lh); }
.elementor-posts--skin-cards .elementor-post__read-more { margin-top: auto; align-self: flex-start; }
.elementor-posts--skin-cards .elementor-post__meta-data { margin-top: 0; }

.elementor-widget-container > .nbt-load-more { height: 0; margin: 0; overflow: hidden; }
.elementor-widget-container > .nbt-load-more--button { height: auto; overflow: visible; text-align: center; margin-top: 30px; }
.elementor-posts-container > .elementor-post[hidden] { display: none !important; }
.nbt-empty { padding: 20px 0; }
.nbt-wp-content img { height: auto; }
/* The two rules from WordPress's block-library CSS that affect old post content (WP loaded it on posts). */
:where(.single-post) :where(figure) { margin: 0 0 1em; }
html :where(.single-post img[class*="wp-image-"]) { height: auto; max-width: 100%; }
.nbt-embed--youtube { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.25rem; }
.nbt-embed--youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Media carousel / gallery (simplified) ---------- */
.nbt-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.nbt-carousel__slide { flex: 0 0 auto; width: min(80%, 420px); scroll-snap-align: start; }
.nbt-carousel__slide img, .nbt-carousel__slide iframe { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; border: 0; }

/* ---------- Elementor "Media Carousel" (office-nbt) — same look as the Swiper version ---------- */
/* 3 slides across (2 on tablet, 1 on phone), 10px gaps, 412px tall incl. the 30px dot strip, white arrows, dots below. */
.nbt-mc .nbt-mc__viewport { position: relative; overflow: hidden; padding-bottom: 30px; }
.nbt-mc__track { display: flex; gap: 10px; height: 100%; transition: transform .5s ease; will-change: transform; }
.nbt-mc__slide { flex: 0 0 calc((100% - 20px) / 3); height: 100%; }
@media (max-width: 1024px) { .nbt-mc__slide { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 767px) { .nbt-mc__slide { flex-basis: 100%; } }
.nbt-mc__slide > a { display: block; height: 100%; }
.nbt-mc .elementor-carousel-image { height: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; }
.nbt-mc .elementor-swiper-button { position: absolute; top: calc(50% - 15px); transform: translateY(-50%); z-index: 1; display: inline-flex; cursor: pointer; color: hsla(0, 0%, 93%, .9); font-size: 20px; }
.nbt-mc .elementor-swiper-button svg { width: 1em; height: 1em; fill: hsla(0, 0%, 93%, .9); }
.nbt-mc .elementor-swiper-button-prev { left: 10px; }
.nbt-mc .elementor-swiper-button-next { right: 10px; }
.nbt-mc__dots { position: absolute; left: 0; right: 0; bottom: 5px; display: flex; justify-content: center; line-height: 1; }
.nbt-mc__dots button { width: 6px; height: 6px; margin: 0 6px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .2; cursor: pointer; }
.nbt-mc__dots button[aria-current="true"] { opacity: 1; }
.nbt-mc__dots button:hover, .nbt-mc__dots button:focus { background: #000; color: inherit; } /* Hello's pink button:hover must not hit the dots (live dots are spans) */
.nbt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

/* ---------- Animated headline (Elementor Pro widget CSS, the parts this site uses) ---------- */
.elementor-headline { display: block; font-size: 43px; line-height: 1.2; }
.elementor-headline-dynamic-text { color: var(--dynamic-text-color, #aebcb9); }
.elementor-headline-text-wrapper { vertical-align: bottom; }
.elementor-headline-dynamic-wrapper { display: inline-block; position: relative; }
.elementor-headline-dynamic-wrapper .elementor-headline-dynamic-text { display: inline-block; inset-block-start: 0; inset-inline-start: 0; position: absolute; }
.elementor-headline-dynamic-wrapper .elementor-headline-dynamic-text.elementor-headline-text-active { position: relative; }
.elementor-headline--style-rotate .elementor-headline-dynamic-wrapper { text-align: start; }
.elementor-headline--style-highlight .elementor-headline-dynamic-wrapper { overflow: visible; text-align: inherit; }
.elementor-headline--style-highlight .elementor-headline-dynamic-text { z-index: 1; }
.elementor-headline--style-highlight .elementor-headline-plain-text { position: relative; z-index: 1; }
.elementor-headline--style-highlight svg { height: calc(100% + 20px); left: 50%; overflow: visible; position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); }
.elementor-headline--style-highlight svg path { fill: none; opacity: 0; stroke: red; stroke-dasharray: 0, 1500; stroke-width: 9; transition: .3s; }
.elementor-headline.e-animated svg path { animation: elementor-headline-dash var(--animation-duration, 1.2s) ease forwards; }
.elementor-headline.e-animated svg path:nth-of-type(2) { animation-delay: calc(var(--animation-duration, 1.2s) / 2); }
.elementor-headline.e-hide-highlight svg path { animation: hide-highlight .4s ease forwards; opacity: 1; stroke-dasharray: 1500, 1500; }
@media (prefers-reduced-motion: reduce) { .elementor-headline.e-animated svg path { animation-duration: 0s; animation-delay: 0s; } }
@keyframes elementor-headline-dash { 0% { opacity: 1; stroke-dasharray: 0, 1500; } to { opacity: 1; stroke-dasharray: 1500, 1500; } }
@keyframes hide-highlight { 0% { opacity: 1; stroke-dasharray: 1500, 1500; } to { filter: blur(10px); opacity: 0; } }
/* Rotating words (our own JS) */
.elementor-headline-dynamic-wrapper[data-rotate] { display: inline-grid; }
.elementor-headline-dynamic-wrapper[data-rotate] .elementor-headline-dynamic-text { position: relative; grid-area: 1 / 1; opacity: 0; transform: translateY(-.4em); transition: opacity .4s, transform .4s; }
.elementor-headline-dynamic-wrapper[data-rotate] .elementor-headline-dynamic-text.elementor-headline-text-active { opacity: 1; transform: none; }

/* ---------- Events (/events/, /event/…) ---------- */
.nbt-events { padding: 60px 20px; background: #fff; }
.nbt-events__inner { max-width: 1000px; margin: 0 auto; }
.nbt-events__title { font-family: "Oswald", Sans-serif; font-size: 44px; font-weight: 400; line-height: 1.2; color: var(--nbt-text); margin: 0 0 20px; }
.nbt-events__subtitle { font-family: "Oswald", Sans-serif; font-size: 26px; font-weight: 400; margin: 40px 0 16px; color: var(--nbt-text); }
.nbt-events__notice { background: var(--nbt-light); border-left: 4px solid var(--nbt-orange); padding: 12px 16px; margin: 0 0 20px; }
.nbt-events__list { display: grid; gap: 24px; }
.nbt-event-card { display: grid; grid-template-columns: 80px 1fr 260px; gap: 24px; align-items: start; border-bottom: 1px solid #e4e4e4; padding-bottom: 24px; }
.nbt-event-card__date { display: flex; flex-direction: column; align-items: center; font-family: "Oswald", Sans-serif; text-transform: uppercase; color: var(--nbt-text); }
.nbt-event-card__date .d { font-size: 32px; line-height: 1; color: var(--nbt-orange); }
.nbt-event-card__title { font-family: "Oswald", Sans-serif; font-size: 24px; font-weight: 500; margin: 0 0 6px; }
.nbt-event-card__title a { color: var(--nbt-text); }
.nbt-event-card__venue, .nbt-event-card__cost { font-weight: 600; margin: 0 0 6px; }
.nbt-event-card__image img { display: block; width: 100%; height: auto; }
.nbt-event-single__back a { color: var(--nbt-orange); }
.nbt-event-single__when { font-family: "Oswald", Sans-serif; font-size: 20px; color: var(--nbt-text); }
.nbt-event-single__cost { margin-left: 16px; color: var(--nbt-orange); }
.nbt-event-single__image { display: block; width: 100%; height: auto; margin: 20px 0; }
.nbt-event-single__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; background: var(--nbt-light); padding: 24px; margin-top: 30px; }
.nbt-event-single__meta h2 { font-family: "Oswald", Sans-serif; font-size: 18px; text-transform: uppercase; margin: 0 0 10px; }
.nbt-event-single__meta p { margin: 0 0 6px; }
@media (max-width: 767px) { .nbt-event-card { grid-template-columns: 60px 1fr; } .nbt-event-card__image { grid-column: 1 / -1; } }

/* ---------- 404 ---------- */
.nbt-404 { padding: 100px 20px; background: #111; color: #fff; text-align: center; }
.nbt-404__inner { max-width: 760px; margin: 0 auto; }
.nbt-404__label { font-family: "Roboto Mono", monospace; color: var(--nbt-orange); letter-spacing: 2px; }
.nbt-404 h1 { font-family: "Anton", Sans-serif; font-size: 48px; font-weight: 400; text-transform: uppercase; color: #fff; }
.nbt-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.nbt-404__actions .nbt-404__alt { background: transparent; border: 1px solid #fff; }

/* ---------- Carried over from WordPress "Additional CSS" ---------- */
.user-nav ul { list-style: none; margin: 0; padding: 0 10px; display: flex; gap: 10px; justify-content: flex-end; }
.user-nav li { padding: 10px; }
.user-nav a { text-decoration: none; color: #333 !important; padding: 5px; border: 1px solid #f77000; font-family: Oswald; font-size: 15px; font-weight: 500; }