/**
 * Site-specific CSS (MDA Site Tools > Custom CSS).
 * Loaded on every page after the theme's stylesheets.
 * Note: CSS in The7's Theme Options > Custom CSS box loads after this file.
 */

.mda-call {
    --mda-call-color: #00636c;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: var(--mda-call-color);
    line-height: 1;
}
.mda-call__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mda-call-color);
    color: #fff;
    transition: transform .2s ease;
}
.mda-call__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mda-call__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #333;
}
.mda-call__number {
    font-size: 22px;
    font-weight: 700;
    color: var(--mda-call-color);
    white-space: nowrap;
}
.mda-call:hover .mda-call__icon {
    transform: scale(1.08);
}

.mda-call__icon i {
    font-size: 16px;
    line-height: 1;
}


/* ===== MDA two-row inline header (desktop only) ===== */
@media screen and (min-width: 1151px) { /* = first switch point + 1 */

    .masthead.inline-header .header-bar {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo widgets"
            "logo nav";
        align-content: center;
        row-gap: 8px;
    }

    .masthead.inline-header .header-bar > .branding {
        grid-area: logo;
        align-self: center;
    }

    .masthead.inline-header .header-bar > .mini-widgets {
        grid-area: widgets;
        justify-self: end;
        align-self: end;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .masthead.inline-header .header-bar > .main-nav {
        grid-area: nav;
        justify-self: end;
        align-self: start;
    }
}

/* Phone widget cleanup (The7 auto-formatting) */
.mini-widgets .text-area p:has(.mda-call) { margin: 0; }
.mda-call br { display: none; }


/* === MDA speed fix (Oct 2026): Ultimate Addons "Hide row" without layout shift ===
   Ultimate Addons hides rows with JavaScript after load, so hidden rows flash and the page jumps (CLS).
   These rules hide the same rows immediately, using Ultimate's own breakpoints. Safe to delete once no rows use "Hide row". */
@media (max-width: 479px) {
  .vc_row:has(+ :not(.vc_row)[data-hide-row~="uvc_hidden-xs"]),
  .vc_row:has(+ .vc_row-full-width + :not(.vc_row)[data-hide-row~="uvc_hidden-xs"]) { display: none !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .vc_row:has(+ :not(.vc_row)[data-hide-row~="uvc_hidden-xsl"]),
  .vc_row:has(+ .vc_row-full-width + :not(.vc_row)[data-hide-row~="uvc_hidden-xsl"]) { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .vc_row:has(+ :not(.vc_row)[data-hide-row~="uvc_hidden-sm"]),
  .vc_row:has(+ .vc_row-full-width + :not(.vc_row)[data-hide-row~="uvc_hidden-sm"]) { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .vc_row:has(+ :not(.vc_row)[data-hide-row~="uvc_hidden-md"]),
  .vc_row:has(+ .vc_row-full-width + :not(.vc_row)[data-hide-row~="uvc_hidden-md"]) { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1823px) {
  .vc_row:has(+ :not(.vc_row)[data-hide-row~="uvc_hidden-ml"]),
  .vc_row:has(+ .vc_row-full-width + :not(.vc_row)[data-hide-row~="uvc_hidden-ml"]) { display: none !important; }
}
@media (min-width: 1824px) {
  .vc_row:has(+ :not(.vc_row)[data-hide-row~="uvc_hidden-lg"]),
  .vc_row:has(+ .vc_row-full-width + :not(.vc_row)[data-hide-row~="uvc_hidden-lg"]) { display: none !important; }
}

/* MDA speed fix (Oct 2026): match pre-load header height to the 80px mobile header.
   Before The7 builds its mobile header (JS), phones show the 75px Top Bar; this stops the 5px page jump. */
@media screen and (max-width: 992px) {
  .masthead:not(.masthead-mobile-header) .top-bar { min-height: 80px; }
}

/* MDA speed fix (Oct 2026): desktop header layout before The7 JS runs (stops header/page jump).
   Matches the final header: full-width masthead, 100px header bar, logo taking its space from the start. */
@media screen and (min-width: 993px) {
  .masthead:not(.fixed-masthead) { width: 100%; }
  .masthead:not(.fixed-masthead) .header-bar { height: 100px; }
  .masthead:not(.fixed-masthead) .header-bar .branding > a:not(.sticky-logo) { position: static; }
}

/* MDA speed fix (Oct 2026): ShortPixel WebP <picture> wrapper should not affect layout (stops small extra gaps). */
picture { display: contents; }
/* === end MDA speed fix === */