@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap');

/* ============================================
   ECPNG Theme Bridge - Auto-generated CSS
   Managed from Admin Portal > Design Manager
   ============================================ */

:root {
    --ecpng-primary: #1e40af;
    --ecpng-secondary: #1e3a8a;
    --ecpng-accent: #c1121f;
    --ecpng-font-heading: 'Lato', sans-serif;
    --ecpng-font-body: 'Roboto', sans-serif;
    --ecpng-radius: 8px;
    --ecpng-content-width: 1140px;
    --ecpng-article-title: #1e40af;
    --ecpng-article-text: #374151;
}

/* Typography */
body {
    font-family: var(--ecpng-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
    font-family: var(--ecpng-font-heading);
}

/* Stories & Article titles / body text (fixes faint low-contrast titles) */
.entry-title,
.entry-title a,
.post-title,
.post-title a,
h1.entry-title a,
h2.entry-title a,
article .entry-title a,
.blog .entry-title a,
.archive .entry-title a,
.story-content h3 {
    color: var(--ecpng-article-title) !important;
}

.entry-title a:hover,
.post-title a:hover,
article .entry-title a:hover {
    color: var(--ecpng-secondary) !important;
}

.entry-content,
.entry-summary,
.post-content,
article .entry-content p,
.story-content p {
    color: var(--ecpng-article-text);
}

/* Links & Buttons */
a {
    color: var(--ecpng-primary);
}

a:hover {
    color: var(--ecpng-secondary);
}

.btn-primary,
button.btn-primary,
input[type="submit"],
.wp-block-button__link {
    background-color: var(--ecpng-primary);
    border-color: var(--ecpng-primary);
    border-radius: var(--ecpng-radius);
}

.btn-primary:hover,
button.btn-primary:hover,
.wp-block-button__link:hover {
    background-color: var(--ecpng-secondary);
    border-color: var(--ecpng-secondary);
}

.btn-accent {
    background-color: var(--ecpng-accent);
    border-color: var(--ecpng-accent);
    color: white;
}

/* Content Width */
.container,
.site-content,
.content-area,
.entry-content {
    max-width: var(--ecpng-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Cards & Borders */
.card,
.service-card,
.entry-card,
.widget {
    border-radius: var(--ecpng-radius);
}

/* ============================================
   Logo & Site Name alignment / layout / format
   (Admin Portal > Design > Header Layout)
   Targets the vw-healthcare theme's real markup:
   .home-page-header .logo > .site-logo + .site-title
   ============================================ */
.home-page-header .logo,
.site-header .logo,
.site-branding {
    text-align: left !important;
}
.home-page-header .logo .site-logo,
.home-page-header .logo .custom-logo-link,
.site-header .logo .site-logo {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
}
.home-page-header .site-title,
.site-header .site-title,
.site-title {
    text-align: left !important;
    font-family: var(--ecpng-font-heading);
}

/* Logo left · Site name centered across the header.
   The theme keeps the logo + name inside a narrow left column
   (.middle-bar .col-lg-3); absolutely centering the title against
   the full-width .row places the name across the header's middle. */
@media (min-width: 992px) {
    .home-page-header .middle-bar .row,
    .site-header .middle-bar .row {
        position: relative;
    }
    .home-page-header .middle-bar .site-title,
    .site-header .middle-bar .site-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        padding: 0 !important;
        width: max-content;
        max-width: 60vw;
        text-align: center !important;
        font-size: clamp(20px, 2.2vw, 30px);
        font-weight: 700;
        letter-spacing: .5px;
        line-height: 1.2;
        z-index: 2;
    }
}
@media (max-width: 991px) {
    /* Small screens: keep the theme's natural stacked layout, just center the name */
    .home-page-header .middle-bar .site-title,
    .site-header .middle-bar .site-title {
        text-align: center !important;
        font-size: clamp(18px, 4.5vw, 24px);
        font-weight: 700;
    }
}



/* Navigation primary color */
.main-navigation,
.primary-menu {
    background-color: var(--ecpng-primary);
}

.main-navigation a {
    color: white;
}

/* Dropdown submenu (configurable from Admin Portal > Website Design) */
.main-navigation .sub-menu,
.main-navigation ul ul,
.primary-menu .sub-menu,
.primary-menu ul ul,
ul.sub-menu {
    background-color: #ffffff !important;
    border-top: 3px solid var(--ecpng-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 var(--ecpng-radius) var(--ecpng-radius);
    overflow: hidden;
}
.main-navigation .sub-menu a,
.main-navigation ul ul a,
.primary-menu .sub-menu a,
.primary-menu ul ul a,
ul.sub-menu li a {
    color: #1e293b !important;
    background-color: transparent;
    padding: 10px 18px;
    font-weight: 500;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus,
.main-navigation .sub-menu li:hover > a,
.main-navigation ul ul a:hover,
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu li:hover > a,
ul.sub-menu li a:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Footer styling */
.site-footer {
    background-color: #1f2937;
    color: #9ca3af;
}

.site-footer a {
    color: var(--ecpng-secondary);
}

/* Selection color */
::selection {
    background-color: var(--ecpng-primary);
    color: white;
}

/* ============================================
   Accessibility: comfortable tap targets (2026 audit)
   Footer + top-bar links measured 19-25px tall on mobile;
   WCAG 2.5.8 wants ~44px targets.
   ============================================ */
footer .footer-menu a,
.site-footer .footer-menu a,
footer .widget ul li a,
.site-footer .widget ul li a {
    display: inline-block;
    padding: 8px 4px;
}
.custom-social-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}