/* ============================================================
   MX-specific styles — divorcio-voluntario.mx (Rozvody/68)
   Loaded ONLY on the Mexican site (linked in
   V.divorcio-voluntario/header.php). The Czech site does NOT
   load this file, so rules here never affect rozvod-poradna.cz.
   Keep this file minimal — only genuine MX brand identity that
   the global design system cannot express.

   Referenční vzhled = ostrá produkce www.divorcio-voluntario.mx
   (starý style.css): tmavý pruh #2e3649 + logo (váhy/kladívko)
   vlevo, zlaté VAGDRA #dbbd75, bílý podtitul, font Graphik. Nesmí být horší.
   ============================================================ */

/* Brand font Graphik — stejný zdroj jako produkce (webflow CDN). */
@font-face {
    font-family: 'Graphik';
    src: url( 'https://assets.website-files.com/5b5fa16907bc3e28f39d17c4/5b5fa1f16abb67cb0437dab2_Graphik-Regular-Web.woff2' ) format( 'woff2' );
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url( 'https://assets.website-files.com/5b5fa16907bc3e28f39d17c4/5b5fa282d9b73f1dd4b4bd90_Graphik-Medium-Web.woff2' ) format( 'woff2' );
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---- Header: solid navy brand bar (jako etalon) ----
   MX header je samostatný pruh NAD hero (header.php ho renderuje mimo .hero).
   Barva sjednocena s hero .stripe-navy (#1B2A4A), footerem i všemi navy pruhy
   webu, aby na přechodu header→hero nevznikal viditelný barevný šev.
   Padding a lockup zkompaktněny, ať pruh jen pojme svůj obsah (~76px, jako CZ). */
.header.stripe-fullwidth {
    background-color: #1b2a4a;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Redundantní neviditelný home button (šablona ho renderuje nad .container)
   zabíral 44px prázdné výšky navíc. Logo .logo a už odkazuje na /, žádný JS
   #home-link nepoužívá, CZ header ho vůbec nemá → skrýt (bez zásahu do šablony). */
.home-link {
    display: none;
}

/* Obsah (bílá .content karta) nasedá přímo pod header — bez CZ 16px
   floating-card mezery, kde by prosvítal hero pruh. Týká se jen stránek
   s .content (hp/app); článkové stránky .content nemají → beze změny. */
@media ( min-width: 1200px ) {
    .content {
        margin-top: 0;
    }
}

/* ---- Brand lockup: logo grafika (váhy/kladívko) + zlaté VAGDRA + podtitul ---- */
.header .logo a {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    /* logo grafika (levá část širokého webp) jako pozadí, text vedle */
    background: url( /i/avogados-background.webp ) left center no-repeat;
    background-size: auto 44px;
    padding-left: 112px;
    min-height: 44px;
    justify-content: center;
}

.sitename-mx {
    font-family: 'Graphik', var( --font-body );
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #dbbd75;
}

.sitename_sub-mx {
    font-family: 'Graphik', var( --font-body );
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
}

/* Nav odkazy na tmavém pruhu — světlé (globální .hero .menu a už bílé, ale
   pro jistotu i mimo hero kontext) */
.header.stripe-fullwidth .menu a { color: rgba( 255, 255, 255, 0.9 ); }
.header.stripe-fullwidth .menu a:hover { color: #dbbd75; }

/* MX brand je široký (logo grafika + VAGDRA + podtitul) → header obsah
   potřebuje víc místa než globálních 860px, jinak po JS přidání tlačítka
   „Su documentos" nav přeteče. Rozšíříme MX header container na 1240px
   (třída zůstává .container, aby platil globální .header > .container flex).
   + nav položky se nikdy nezalamují na 2 řádky. */
.header.stripe-fullwidth .container { max-width: 1240px; }
.header .menu ul li a { white-space: nowrap; }

@media ( max-width: 767px ) {
    .header .logo a {
        background-size: auto 40px;
        padding-left: 100px;
        min-height: 40px;
    }
    .sitename-mx { font-size: 22px; }
    .sitename_sub-mx { font-size: 9px; }
}

/* ¿Por qué? — complexity explanation table (obnoveno z pre-refactor style.css, Rozvody/68) */
#complexityExplanationBox {
    max-width: 960px;
}
#complexity_explanation_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
#complexity_explanation_table th, #complexity_explanation_table td { overflow-wrap: break-word; word-break: normal; white-space: normal; }
#complexity_explanation_table th:first-child, #complexity_explanation_table td:first-child { width: 280px; }
#complexity_explanation_table th { vertical-align: top; }
#complexity_explanation_table th .small { font-weight: normal; font-size: 90%; }
#complexity_explanation_table th.active { background-color: lightgreen; }
#complexity_explanation_table td.condition {
    text-align: center;
    font-size: 24px;
    font-weight: bolder;
    padding: 8px;
}
#complexity_explanation_table .condition.not_necessary { font-weight: normal; font-size: initial; }
#complexity_explanation_table .condition.fulfilled,
#complexity_explanation_table .condition.not_necessary { background-color: lightgreen; color: green; }
#complexity_explanation_table .condition.dt_unavailable { background-color: blanchedalmond; }
#complexity_explanation_table .condition.not_fulfilled { color: red; }

/* MX document styles — při změně uprav i druhý sheet (mx.css screen / export.css print) */

/* documentPaper wrapper (screen: spacing before document) */
.documentPaper {
    position: relative;
    margin-top: 20px;
}

/* Numbered list (multilevel counters) */
.documentContent ol.multilevel {
    counter-reset: item;
    counter-increment: start 3;
    margin-left: -20px;
}
.documentContent ol.multilevel > li {
    display: block;
}
.documentContent ol.multilevel > li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}

/* Court address block (MX variant) */
.documentContent .court-mx {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 20px;
}
.documentContent .court-mx div {
    margin-top: 0;
    margin-bottom: 0;
}

/* Signature blocks */
.documentContent .doc-signature {
    float: left;
}
.documentContent .doc-signature-right {
    float: right;
}
.documentContent .signature {
    text-align: right;
}

/* MX form block (document_7 DF form) */
.documentContent.mx {
    padding: 10px;
}
.documentContent.mx div {
    font-size: 9px;
    line-height: 9px;
    color: #666;
}
.documentContent.mx div.small {
    font-size: 8px;
    line-height: 8px;
}
/* Preview (wizard): pruvodce.css nastavuje `.wiz-document .documentContent div { font-size: 11pt }`
   (stejná specificita jako `.documentContent.mx div`, ale načítá se později → vyhrává), čímž MX
   dokument v náhledu nafoukne na 11pt. Nowrap persona flex-řádky se pak nezúží a persona přeteče
   přes pravou hranu dokumentu (širší než info box). Vyšší specificita vrací kompaktní 9px jako old. */
.wiz-document .documentContent.mx div {
    font-size: 9px;
    line-height: 9px;
}
.documentContent .mx-cdmx-logo {
    float: left;
    max-width: 50%;
}
.documentContent.mx .mx-form-header, .documentContent .mx-form-persona .persona-number {
    background-color: #9F2241;
    padding: 4px 0;
    color: white;
    text-align: center;
}
.documentContent .mx-form-row {
    clear: both;
    margin-bottom: 1px;
}
.documentContent.mx .mx-form-row div.row div { margin-bottom: 5px; line-height: 20px; }
.documentContent.mx .mx-form-row div.row div.mx-form-field { line-height: 9px; }
.documentContent .mx-form-box {
    border: 1px solid black;
}
.documentContent .mx-form-field.empty {
    min-width: 150px;
}
.documentContent.mx .mx-form-field.big-cross {
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1.25rem;
}
.documentContent.mx .mx-form-field {
    background-color: silver;
    min-height: 20px;
    display: inline-block;
    color: black;
    padding: 5px;
}
.documentContent .mx-form-block.right {
    float: right;
}
.documentContent .mx-form-field.large {
    font-weight: bold;
    font-size: 1.5rem;
}
.documentContent .mx-form-centered {
    text-align: center;
}
.documentContent .mx-form-flex {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 5px;
    margin-bottom: 5px;
}
.documentContent .mx-form-flex div, .documentContent .mx-form-persona div { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0; padding: 0; }
.documentContent .mx-form-flex.table div { border: 1px solid black; }
.documentContent .mx-form-flex div.large, .documentContent .mx-form-persona div.large { -webkit-box-flex: 2; -webkit-flex: 2; flex: 2; }
.documentContent .mx-form-flex div.larger, .documentContent .mx-form-persona div.larger { -webkit-box-flex: 3; -webkit-flex: 3; flex: 3; }
.documentContent .mx-form-flex div.header { background-color: silver; text-align: center; height: min-content; min-height: unset; padding: 5px 0; color: black; }
.documentContent .mx-form-flex div > div { min-height: 40px; width: 100%; }
.documentContent .mx-form-persona { border: 1px solid black; display: -webkit-box; display: flex; } /* wkhtmltopdf uses -webkit-box */
.documentContent .mx-form-persona .row { display: -webkit-box; display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 1px; }
.documentContent .mx-form-persona .row div { text-wrap: nowrap; padding: 0 5px 0 0; }
.documentContent .mx-form-persona .persona-number { -webkit-box-flex: 0; -webkit-flex: 0; flex: 0; line-height: 40px !important; }
.documentContent .mx-form-persona .persona-content { flex: 10; -webkit-box-flex: 10; -webkit-flex: 10; }
.documentContent .mx-form-persona .persona-number {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    white-space: nowrap;
    font-weight: bold;
}

/* Child list (JS-hook — nesmí se smazat, viz template-and-js-hooks.md) */
.documentContent .doc_child_list {
    list-style-type: disc;
    margin-left: 2em;
}
.documentContent .doc_child_list > div {
    display: list-item;
    margin-left: 1em;
}