/* ============================================================
   DHF — CLINICAL ANTI-GIGANTISM TOOLKIT v3.0 DEFINITIVE
   Last updated: 2026-04-14 — staging + production synced
   ============================================================ */

/* --- DHF 2026 Medical Authority Palette --- */
:root {
  --dhf-navy: #1B263B;
  --dhf-green: #4CAF50;
  --dhf-bg: #F8FAFC;
  --dhf-white: #FFFFFF;
}

body {
  background-color: var(--dhf-bg);
  font-family: 'Roboto', sans-serif;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--dhf-navy);
}

.t4-header {
  background-color: var(--dhf-navy) !important;
  border-bottom: 3px solid var(--dhf-green);
}

.t4-header .nav-link {
  color: var(--dhf-white) !important;
}

/* Logo */
.logo-img,
.logo-img-sm {
  max-height: 55px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto;
}

/* --- Utility Components --- */
.dhf-hero {
  padding: 4rem 0;
  background-color: var(--dhf-white);
  text-align: center;
}

.dhf-badge {
  background: var(--dhf-green);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
}

.t4-navbar { display: none !important; }


/* ============================================================
   BOX CONTROL
   ============================================================ */

/* Wrapper principal — evita que o layout exploda em monitores ultra-wide */
.t4-wrapper,
#t4-site-wrapper,
body .t4-main-body .container,
body .t4-main-body .container-fluid {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Corpo do artigo — limita a linha de leitura */
body .item-page,
body .article-body,
body .article-content,
.com_content .article-info-block,
.com_content .item-content,
.com_content .article-fulltext,
article .item-page {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 20px 15px;
}


/* ============================================================
   MEDIA CONTAINMENT — global, não apenas dentro de .item-page
   ============================================================ */

img,
video,
iframe,
figure {
  max-width: 100% !important;
  height: auto !important;
}

/* Imagens dentro de artigos: centralizar e arredondar */
.item-page img,
.article-content img,
.com_content img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
  display: block;
  margin: 25px auto;
  border-radius: 8px;
}

/* Imagem hero / destaque: nunca maior que 60% da viewport */
.item-image img,
.article-image img,
.img-intro img {
  max-height: 60vh;
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}


/* ============================================================
   TYPOGRAPHY CLAMPING
   ============================================================ */

/* Parágrafos e listas: escala fluida entre 0.95rem e 1.1rem */
body,
p,
li,
td {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.75;
}

/* Parágrafos dentro de conteúdo de artigo */
body .item-content p {
  font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
  line-height: 1.8 !important;
}

/* H1 */
h1,
body h1.item-title,
body .page-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 1.5rem;
}

/* H2 */
h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
  line-height: 1.3;
}

/* H3 */
h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
  line-height: 1.35;
}

/* H4–H6 */
h4 { font-size: clamp(1rem, 1.5vw, 1.25rem) !important; }
h5 { font-size: clamp(0.95rem, 1.3vw, 1.1rem) !important; }
h6 { font-size: clamp(0.9rem, 1.2vw, 1rem) !important; }


/* ============================================================
   CATEGORY BLOG LAYOUT
   ============================================================ */

.blog .items-row,
.blog-featured .items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.blog .items-row .item,
.blog-featured .items-row .item {
  flex: 1 1 300px;
  max-width: 100%;
}

/* Intro text nos cards de categoria */
.item-content .article-intro,
.com_content .category .item-content p {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}


/* ============================================================
   MODULE CONTAINERS
   ============================================================ */

.t4-module,
.mod-article-categories,
.custom {
  max-width: 100%;
  overflow-x: hidden;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 768px) {
  h1,
  body h1.item-title,
  body .page-header h1 {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
  }

  h2 {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
  }

  h3 {
    font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
  }

  p, li {
    font-size: 1rem !important;
  }

  .t4-wrapper,
  #t4-site-wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body .item-page,
  body .article-body,
  body .article-content {
    padding: 12px 10px !important;
  }
}