/* Prondo – A11y Link Distinguish (WCAG 2.1 1.4.1) */

/* Brand colors for footer links */
:root{
    --brand-gold:#fcb900;         /* requested footer link color */
    --brand-gold-hover:#c99700;   /* darker for hover/focus contrast */
}

/* 1) Add a non-color cue: underline links inside text blocks */
.wpb_text_column p a,
.wpb_text_column li a,
.wpb_content_element p a,
.entry-content p a,
.entry-content li a,
footer#footer .copyright a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
}

/* 2) Hover/Focus: clearer affordance for mouse & keyboard users */
.wpb_text_column p a:hover,
.wpb_text_column li a:hover,
.entry-content p a:hover,
.entry-content li a:hover,
footer#footer .copyright a:hover {
    text-decoration-thickness: 2px;
}

.wpb_text_column p a:focus-visible,
.wpb_text_column li a:focus-visible,
.entry-content p a:focus-visible,
.entry-content li a:focus-visible,
footer#footer .copyright a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 3) Don’t underline components that are already styled as buttons */
a.button,
.vc_btn3,
.wpb_button,
.wpb_button_a .wpb_button,
.vc_general.vc_btn3 {
    text-decoration: none !important;
}

/* 4) Ensure visited footer links remain distinguishable */
footer#footer .copyright a:visited {
    text-decoration: underline;
}

/* 5) Don’t underline icon-only links or main menu items */
.footer_socials a,
header .menu a,
nav a[aria-current],
a .stm-icon, a .fa, a svg {
    text-decoration: none !important;
}

/* === NEW: Footer text-widget links (where axe flags “Read More”) ===
   Target paragraphs & list items within .footer_widgets .textwidget with HIGH specificity.
   Adds underline (non-color cue) + brand gold color. */
footer#footer .footer_widgets .widget_text .textwidget p a[href],
footer#footer .footer_widgets .widget_text .textwidget li a[href],
footer#footer .footer_widgets .textwidget p a[href],
footer#footer .footer_widgets .textwidget li a[href]{
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 1.5px !important;
    color: var(--brand-gold) !important;
}
footer#footer .footer_widgets .widget_text .textwidget p a[href]:hover,
footer#footer .footer_widgets .widget_text .textwidget li a[href]:hover,
footer#footer .footer_widgets .textwidget p a[href]:hover,
footer#footer .footer_widgets .textwidget li a[href]:hover{
    color: var(--brand-gold-hover) !important;
    text-decoration-thickness: 2px !important;
}
footer#footer .footer_widgets .textwidget a[href]:focus-visible{
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Copyright row links also use brand gold + underline (belt & suspenders) */
footer#footer .copyright a,
footer#footer .copyright .container a{
    color: var(--brand-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
footer#footer .copyright a:hover{
    color: var(--brand-gold-hover) !important;
}

a:focus-visible { box-shadow: 0 0 0 2px currentColor; }



/* === Touch target size & spacing (WCAG 2.2 – 2.5.8) ===
   We aim for 44×44 to be extra safe (min is 24×24). */

/* 1) Mobile menu toggle (various theme selectors) */
#menu_toggle > button,
button.menu-toggle,
.header .menu-toggle,
div.top_info_box .menu-toggle,
header#header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;                 /* increases hit area if icon-only */
    margin: 6px;                   /* spacing from adjacent targets */
    touch-action: manipulation;
}

/* If the toggle is an <a> instead of <button> in some views */
#menu_toggle > a,
header#header #menu_toggle > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    margin: 6px;
}

/* 2) Social icons (header & footer) – ensure large, spaced targets */
.top_bar_socials a,
#stm_socials-7 ul li a,
.footer_socials a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;                    /* fixed square tap area */
    margin: 6px 8px 6px 0;        /* keep separation from neighbors */
}

/* 3) Site logo / home link in header */
header #header .logo a,
.site-branding a,
a.logo,
.logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;                 /* small padding to boost tap area */
}

/* 4) Top info box small links (tel / appointment) used in your header row */
div.top_info_box > a.link,
div.top_info_box a[href^="tel:"],
div.top_info_box a[href*="/appointment"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    margin: 6px 6px 6px 0;        /* spacing from other targets */
}

/* 5) Generic safety net for icon-only anchors inside header toolbars */
header a:has(i),
header a:has(svg) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 6) Don’t accidentally enlarge real buttons beyond design */
.vc_btn3, .wpb_button, a.wpb_button_a .wpb_button {
    min-width: auto;
    min-height: auto;
    padding: inherit;
    margin: inherit;
}

/* 7) Keep focus visible (important for keyboard users on mobile, too) */
#menu_toggle > button:focus-visible,
#menu_toggle > a:focus-visible,
.top_bar_socials a:focus-visible,
#stm_socials-7 ul li a:focus-visible,
header #header .logo a:focus-visible,
div.top_info_box > a.link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}

/* allow our calculated width to apply even if theme has max-widths */
img.prondo-logo-downscaled { max-width: none !important; }

/* --- Header/brand logo sizing (desktop + mobile) --- */
.logo a { display:inline-flex; align-items:center; }

/* make sure the image isn’t constrained by theme rules */
.logo img {
    height: 64px !important;      /* desktop visual size */
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    image-rendering: auto;
}

/* laptop/tablet */
@media (max-width: 1199px){
    .logo img { height: 56px !important; }
}

/* mobile */
@media (max-width: 767px){
    .logo img { height: 48px !important; }
}

/* give the header row room so the logo isn’t squashed */
.header, .top_header, .logo { line-height: 1; }

/* === Appointment button (WPBakery .vc_btn3) ===================== */

/* Base state */
.vc_btn3-container a.vc_btn3.vc_btn3-style-custom[href*="/appointment"],
a.vc_btn3.vc_btn3-style-custom[href*="/appointment"] {
    background-color: #4c6575 !important;
    border-color: #4c6575 !important;
    color: #ffffff !important;
    text-decoration: none;   /* keep it looking like a button */
    display: inline-flex;    /* aligns icon + text */
    align-items: center;
    gap: 6px;                /* spacing between icon and text */
    border-radius: 4px;      /* slight rounding */
    transition: all 0.2s ease-in-out;
}

/* Ensure icon stays white */
.vc_btn3-container a.vc_btn3[href*="/appointment"] .vc_btn3-icon,
a.vc_btn3[href*="/appointment"] .vc_btn3-icon {
    color: #ffffff !important;
}

/* Hover / focus */
.vc_btn3-container a.vc_btn3[href*="/appointment"]:hover,
.vc_btn3-container a.vc_btn3[href*="/appointment"]:focus,
a.vc_btn3[href*="/appointment"]:hover,
a.vc_btn3[href*="/appointment"]:focus {
    background-color: #3e5667 !important;
    border-color: #3e5667 !important;
    color: #ffffff !important;
}

/* Keyboard focus accessibility */
.vc_btn3-container a.vc_btn3[href*="/appointment"]:focus-visible,
a.vc_btn3[href*="/appointment"]:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* Visited link (same as normal) */
/* === Appointment button (visited state only) ===================== */
.vc_btn3-container a.vc_btn3.vc_btn3-style-custom[href*="/appointment"]:visited {
    color: #ffffff !important;
}


/* ================================
   TOP BAR — prod-style layout
   (address left, socials + search right)
   ================================ */

.top_bar{
    background:#fff;
    border-bottom:1px solid #eee;
    padding:8px 0;
    font-size:14px;
    line-height:1.4;
}

/* Use the theme’s grid but make the row align nicely */
.top_bar .row{
    display:flex;
    align-items:center;
}

/* left column: keep default widths, left aligned */
.top_bar .top_bar_left{ text-align:left; }
.top_bar .top_bar_left b{ font-weight:600; color:#555; }

/* right column: flex container with socials + search */
.top_bar .top_bar_right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;                /* space between groups */
}

/* subtle separators like prod */
.top_bar .top_bar_right > * + *{
    border-left:1px solid #eaeaea;
    padding-left:18px;
}

/* socials look */
.top_bar .top_bar_socials ul{
    display:flex; gap:10px; margin:0; padding:0; list-style:none;
}
.top_bar .top_bar_socials a{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; color:#b3b3b3;
}
.top_bar .top_bar_socials a:hover,
.top_bar .top_bar_socials a:focus{ color:#7d7d7d; }

/* search form styling */
.top_bar .search-form{
    display:flex; align-items:center; gap:10px;
}
.top_bar .search-form input[type="search"]{
    height:36px; line-height:36px;
    border:1px solid #eaeaea; border-radius:4px;
    padding:0 12px; width:220px; max-width:40vw;
    background:#fff; color:#666;
}
.top_bar .search-form input[type="search"]::placeholder{ color:#9a9a9a; }
.top_bar .search-form .button{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border:1px solid #eaeaea; border-radius:4px;
    background:#fff; color:#b3b3b3;
}
.top_bar .search-form .button:hover,
.top_bar .search-form .button:focus{ color:#7d7d7d; border-color:#d9d9d9; }

/* focus visibility for a11y */
.top_bar .top_bar_socials a:focus-visible,
.top_bar .search-form .button:focus-visible,
.top_bar .search-form input[type="search"]:focus-visible{
    outline:2px solid #999; outline-offset:2px;
}

/* mobile adjustments (keep socials visible) */
@media (max-width: 575.98px){
    .top_bar{ padding:10px 0; }
    .top_bar .top_bar_left{ text-align:center; margin-bottom:6px; }
    .top_bar .row{ flex-direction:column; align-items:stretch; }
    .top_bar .top_bar_right{ justify-content:center; gap:12px; }
    .top_bar .top_bar_right > * + *{ border-left:none; padding-left:0; }
    .top_bar .search-form input[type="search"]{ width:100%; max-width:none; }
}



/* ===== PATCH: place this AT THE END of your CSS ===== */

/* 1) Header socials: keep visual ~36px, but hit area 44×44 for a11y */
.top_bar .top_bar_socials a{
    width:36px !important;
    height:36px !important;
    padding:4px !important;        /* 36 + 4 + 4 = 44px hit area */
    margin:0 8px 0 0 !important;   /* tidy spacing */
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
}

/* 2) Make sure the desktop search is visible on desktop/tablet */
@media (min-width: 576px){
    .top_bar .search-form{ display:flex !important; }
}

/* 3) On phones: show the dedicated mobile search bar, keep socials */
@media (max-width: 575.98px){
    /* If your theme renders BOTH searches, prefer the mobile one to avoid duplication */
    .top_bar .search-form{ display:none !important; }

    .mobile_search{
        display:block !important;
        padding:8px 15px;
        border-top:1px solid #eee;
        background:#fff;
    }
    .mobile_search .search-form{
        display:flex !important;
        align-items:center;
        gap:10px;
        max-width:680px;
        margin:0 auto;
    }
    .mobile_search input[type="search"]{
        flex:1 1 auto;
        width:100%;
        min-height:40px;
        border:1px solid #eaeaea;
        border-radius:4px;
        padding:0 12px;
    }
    .mobile_search .button{
        width:40px; height:40px;
        border:1px solid #eaeaea;
        border-radius:4px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    /* Keep socials visible on mobile */
    .top_bar .top_bar_socials{ display:block !important; }
    .top_bar .top_bar_right{
        justify-content:center;
        flex-wrap:wrap;
        gap:12px;
    }
    .top_bar .top_bar_right > * + *{ border-left:none; padding-left:0; }
}

/* Focus visibility (kept consistent) */
.top_bar .top_bar_socials a:focus-visible,
.mobile_search .button:focus-visible,
.mobile_search input[type="search"]:focus-visible{
    outline:2px solid #999; outline-offset:2px;
}

/* ===== Mobile menu button: visible hamburger, no icon font needed ===== */

/* layout next to the logo */
.logo { display:flex; align-items:center; justify-content:space-between; }
.logo #menu_toggle { margin-left: 12px; }

/* base button */
#menu_toggle > button{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    /* gold-ish to match brand; tweak if needed */
    --hamburger-color: #b08a4a;
}

/* draw the three bars with one element */
#menu_toggle > button::before{
    content: "";
    display: block;
    width: 26px;
    height: 2.5px;
    background: var(--hamburger-color);
    border-radius: 2px;
    /* top and bottom bars via shadows */
    box-shadow:
            0 -8px 0 0 var(--hamburger-color),
            0  8px 0 0 var(--hamburger-color);
}

/* hover/focus/pressed states for contrast & affordance */
#menu_toggle > button:hover::before,
#menu_toggle > button:active::before{
    filter: brightness(0.85);
}

#menu_toggle > button:focus-visible{
    outline: 3px solid #4c6575;   /* visible focus ring */
    outline-offset: 2px;
    border-radius: 6px;
}

/* when menu is open (aria-expanded="true"), show an “X” */
#menu_toggle > button[aria-expanded="true"]::before{
    box-shadow: none;
    transform: rotate(45deg);
}
#menu_toggle > button[aria-expanded="true"]::after{
    content: "";
    position: absolute;
    width: 26px;
    height: 2.5px;
    background: var(--hamburger-color);
    border-radius: 2px;
    transform: rotate(-45deg);
}

/* keep the screen-reader text hidden visually */
#menu_toggle > button .screen-reader-text{
    position:absolute!important;
    width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ensure spacing on small screens */
@media (max-width: 767.98px){
    .logo { gap: 12px; }
}



/* Remove unwanted extra "gold pill" under hamburger on mobile */
@media only screen and (max-width: 768px) {
    #menu_toggle button:after {
        content: none !important;
        display: none !important;
    }
}