/* ==========================================================================
   Correcoes responsivas globais (carregado em todas as paginas)
   ========================================================================== */

/* ---- HEADER MOBILE: encaixa lupa + logo + botao sem sobreposicao ---- */
@media (max-width:768px){
  .header-inner{grid-template-columns:auto minmax(0,1fr) auto !important;column-gap:8px !important;}
  .header-left{gap:2px !important;}
  .hamburger{width:34px !important;}
  .search-btn{display:flex !important;width:32px !important;height:34px !important;}
  .site-logo{min-width:0 !important;}
  .site-logo img{width:28px !important;height:auto !important;}
  .site-logo .wordmark{font-size:11px !important;letter-spacing:.02em !important;line-height:1.15 !important;}
  .site-logo .sub-line{font-size:7px !important;letter-spacing:.14em !important;}
  .btn-book{font-size:9.5px !important;padding:8px 10px !important;height:auto !important;min-height:0 !important;line-height:1.2 !important;white-space:normal !important;max-width:94px !important;text-align:center !important;}
}

/* ---- FOOTER MOBILE: empilha as colunas (curadoria da Dra) ---- */
@media (max-width:600px){
  .footer-dark-cols{display:grid !important;grid-template-columns:1fr !important;gap:32px !important;}
  .footer-dark-col{width:auto !important;min-width:0 !important;}
}
@media (min-width:601px) and (max-width:900px){
  .footer-dark-cols{display:grid !important;grid-template-columns:1fr 1fr !important;gap:30px 24px !important;}
}
.site-footer-dark{max-width:100%;overflow-x:clip;}
.footer-dark-inner,.footer-dark-cols{overflow-x:clip;}


/* ---- HEADER breakpoint intermediario (tablet landscape / desktop pequeno) ---- */
/* O telefone quebrava em 3 linhas e colava no logo. Escondido nesta faixa. */
@media (min-width:769px) and (max-width:1200px){
  .header-right a[href^="tel"], .header-phone, .phone-link, .header-phone-link{display:none !important;}
  .btn-book{white-space:nowrap !important;}
}

/* ---- HOME (e demais) headings de secao: espaco entre a linha reta e a italica ---- */
.section-title .i-italic{display:inline-block;margin-top:0.28em;}


/* ---- CTA de consulta: moldura decorativa externa (cantos em L + linha topo/base)
   funciona no desktop, mas no mobile fica apertada nas bordas. Esconde no mobile;
   o card interno (.cta-inner) mantem a propria borda. ---- */
/* estendido a 900px (3 ago): as molduras tambem vazavam na faixa de tablet */
@media (max-width:900px){
  .cta-section::before, .cta-section::after,
  .hp-cta::before, .hp-cta::after{display:none !important;}
  .cta-section, .hp-cta{border-top:none !important;border-bottom:none !important;}
}


/* ---- Credential table (Dr Asadi, Clinic): empilha no mobile, label+valor ---- */
@media (max-width:768px){
  .credential-table, .credential-table tbody, .credential-table tr{display:block;width:100%;}
  .credential-table thead{display:none;}
  .credential-table td{display:block;width:auto;text-align:center;padding:14px 8px;border:none;border-top:1px solid rgba(115,88,49,0.15);}
  .credential-table tr td:first-child{border-top:none;}
  .credential-table td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink,#8a6d3b);font-weight:700;margin-bottom:6px;}
}

/* ---- Anchor-nav: padroniza alinhamento em todas as paginas (Prices estava
   com max-width:1000px + margin:0 76px; alinha ao padrao do resto = 1440/0) ---- */
.anchor-nav-inner{max-width:1440px !important;margin-left:auto !important;margin-right:auto !important;}


/* ---- Cor de link inline no conteudo (sem classe = ficava azul padrao do browser) ---- */
.content-section a:not([class]), .content-section-alt a:not([class]),
.content-section__inner a:not([class]), .post-body a:not([class]),
main p a:not([class]), main li:not(.hub-card) a:not([class]){
  color:var(--gold-ink,#735831);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  transition:color .2s ease;
}
.content-section a:not([class]):hover, .content-section-alt a:not([class]):hover,
main p a:not([class]):hover, main li:not(.hub-card) a:not([class]):hover{
  color:var(--charcoal,#2a2420);
}


/* ---- Anchor-nav: alinha com o header (lupa a esquerda, botao a direita).
   O wrapper .anchor-nav tinha padding lateral de 40px; o header usa 14px. ---- */
.anchor-nav{padding-left:0 !important;padding-right:0 !important;}

/* ---- Hero: em telas intermediarias (split layout, >900px) o titulo com
   max-width fixo de 512px invadia o logo da metade direita. Limita a 40vw
   para nunca sobrepor; em telas grandes volta aos 512px do design. ---- */
@media (min-width:901px){
  .hp-hero-content{max-width:min(512px,40vw) !important;}
}

/* ══ Revisão responsiva 3 ago (achados do Leo no tablet) ══ */

/* Credenciais: valores na mesma linha de base mesmo com label de 2 linhas
   (o fix do _base era atropelado pelos CSS por página, que carregam depois) */
.credential-label {display:flex !important; flex-direction:column; justify-content:flex-end; align-items:center; min-height:2.4em;}
.credential-value {white-space:nowrap;}
.credential-value i.i-italic {white-space:normal;}
@media (min-width:561px) and (max-width:900px){
  .credential-row-inner {row-gap:20px;}
  .credential-item {flex:1 1 33%; min-width:0; padding:8px 12px;}
  .credential-item::after, .credential-item::before {display:none;}
  .credential-value {font-size:16px;}
  /* card do CTA final alinhado às laterais das seções acima */
  .cta-section {padding-left:22px !important; padding-right:22px !important;}
  .cta-inner {padding:48px 28px;}
  /* header do tablet: botão numa linha só + wordmark que nunca quebra.
     O botão herdava max-width:94px + white-space:normal da faixa mobile (<=768),
     então a 13.5px enrolava em 5 linhas dentro do header de 72px (o "botão estranho").
     Aqui reseta esses valores; a wordmark usa clamp+nowrap p/ caber em 1 linha de
     561 a 900; e o telefone some nesta faixa (como já acontece de 769-1200) p/ dar
     espaço ao logo + botão (o "menu não encaixa"). */
  .logo-mark {width:56px !important; height:56px !important;}
  .site-logo .wordmark {font-size:clamp(15px,2.2vw,21px) !important; white-space:nowrap !important;}
  .site-logo .sub-line {font-size:10px !important; letter-spacing:.12em !important;}
  .header-right a[href^="tel"], .phone-link {display:none !important;}
  .btn-book {padding:12px 20px !important; font-size:13px !important; white-space:nowrap !important; max-width:none !important; height:auto !important; min-height:0 !important; line-height:1.2 !important;}
}

/* READ MORE ancorado na base dos consult-cards (cards lado a lado alinham) */
.consult-card {display:flex; flex-direction:column;}
.consult-card .expandable {display:flex; flex-direction:column; flex:1;}
.consult-card .expandable__toggle {margin-top:auto;}

/* anchor-nav: sticky garantido em TODAS as páginas (algumas do about perdiam) */
.anchor-nav {position:sticky !important; top:84px; z-index:90;}
@media (max-width:900px){ .anchor-nav {top:72px;} }


/* ══ Ícone da sacola (carrinho) no header (5 ago 2026) ══
   Desktop: sacola ao lado da lupa (grupo da esquerda).
   Tablet/Mobile: sacola à direita, antes do botão; telefone escondido.
   Mobile (<=560): tira a lupa do topo e mostra "Search" no menu (busca vai pro
   menu) — mantendo o texto do logo. Contador some quando vazio (:empty). */
.bdh-cart {position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--charcoal,#2a2420); transition:color .2s ease;}
.bdh-cart:hover {color:var(--gold-ink,#735831);}
.bdh-cart svg {width:23px; height:23px;}
.bdh-cart-count {position:absolute; top:2px; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--gold-ink,#735831); color:#fff; font-family:'Nunito Sans',sans-serif; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.bdh-cart-count:empty {display:none;}
.bdh-cart--mob {display:none;}
.nav-search-mobile {display:none;}
@media (max-width:900px){
  .bdh-cart--desk {display:none;}
  .bdh-cart--mob {display:inline-flex; width:36px; height:36px; margin-right:2px;}
  .bdh-cart--mob svg {width:21px; height:21px;}
  .phone-link, .header-right a[href^="tel"] {display:none !important;}
}
@media (max-width:560px){
  .search-btn {display:none !important;}
  .nav-search-mobile {display:block;}
}


/* ══ FIX mega-dropdown "Concerns" jogando pra ESQUERDA (fora da tela) — 6 ago 2026.
   Bug so nas paginas contact / gift-cards / privacy-policy / terms-and-conditions:
   os CSS por-pagina deles trazem uma copia ANTIGA do header com
   `.mega-dropdown {left:-80px; width:760px}` (sem transform). Isso sobrescreve o
   _base e, somado ao `translateX(-50%)` do _base, jogava o mega para ~ -460px
   (cortado na borda esquerda). Como o _footer-more carrega DEPOIS dos CSS
   por-pagina, reafirmamos aqui o mega correto do _base no desktop (>900px). O
   mobile (<=900) usa o drawer e nao e afetado. Vale pro site todo (no-op nas
   demais paginas, que ja usam o _base). ══ */
@media (min-width:901px){
  .mega-dropdown {position:absolute; top:100%; left:50%; transform:translateX(-50%); width:1120px; max-width:calc(100vw - 40px);}
  .mega-grid {grid-template-columns:repeat(3, 1fr); padding:44px 56px 36px; gap:0;}
  .mega-col {display:flex; flex-direction:column; padding:0 32px; border-left:1px solid rgba(115,88,49,0.10);}
  .mega-col:first-child {padding-left:0; border-left:none;}
  .mega-col:last-child {padding-right:0;}
  .mega-section {margin-bottom:28px;}
  .mega-heading {font-size:22px; margin:0 0 16px; padding:0 0 10px; border-bottom:1px solid var(--gold);}
  .mega-col a {padding:9px 0; font-size:14.5px;}
  .mega-footer {padding:22px 50px;}
}


/* ══ Menu hamburguer (mobile/tablet <=900): ACCORDION + CTA no fim (7 ago 2026).
   Antes tudo abria expandido (o _base forcava .dropdown/.mega-dropdown display:block).
   Aqui colapsa por padrao e abre so quando o item tem .is-open (toggle via script
   inline no site-header). Indicador +/- nos itens com submenu. E o CTA "Not sure
   where to start" sai do mega de Concerns e vai pro FIM do drawer (.nav-drawer-cta). ══ */
.nav-drawer-cta {display:none;}
@media (max-width:900px){
  .main-nav .dropdown, .main-nav .mega-dropdown {display:none !important;}
  .main-nav .nav-item.is-open > .dropdown, .main-nav .nav-item.is-open > .mega-dropdown {display:block !important;}
  .nav-item > a[aria-haspopup="true"]::after {content:'+' !important; margin-left:auto !important; font-family:'Nunito Sans',sans-serif !important; font-size:22px !important; font-weight:400 !important; color:var(--gold-deep,#8a6a3b) !important; line-height:1 !important;}
  .nav-item.is-open > a[aria-haspopup="true"]::after {content:'\2212' !important;}
  .main-nav .mega-footer {display:none !important;}
  .nav-drawer-cta {display:block; padding:22px 26px 26px; margin-top:14px; background:linear-gradient(180deg,var(--cream-mid) 0%,var(--cream-dark) 100%); border-top:1px solid rgba(115,88,49,0.20);}
  .nav-drawer-cta-text {font-family:'Cormorant Garamond',serif; font-size:16px; line-height:1.45; font-style:italic; color:var(--text-body); margin:0 0 14px;}
  .nav-drawer-cta-text strong {color:var(--charcoal); font-style:normal;}
  .nav-drawer-cta-btn {display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px 22px; background:var(--charcoal); color:var(--cream); font-family:'Nunito Sans',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; text-decoration:none;}
}

/* Hamburger SEMPRE visivel no mobile — algumas paginas (blog, e as que tem copia
   antiga do header no CSS por-pagina) trazem um .hamburger{display:none} sem
   restaurar no mobile, e os "3 riscos" sumiam. (fix 7 ago 2026) */
@media (max-width:900px){ .hamburger {display:flex !important;} }