/* =====================================================================
   F49 — UI fixes (frontend)
   - Previne horizontal overflow no body (page rolls horizontally em mobile)
   - Tabelas grandes scroll horizontalmente em vez de empurrar layout
   - Portfolio cards adaptam a mobile sem ultrapassar viewport
   ===================================================================== */

/* Previne scroll horizontal global. `clip` em vez de `hidden` para NÃO criar
   containing block (que quebra position:sticky em descendentes como o header).
   Fallback `hidden` para browsers antigos (sticky pode falhar nesses). */
html, body {
    overflow-x: clip;
    max-width: 100vw;
}
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* =====================================================================
   F53 (Módulo 52) — Navbar FIXED sempre visível
   ─────────────────────────────────────────────────────────────────────
   ANTES (F50): position: sticky → falhava com overflow-x:clip/hidden
   ancestor (F49) que browsers tratam como containing block.
   AGORA: position: fixed (não tem este problema, mais resiliente).
   ===================================================================== */
:root {
    /* F53f — Altura DETERMINISTA. Antes deixava o navbar crescer ao natural →
       body padding-top desalinhava (gap na home, overlap no breadcrumb).
       Agora forço o .header a ter EXACTAMENTE var(--algarit-navbar-h) e
       o body reserva o mesmo. Zero gap, zero overlap. */
    --algarit-navbar-h: 80px;
}
@media (max-width: 991px) {
    :root { --algarit-navbar-h: 64px; }
}
@media (max-width: 575px) {
    :root { --algarit-navbar-h: 56px; }
}

/* F53f — Lock navbar height. Internal flex enche a altura toda, padding zero
   no .header-bottom para não somar à variável. flex-wrap:nowrap em desktop.
   F73 — CENTRAGEM VERTICAL: o .header tinha height:80px fixo mas NENHUM
   elemento da cadeia (.header/.container/.header-bottom) era flex+align-center,
   por isso o logo/menu colava ao topo. Agora cada nível centra o conteúdo. */
.header {
    height: var(--algarit-navbar-h) !important;
    display: flex !important;
    align-items: center !important;
}
.header > .container,
.header > .container-fluid {
    height: 100%;
    display: flex !important;
    align-items: center !important;
}
.header .header-bottom {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100%;
    width: 100%;
    display: flex !important;
    align-items: center !important;
}
.header .header-bottom-area {
    height: 100%;
    width: 100%;
    display: flex !important;
    align-items: center !important;
}
@media (min-width: 992px) {
    .header .header-bottom-area {
        flex-wrap: nowrap !important;
    }
}

/* Body reserva espaço para o navbar fixed (senão conteúdo fica escondido) */
body {
    padding-top: var(--algarit-navbar-h);
}

/* Navbar FIXED + z-index altíssimo (override vendor main.css L1760 sticky) */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #1f2b3a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.header.bg--dark { background: #1f2b3a; }

/* WHMLab adiciona .header.sticky em scroll — mantém fixed override */
.header.sticky {
    position: fixed !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

/* Dropdown / sub-menu dentro do header — z-index acima do navbar */
.header .sub-menu,
.header .dropdown-menu {
    z-index: 10000;
}

/* F73 — NÃO forçar max-width:100% no .container: anulava o max-width
   responsivo do Bootstrap + margin:auto, descentrando a navbar/conteúdo.
   O overflow já é contido por html,body{overflow-x:clip}. .container-fluid
   mantém-se full-width (é o esperado). */
.container-fluid {
    overflow-x: visible;
}

/* Imagens nunca excedem o container — safety net */
img {
    max-width: 100%;
    height: auto;
}

/* Tabelas sem table-responsive ganham scroll horizontal em mobile */
@media (max-width: 991px) {
    .table:not(.table-responsive *) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* Portfolio cards — força width 100% em mobile */
@media (max-width: 575px) {
    .col-xl-4.col-md-6 .card {
        max-width: 100%;
    }
    .card-img-top {
        max-width: 100%;
        height: auto;
    }
}

/* Long URLs / strings sem espaços (ex: emails, links) em cards de portfolio
   quebram para próxima linha em vez de empurrar layout */
.card-text,
.card-title,
.card-body p,
.card-body a {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* =====================================================================
   F52 + F53b — Algarit:LayoutSpacing — respiro lateral consistente
   ─────────────────────────────────────────────────────────────────────
   Padding aumentado: 20px mobile, 24px tablet, 32px desktop.
   Cobre container, container-fluid, e sections sem container.
   ===================================================================== */

/* Container + container-fluid + todos os container-* responsivos
   F53c — Padding GRANDE (visualmente notório, não só ergonómico) */
.container,
.container-fluid,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    padding-left: 1.5rem !important;    /* 24px mobile */
    padding-right: 1.5rem !important;
}
@media (min-width: 576px) {
    .container, .container-fluid,
    .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        padding-left: 2rem !important;  /* 32px */
        padding-right: 2rem !important;
    }
}
@media (min-width: 768px) {
    .container, .container-fluid,
    .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        padding-left: 3rem !important;  /* 48px tablet */
        padding-right: 3rem !important;
    }
}
@media (min-width: 1200px) {
    .container, .container-fluid,
    .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        padding-left: 4rem !important;  /* 64px desktop large */
        padding-right: 4rem !important;
    }
}

/* Sections SEM .container interno — padding directo na section */
main > section:not(.hero-algarit-fluid):not([class*="full-bleed"]),
.tld-section,
body > section:not(.hero-algarit-fluid):not([class*="full-bleed"]) {
    padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
}
@media (min-width: 768px) {
    main > section:not(.hero-algarit-fluid):not([class*="full-bleed"]),
    .tld-section,
    body > section:not(.hero-algarit-fluid):not([class*="full-bleed"]) {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}
@media (min-width: 1200px) {
    main > section:not(.hero-algarit-fluid):not([class*="full-bleed"]),
    .tld-section,
    body > section:not(.hero-algarit-fluid):not([class*="full-bleed"]) {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

/* Tables — overflow-x scroll sem partir layout */
.table-responsive,
.table-responsive--md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

/* Tabelas que NÃO estão num wrapper — wrap automático com scroll */
.tld-section .table,
.card-body > table.table:not(.table-responsive table) {
    display: block;
    overflow-x: auto;
    width: 100%;
}

/* Charts (Chart.js canvas) — forçam max-width 100% para não overflow */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Cards em grid — padding interno mais elegante em mobile */
@media (max-width: 575px) {
    .card-body {
        padding: 1.25rem 1rem;
    }
    .card-header {
        padding: 0.875rem 1rem;
    }
}

/* Sections principais respeitam safe-area (notch iPhone, etc.) */
section {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
}

/* =====================================================================
   F53d — Breadcrumb visível abaixo da navbar fixa
   ─────────────────────────────────────────────────────────────────────
   Bug: navbar fixed cobria o breadcrumb em /announcements, /dominios, etc.
   Causa: body padding-top calculado a 70px mas navbar rendered ~85-90px.
   Fix: bumped navbar h + estilo claro no .breadcrumb-bg
   ===================================================================== */
.breadcrumb-bg {
    background: #f6f8fa;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-top: 0.75rem !important;     /* F53f — simétrico, sem cushion exagerado */
    padding-bottom: 0.75rem !important;
    margin-top: 0 !important;            /* anula qualquer negative margin vendor */
    font-size: 0.95rem;
    color: #4b5563;
}
.breadcrumb-bg a {
    color: hsl(var(--base));
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb-bg a:hover {
    text-decoration: underline;
}