/* ═══════════════════════════════════════════════════════════════════════
   KPJ Healthcare — page chrome (header + nav drawer + footer + bottom-nav)
   Extracted from the finalized find-a-doctor theme. Page-specific rules are
   intentionally excluded.
   ═══════════════════════════════════════════════════════════════════════ */

/* Flexo is NOT declared here. This file lives in assets/css/, so the upstream
   @font-face rules — which load ../fonts relative to the stylesheet — would
   resolve to assets/css/fonts/ and 404. style.css already declares all five
   weights from assets/fonts/ and is enqueued on every page, so the font is
   available before this sheet is parsed. */

:root{
  --primary-color:#967f65; --kpj-taupe:#967f65;
  --font:Flexo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-heading:Flexo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,'Trebuchet MS',sans-serif;
  --font-body:Flexo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --kpj-taupe-light:#d5c8b9; --kpj-taupe-warm:#e9e4de;
  --kpj-bg-grey:#f3f5f7; --kpj-bg-warm:#e9e4de;
  --kpj-coral:#f37574; --kpj-amber:#fcb11d; --kpj-teal:#39b5b2; --kpj-navy:#004080;
  --kpj-text-dark:#10111e; --kpj-text-body:#647589; --kpj-text-mid:#606060;
  --kpj-white:#fff; --kpj-border:#dee2e6; --kpj-overlay:rgba(0,0,0,0.50);
}
body{margin:0;font-family:var(--font);color:#10111e;}

/* ── HEADER ── */
header,.header-menu-area{background:var(--primary-color);color:#fff;}
.header{position:sticky;top:0;z-index:200;}
.header-menu-area{align-items:center;display:flex;height:65px;position:relative;z-index:1;}
.header-menu-area .container{align-items:center;display:flex;justify-content:space-between;width:100%;max-width:none;margin-right:auto;margin-left:auto;padding-right:.75rem;padding-left:.75rem;box-sizing:border-box;}
@media(min-width:576px){.header-menu-area .container{max-width:540px;}}
@media(min-width:768px){.header-menu-area .container{max-width:720px;}}
@media(min-width:992px){.header-menu-area .container{max-width:960px;}}
@media(min-width:1200px){.header-menu-area .container{max-width:1140px;}}
@media(min-width:1400px){.header-menu-area .container{max-width:1320px;}}
.logo a{display:flex;align-items:center;}
.home-header-logo{height:30px;width:auto;}
@media (max-width:480px){.home-header-logo{height:38px;width:auto;}}
.header-menu-area .md-form{align-items:center;background:#fff;border-radius:10px;color:#000;display:flex;flex-direction:row;margin:0 10px;overflow:hidden;padding-right:10px;width:325px;}
.header-menu-area .md-form .form-control{border:none;padding:10px;font-family:var(--font);font-size:14px;font-weight:400;line-height:21px;outline:none;flex:1;color:#000;}
.header-menu-area .md-form .form-control:focus{box-shadow:none;}
.search-btn{background:none;border:none;padding:0 6px;cursor:pointer;color:var(--kpj-taupe);font-size:16px;line-height:1;}
.search-btn:hover{background:transparent;}
.main-header{align-items:center;display:flex;justify-content:flex-end;gap:4px;}
.header-menu.header-left{display:flex;align-items:center;}
.active-tab-container{align-items:center;display:flex;margin-right:20px;}
.active-tab-container .tab{align-items:center;color:rgba(255,255,255,.8);cursor:pointer;display:flex;font-family:var(--font);font-size:16px;font-weight:600;height:65px;justify-content:center;padding:0 14px;text-align:center;text-decoration:none;transition:background .15s,color .15s;}
.active-tab-container .tab.active{background:#fff;color:var(--primary-color);font-weight:600;}
.active-tab-container .tab:hover:not(.active){color:#fff;}
.header-login{display:flex;align-items:center;margin-right:8px;}
.header-login button{background:transparent;border:0;color:#fff;display:flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--font);font-size:16px;font-weight:400;line-height:24px;}
.header-login img{width:18px;height:18px;}
.header-hamburger{display:flex;align-items:center;padding:0 8px;cursor:pointer;}
.header-hamburger img{width:28px;height:auto;}
.side-menu-icon{display:none;}
.side-menu-icon button{background:transparent;border:0;cursor:pointer;padding:4px;}
.flex-grow-1{flex-grow:1;max-width:30px;margin:0 20px;}
.sticky_menu{position:fixed;top:0;left:0;width:100vw;z-index:9999;}
.active-tab-mobile{display:none;position:relative;}
.active_tab_btn{display:flex;background:transparent;border:0;color:#fff;font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;align-items:center;gap:4px;padding:0 10px;}
.active_tab_btn span{display:flex;align-items:center;}
.active_tab_btn svg{fill:#fff;transition:transform .2s ease;}
.active_tab_btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.active-tab-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:170px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden;z-index:10000;}
.active-tab-menu.open{display:block;}
.active-tab-menu a{display:block;padding:12px 16px;color:var(--kpj-text-dark);text-decoration:none;font-family:var(--font);font-size:15px;font-weight:600;}
.active-tab-menu a:hover{background:var(--kpj-bg-warm);color:var(--primary-color);}
.f-right{float:right;}.pos-rel{position:relative;}

/* ── NAV DRAWER ── */
.kpj-nav-drawer{position:fixed;inset:0;z-index:1300;display:none;pointer-events:none;}
.kpj-nav-drawer.open{display:block;pointer-events:all;}
.kpj-nav-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:kpjFadeIn .225s cubic-bezier(.4,0,.2,1);}
@keyframes kpjFadeIn{from{opacity:0;}to{opacity:1;}}
.kpj-nav-panel{position:absolute;inset:0;background:#fff;overflow-y:auto;display:flex;flex-direction:column;padding:0;animation:kpjSlideIn .225s cubic-bezier(.4,0,.2,1);}
@keyframes kpjSlideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.kpj-nav-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 30px;flex-shrink:0;}
.kpj-nav-header img{height:40px;width:auto;}
.kpj-nav-close{background:none;border:none;cursor:pointer;padding:8px;position:absolute;top:8px;right:8px;color:#333;display:flex;align-items:center;justify-content:center;}
.kpj-nav-body{flex:1;overflow-y:auto;padding:8px 0 8px 24px;}
.two-columns-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;font-size:35px;}
.first-coloumn-sub{padding:4px 0;}
.first-coloumn-sub a,.second-coloumn-sub a{font-family:var(--font);font-size:35px;font-weight:500;line-height:52.5px;color:#000;text-decoration:none;display:inline-block;transition:.3s ease-out;}
.first-coloumn-sub a:hover,.second-coloumn-sub a:hover{color:var(--primary-color);padding-left:30px;text-decoration:none;}
.second-coloumn{display:flex;flex-direction:column;}
.second-coloumn-sub{margin-bottom:12px;}
.nav-preview-img{margin-top:20px;width:100%;max-width:500px;height:350px;background-size:100%;background-repeat:no-repeat;transition:background-image .3s ease-in-out;border-radius:8px;}
.kpj-nav-footer{flex-shrink:0;padding:16px 28px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid #eee;}
.kpj-nav-social{display:flex;gap:20px;}
.kpj-nav-social a{color:#333;font-size:24px;text-decoration:none;transition:color .15s;display:inline-flex;}
.kpj-nav-social a:hover{color:var(--primary-color);text-decoration:none;}
.kpj-nav-social svg{width:24px;height:24px;fill:currentColor;}
.kpj-nav-search{display:flex;align-items:center;border-bottom:1px solid #ced4da;width:300px;gap:8px;padding-bottom:4px;}
.kpj-nav-search input{border:none;outline:none;font-family:var(--font);font-size:14px;font-weight:400;line-height:21px;flex:1;}
.kpj-nav-search button{background:none;border:none;cursor:pointer;color:#666;font-size:14px;}

/* ── FOOTER ── */
.footer-notch{position:absolute;top:-50px;left:0;right:auto;transform:translateX(-50%);display:flex;mix-blend-mode:lighten;z-index:1;}
.kpj-footer{background:var(--primary-color);display:flex;align-items:flex-start;height:420px;padding:50px 0 70px;position:relative;}
.kpj-footer,.kpj-footer *{box-sizing:border-box;}
.kpj-footer h4,.kpj-footer p{margin-top:0;}
.kpj-footer .container{display:flex;gap:0;width:100%;height:100%;max-width:none;margin-right:auto;margin-left:auto;padding-right:.75rem;padding-left:.75rem;box-sizing:border-box;}
@media(min-width:576px){.kpj-footer .container{max-width:540px;}}
@media(min-width:768px){.kpj-footer .container{max-width:720px;}}
@media(min-width:992px){.kpj-footer .container{max-width:960px;}}
@media(min-width:1200px){.kpj-footer .container{max-width:1140px;}}
@media(min-width:1400px){.kpj-footer .container{max-width:1320px;}}
.kpj-footer .content,.kpj-footer .content-desktop-view{border-right:1px solid #fff;padding:0 2%;flex:1;min-width:0;margin-left:10px;}
.kpj-footer .content{padding-left:0;margin-left:0;}
.kpj-footer .content-desktop-view:last-child{border-right:none;padding-right:0;}
.kpj-footer h4{font-family:var(--font);font-size:16px;font-weight:700;line-height:17.6px;color:#fff;margin-bottom:6px;letter-spacing:normal;}
.kpj-footer ul{list-style:none;padding:0;margin:0;}
.kpj-footer ul li{font-family:var(--font);font-size:13px;font-weight:400;line-height:19.5px;color:#fff;margin-bottom:5px;width:180px;}
.kpj-footer ul li a{font-family:var(--font);font-size:13px;font-weight:400;line-height:19.5px;color:#fff;text-decoration:none;}
.kpj-footer ul li p{font-family:var(--font);font-size:13px;font-weight:400;color:#fff;margin-bottom:0;margin-left:3px;}
.kpj-footer p,.footer-reg{font-family:var(--font);font-size:10px;font-weight:400;line-height:25px;color:#fff;margin-bottom:15px;}
.kpj-footer a:hover{color:#fff!important;text-decoration:underline!important;}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;cursor:default;}
.footer-contact-item img{width:14px;margin-top:3px;flex-shrink:0;}
.footer-contact-item p{font-size:13px;line-height:19.5px;}
.footer-social-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:40px;justify-content:center;}
.footer-social-row a{font-family:var(--font);font-size:13px;color:#fff;text-decoration:none;}
.footer-social-row a:hover{text-decoration:underline!important;color:#fff!important;}
.footer-legal{display:flex;gap:10px;margin-top:60px!important;}
.footer-legal-col p,.footer-legal-col a{font-family:var(--font);font-size:10px;line-height:1.1;color:#fff;margin-bottom:5px;display:block;}
.footer-logo{height:30px;width:auto;margin-bottom:4px;}
.footer-acc-body{display:block;}
.footer-acc-icon{display:none;}
.footer-acc-trigger{cursor:default;margin-bottom:8px;}
.footer-app-col{text-align:center;position:relative;}
.kpj-footer .content-desktop-view.footer-app-col{flex:0 0 250px;padding:0;}
.footer-appphone{position:relative;width:100%;max-width:250px;aspect-ratio:900/1339;margin:0 auto;}
.footer-app-col #mobile_image_footer{width:100%;height:100%;object-fit:contain;display:block;}
.fad-hotspot{position:absolute;display:block;z-index:2;}
.fad-hotspot-cares{left:22%;top:14%;width:56%;height:24%;}
.fad-hotspot-play{left:19%;top:41%;width:31%;height:7%;}
.fad-hotspot-apple{left:56%;top:41%;width:28%;height:7%;}
.footer-notch-mobile{display:none;left:50px;}

/* ── BOTTOM NAV ── */
.navigation-bottom{height:50px;bottom:-1px;background:#fff;width:100vw;z-index:3;position:fixed;box-shadow:2px 2px 4px rgba(0,0,0,.3);transition:height .4s ease-out;}
.navigation-bottom .redirection_bottom{display:flex;justify-content:center;padding:12px 0;transition:justify-content 1s ease-out;}
.navigation-bottom .redirection_cube{display:flex;flex-direction:column;width:50px;align-items:center;text-align:center;text-decoration:none;color:inherit;}
.navigation-bottom .redirection_cube span{display:none;font-size:14px;color:#333;}
.navigation-bottom .redirection_cube .redirection_cube_img{padding-bottom:10px;}
.navigation-bottom .redirection_cube .redirection_cube_img img{height:25px;}
.navigation-bottom:hover{box-shadow:5px 10px #888;height:80px;}
.navigation-bottom:hover .redirection_bottom{justify-content:space-evenly;}
.navigation-bottom:hover .redirection_cube{padding-top:5px;width:auto;}
.navigation-bottom:hover .redirection_cube span{display:block;}
.navigation-bottom:hover .redirection_cube img{height:30px;}

/* ── RESPONSIVE (header/footer/bottom-nav) ── */
@media (max-width:1024px){.flex-grow-1{display:none!important;}}
@media (max-width:768px){
  .kpj-footer{height:auto;flex-direction:column;padding:40px 25px 10px;}
  .kpj-footer .container{flex-direction:column;gap:0;overflow-x:visible;}
  .kpj-footer .content,.kpj-footer .content-desktop-view{flex:none;width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.2);padding:0;margin-left:0;}
  .kpj-footer .content{display:block!important;padding-left:0;border-bottom:none;margin-bottom:20px;}
  .footer-legal{margin-top:25px!important;}
  .kpj-footer .content-desktop-view.footer-app-col{flex:0 0 auto;border-bottom:none;width:100%;max-width:100%;margin:24px auto 0;padding:0;}
  .footer-appphone{margin:25px auto 0;}
  .footer-notch{display:none!important;}
  .footer-notch-mobile{display:flex;position:absolute;top:0;left:80%;transform:translateX(-50%);mix-blend-mode:lighten;}
  .footer-acc-trigger{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:14px 0;margin-bottom:0;user-select:none;}
  .footer-acc-icon{display:inline-flex;align-items:center;flex-shrink:0;transition:transform .2s ease;}
  .footer-acc-trigger.open .footer-acc-icon{transform:rotate(45deg);}
  .footer-acc-body{display:none;padding-bottom:12px;}
  .footer-acc-trigger.open + .footer-acc-body{display:block;}
  .two-columns-grid{grid-template-columns:1fr;}
  .first-coloumn-sub a,.second-coloumn-sub a{font-size:24px;line-height:36px;}
  .active-tab-container{display:none!important;}
  .active-tab-mobile{display:block!important;}
  .side-menu-icon{display:flex!important;align-items:center;}
  .header-login{display:none!important;}
  .header-hamburger{display:none!important;}
  .navigation-bottom{height:90px;bottom:0;z-index:2;transition:.6s;}
  .navigation-bottom:hover{box-shadow:2px 2px 4px rgba(0,0,0,.3);height:90px;}
  .navigation-bottom .redirection_bottom{justify-content:space-between;overflow-x:auto;scrollbar-width:none;}
  .navigation-bottom .redirection_bottom::-webkit-scrollbar{display:none;}
  .navigation-bottom .redirection_cube{width:max-content;padding:0;margin:0 22px;}
  .navigation-bottom .redirection_cube span{display:block;width:max-content;font-size:12px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Bootstrap shim.

   The chrome markup uses a handful of Bootstrap utility classes, and the
   upstream WordPress variant assumes the host theme already loads Bootstrap.
   This theme does not, so the rules are carried here — the same set the
   portable single-file variant of the chrome ships for the same reason.
   Without them the header's search box, login link and hamburger all lose
   their responsive visibility and appear at every breakpoint.
   ═══════════════════════════════════════════════════════════════════════ */
/* Reserve the fixed header's space. .header-menu-area carries .sticky_menu,
   which is position:fixed, so <header class="header"> has no in-flow child and
   collapses to zero height — the first section would slide under the bar. The
   JS-rendered chrome papered over this with an inline height on <kpj-header>;
   this is the same 65px, declared where it belongs. It stays correct with the
   admin bar too: html{margin-top} moves the document and the rule below moves
   the fixed bar by the same amount. */
.header{height:65px;box-sizing:border-box}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.d-none{display:none!important}
@media (min-width:768px){.d-md-block{display:block!important}}
@media (min-width:1024px){.d-lg-block{display:block!important}}
@media (max-width:1024px){.header-menu-area .flex-grow-1{display:none!important}}
.position-relative{position:relative}
.text-end{text-align:right}

/* Also from the portable variant: the search field is pulled left of its grid
   cell, and narrows before the header would otherwise crowd. */
.header-menu-area .md-form{transform:translateX(-10%)}
@media (max-width:1200px){.header-menu-area .md-form{width:220px}}

/* WordPress admin bar. kpj-chrome pins the header with position:fixed;top:0,
   which html{margin-top} from admin-bar.css does not move. --wp-admin-offset is
   set on .kpjlh-page in style.css and is 0 for logged-out visitors. */
body.admin-bar .kpjlh-page .header-menu-area.sticky_menu{top:var(--wp-admin-offset,0px)}