/*
Theme Name: UI Style
Theme URI: https://example.com/ui-style
Author: Custom
Author URI: https://example.com
Description: Лека, минималистична WordPress тема, вдъхновена от типографията и цветовете на ui.com (Ubiquiti UniFi). Светъл вариант с Inter шрифт и син акцент.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ui-style
Tags: light, minimal, clean, blog, business, two-columns, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   1. CSS Variables — точно тук са цветовете и типографията
   ========================================================= */
:root {
    /* === ЦВЕТОВА ПАЛИТРА (стил ui.com) === */
    --ui-bg:            #FAFBFC;   /* основен фон — почти бял с лек сив оттенък */
    --ui-bg-alt:        #F3F5F7;   /* секции, карти */
    --ui-surface:       #FFFFFF;   /* чисто бяло за карти/контейнери */
    --ui-border:        #E4E7EB;   /* фини разделителни линии */
    --ui-border-strong: #CFD4DA;

    --ui-text:          #161B22;   /* основен текст — почти черен */
    --ui-text-muted:    #555E68;   /* второстепенен */
    --ui-text-soft:     #8B949E;   /* placeholder, meta */

    --ui-accent:        #0193D7;   /* фирменият син на Ubiquiti */
    --ui-accent-hover:  #0277B5;
    --ui-accent-soft:   #E6F4FB;   /* много светъл син за hover/badges */

    --ui-success:       #2E7D32;
    --ui-warning:       #B86E00;
    --ui-danger:        #C92A2A;

    /* === ТИПОГРАФИЯ === */
    --ui-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;
    --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                     Consolas, "Liberation Mono", monospace;

    /* размери */
    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.875rem;  /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md:   1.125rem;  /* 18px */
    --fs-lg:   1.375rem;  /* 22px */
    --fs-xl:   1.75rem;   /* 28px */
    --fs-2xl:  2.25rem;   /* 36px */
    --fs-3xl:  3rem;      /* 48px */
    --fs-4xl:  4rem;      /* 64px */

    /* line-heights */
    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-base:  1.6;

    /* letter spacing — UniFi използват леко стегната типография */
    --ls-tight:   -0.02em;
    --ls-tighter: -0.03em;
    --ls-normal:  0;
    --ls-wide:    0.02em;

    /* === LAYOUT === */
    --container: 1240px;
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow:    0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.08);

    --transition: 180ms ease;
}

/* =========================================================
   2. Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--ui-font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--ui-text);
    background: var(--ui-bg);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter stylistic alternates */
}

/* =========================================================
   3. Типография
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.6em;
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--ui-text);
}

h1 { font-size: clamp(2rem, 4vw + 1rem, var(--fs-4xl)); letter-spacing: var(--ls-tighter); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, var(--fs-3xl)); letter-spacing: var(--ls-tighter); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p {
    margin: 0 0 1.1em;
    color: var(--ui-text);
}

p.lead, .lead {
    font-size: var(--fs-md);
    color: var(--ui-text-muted);
    line-height: 1.55;
}

a {
    color: var(--ui-accent);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--ui-accent-hover); }

strong, b { font-weight: 600; }

small { font-size: var(--fs-sm); color: var(--ui-text-muted); }

code, kbd, pre {
    font-family: var(--ui-font-mono);
    font-size: 0.92em;
}
code {
    background: var(--ui-bg-alt);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
}
pre {
    background: var(--ui-bg-alt);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--ui-border);
    overflow-x: auto;
}
pre code { background: none; padding: 0; border: 0; }

blockquote {
    margin: 1.5em 0;
    padding: 0.25em 0 0.25em 1.25em;
    border-left: 3px solid var(--ui-accent);
    color: var(--ui-text-muted);
    font-size: var(--fs-md);
}

hr {
    border: 0;
    border-top: 1px solid var(--ui-border);
    margin: 2.5em 0;
}

img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   4. Layout / Container
   ========================================================= */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
    padding: 3.5rem 0 5rem;
}

/* =========================================================
   5. Header
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 251, 252, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ui-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
}
.site-title a { color: var(--ui-text); }
.site-title a:hover { color: var(--ui-accent); }

.site-description {
    font-size: var(--fs-sm);
    color: var(--ui-text-muted);
    margin: 0;
}

/* === Главна навигация === */
.main-navigation ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 0.25rem;
}
.main-navigation a {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    color: var(--ui-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background: var(--ui-bg-alt);
    color: var(--ui-text);
}

/* mobile toggle */
.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-size: var(--fs-sm);
}

@media (max-width: 768px) {
    .menu-toggle { display: inline-block; }
    .main-navigation ul {
        display: none;
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        background: var(--ui-surface);
        border-bottom: 1px solid var(--ui-border);
        padding: 0.5rem;
    }
    .main-navigation.toggled ul { display: flex; }
}

/* =========================================================
   6. Бутони
   ========================================================= */
.btn, button, input[type="submit"], .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    background: var(--ui-accent);
    border: 1px solid var(--ui-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
}
.btn:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
}
.btn--ghost:hover {
    background: var(--ui-bg-alt);
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
}

/* =========================================================
   7. Форми
   ========================================================= */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="tel"], textarea, select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ui-text);
}

/* =========================================================
   8. Postове и съдържание
   ========================================================= */
.entry {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.entry:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--shadow);
}

.entry-title { margin: 0 0 0.5rem; font-size: var(--fs-xl); }
.entry-title a { color: var(--ui-text); }
.entry-title a:hover { color: var(--ui-accent); }

.entry-meta {
    font-size: var(--fs-sm);
    color: var(--ui-text-muted);
    margin-bottom: 1rem;
}
.entry-meta a { color: var(--ui-text-muted); }
.entry-meta a:hover { color: var(--ui-accent); }

.entry-content > * + * { margin-top: 1em; }

.entry-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-border);
    font-size: var(--fs-sm);
    color: var(--ui-text-muted);
}

/* Featured image */
.post-thumbnail {
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
}
.post-thumbnail img {
    width: 100%;
    transition: transform 400ms ease;
}
.entry:hover .post-thumbnail img { transform: scale(1.02); }

/* =========================================================
   9. Sidebar / Widgets
   ========================================================= */
.content-area { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 992px) {
    .has-sidebar .content-area {
        grid-template-columns: 1fr 300px;
    }
}

.widget {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.widget-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--ui-text-muted);
    margin-bottom: 1rem;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--fs-sm);
}
.widget li:last-child { border-bottom: 0; }

/* =========================================================
   10. Pagination
   ========================================================= */
.pagination {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 2.5rem;
}
.pagination a, .pagination .current {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    color: var(--ui-text);
    font-size: var(--fs-sm);
    background: var(--ui-surface);
}
.pagination a:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.pagination .current {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
}

/* =========================================================
   11. Footer
   ========================================================= */
.site-footer {
    background: var(--ui-bg-alt);
    border-top: 1px solid var(--ui-border);
    padding: 2.5rem 0;
    color: var(--ui-text-muted);
    font-size: var(--fs-sm);
}
.site-footer a { color: var(--ui-text-muted); }
.site-footer a:hover { color: var(--ui-accent); }

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* =========================================================
   12. Помощни класове и WP-специфични
   ========================================================= */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%);
    clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: var(--fs-sm); color: var(--ui-text-muted); text-align: center;
    margin-top: 0.4rem;
}
.sticky { position: relative; }
.sticky::before {
    content: "Закачено"; position: absolute; top: 1rem; right: 1rem;
    background: var(--ui-accent-soft); color: var(--ui-accent);
    font-size: var(--fs-xs); font-weight: 600;
    padding: 0.2rem 0.5rem; border-radius: 4px;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.gallery img { border-radius: var(--radius-sm); }

/* =========================================================
   13. Selection
   ========================================================= */
::selection { background: var(--ui-accent); color: #fff; }