/**
 * OrchestraLife.Ru visual layer.
 *
 * Project CSS for the OrchestraLife GP child theme.
 * Parent theme: GeneratePress.
 *
 * This file contains only project-specific visual rules.
 * WordPress core, GeneratePress, GP Premium and GenerateBlocks are not modified.
 */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
    --olf-bg: #f3f1eb;
    --olf-surface: #fffdf8;
    --olf-surface-alt: #f8f5ee;
    --olf-text: #202623;
    --olf-muted: #66706b;
    --olf-border: #d9d4c9;
    --olf-border-strong: #c7c0b4;

    --olf-accent: #24584d;
    --olf-accent-dark: #183d36;
    --olf-accent-soft: #e4efeb;

    --olf-heading: #17201d;
    --olf-button-text: #ffffff;

    --olf-container: 1180px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background: var(--olf-bg);
    color: var(--olf-text);
}

.site {
    background: var(--olf-bg);
}

a {
    color: var(--olf-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

a:hover,
a:focus {
    color: var(--olf-accent-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.widget-title,
.comments-title {
    color: var(--olf-heading);
    letter-spacing: -0.02em;
}

.entry-content {
    font-size: 18px;
    line-height: 1.72;
}

.entry-content p {
    margin-bottom: 1.2em;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
    background: var(--olf-surface);
    border-bottom: 1px solid var(--olf-border);
}

.main-title a,
.main-title a:hover,
.main-title a:focus {
    color: var(--olf-heading);
    text-decoration: none;
}

.main-navigation,
.main-navigation ul ul {
    background: var(--olf-surface);
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .menu-bar-item > a {
    color: var(--olf-text);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.sfHover > a,
.menu-toggle:hover,
.menu-toggle:focus {
    color: var(--olf-accent);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Common surfaces
   -------------------------------------------------------------------------- */

.inside-article,
.sidebar .widget,
.comments-area {
    background: var(--olf-surface);
    border: 1px solid var(--olf-border);
    box-shadow: none;
}

.entry-meta,
.site-info,
.widget ol,
.widget ul,
.widget li,
.comment-metadata {
    color: var(--olf-muted);
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link,
.search-form input[type="submit"] {
    background: var(--olf-accent);
    color: var(--olf-button-text);
    border: 1px solid var(--olf-accent);
}

button:hover,
button:focus,
html input[type="button"]:hover,
html input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
a.button:hover,
a.button:focus,
a.wp-block-button__link:hover,
a.wp-block-button__link:focus,
.search-form input[type="submit"]:hover,
.search-form input[type="submit"]:focus {
    background: var(--olf-accent-dark);
    border-color: var(--olf-accent-dark);
    color: var(--olf-button-text);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background: #ffffff;
    border: 1px solid var(--olf-border);
    color: var(--olf-text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--olf-accent);
}

.site-info {
    background: var(--olf-surface-alt);
    border-top: 1px solid var(--olf-border);
}

blockquote {
    border-left: 4px solid var(--olf-accent);
    background: var(--olf-surface-alt);
    color: var(--olf-text);
}