/* UX retenção · celular e tablet (≤820px): header de 64px com "Menu", gaveta pela direita,
   alvos de toque de 44px e texto de pelo menos 12px. Vem por último para valer sobre blog/seo.css. */
.drawer-only{display:none}
@media(max-width:820px){
  .site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important;border-bottom:1px solid #e3ebf1!important;min-height:64px!important;padding-block:8px!important;flex-wrap:nowrap!important;gap:8px!important;justify-content:flex-start!important;position:sticky;top:0;z-index:30}
  .site-header .wordmark{margin-right:auto;min-width:0}
  .site-header .wordmark img{width:40px;height:40px}
  .site-header .header-actions{order:2;width:auto!important;margin-left:0!important;display:flex!important;gap:4px!important}
  .site-header .header-actions .button-small{display:none!important}
  .site-header .header-actions .login-link{display:inline-flex!important;align-items:center;min-height:44px;padding:0 10px;border:0!important;font-size:14px!important;font-weight:700;color:#0c4f83}
  .site-header .nav-toggle{display:inline-flex!important;order:3;margin-left:0!important;min-height:44px;min-width:44px;padding:0 14px;gap:8px;border:1.5px solid #b8ccd9;border-radius:10px;font:700 15px/1 'DM Sans',sans-serif}
  .site-header .nav-toggle::before{content:"";width:18px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
  .site-header .nav-toggle[aria-expanded=true]{background:#e7f2fa;border-color:#0c4f83}
  /* Gaveta */
  .site-header .site-nav{display:flex!important;position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);margin:0!important;padding:0 0 calc(16px + env(safe-area-inset-bottom,0px))!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;background:#fff!important;border:0!important;border-left:1px solid #d7e2ea!important;z-index:1001;overflow-y:auto;white-space:normal!important;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  body.nav-open .site-header .site-nav{transform:none;visibility:visible;transition:transform .22s ease}
  body.nav-open .site-header{z-index:1001}
  body.nav-open .site-header::before{content:"";position:fixed;inset:0;background:#0f2233a6;z-index:1000}
  body.nav-open{overflow:hidden}
  .site-header .site-nav .drawer-only{display:flex}
  .site-header .site-nav>a{order:3;display:flex!important;align-items:center;width:auto!important;min-height:52px;margin:0 12px;padding:0 10px!important;border-radius:8px;border-bottom:1px solid #eef3f6;color:#10212f;font:600 16px/1.2 'DM Sans',sans-serif!important;text-decoration:none}
  .site-header .site-nav>a[aria-current=page]{background:#e7f2fa;color:#0c4f83;font-weight:800!important;border-bottom-color:transparent}
  .site-header .site-nav .drawer-head{order:0;height:64px;flex:none;align-items:center;justify-content:space-between;padding:0 12px 0 20px;border-bottom:1px solid #d7e2ea}
  .site-header .site-nav .drawer-head b{font:800 13px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5c6b79}
  .site-header .site-nav .drawer-close{min-height:44px;padding:0 12px;border:0;background:none;color:#0c4f83;font:700 15px 'DM Sans',sans-serif;cursor:pointer}
  .site-header .site-nav .drawer-cta{order:1;flex-direction:column;gap:10px;padding:20px}
  .site-header .site-nav .drawer-cta .button{display:flex;justify-content:center;align-items:center;min-height:48px;width:100%;font-size:16px}
  .site-header .site-nav>a.donate-link{order:8;justify-content:center;margin:20px 20px 0;min-height:44px;border:2px solid #f4c430;border-bottom:2px solid #f4c430;border-radius:10px}
  .site-header .site-nav .drawer-foot{order:9;justify-content:center;margin:10px 20px 0;font-size:13px;color:#5c6b79;text-align:center}
  /* Alvos de toque de 44px */
  .site-footer a,.breadcrumb a,.guide-side a,.cookie-privacy-link,.blog-hero nav a,.article-toc a,.provas-table a,table a,.guide-related a,.category-links a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer{gap:0 14px!important;font-size:13px!important}
  .site-footer span{flex-basis:100%}
  .breadcrumb{font-size:13px!important;row-gap:0}
  .cookie-banner button,.donate-copy,.button-small{min-height:44px}
  /* Texto de pelo menos 12px */
  .eyebrow,.kicker,.blog-category,.article-meta,.tag,.chip,.small,small,.hero-note,.site-footer,.site-footer a,.guide-side,.seo-note,.footnote,.blog-card span,.blog-card time{font-size:max(12px,1em)}
}
@media(max-width:820px){
  .site-header .site-nav .drawer-cta .button{color:#fff!important;font-weight:800!important;letter-spacing:normal!important;text-decoration:none!important}
  .site-header .site-nav .drawer-cta .button-outline{background:#fff!important;color:#0c4f83!important;border:2px solid #0c4f83!important}
}
@media(max-width:820px){
  .site-header .wordmark{min-height:44px;display:inline-flex;align-items:center}
  .guide-breadcrumb a,.article-bottom a,.article-layout aside a,.article-body li>a:only-child{display:inline-flex;align-items:center;min-height:44px}
  .guide-breadcrumb{font-size:13px}
  .guide-card-grid a>span,.donate-code,.donate-copy{font-size:12px!important}
}
@media(max-width:820px){
  .site-footer a,.breadcrumb a,.guide-breadcrumb a{min-width:44px;justify-content:center}
}
/* Páginas de tema: a questão de exemplo precisa começar na 1ª tela do celular. */
@media(max-width:600px){
  body:has(.sample-section) .guide-breadcrumb{padding-top:4px}
  body:has(.sample-section) .guide-hero{padding-top:14px;padding-bottom:10px}
  body:has(.sample-section) .guide-hero h1{font-size:28px;margin:6px 0 8px}
  body:has(.sample-section) .guide-hero p:not(.eyebrow){font-size:15px;line-height:1.45}
  body:has(.sample-section) .guide-layout{padding-top:12px}
}