/* Highland Oak Dental header redesign (2026-11-02). Loaded after hod-refresh.css. */
header{background:var(--hod-navy,#233462);box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 20px rgba(17,26,51,.18)}
header svg{flex:none;vertical-align:middle}
.hdr-util{background:var(--hod-navy-dk,#1c2a4f);color:rgba(255,255,255,.82);font:400 13px/1 Poppins,sans-serif;border-bottom:1px solid rgba(255,255,255,.07)}
.hdr-util__in{max-width:1240px;margin:0 auto;padding:9px 28px;display:flex;align-items:center;gap:28px}
.hdr-util a,.hdr-util span{color:inherit;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hdr-util svg{color:var(--hod-gold,#bc8e45)}
.hdr-util a:hover{color:#fff}
.hdr-right{margin-left:auto;gap:22px!important}
.hdr-util .hod-lang{position:static!important;transform:none!important;margin:0!important;padding:0 0 2px!important;background:none!important;border:0!important;border-bottom:1px solid rgba(188,142,69,.75)!important;border-radius:0!important;color:rgba(255,255,255,.85)!important;font:400 13px/1 Poppins,sans-serif!important;letter-spacing:.3px}
.hdr-util .hod-lang:hover,.hdr-util .hod-lang:focus{background:none!important;color:#fff!important}
.hdr-es{color:var(--hod-gold,#bc8e45)!important;font-weight:500}
.hdr-tel{color:#fff!important;font-weight:500;font-size:14px;letter-spacing:.3px}
.hdr-actions{display:flex;align-items:center;gap:14px}
.hdr-book{appearance:none;border:0;cursor:pointer;background:var(--hod-gold,#bc8e45);color:#fff;font:500 14.5px/1 Poppins,sans-serif;letter-spacing:.4px;
  padding:13px 26px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(188,142,69,.32);transition:background-color .2s,transform .15s}
.hdr-book:hover{background:var(--hod-gold-dk,#aa803d);transform:translateY(-1px)}
.hdr-callicon{display:none}

@media (min-width:1025px){
  header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:24px;padding:0 max(28px,calc((100% - 1240px)/2 + 28px))}
  header>#hd-top{grid-column:1/-1;margin:0 calc(-1*max(28px,calc((100% - 1240px)/2 + 28px)))}
  header #hd-contents,header .hd-container{display:contents}
  header .logo{grid-column:1;grid-row:2;padding:16px 0;display:block}
  header .logo img{max-height:60px!important;width:auto;transition:max-height .2s}
  header #main-nav{grid-column:2;grid-row:2;background:none!important;justify-self:end}
  header #main-nav>ul{display:flex;justify-content:flex-end;gap:2px;margin:0;padding:0;background:none!important}
  header #main-nav>ul>li>a{display:inline-flex!important;align-items:center;gap:4px;white-space:nowrap;font:500 14.5px/1 Poppins,sans-serif!important;letter-spacing:.3px;color:#fff;padding:30px 12px!important;background:none!important}
  header #main-nav>ul>li>a:hover,header #main-nav>ul>li:focus-within>a{color:var(--hod-gold,#bc8e45)}
  header .hdr-actions{grid-column:3;grid-row:2}
  .fix-nav header #hd-top{display:none}
  .fix-nav header .logo{padding:10px 0}
  .fix-nav header .logo img{max-height:52px!important}
  .fix-nav header #main-nav>ul>li>a{padding-top:24px!important;padding-bottom:24px!important}
}
@media (min-width:1025px) and (max-width:1200px){
  .hdr-hours{display:none!important}
  header #main-nav>ul>li>a{padding-left:8px!important;padding-right:8px!important;font-size:13.5px!important}
  header .logo img{max-height:49px!important}
  .fix-nav header .logo img{max-height:44px!important}
  header .hdr-book{padding:12px 18px;font-size:13.5px}
  header{column-gap:16px}
}
@media (min-width:1201px) and (max-width:1340px){
  header #main-nav>ul>li>a{padding-left:9px!important;padding-right:9px!important}
}
@media (max-width:1024px){
  .hdr-util{display:none!important}
  header .hdr-actions{display:flex!important;margin-left:auto;gap:10px;padding-right:4px}
  .hdr-callicon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);color:#fff}
  .hdr-callicon span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hdr-book{padding:12px 16px;font-size:13.5px}
  header .logo img{max-height:52px!important}
}
@media (max-width:420px){
  header .logo{padding:8px 2px 8px 8px!important}
  header .logo img{max-width:176px}
  .hdr-book{padding:10px 12px;font-size:12.5px;letter-spacing:.2px}
  header .hdr-actions{padding-right:0}
  .hdr-callicon{width:38px;height:38px}
  header .hdr-actions{gap:7px}
}
header #main-nav>ul>li>a button{background:none;border:0;color:inherit;padding:0;line-height:1}
header>.skip-link{top:0}
@media (min-width:1025px){header .hdr-lang-li{display:none!important}}
/* LOGO-SIZE: larger fixed-width logo (rev2). Logo links home, so the "Home" item is dropped on desktop to make room. */
@media (min-width:1025px){
  header .logo{flex:none;min-width:0}
  header .logo img{display:block;height:auto!important;max-height:none!important;width:315px;max-width:none;transition:width .2s}
  .fix-nav header .logo img{width:300px}
  html[lang^=es] header .logo img{width:290px}html[lang^=es] .fix-nav header .logo img{width:270px}
  header #main-nav>ul>li:first-child{display:none}
  header #main-nav>ul>li>a{padding-left:9px!important;padding-right:9px!important}
}
@media (min-width:1025px) and (max-width:1279px){html[lang] header .logo img{width:255px}html[lang] .fix-nav header .logo img{width:240px}html[lang^=es] header .logo img{width:250px}}
@media (min-width:1025px) and (max-width:1200px){
  header #main-nav>ul>li>a{padding-left:6px!important;padding-right:6px!important}
  html[lang] header .logo img{width:250px}html[lang] .fix-nav header .logo img{width:230px}}
@media (min-width:1025px) and (max-width:1100px){html[lang] header .logo img{width:172px}html[lang^=es] header .logo img{width:160px}html[lang] .fix-nav header .logo img{width:165px}}
/* Tablet/phone logo: keep true aspect ratio (was being stretched), ~18% larger */
@media (max-width:1024px){
  header .logo{flex:0 1 auto;min-width:0}
  header .logo img{height:auto!important;max-height:none!important;width:470px;max-width:100%!important;object-fit:contain}
}
@media (max-width:420px){
  header .logo{width:auto!important;max-width:none!important}
  html header .hd-container .logo img{width:224px;max-width:224px!important}
  .hdr-book{font-size:0!important;padding:10px 14px}
  .hdr-book::before{content:"Book";font:500 13px/1 Poppins,sans-serif;letter-spacing:.3px}
  html[lang^=es] .hdr-book::before{content:"Reservar"}
  html[lang^=es] header .hd-container .logo img{width:205px;max-width:205px!important}
}