/**
 * curly.sale — Global Design System
 *
 * Загружается на ВСЕХ страницах сайта (enqueue без условий).
 * Определяет семантические CSS-токены, перекрашивает GeneratePress
 * header/nav/footer в палитру Sage + Mint + Charcoal.
 *
 * Зависит от: generatepress-parent (style.css)
 * Загружается ДО: front-page.css, page-descuentos.css, cgm-product.css
 *
 * Upload to:
 *   /www/wwwroot/curly.sale/wp-content/themes/generatepress-child/assets/css/curly-global.css
 *
 * @version 1.0.0 (Design Sprint C, May 2026)
 */

/* ============================================================
   1. DESIGN TOKENS
   ——————————————————————————————————————————————————————————
   Два слоя:
   a) --cgm-* — сырая палитра (абсолютные hex-значения)
   b) Семантические псевдонимы (--brand, --fg-1, …) —
      именно их используют front-page.css, page-descuentos.css
      и cgm-product.css через var(--brand, var(--fp-sage)) etc.
   ============================================================ */
:root {
    /* ----------------------------------------------------------
       Raw palette — Soft-beauty / clean-editorial (Design System)
       Cream canvas, ONE warm-coral accent. Success green is
       reserved exclusively for CGM validation (the "CGM OK" chip).
       Names kept stable (--cgm-sage*) so all page CSS keeps working;
       only their VALUES moved from sage → coral.
       ---------------------------------------------------------- */
    --cgm-sage:        #E8826B;   /* was sage — now warm coral (accent)   */
    --cgm-sage-hover:  #D96A52;   /* coral hover / press                   */
    --cgm-sage-light:  rgba(232, 130, 107, 0.10); /* coral soft tint zone  */
    --cgm-terracotta:  #A6705A;   /* secondary soft terracotta-brown       */
    --cgm-mint:        #FBF8F4;   /* page canvas — cream (was mint green)   */
    --cgm-white:       #FFFFFF;
    --cgm-charcoal:    #2B2622;   /* warm near-black text                   */
    --cgm-slate:       #8A817A;   /* muted metadata / struck price          */
    --cgm-silver:      #B8AFA6;   /* faint text                             */
    --cgm-border:      #EDE6DD;   /* hairline divider                       */
    --cgm-amber:       #F59E0B;   /* caution (analyzer) — unchanged         */
    --cgm-crimson:     #E8220A;   /* danger / avoid (analyzer) — unchanged  */
    --cgm-violet:      #7C3AED;   /* analyzer accent — unchanged            */

    /* Design System extras */
    --cgm-cream:        #FBF8F4;  /* page canvas                            */
    --cgm-surface-alt:  #F4EEE6;  /* section dividers / feature blocks       */
    --cgm-accent-soft:  #FBE5DD;  /* badge fills, brand discs, hover zones   */
    --cgm-success:      #5C8A6A;  /* "CGM OK" trust signal ONLY              */
    --cgm-success-soft: #E4EFE7;  /* CGM OK chip fill                        */

    /* Semantic aliases used by all page-specific CSS */
    --brand:        var(--cgm-sage);
    --brand-hover:  var(--cgm-sage-hover);
    --accent-soft:  var(--cgm-accent-soft);
    --fg-1:         var(--cgm-charcoal);
    --fg-2:         var(--cgm-slate);
    --fg-3:         var(--cgm-silver);
    --border:       var(--cgm-border);
    --bg-page:      var(--cgm-mint);
    --bg-surface:   var(--cgm-white);
    --bg-alt:       var(--cgm-surface-alt);

    /* Typography (self-hosted — see fonts.css) */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --cgm-max:      1200px;

    /* Radius — soft, modern (was 2/4px) */
    --radius-sm:    8px;    /* badges, small buttons          */
    --radius-md:   16px;    /* cards                          */
    --radius-lg:   24px;    /* hero / feature blocks          */
    --radius-full: 999px;   /* pills: CTAs, filter & brand chips */

    /* Shadows — soft, replace hard borders */
    --shadow-sm:     0 1px 3px rgba(43,38,34,0.04), 0 1px 2px rgba(43,38,34,0.06);
    --shadow-md:     0 4px 16px rgba(43,38,34,0.06);
    --shadow-lg:     0 12px 32px rgba(43,38,34,0.08);
    --shadow-accent: 0 8px 24px rgba(232,130,107,0.18); /* primary CTA glow */

    /* Motion — one gentle easing token (was 150ms linear) */
    --motion:       200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. SCROLLBAR GUTTER — глобальный фикс
   ——————————————————————————————————————————————————————————
   100vw включает scrollbar (~17px); без этого full-width блоки
   (fp-wrap, dsc-wrap) смещаются влево на ~8px.
   scrollbar-gutter: stable резервирует место заранее.
   Chrome 94+, Firefox 97+, Safari 15.4+.
   ============================================================ */
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

/* ============================================================
   3. BASE — body, links, headings
   ============================================================ */
body {
    color: var(--fg-1);
    background-color: var(--bg-page);
    font-family: var(--font-body);
    line-height: 1.65;            /* generous body leading */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Global link colour — coral accent */
a {
    color: var(--brand);
}

a:hover {
    color: var(--brand-hover);
}

/* Headings — editorial serif, light & airy */
h1, h2, h3, h4, h5, h6 {
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;            /* tight heading leading */
    letter-spacing: -0.01em;
}

h1 { font-weight: 300; }          /* lightness from thin large type */

/* WP entry title on pages / archives */
.entry-title,
.entry-title a,
.page-title {
    color: var(--fg-1);
}

.entry-title a:hover {
    color: var(--brand);
    text-decoration: none;
}

/* ============================================================
   4. GENERATEPRESS — HEADER
   ——————————————————————————————————————————————————————————
   White background, charcoal logo, bottom border in --border.
   ============================================================ */
.site-header {
    background-color: rgba(251, 248, 244, 0.85);  /* cream, slightly translucent */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);        /* hairline only */
    box-shadow: var(--shadow-sm);
}

/* Site title / logo — Fraunces wordmark fallback (when no image logo) */
.site-title a,
.site-title a:visited {
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.site-title a:hover {
    color: var(--brand);
    text-decoration: none;
}

/* Site description (tagline) */
.site-description {
    color: var(--fg-2);
}

/* Logo size — GP Customizer default 90px, +20% = 108px */
.site-header .header-image {
    width: 108px !important;
    height: auto !important;
}
@media (max-width: 768px) {
    .site-header .header-image {
        width: 77px !important;
    }
}

/* ============================================================
   5. GENERATEPRESS — PRIMARY NAVIGATION
   ============================================================ */

/* Top-level nav links */
.nav-primary .main-nav ul li a,
.nav-primary .main-nav ul li a:visited {
    color: var(--fg-2);
    font-weight: 500;
    transition: color var(--motion);
}

.nav-primary .main-nav ul li a:hover {
    color: var(--brand);
    text-decoration: none;
}

/* Active / current page link */
.nav-primary .main-nav ul li.current-menu-item > a,
.nav-primary .main-nav ul li.current-menu-ancestor > a,
.nav-primary .main-nav ul li.current-page-ancestor > a {
    color: var(--brand);
}

/* Dropdown sub-menu */
.nav-primary .main-nav ul ul {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(45, 55, 72, 0.08);
}

.nav-primary .main-nav ul ul li a,
.nav-primary .main-nav ul ul li a:visited {
    color: var(--fg-2);
    font-weight: 400;
}

.nav-primary .main-nav ul ul li a:hover {
    color: var(--brand);
    background-color: var(--cgm-sage-light);
    text-decoration: none;
}

/* Mobile hamburger toggle */
button.menu-toggle,
.menu-toggle {
    color: var(--fg-1);
    background: transparent;
    border-color: var(--border);
}

button.menu-toggle:hover,
.menu-toggle:hover {
    color: var(--brand);
    border-color: var(--brand);
}

/* Mobile expanded nav */
.main-navigation.toggled .main-nav {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
}

.main-navigation.toggled .main-nav ul li {
    border-bottom: 1px solid var(--border);
}

/* ============================================================
   6. GENERATEPRESS — FOOTER
   ——————————————————————————————————————————————————————————
   Charcoal background, white text, sage hover on links.
   ============================================================ */
.site-footer {
    background-color: var(--fg-1);   /* #2D3748 charcoal */
    color: rgba(255, 255, 255, 0.78);
    border-top: none;
}

.site-footer a,
.site-footer a:visited {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: none;
}

/* Widget titles in footer */
.footer-widgets .widget-title,
.site-footer .widget-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

/* Footer bottom bar (copyright) */
.footer-bar,
.site-footer .footer-bar {
    background-color: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.footer-bar a,
.footer-bar a:visited {
    color: rgba(255, 255, 255, 0.72);
}

.footer-bar a:hover {
    color: #fff;
}

/* ============================================================
   7. CONTENT AREA — GeneratePress layout tweaks
   ============================================================ */

/* Remove default top padding on pages / archives */
.page .site-content,
.archive .site-content,
.home .site-content {
    padding-top: 0;
}

/* Sidebar border to match design tokens */
.widget-area {
    border-left: 1px solid var(--border);
    padding-left: 24px;
}

/* ============================================================
   8. GLOBAL CONTAINER UTILITY
   ——————————————————————————————————————————————————————————
   .cgm-discounts-section uses <div class="container"> which
   GeneratePress 3.x does NOT style (it uses .grid-container).
   We fix it here globally so it works on ALL pages.
   .cgm-container is a utility class for any new template.
   ============================================================ */
.cgm-discounts-section .container,
.cgm-container {
    max-width: var(--cgm-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .cgm-discounts-section .container,
    .cgm-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ============================================================
   9. GLOBAL BUTTON — .btn-brand
   ——————————————————————————————————————————————————————————
   Sage fill, white text. Use for CTAs outside of page-specific
   templates (e.g. sidebar widgets, shortcodes).
   ============================================================ */
.btn-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);          /* pill CTA */
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body);
    box-shadow: var(--shadow-accent);           /* coral glow */
    transition: background var(--motion), box-shadow var(--motion), transform var(--motion);
}

.btn-brand:hover,
.btn-brand:visited {
    color: #fff;
    background: var(--brand-hover);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.btn-brand:active {
    transform: translateY(1px);
}

/* Outline variant */
.btn-brand--outline {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
}

.btn-brand--outline {
    box-shadow: none;
}

.btn-brand--outline:hover {
    background: var(--cgm-sage-light);
    color: var(--brand);
    box-shadow: none;
}

/* ============================================================
   10. WP PAGINATION — global Sage styling
   ——————————————————————————————————————————————————————————
   Covers wp_link_pages() and paginate_links() on archives,
   single posts, taxonomy pages.
   ============================================================ */
.pagination .nav-links a,
.post-navigation a,
.posts-navigation a,
.page-links a {
    color: var(--brand);
    border-color: var(--border);
}

.pagination .nav-links a:hover,
.post-navigation a:hover,
.posts-navigation a:hover {
    color: var(--brand-hover);
    border-color: var(--brand);
    text-decoration: none;
}

.pagination .nav-links .current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ============================================================
   11. WP SEARCH FORM — Sage focus ring
   ============================================================ */
.search-form input[type="search"],
.wp-block-search__input {
    border-color: var(--border);
    border-radius: var(--radius-md);
    color: var(--fg-1);
}

.search-form input[type="search"]:focus,
.wp-block-search__input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(232, 130, 107, 0.18);
}

.search-form input[type="submit"],
.search-submit,
.wp-block-search__button {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    border-radius: var(--radius-md);
}

.search-form input[type="submit"]:hover,
.search-submit:hover,
.wp-block-search__button:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

/* ============================================================
   12. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Global focus-visible ring — sage */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    /* Sidebar becomes stacked on mobile — remove left border */
    .widget-area {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 24px;
        margin-top: 24px;
    }
}

/* ============================================================
   14. DS-РЕДИЗАЙН — ДОБИВКА (hotfix 2026-06-22)
   ——————————————————————————————————————————————————————————
   GeneratePress печатает свои global-styles с той же специфичностью
   (0,0,1), что и body-правила выше (стр. ~109) → GP выигрывает:
   серый фон #F7F8F9 и шрифт -apple-system на архивах/категориях.
   Поднимаем специфичность до (0,0,2) `html body …` — бьёт GP без !important.
   Плюс возврат CGM-score на карточки (откат display:none из cgm-card.css).
   ============================================================ */

/* 1. Фон страницы → кремовый (бьёт GP body{background:var(--base-2)}) */
html body {
    background-color: var(--bg-page);
}

/* 2. Тело/UI-шрифт → Inter (бьёт GP body,button,input,select,textarea{-apple-system}).
   Заголовки h1–h6 сохраняют Fraunces — у них собственное правило. */
html body,
html button,
html input,
html select,
html textarea {
    font-family: var(--font-body);
}

/* 3. Заголовок карточки → Inter (sans), как в макете-эталоне.
   Специфичность (0,2,0) + !important на случай stale-кэша cgm-card.css. */
.cgm-product-card .cgm-product-card__title {
    font-family: var(--font-body) !important;
}

/* 4. CGM-score → вернуть на ВСЕ карточки (откат display:none из cgm-card.css).
   Разметка скора уже в DOM; позиция/цвет кружка остаются из cgm-card.css. */
.cgm-card-overlay--score {
    display: flex !important;
}

/* ============================================================
   15. DS-РЕДИЗАЙН — ВЁРСТКА (hotfix #2, 2026-06-22)
   ============================================================ */

/* 5. Выпадающее меню навигации пряталось под карточками/скором.
   Причина: .site-header c backdrop-filter:blur() создаёт stacking context
   с z-index:auto и в DOM идёт РАНЬШЕ контента → весь слой шапки (вместе с
   dropdown z-index:99999) красится ПОД #content, где скор/карточки имеют
   свои контексты (transform). Поднимаем слой всей шапки над контентом. */
.site-header {
    z-index: 1000;
}

/* 6. Панель фильтров на /descuentos/ «плыла» вправо: общий контейнер
   .dsc-toolbar__inner стал display:block, а .dsc-filters имеет margin-left:auto
   → форма уезжала на ~336px и падала под табы. Возвращаем flex-ряд и снимаем
   margin-left:auto (табы слева; фильтры — справа в ряд, при нехватке ширины
   переносятся под табы, тоже выровнены влево). */
#dsc-toolbar .dsc-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
}

#dsc-toolbar .dsc-filters {
    margin-left: 0;
}