/*
Theme Name: International Documents
Theme URI: https://international-documents.eu
Author: Sprachen Express
Description: Tema WordPress pentru international-documents.eu, servicii de intermediere notarială și documente oficiale. Structură editorială adaptată din allgoodstudio.com, cu animații simplificate pentru performanță.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: international-documents
*/

:root{
  --navy:#092f4f;
  --paper:#FAF9F4;
  --paper2:#F1EDE2;
  --seal:#8C2F26;
  --sealdark:#6B211B;
  --line:#E4DFCF;
  --ink:#1B2635;
  --sub:#5B5A50;
  --highlight:#E8B98A;
  --font-body: -apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display: "Times New Roman",Times,serif;
  --content-max:1200px;
}

/*
 * Content width rule: every section wraps its content at var(--content-max),
 * centered with margin:0 auto. Full-bleed backgrounds (statement, contact)
 * are allowed, but the content inside them still respects var(--content-max)
 * via an -inner wrapper.
 *
 * The 30px side gutter always lives on the SAME element as max-width and
 * margin:0 auto — never split between an outer full-bleed wrapper (padding)
 * and an inner centered wrapper (margin:auto only). Splitting them changes
 * how the centering math resolves on wide screens (padding shrinks the
 * width margin:auto centers against), so the same 1200px column ends up
 * inset by a different amount from section to section. Caught this exact
 * bug in .statement/.contact on 2026-07-18.
 */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* safety net: a section overflowing horizontally must clip, never push the whole page and break every centered max-width block below it */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:inherit; }

.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.accent-serif{ font-family:var(--font-display); font-style:italic; color:var(--seal); letter-spacing:.01em; }
.eyebrow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--seal); font-weight:700; }

/* one entrance animation only, respects reduced-motion */
@keyframes riseIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:no-preference){
  .rise{ animation:riseIn .5s ease-out both; }
  .rise-1{animation-delay:.05s;} .rise-2{animation-delay:.14s;} .rise-3{animation-delay:.22s;} .rise-4{animation-delay:.30s;}
}

/* ---- util bar: language + quick contact ----
   Desktop: static strip above the main nav. Mobile: position:fixed to the
   bottom of the viewport for thumb reach, matching the verified pattern
   on sprachen-express.de (address.address switches position at the
   mobile breakpoint, nothing more exotic than that). */
.util-bar{ background:var(--paper2); border-bottom:1px solid var(--line); font-size:11.5px; }
.util-bar-inner{ max-width:var(--content-max); margin:0 auto; padding:0 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; height:34px; }
.util-contact{ display:flex; align-items:center; gap:18px; }
.util-contact a{ color:var(--sub); display:inline-flex; align-items:center; gap:6px; }
.util-contact a:hover{ color:var(--ink); }
.util-lang{ display:flex; align-items:center; gap:8px; }
.util-lang a, .util-lang span{ display:inline-flex; align-items:center; opacity:.55; line-height:0; }
.util-lang a.current, .util-lang span.current, .util-lang a:hover{ opacity:1; }
.util-lang svg{ border-radius:2px; display:block; }

@media (max-width:640px){
  .util-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    border-bottom:none; border-top:1px solid var(--line);
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
  }
  .util-bar-inner{ padding:0 20px; height:52px; }
  .util-contact{ gap:26px; }
  .util-contact .label{ display:none; }
  .util-contact svg{ width:19px; height:19px; }
  body{ padding-bottom:52px; }
}

/* ---- nav ---- */
.site-nav{ display:flex;align-items:center;justify-content:space-between; padding:16px 30px; border-bottom:1px solid var(--line); max-width:var(--content-max); margin:0 auto; }
.site-logo{ display:flex; align-items:center; }
.site-nav .logo-full{ display:block; }
.site-nav .logo-icon{ display:none; }
.navlinks{ display:flex; align-items:center; gap:22px; font-size:12.5px; color:var(--sub); }
.navlinks a{ color:var(--seal); font-size:12px; font-weight:700; }
.navlinks a:hover{ color:var(--navy); }
/* .navlinks a.navcta (not just .navcta) so this outranks the two rules
   above on specificity — a plain .navcta lost that fight silently and
   rendered var(--sub)/var(--ink) text on a red button. */
.navlinks a.navcta{ background:var(--seal); color:#FBEDE9; border-radius:5px; padding:8px 15px; font-size:12px; font-weight:700; }
.navlinks a.navcta:hover{ background:var(--sealdark); color:#FBEDE9; }

/* ---- hero ---- */
/* Narrower reading column than var(--content-max), but its left text edge
   must still land on the same spot as every other section's text. Its own
   30px padding already provides that inset, so the margin only needs to
   reach the column's left edge (no extra +30px, that would double it). */
.hero{ padding:44px 30px 34px; display:flex; flex-direction:column; gap:18px; max-width:640px; margin:0 auto 0 max(0px, calc((100% - var(--content-max)) / 2)); }
.hero h1{ font-size:31px; font-weight:800; line-height:1.22; letter-spacing:-.01em; }
.hero p.sub{ font-size:14px; line-height:1.65; color:var(--sub); max-width:50ch; margin:0; }
.hero-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn-primary{ background:var(--seal); color:#FBEDE9; border-radius:6px; padding:11px 20px; font-size:13px; font-weight:700; display:inline-block; }
.btn-primary:hover{ background:var(--sealdark); }
.reply-note{ font-size:12px; color:var(--sub); display:flex; flex-direction:column; line-height:1.3; }
.reply-note b{ color:var(--ink); font-size:13px; }

/* ---- trust chips ---- */
.trustrow{ display:flex; flex-wrap:wrap; gap:10px; padding:0 30px 34px; max-width:var(--content-max); margin:0 auto; }
.chip{ font-size:11.5px; color:var(--navy); border:1px solid var(--line); background:var(--paper2); border-radius:20px; padding:6px 13px; }

/* ---- documente deservite, scroll-snap orizontal nativ, fara JS ---- */
.doc-scroller{ padding:0 30px 34px; max-width:var(--content-max); margin:0 auto; }
.doc-scroller .label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); margin-bottom:10px; display:block; }
.doc-track{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none; }
.doc-track::-webkit-scrollbar{ display:none; }
.doc-pill{ scroll-snap-align:start; flex:none; font-size:12.5px; color:var(--navy); background:var(--paper2); border:1px solid var(--line); border-radius:20px; padding:8px 16px; white-space:nowrap; }

/* ---- services ---- */
.svc-head{ padding:6px 30px 18px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:var(--content-max); margin:0 auto; }
.svc-head h2{ font-size:19px; font-weight:700; margin-top:6px; max-width:32ch; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:var(--content-max); margin:0 auto; padding:0 30px; }
.svc-card{ background:var(--paper); padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.svc-idx{ font-size:11.5px; color:#B7B09B; font-variant-numeric:tabular-nums; }
.svc-card h3{ font-size:15px; font-weight:700; }
.svc-card p{ font-size:12.5px; color:var(--sub); line-height:1.55; margin:0; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.svc-tag{ font-size:10.5px; color:var(--navy); background:var(--paper2); border-radius:4px; padding:3px 8px; }

/* ---- statement + count-up stats ---- */
.statement{ background:var(--navy); color:var(--paper); padding:46px 0; }
.statement-inner{ max-width:var(--content-max); margin:0 auto; padding:0 30px; }
.statement p{ font-size:clamp(22px,4.4vw,34px); font-weight:800; line-height:1.18; letter-spacing:-.01em; max-width:16ch; margin:0; text-wrap:balance; }
.statement .hl{ color:var(--highlight); }
.stats{ display:flex; gap:0; margin-top:30px; flex-wrap:wrap; }
.stat{ flex:1; min-width:120px; }
.stat .v{ font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--highlight); }
.stat .l{ font-size:12px; color:#C9D2DC; margin-top:4px; }

/* ---- process ---- */
.process{ padding:36px 30px; max-width:var(--content-max); margin:0 auto; }
.process h2{ font-size:19px; font-weight:700; margin-top:6px; }
.process-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:18px; }
.proc-step .n{ font-size:20px; font-weight:800; color:var(--seal); font-variant-numeric:tabular-nums; }
.proc-step .t{ font-size:13px; font-weight:700; margin:6px 0 4px; }
.proc-step .d{ font-size:12px; color:var(--sub); line-height:1.5; }

/* ---- faq ---- */
.faq{ padding:34px 30px 8px; border-top:1px solid var(--line); max-width:var(--content-max); margin:0 auto; }
.faq h2{ font-size:18px; font-weight:700; margin-bottom:14px; }
.faq details{ border-bottom:1px solid var(--line); padding:12px 0; }
.faq summary{ cursor:pointer; font-size:13.5px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--seal); font-weight:700; font-size:16px; }
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ font-size:12.5px; color:var(--sub); line-height:1.6; margin:8px 0 0; max-width:60ch; }

/* ---- contact ---- */
.contact{ padding:40px 0; background:var(--paper2); border-top:1px solid var(--line); }
.contact-inner{ max-width:var(--content-max); margin:0 auto; padding:0 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.contact h2{ font-size:22px; font-weight:800; max-width:28ch; }
.contact p{ font-size:13.5px; color:var(--sub); margin:6px 0 0; max-width:46ch; }
.contact-cta{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.contact-cta small{ font-size:11.5px; color:var(--sub); }
.contact-cta small a:hover{ color:var(--ink); }

/* ---- single article ---- */
.article-hero{ padding:44px 30px 24px; max-width:var(--content-max); margin:0 auto; }
.article-hero h1{ font-size:clamp(26px,4vw,38px); font-weight:800; line-height:1.2; letter-spacing:-.01em; margin-top:10px; max-width:22ch; }
.article-hero .meta{ font-size:12.5px; color:var(--sub); margin-top:10px; }
.article-featured{ max-width:var(--content-max); margin:0 auto; padding:0 30px 30px; }
.article-featured img{ border-radius:8px; }

.article-cta{ background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0; }
.article-cta-inner{ max-width:var(--content-max); margin:0 auto; padding:0 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.article-cta h2{ font-size:18px; font-weight:800; margin:0; }
.article-cta p{ font-size:13px; color:var(--sub); margin:4px 0 0; }

/* ---- static page ---- */
.page-hero{ padding:44px 30px 10px; max-width:var(--content-max); margin:0 auto; }
.page-hero h1{ font-size:clamp(24px,3.6vw,34px); font-weight:800; letter-spacing:-.01em; }

/* ---- prose: typographic rules for editor-generated content (the_content) ---- */
.article-content, .page-content{ max-width:720px; margin:0 auto; padding:20px 30px 50px; font-size:15px; line-height:1.75; color:var(--ink); }
.article-content h2, .page-content h2{ font-size:22px; font-weight:800; margin:1.6em 0 .6em; letter-spacing:-.01em; }
.article-content h3, .page-content h3{ font-size:17px; font-weight:700; margin:1.4em 0 .5em; }
.article-content p, .page-content p{ margin:0 0 1.2em; }
.article-content ul, .page-content ul, .article-content ol, .page-content ol{ margin:0 0 1.2em; padding-left:1.3em; }
.article-content li, .page-content li{ margin-bottom:.4em; }
.article-content a, .page-content a{ color:var(--seal); text-decoration:underline; text-underline-offset:2px; }
.article-content strong, .page-content strong{ color:var(--ink); }
.article-content blockquote, .page-content blockquote{ border-left:3px solid var(--seal); margin:1.5em 0; padding:.2em 0 .2em 1.2em; color:var(--sub); font-style:italic; }
.article-content img, .page-content img{ border-radius:8px; margin:1.5em 0; }
.article-content h2:first-child, .page-content h2:first-child{ margin-top:0; }

/* ---- footer ---- */
.site-footer{ display:flex; align-items:center; justify-content:space-between; padding:22px 30px; border-top:1px solid var(--line); flex-wrap:wrap; gap:10px; max-width:var(--content-max); margin:0 auto; }
.site-footer .fam{ font-size:11.5px; color:var(--sub); }

@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .contact-inner{ flex-direction:column; align-items:flex-start; }
  .site-nav .logo-full{ display:none; }
  .site-nav .logo-icon{ display:block; }
  .navlinks{ gap:14px; }
  .stats{ gap:18px; }
  .stat{ min-width:45%; }
}