/*
Theme Name: Framework Child
Theme URI: https://www.webmechanix.com
Author: WebMechanix
Author URI: https://www.webmechanix.com
Template: lvl-framework
Text Domain: LVL
Description: A child theme of WebMechanix Framework.
Version: 1.0.0
*/

/* ============================================================
   Brand Overrides — applied after app.min.css, no rebuild needed.
   When src/ SCSS is available, migrate these back and remove.
   ============================================================ */

/* ── Typography ───────────────────────────────────────────── */

body, p, li, td, th, input, textarea, select, button {
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px;
    font-weight: 400;
}

/* Headings: Montserrat Bold, sizes per spec — color set via theme.json */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

h1, .h1 { font-size: 60px; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
h2, .h2 { font-size: 48px; line-height: 1.2 !important; }
h3, .h3 { font-size: 36px; line-height: 1.2 !important; }
h4, .h4 { font-size: 24px; line-height: 1.3 !important; }
h5, .h5 { font-size: 18px; line-height: 1.3 !important; }
h6, .h6 { font-size: 14px; line-height: 1.3 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }


/* Nav background white + logo centering */
#navbar,
#navbar .utility-nav,
#navbar .main-nav-wrapper {
    background-color: #ffffff !important;
}

.main-nav-wrapper .brand-wrapper,
.main-nav-wrapper .navbar-brand {
    display: flex;
    align-items: center;
}

.main-nav-wrapper .nav-container {
    align-items: center !important;
    max-width: 1400px !important;
    width: 100% !important;
}

.main-nav-wrapper .navbar-brand img {
    display: block;
    margin: auto 0;
    padding-top: 12px;
    height: 95px !important;
    width: auto !important;
}


/* Nav links: smaller, brand blue, uppercase */
.nav-link,
.navbar-nav .nav-link,
header .menu-item a,
header nav a {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    color: #0067af !important;
    white-space: nowrap !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* ── Book An Appointment nav button ─────────────────────── */
#navbar .bookAptButton .nav-link,
#navbar .bookAptButton a {
    background-color: #d84274 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

#navbar .bookAptButton .nav-link:hover,
#navbar .bookAptButton .nav-link:focus,
#navbar .bookAptButton a:hover,
#navbar .bookAptButton a:focus {
    background-color: #c33968 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* Hover / active: thick pink underline, keep blue text */
.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .menu-item.current-menu-item > .nav-link,
.main-nav .menu-item.active > .nav-link {
    color: #0067af !important;
    background-color: transparent !important;
    border-radius: 0;
    text-decoration: underline !important;
    text-decoration-color: #d84274 !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 4px !important;
}

.nav-link:hover,
.nav-link:focus,
header .menu-item a:hover,
header .menu-item a:focus {
    text-decoration: none !important;
}


/* ── Image alignment in post content ────────────────────── */
.wp-block-image.aligncenter,
figure.aligncenter,
.entry-content .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

/* ── Blog post card border + spacing ────────────────────── */
.resource .card {
    border: 1px solid #d1d5db !important;
}

.resource .location-link-wrapper {
    padding-top: 0 !important;
    margin-block-start: 8px !important;
}

.resource .excerpt {
    margin-bottom: 0 !important;
}

/* ── Footer top border ───────────────────────────────────── */
#footer {
    border-top: 1px solid #d1d5db;
}

/* ── Heading color for dark sections ─────────────────────────
   :not(.has-text-color) ensures we never override a color the
   editor user has explicitly chosen for a heading.             */
[data-bs-theme="dark"] h1:not(.has-text-color),
[data-bs-theme="dark"] h2:not(.has-text-color),
[data-bs-theme="dark"] h3:not(.has-text-color),
[data-bs-theme="dark"] h4:not(.has-text-color),
[data-bs-theme="dark"] h5:not(.has-text-color),
[data-bs-theme="dark"] h6:not(.has-text-color),
.has-primary-background-color h1:not(.has-text-color),
.has-primary-background-color h2:not(.has-text-color),
.has-primary-background-color h3:not(.has-text-color),
.has-primary-background-color h4:not(.has-text-color),
.has-primary-background-color h5:not(.has-text-color),
.has-primary-background-color h6:not(.has-text-color) {
    color: #ffffff;
}

/* Light cards nested inside dark sections — restore brand blue */
.has-white-background-color h1:not(.has-text-color),
.has-white-background-color h2:not(.has-text-color),
.has-white-background-color h3:not(.has-text-color),
.has-white-background-color h4:not(.has-text-color),
.has-white-background-color h5:not(.has-text-color),
.has-white-background-color h6:not(.has-text-color),
.has-light-gray-background-color h1:not(.has-text-color),
.has-light-gray-background-color h2:not(.has-text-color),
.has-light-gray-background-color h3:not(.has-text-color),
.has-light-gray-background-color h4:not(.has-text-color),
.has-light-gray-background-color h5:not(.has-text-color),
.has-light-gray-background-color h6:not(.has-text-color),
.has-off-white-background-color h1:not(.has-text-color),
.has-off-white-background-color h2:not(.has-text-color),
.has-off-white-background-color h3:not(.has-text-color),
.has-off-white-background-color h4:not(.has-text-color),
.has-off-white-background-color h5:not(.has-text-color),
.has-off-white-background-color h6:not(.has-text-color) {
    color: var(--wp--preset--color--primary);
}

/* ── btn-red / tertiary button: app.min.css sets wrong color + black text;
   override here with !important to win the cascade.                    */
.wp-block-button.is-style-btn-red .wp-element-button,
.wp-block-button.is-style-tertiary .wp-element-button {
    background-color: #d84274 !important;
    --bs-btn-color: #ffffff;
    color: #ffffff !important;
}

.wp-block-button.is-style-btn-red .wp-element-button:hover,
.wp-block-button.is-style-btn-red .wp-element-button:focus,
.wp-block-button.is-style-tertiary .wp-element-button:hover,
.wp-block-button.is-style-tertiary .wp-element-button:focus {
    background-color: #c33968 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ── btn-link: white text for dark backgrounds ───────────── */
.wp-block-button.is-style-btn-link .wp-element-button {
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: rgba(255, 255, 255, 0.8);
    color: #ffffff;
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.rank-math-breadcrumb,
.rank-math-breadcrumb a,
.rank-math-breadcrumb p,
.breadcrumbs,
.breadcrumbs a,
.breadcrumb,
.breadcrumb a,
.breadcrumb-item a {
    color: #ffffff !important;
}

.rank-math-breadcrumb a:hover,
.breadcrumbs a:hover,
.breadcrumb a:hover {
    color: rgba(255,255,255,0.8) !important;
    text-decoration: underline;
}

/* ── Cards wrapper alignment ─────────────────────────────── */
.block--cards-wrapper .cards.justify-content-center {
    justify-content: space-between !important;
}

/* Prevent cards in an incomplete last row from stretching — use full flex
   shorthand so it beats any parent-theme flex:1 shorthand rule           */
.block--card {
    flex: 0 0 calc((100% - (var(--card-count) - 1) * (var(--wp--style--block-gap) + 20px)) / var(--card-count)) !important;
    max-width: calc((100% - (var(--card-count) - 1) * (var(--wp--style--block-gap) + 20px)) / var(--card-count)) !important;
}

/* Center cards in every row — full rows look the same, short rows center  */
@media (min-width: 992px) {
    .block--cards-wrapper:not([data-mobile=slider]) .cards {
        justify-content: center !important;
    }
}

/* ── Locations archive hero title ───────────────────────── */
h1.archive-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #0067af !important;
}

/* ── Dentist card hover bio ──────────────────────────────── */
.block--dentist-cards .dentist-card .dentist-card-hover-content,
.block--dentist-cards .dentist-card .dentist-card-hover-content .dentist-card-excerpt,
.block--dentist-cards .dentist-card .dentist-card-hover-content .dentist-card-meta {
    font-size: 13px !important;
    line-height: 1.5;
    color: #333333 !important;
}


/* ── Footer social icons: larger size to pass WAVE contrast ─ */
#footer .wp-block-social-links .wp-block-social-link {
    width: 44px !important;
    height: 44px !important;
}

#footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
#footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg {
    width: 28px !important;
    height: 28px !important;
}

/* ── Footer navigation ───────────────────────────────────── */
.footer-nav {
    padding: 24px 30px 0;
}

.footer-nav .footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.footer-nav .footer-nav-list li a {
    color: #0067af;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.footer-nav .footer-nav-list li a:hover {
    text-decoration: underline;
}


/* ── Card block icons: cap to consistent size on all breakpoints */
.block--card .wp-block-image img {
    max-height: 80px !important;
    width: auto !important;
    max-width: 100%;
}

/* ── Gravity Forms validation errors ────────────────────────── */
.gform_validation_errors,
.gform_wrapper .validation_error {
    border: 2px solid #cc0000 !important;
    background-color: #fff5f5 !important;
    color: #cc0000 !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    border-radius: 4px;
}

.gfield_error input,
.gfield_error textarea,
.gfield_error select,
.gfield_error .ginput_container input,
.gfield_error .ginput_container textarea,
.gfield_error .ginput_container select {
    border-color: #cc0000 !important;
    border-width: 2px !important;
    outline: none !important;
}

.gfield_error .gfield_label,
.gfield_error label {
    color: #cc0000 !important;
}

.gfield_validation_message,
.validation_message {
    color: #cc0000 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
    display: block;
}

/* ── Language dropdown (GTranslate) ─────────────────────────── */
.utility-nav .nav-container {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-right: 10px;
}

/* GTranslate dropdown — mobile (inside hamburger row) */
.brand-wrapper .d-lg-none .gt_selector,
.brand-wrapper .d-lg-none select {
    font-size: 11px !important;
    padding: 2px 4px !important;
    max-width: 80px;
}

.utility-nav .gt_selector,
.utility-nav select {
    border: 1px solid #cccccc !important;
    border-radius: 4px;
    font-size: 13px;
    padding: 3px 8px;
    background: transparent;
    color: #333333;
    cursor: pointer;
    transition: border-color 0.2s ease;
    outline: none;
}

.utility-nav .gt_selector:hover,
.utility-nav select:hover,
.utility-nav .gt_selector:focus,
.utility-nav select:focus {
    border-color: #d84274 !important;
    outline: none;
}