/*
 * Theme — Main CSS
 * Only design tokens (CSS variables) + minimal base.
 * All project-specific styles are written per project.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Colors */
    --color-primary:    #111111;
    --color-secondary:  #ffffff;
    --color-accent:     #e00000;
    --color-text:       #111111;
    --color-muted:      #909090;
    --color-border:     #eaeaea;
    --color-bg:         #ffffff;
    --color-bg-alt:     #f5f5f5;
    --color-search-bg:  #474747;

    /* Typography */
    --font-body:    'Inter', sans-serif;
    --font-heading: 'Rubik', sans-serif;
    --font-ui:      'Rubik', sans-serif;
    --line-height:  1.6;

    /* Layout */
    --container-width:   1600px;
    --container-padding: 20px;

    /* UI */
    --radius:     5px;
    --transition: 0.2s ease;
    --shadow:     0 4px 12px rgba(0, 0, 0, .12);

    /* Header / Footer */
    --top-bar-height: 60px;
    --header-height:  82px;
    --header-bg:      #111111;
    --top-bar-bg:     #ffffff;
    --footer-bg:      #111111;
    --footer-color:   #cccccc;

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    font-family:      var(--font-body);
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

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

.container {
    width:          100%;
    max-width:      var(--container-width);
    margin-inline:  auto;
    padding-inline: var(--container-padding);
}

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}