/*
Theme Name: HealthNet Theme
Theme URI: https://healthnet.local
Author: HealthNet Team
Author URI: https://healthnet.local
Description: Tema base oficial para o plugin HealthNet — Sistema de Saúde Pública. Construído sobre os mesmos tokens visuais do plugin (cores, tipografia, espaçamento), elimina a necessidade de Elementor ou de outro tema. Inclui página de demonstração com profissionais e pacientes para testes avançados, e um instalador/desinstalador de dados de demo no painel administrativo.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.2
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healthnet-theme
Domain Path: /languages
Tags: healthcare, custom-colors, full-width-template, threaded-comments, translation-ready, blog
*/

/* =========================================================
   Tokens herdados do plugin HealthNet (assets/css/styles.css)
   Mantemos a mesma paleta para coerência visual total.
   ========================================================= */
:root {
  --c-brand:      #1a56db;
  --c-brand-dk:   #1145b7;
  --c-brand-lt:   #e8effe;
  --c-success:    #057a55;
  --c-success-lt: #def7ec;
  --c-danger:     #c81e1e;
  --c-danger-lt:  #fde8e8;
  --c-warning:    #c27803;
  --c-warning-lt: #fdf6b2;
  --c-info-lt:    #e1effe;

  --c-bg:         #f9fafb;
  --c-surface:    #ffffff;
  --c-border:     #e5e7eb;
  --c-text:       #111827;
  --c-muted:      #6b7280;
  --c-subtle:     #9ca3af;

  --radius:       0.5rem;
  --radius-lg:    0.75rem;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow:       0 2px 8px rgba(0,0,0,.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);

  --font: 'Segoe UI', 'Segoe UI Emoji', system-ui, -apple-system, 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

/* =========================================================
   Reset suave + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--c-brand-dk); }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: var(--c-text); margin: 0 0 .75rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem 1.25rem; }

/* =========================================================
   Layout do tema (cabeçalho, conteúdo, rodapé)
   Quando a página contém um shortcode HealthNet, o plugin
   adiciona body.healthnet-page e o tema entrega "fullscreen".
   ========================================================= */
.ht-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ht-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 50;
}
.ht-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ht-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; color: var(--c-brand); font-size: 1.15rem;
  text-decoration: none;
}
.ht-brand__mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-dk));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
}
.ht-nav { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.ht-nav a { color: var(--c-text); font-size: .95rem; }
.ht-nav a:hover { color: var(--c-brand); }
.ht-nav__cta {
  background: var(--c-brand); color: #fff !important;
  padding: .55rem 1rem; border-radius: var(--radius);
  font-weight: 600; font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease;
}
.ht-nav__cta:hover { background: var(--c-brand-dk); text-decoration: none; }

.ht-main { flex: 1; }

.ht-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.ht-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-muted);
  padding: 1.5rem 1.25rem;
  font-size: .9rem;
}
.ht-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}

/* =========================================================
   Hero da home
   ========================================================= */
.ht-hero {
  background: linear-gradient(135deg, #0f2fa8 0%, #1a56db 60%, #3b82f6 100%);
  color: #fff;
  padding: 4rem 1.25rem 5rem;
  text-align: center;
}
.ht-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.ht-hero p  { color: rgba(255,255,255,.92); font-size: 1.1rem; max-width: 720px; margin: 0 auto 1.5rem; }
.ht-hero__cta {
  display: inline-block;
  background: #fff; color: var(--c-brand) !important;
  font-weight: 700; padding: .85rem 1.5rem; border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.ht-hero__cta:hover { transform: translateY(-1px); text-decoration: none; }

/* =========================================================
   Cards/grid de features
   ========================================================= */
.ht-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 3rem 0;
}
.ht-feature {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.ht-feature h3 { color: var(--c-brand); margin-bottom: .5rem; }
.ht-feature p { color: var(--c-muted); margin: 0; }

/* =========================================================
   Posts / páginas
   ========================================================= */
.ht-article {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.ht-article h1, .ht-article h2 { color: var(--c-text); }
.ht-article .ht-meta {
  color: var(--c-muted); font-size: .85rem; margin-bottom: 1rem;
}
.ht-article a { color: var(--c-brand); }

/* =========================================================
   Botões genéricos
   ========================================================= */
.ht-btn {
  display: inline-block; cursor: pointer; font-weight: 600;
  padding: .55rem 1.1rem; border-radius: var(--radius);
  border: 1px solid transparent; font-size: .9rem;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.ht-btn--primary { background: var(--c-brand); color: #fff; }
.ht-btn--primary:hover { background: var(--c-brand-dk); color: #fff; text-decoration: none; }
.ht-btn--ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.ht-btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }

/* =========================================================
   Página fullscreen do HealthNet
   Quando o plugin marca body.healthnet-page, escondemos toda
   a "casca" do tema para o SPA ocupar 100% da viewport.
   ========================================================= */
body.healthnet-page .ht-header,
body.healthnet-page .ht-footer { display: none !important; }
body.healthnet-page .ht-main,
body.healthnet-page .ht-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
body.healthnet-page,
body.healthnet-fullscreen {
  background: var(--c-bg) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 720px) {
  .ht-header__inner { flex-wrap: wrap; gap: .75rem; }
  .ht-nav { gap: .75rem; }
  .ht-hero { padding: 3rem 1rem 4rem; }
  .ht-container { padding: 1.5rem 1rem; }
}

/* Aceitação de WP core blocks/alignments */
.alignwide   { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull   { width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin-right: 1rem; }
.alignright  { float: right; margin-left: 1rem; }

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