/*

HelpSafe Law
BASE
Базовый внешний вид сайта:
body;
типографика;
ссылки;
выделение текста;
кнопки;
формы;
базовые WordPress-элементы.
*/

/* ============================================================

BODY
============================================================ */

body {
background:
var(--law-bg);

color:
    var(--law-text);

font-family:
    var(--law-font-body);

font-size:
    var(--law-font-size);

line-height:
    var(--law-line-height);

-webkit-font-smoothing:
    antialiased;

-moz-osx-font-smoothing:
    grayscale;

}

/* ============================================================
2. TYPOGRAPHY
============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
color:
var(--law-text);

font-family:
    var(--law-font-heading);

font-weight:
    800;

line-height:
    var(--law-heading-line-height);

letter-spacing:
    -0.025em;

}

h1 {
font-size:
clamp(34px, 4vw, 56px);
}

h2 {
font-size:
clamp(28px, 3vw, 40px);
}

h3 {
font-size:
clamp(22px, 2.2vw, 30px);
}

h4 {
font-size:
21px;
}

h5 {
font-size:
18px;
}

h6 {
font-size:
16px;
}

/* ============================================================
3. ССЫЛКИ
============================================================ */

a {
color:
var(--law-primary);

transition:
    color var(--law-transition-fast);

}

a:hover {
color:
var(--law-primary-dark);
}

/* ============================================================
4. ТЕКСТ
============================================================ */

strong,
b {
font-weight:
750;
}

em,
i {
font-style:
italic;
}

small {
font-size:
0.875em;
}

mark {
padding:
0 4px;

background:
    var(--law-accent-light);

color:
    inherit;

}

/* ============================================================
5. CODE
============================================================ */

code,
kbd,
pre {
font-family:
var(--law-font-mono);
}

code {
padding:
2px 5px;

border-radius:
    5px;

background:
    var(--law-bg-muted);

color:
    var(--law-text);

}

pre {
max-width:
100%;

margin:
    24px 0;

padding:
    20px;

overflow-x:
    auto;

border:
    1px solid var(--law-border);

border-radius:
    var(--law-radius);

background:
    #f5f7f6;

color:
    var(--law-text);

font-size:
    13px;

line-height:
    1.65;

}

/* ============================================================
6. КНОПКИ
============================================================ */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
border:
0;

font-family:
    var(--law-font-body);

}

button {
color:
inherit;
}

/* ============================================================
7. ФОРМЫ
============================================================ */

input,
textarea,
select {
width:
100%;

border:
    1px solid var(--law-border-strong);

border-radius:
    var(--law-radius-small);

background:
    var(--law-white);

color:
    var(--law-text);

transition:
    border-color var(--law-transition-fast),
    box-shadow var(--law-transition-fast);

}

input:focus,
textarea:focus,
select:focus {
border-color:
rgba(24, 149, 137, 0.55);

outline:
    none;

box-shadow:
    var(--law-focus);

}

input::placeholder,
textarea::placeholder {
color:
var(--law-text-muted);

opacity:
    0.75;

}

textarea {
min-height:
140px;

resize:
    vertical;

}

/* ============================================================
8. ИЗОБРАЖЕНИЯ
============================================================ */

figure img {
border-radius:
var(--law-radius);
}

/* ============================================================
9. HORIZONTAL RULE
============================================================ */

hr {
height:
1px;

margin:
    34px 0;

border:
    0;

background:
    var(--law-border);

}

/* ============================================================
10. WORDPRESS EDITOR
============================================================ */

.entry-content,
.wp-block-post-content {
max-width:
100%;
}

.entry-content > *:first-child,
.wp-block-post-content > *:first-child {
margin-top:
0;
}

/* ============================================================
11. WORDPRESS ALIGNMENTS
============================================================ */

.alignwide {
width:
min(100%, 1320px);

max-width:
    1320px;

margin-left:
    auto;

margin-right:
    auto;

}

.alignfull {
width:
100%;

max-width:
    none;

margin-left:
    0;

margin-right:
    0;

}

/* ============================================================
12. SELECTION
============================================================ */

::selection {
background:
rgba(24, 149, 137, 0.18);

color:
    var(--law-text);

}

/* ============================================================
13. SCREEN READER ONLY
============================================================ */

.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;

}

.screen-reader-text:focus {
position:
fixed;

top:
    10px;

left:
    10px;

z-index:
    999999;

width:
    auto;

height:
    auto;

padding:
    12px 16px;

margin:
    0;

overflow:
    visible;

clip:
    auto;

white-space:
    normal;

border-radius:
    8px;

background:
    var(--law-text);

color:
    var(--law-white);

font-size:
    14px;

}

/* ============================================================
14. MOBILE
============================================================ */

@media (max-width: 560px) {

body {
    font-size:
        15px;
}

pre {
    padding:
        15px;

    font-size:
        12px;
}

}
/* =========================================================
   Global blockquote
   ========================================================= */

/* =========================================================
   Global blockquote
   ========================================================= */

blockquote {
    position: relative;
    margin: 44px 0;
    padding: 58px 44px 34px;
    background: linear-gradient(135deg, #f8f7f1 0%, #f1f5ee 100%);
    border: 1px solid rgba(24, 149, 137, 0.12);
    border-left: 5px solid #189589;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(38, 36, 36, 0.06);
    overflow: hidden;
}

blockquote::before {
    content: "“";
    position: absolute;
    top: 0px;
    left: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 8rem;
    line-height: 1;
    color: #189589;
    opacity: 0.12;
    pointer-events: none;
}

blockquote p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #262424;
    font-family: "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

blockquote p + p {
    margin-top: 16px;
}

blockquote cite {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(38, 36, 36, 0.08);
    color: #716d67;
    font-family: "Inter", sans-serif;
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.55;
}

blockquote cite a {
    color: #189589;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

blockquote cite a:hover {
    color: #11796f;
    text-decoration: underline;
}

@media (max-width: 700px) {
    blockquote {
        margin: 34px 0;
        padding: 30px 24px 26px;
        border-radius: 15px;
    }

    blockquote::before {
        top: -12px;
        left: 10px;
        font-size: 6rem;
    }

    blockquote p {
        font-size: 1.05rem;
        line-height: 1.55;
    }

    blockquote cite {
        margin-top: 17px;
        padding-top: 14px;
        font-size: 0.82rem;
    }
}
q {
    color: #262424;
    font-weight: 600;
    quotes: "«" "»" "„" "“";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}