/*
Theme Name: Medical Child
Theme URI: https://www.guido.site/themes
Template: medical
Author: Guido
Author URI: https://www.guido.site
Description: Medical is a lightweight and mobile friendly WordPress theme. A post and page template with or without sidebar is included, as well as multiple widget areas. For theme settings go to the Customizer in your dashboard.
Tags: one-column,two-columns,right-sidebar,custom-background,custom-header,custom-menu,featured-images,footer-widgets,post-formats,sticky-post,blog,editor-style,microformats,translation-ready
Version: 7.7.1793667503
Updated: 2026-11-03 00:58:23

*/


/* -------------------------------------------------------------------------
 * Medical Child custom design
 * Palette: deep teal + white + mint + coral
 * ------------------------------------------------------------------------- */

:root{
    --mh-teal:#0d6e68;
    --mh-teal-dark:#094f4b;
    --mh-teal-darker:#073f3c;
    --mh-mint:#d9f2e6;
    --mh-coral:#f2705c;
    --mh-coral-dark:#d9533f;
    --mh-ink:#22302e;
    --mh-grey:#5b6b69;
    --mh-line:#e3ecea;
}

.mh-wrap{max-width:1140px;margin:0 auto;padding-left:20px;padding-right:20px;}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal;}

/* ---------- Header ---------- */
.mh-header{background:var(--mh-teal);color:#fff;}
.mh-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;}
.mh-brand a{color:#fff;font-size:26px;font-weight:700;letter-spacing:.5px;text-decoration:none;}
.mh-brand a:hover{color:var(--mh-mint);}
.mh-nav .mh-menu{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0;padding:0;}
.mh-nav .mh-menu a{color:#fff;text-decoration:none;font-size:16px;padding:6px 2px;}
.mh-nav .mh-menu a:hover{color:var(--mh-mint);text-decoration:underline;}
.mh-nav .mh-menu .current-menu-item > a{color:var(--mh-mint);font-weight:700;}
.mh-menu-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:2px solid #fff;border-radius:6px;padding:9px 10px;cursor:pointer;}
.mh-menu-toggle:hover{background:rgba(255,255,255,.12);}
.mh-menu-toggle .mh-bar{display:block;width:22px;height:2px;background:#fff;}

/* ---------- Banner (homepage only) ---------- */
.mh-banner{background:var(--mh-mint);text-align:center;padding:56px 20px;}
.mh-banner-kicker{color:var(--mh-teal-dark);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:13px;margin:0 0 10px;}
.mh-banner-title{color:var(--mh-teal-darker);font-size:42px;line-height:1.15;margin:0 0 12px;}
.mh-banner-text{color:var(--mh-ink);font-size:18px;max-width:720px;margin:0 auto;}

/* ---------- Article grid (homepage only) ---------- */
.mh-main{background:#fff;padding:44px 0 56px;}
.mh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.mh-card{background:#fff;border:1px solid var(--mh-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease;}
.mh-card:hover{box-shadow:0 8px 24px rgba(13,110,104,.12);}
.mh-card-media{display:block;}
.mh-card-media img{width:100%;height:200px;object-fit:cover;display:block;}
.mh-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.mh-card-meta{color:var(--mh-grey);font-size:13px;margin:0;}
.mh-card-title{font-size:20px;line-height:1.35;margin:0;}
.mh-card-title a{color:var(--mh-teal-darker);text-decoration:none;}
.mh-card-title a:hover{color:var(--mh-teal);text-decoration:underline;}
.mh-card-excerpt{color:var(--mh-ink);font-size:15px;margin:0;flex:1;}
.mh-card-excerpt p{margin:0;}
.mh-card-more{display:inline-block;background:var(--mh-coral);color:#fff;text-decoration:none;padding:10px 18px;border-radius:6px;font-weight:600;align-self:flex-start;}
.mh-card-more:hover{background:var(--mh-coral-dark);color:#fff;}

/* ---------- Pagination ---------- */
.mh-pagination{margin-top:36px;text-align:center;}
.mh-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.mh-pagination .page-numbers{display:inline-block;min-width:40px;padding:8px 12px;border:1px solid var(--mh-line);border-radius:6px;color:var(--mh-teal-dark);text-decoration:none;background:#fff;}
.mh-pagination .page-numbers.current{background:var(--mh-teal);border-color:var(--mh-teal);color:#fff;}
.mh-pagination a.page-numbers:hover{border-color:var(--mh-teal);}

/* ---------- Footer ---------- */
.mh-footer{background:var(--mh-teal-darker);color:#eaf4f2;}
/* -------------------------------------------------------------------------
 * Medical Hub hero banner: full-width picture with text on top.
 * Shown on the posts homepage only (markup lives in child theme index.php).
 * ------------------------------------------------------------------------- */
.mh-banner.mh-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    padding: 5rem 1.5rem;
    background-color: #0b3d2e;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
}
.mh-banner.mh-hero .mh-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,32,38,.66) 0%, rgba(6,32,38,.52) 55%, rgba(6,32,38,.68) 100%);
    pointer-events: none;
}
.mh-banner.mh-hero .mh-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
}
.mh-banner.mh-hero .mh-banner-kicker {
    color: #a7e8c3;
    letter-spacing: .35em;
    text-transform: uppercase;
}
.mh-banner.mh-hero .mh-banner-title {
    color: #ffffff;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.mh-banner.mh-hero .mh-banner-text {
    color: #eef7f1;
    font-size: 1.15rem;
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
@media (max-width: 640px) {
    .mh-banner.mh-hero {
        min-height: 360px;
        padding: 3.5rem 1.25rem;
    }
    .mh-banner.mh-hero .mh-banner-title {
        font-size: 2rem;
    }
}

.mh-footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:44px 0 8px;}
.mh-footer-heading{color:#fff;font-size:18px;margin:0 0 14px;}
.mh-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.mh-footer a{color:var(--mh-mint);text-decoration:none;}
.mh-footer a:hover{color:#fff;text-decoration:underline;}
.mh-footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:28px;padding:20px 0 28px;text-align:center;}
.mh-copyright{margin:0 0 8px;color:#fff;font-size:14px;}
.mh-disclaimer{margin:0 auto;color:#cfe3df;font-size:13px;max-width:760px;}/* ---------- Medical Hub hero banner v2: sensor photo, left-aligned white text, white button ---------- */
.mh-banner.mh-hero.mh-hero-left{text-align:left;}
.mh-banner.mh-hero.mh-hero-left .mh-hero-content{max-width:1200px;}
.mh-banner.mh-hero.mh-hero-left .mh-banner-title{font-weight:800;color:#fff;}
.mh-banner.mh-hero.mh-hero-left .mh-banner-text{color:#fff;max-width:64ch;;margin-left:0;margin-right:0;text-align:left}
.mh-banner.mh-hero a.mh-banner-button{display:inline-block!important;margin-top:1.75rem;padding:.9rem 2.2rem;background:#fff;color:#0b3d2e;font-weight:700;font-size:1.05rem;line-height:1;border-radius:8px;text-decoration:none;box-shadow:0 4px 18px rgba(0,0,0,.35);}
.mh-banner.mh-hero a.mh-banner-button:hover,.mh-banner.mh-hero a.mh-banner-button:focus{background:#0b3d2e;color:#fff;text-decoration:none;}
@media(max-width:640px){
.mh-banner.mh-hero.mh-hero-left .mh-banner-title{font-size:2rem;}
.mh-banner.mh-hero.mh-hero-left .mh-banner-text{font-size:1rem;}
.mh-banner.mh-hero a.mh-banner-button{padding:.8rem 1.8rem;font-size:1rem;}/* ---------- Footer brand block (mirrors the header brand) ---------- */
.mh-footer-brand{padding:40px 0 6px;}
.mh-footer-brand-link{color:#fff;font-size:26px;font-weight:700;letter-spacing:.5px;text-decoration:none;}
.mh-footer-brand-link:hover{color:var(--mh-mint);}
.mh-footer-description{margin:10px 0 0;color:#cfe3df;font-size:15px;line-height:1.55;max-width:620px;}
.mh-footer-grid{padding-top:26px;}

}
@media (max-width:900px){
    .mh-grid{grid-template-columns:repeat(2,1fr);}
    .mh-banner-title{font-size:34px;}
}
@media (max-width:760px){
    .mh-menu-toggle{display:flex;}
    .mh-nav{display:none;width:100%;}
    .mh-nav.is-open{display:block;}
    .mh-header-inner{flex-wrap:wrap;}
    .mh-nav .mh-menu{flex-direction:column;gap:2px;padding:8px 0 4px;}
    .mh-nav .mh-menu a{display:block;padding:8px 2px;}
}
@media (max-width:600px){
    .mh-grid{grid-template-columns:1fr;}
    .mh-footer-grid{grid-template-columns:1fr;}
    .mh-banner{padding:40px 20px;}
    .mh-banner-title{font-size:28px;}
}
/* ---------- Content area for parent templates (posts, pages, archives) ---------- */
.mh-content{background:#fff;}
.mh-content::after{content:"";display:table;clear:both;}
.mh-footer{clear:both;}

.mh-banner a{display:none!important;}



/* ---------- Option 2: Split Hero banner ---------- */
html {
 scroll-behavior: smooth;
}
.mh-banner.mh-hero-split {
 background: #faf6ef;
 border-bottom: 1px solid #e9e2d2;
 padding: 56px 0;
}
.mh-hero-split-inner {
 display: flex;
 align-items: center;
 gap: 48px;
}
.mh-hero-split-text {
 flex: 1 1 50%;
 min-width: 0;
 text-align: left;
}
.mh-hero-split .mh-banner-title {
 color: var(--mh-teal-darker);
 font-size: clamp(32px, 4.5vw, 54px);
 line-height: 1.12;
 margin: 0 0 14px;
 font-weight: 800;
}
.mh-hero-split .mh-banner-text {
 color: #334155;
 font-size: clamp(16px, 1.6vw, 19px);
 line-height: 1.6;
 margin: 0 0 26px;
}
.mh-hero-split .mh-banner-button {
 display: inline-block;
 background: var(--mh-teal-darker);
 color: #ffffff;
 text-decoration: none;
 font-weight: 700;
 font-size: 16px;
 padding: 14px 32px;
 border-radius: 10px;
}
.mh-hero-split .mh-banner-button:hover,
.mh-hero-split .mh-banner-button:focus {
 background: var(--mh-teal-dark);
 color: #ffffff;
}
.mh-hero-split-photo {
 flex: 1 1 50%;
 min-width: 0;
}
.mh-hero-split-photo img {
 width: 100%;
 height: auto;
 display: block;
 border-radius: 24px;
 box-shadow: 0 18px 40px rgba(7, 63, 60, 0.14);
}
@media (max-width: 860px) {
 .mh-banner.mh-hero-split {
  padding: 40px 0;
 }
 .mh-hero-split-inner {
  flex-direction: column;
  gap: 28px;
 }
 .mh-hero-split-text,
 .mh-hero-split-photo {
  flex: 1 1 auto;
  width: 100%;
 }
}
/* Fix 2026-11-03: always render the split-hero "Browse Articles" button (overrides any legacy banner link-hiding rule) */
.mh-banner.mh-hero-split a.mh-banner-button{display:inline-block!important;visibility:visible!important;opacity:1!important;}