/*
 * Kancelaria EMPE (site id 8): system typografii i rozmiar logo.
 * Plik ladowany przez main.php tylko dla tej strony (files/<site_id>/css/site.css),
 * dzieki czemu wspolny szablon "default" pozostaje bez zmian dla innych klientow.
 *
 * Zasady:
 *  - dwa kroje: Inter (tekst, menu, interfejs) + Source Serif 4 (naglowki, belka z nazwa kancelarii),
 *  - baza 16 px, interlinia 1.65, plynne rozmiary naglowkow (clamp), domyslnie tekst do lewej,
 *  - tresc podstron wprowadzana w edytorze panelu (rozmiar, pogrubienie, kolor, krój, wyrownanie)
 *    NIE jest nadpisywana: to, co ustawi redaktor, jest widoczne na stronie. Ujednolicamy tylko
 *    to, co nie ma ustawienia w edytorze (domyslna czcionka i rozmiar, menu, naglowki, stopka, belka).
 *  - normalizacja starych znacznikow <font> i stylow inline dotyczy wylacznie stopki.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --text: #2b2b2b;
    --text-soft: #5a5a5a;
    --brand: #2a0f6f;

    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-menu: .8125rem;
    --fs-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    --fs-h2: clamp(1.45rem, 1.2rem + 1vw, 2rem);
    --fs-h3: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
    --fs-h4: 1.0625rem;
    --fs-title: clamp(1.15rem, .95rem + .9vw, 1.6rem);
    --lh-body: 1.65;
    --lh-head: 1.25;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    font-optical-sizing: auto;
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 * Domyslna czcionka elementow, ktore szablon ustawia osobno (Open Sans / Arial).
 * Celowo bez span, strong, em i font: te elementy dziedzicza krój po rodzicu,
 * wiec <font face="..."> i style inline z edytora dzialaja.
 */
body p,
body li,
body td,
body th,
body dt,
body dd,
body blockquote,
body label,
body input,
body textarea,
body select,
body button,
body a,
#top .vcard p,
#top .vcard a,
#menu a,
#footer,
#footer p,
#footer li,
#footer a,
.textwidget {
    font-family: var(--font-sans);
}

/* Ikony Font Awesome zostaja nietkniete */
[class^="icon-"],
[class*=" icon-"],
.fa,
[class^="fa-"],
[class*=" fa-"] {
    font-family: FontAwesome !important;
}

/* Tekst podstawowy (rozmiar domyslny; rozmiar ustawiony w edytorze na span/font ma pierwszenstwo) */
body p,
body li,
body td,
body th,
.textwidget,
.textwidget p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

p {
    text-wrap: pretty;
}

/* Tresc podstron: domyslnie do lewej. Wyrownanie ustawione w edytorze (atrybut align lub style) ma pierwszenstwo. */
.cnt-body {
    text-align: left;
}

/* Stopka: normalizacja starych znacznikow <font> i stylow inline (tresc stopki pochodzi z ustawien strony) */
#footer font[face],
#footer [style*="font-family"] {
    font-family: inherit !important;
}
#footer font[size],
#footer [style*="font-size"] {
    font-size: inherit !important;
}
#footer [style*="line-height"] {
    line-height: inherit !important;
}
#footer [style*="text-align: justify"],
#footer [style*="text-align:justify"],
#footer [align="justify"] {
    text-align: left !important;
}

/* Naglowki: antykwa, ciasniejszy odstep, rownomierne lamanie wierszy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: var(--lh-head);
    letter-spacing: -.01em;
    color: #1b1b1b;
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-body); }

/* Tytul podstrony (w szablonie to h4.content-title z rozmiarem inline) */
body .content-title,
body h4.content-title {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-h1) !important;
    font-weight: 600 !important;
    line-height: var(--lh-head) !important;
    letter-spacing: -.012em;
    color: #1b1b1b;
}

/* Belka z nazwa i adresem kancelarii (pod slajderem) */
#infobar,
#infobar p,
#infobar font,
#infobar strong {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-title) !important;
    line-height: 1.35 !important;
    color: #1b1b1b;
    letter-spacing: -.005em;
    text-wrap: balance;
}
#infobar strong {
    font-weight: 600;
}
#infobar font {
    font-weight: 400;
}
#infobar p {
    text-align: center;
}

/* Gorna belka: telefon i e-mail */
#top .vcard p,
#top .vcard a,
#top .vcard span {
    font-size: .9375rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* Menu glowne */
#menu a {
    font-size: var(--fs-menu);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .04em;
}
#menu ul ul a,
#menu li li a {
    font-size: var(--fs-menu);
    font-weight: 400;
    letter-spacing: .01em;
}

/* Stopka i widgety (szablon ustawia #footer .widget-title, stad ten sam poziom specyficznosci) */
body .widget-title,
#footer .widget-title,
#sidebar .widget-title {
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
    color: #1b1b1b;
}
#footer,
#footer p,
#footer li,
#footer a,
#footer .textwidget {
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}
#footer p {
    color: var(--text);
}
#footer a {
    color: var(--brand);
}

/* Logo: plik 832x108 skalowany do kolumny (430 px), wysokosc ok. 56 px */
#logo img.logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 60px;
}

@media (max-width: 767px) {
    :root {
        --lh-body: 1.6;
    }
    #menu a {
        font-size: .875rem;
    }
    #logo img.logo {
        max-height: 52px;
        margin-left: auto;
        margin-right: auto;
    }
}