/*
Theme Name:  MB Classic
Theme URI:   https://matthias-beyer.com
Author:      Matthias Beyer
Author URI:  https://matthias-beyer.com
Description: Klassisches, helles Blog-Theme mit Hero-Slider, statischen Seiten, Bild+Text-Feldern und sauberem Typography-Fokus.
Version:     1.0.0
Tested up to: 6.5
Requires PHP: 7.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mb-classic
Tags: blog, one-column, two-columns, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===================================================================
   0. CSS Custom Properties (Design Tokens)
   =================================================================== */
:root {
    --color-primary:      #2c5f8a;
    --color-primary-dark: #1e4266;
    --color-accent:       #e8a020;
    --color-text:         #2d2d2d;
    --color-text-light:   #666;
    --color-border:       #e0e0e0;
    --color-bg:           #ffffff;
    --color-bg-subtle:    #f8f6f2;
    --color-bg-dark:      #1a1a2e;

    --font-sans:   'Georgia', 'Times New Roman', serif;
    --font-ui:     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:   'Courier New', monospace;

    --radius:      4px;
    --radius-lg:   8px;
    --shadow-sm:   0 1px 4px rgba(0,0,0,.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.18);

    --content-width: 780px;
    --wide-width:    1200px;
    --sidebar-width: 280px;
    --gap:           2rem;

    --transition: .2s ease;
}

/* ===================================================================
   1. Reset & Base
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);
    background: var(--color-bg);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

ul, ol { padding-left: 1.5em; }
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-ui);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: .5em;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1.25em; }
blockquote {
    border-left: 4px solid var(--color-accent);
    margin: 1.5em 0;
    padding: .75em 1.25em;
    background: var(--color-bg-subtle);
    font-style: italic;
    color: var(--color-text-light);
}
hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }
code { font-family: var(--font-mono); background: var(--color-bg-subtle); padding: .15em .4em; border-radius: 3px; font-size: .88em; }
pre { background: var(--color-bg-subtle); padding: 1.25em; border-radius: var(--radius); overflow-x: auto; margin-bottom: 1.5em; }
pre code { background: none; padding: 0; }

/* ===================================================================
   2. Layout Wrappers
   =================================================================== */
.container {
    max-width: var(--wide-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}
.container--narrow { max-width: calc(var(--content-width) + 3rem); }

.site-inner {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--gap) 3rem;
    max-width: var(--wide-width);
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    align-items: start;
}
.site-inner--full { grid-template-columns: 1fr; }

/* ===================================================================
   3. Skip Link
   =================================================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--color-primary);
    color: #fff;
    padding: .5em 1em;
    border-radius: var(--radius);
    z-index: 9999;
    font-family: var(--font-ui);
    font-size: .9rem;
}
.skip-link:focus { top: 1rem; }

/* ===================================================================
   4. Header
   =================================================================== */
.site-header {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--color-border);
}

/* Branding row (Logo + Mobile Toggle) */
.site-header__top {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.site-header__branding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: .75rem;
}
.site-branding { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.site-branding a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .75rem; }
.site-branding__logo { height: 48px; width: auto; object-fit: contain; }
.site-branding__text { display: flex; flex-direction: column; }
.site-title {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.site-description { font-size: .8rem; color: var(--color-text-light); font-family: var(--font-ui); }

/* ===================================================================
   5. Navigation — vollbreite Leiste unter dem Logo
   =================================================================== */
.main-navigation {
    background: var(--color-primary);
    font-family: var(--font-ui);
    width: 100%;
}
.main-navigation .container {
    display: flex;
    align-items: stretch;
}
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    gap: 0;
}
.main-navigation li {
    position: relative;
    display: flex;
    align-items: stretch;
}
.main-navigation a {
    display: flex;
    align-items: center;
    padding: .7rem 1.1rem;
    color: rgba(255,255,255,.88);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
    border-bottom: 3px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    background: rgba(0,0,0,.18);
    color: #fff;
    border-bottom-color: var(--color-accent);
}

/* Dropdown */
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-width: 210px;
    z-index: 200;
    flex-direction: column;
    padding: .4rem 0;
    gap: 0;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu { display: flex; }
.main-navigation .sub-menu a {
    color: var(--color-text);
    padding: .5rem 1.1rem;
    border-bottom: none;
    font-size: .88rem;
}
.main-navigation .sub-menu a:hover {
    background: var(--color-bg-subtle);
    color: var(--color-primary);
    border-bottom: none;
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius);
    padding: .4rem .65rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-text);
    line-height: 1;
}

/* ===================================================================
   6. Hero / Slider
   =================================================================== */
.hero-slider {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-dark);
    aspect-ratio: 16/6;
    min-height: 320px;
    max-height: 560px;
}
.hero-slider__slides { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.hero-slide {
    min-width: 100%;
    position: relative;
    overflow: hidden;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.hero-slide__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 2.5rem;
    color: #fff;
}
.hero-slide__caption h2 {
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    margin-bottom: .35rem;
}
.hero-slide__caption p {
    font-size: 1rem;
    opacity: .9;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
    margin: 0 0 .75rem;
}
.hero-slide__caption .btn { margin-top: .25rem; }

/* Slider Controls */
.hero-slider__prev,
.hero-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.85);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background var(--transition);
    color: var(--color-text);
}
.hero-slider__prev { left: 1rem; }
.hero-slider__next { right: 1rem; }
.hero-slider__prev:hover,
.hero-slider__next:hover { background: rgba(255,255,255,1); }

.hero-slider__dots {
    position: absolute;
    bottom: 1rem;
    right: 2.5rem;
    display: flex;
    gap: .4rem;
    z-index: 10;
}
.hero-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), transform var(--transition);
}
.hero-slider__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* Static Hero (no slider) */
.hero-static {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/5;
    min-height: 280px;
    max-height: 460px;
}
.hero-static img { width: 100%; height: 100%; object-fit: cover; }
.hero-static .hero-slide__overlay,
.hero-static .hero-slide__caption {
    position: absolute;
}
.hero-static .hero-slide__overlay { inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 60%); }
.hero-static .hero-slide__caption { bottom: 0; left: 0; right: 0; padding: 2rem 2.5rem; color: #fff; }

/* ===================================================================
   7. Buttons
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .6em 1.4em;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    border: 2px solid transparent;
    line-height: 1.4;
}
.btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; text-decoration: none; }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.btn--sm { padding: .4em 1em; font-size: .82rem; }

/* ===================================================================
   8. Post Cards (Blog Loop)
   =================================================================== */
.posts-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.posts-grid--list { grid-template-columns: 1fr; }

.post-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.post-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__thumb--placeholder {
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-border);
    font-size: 2.5rem;
    aspect-ratio: 16/9;
}

.post-card__body { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--color-text-light);
    margin-bottom: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    align-items: center;
}
.post-card__cat {
    background: var(--color-primary);
    color: #fff;
    padding: .15em .6em;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}
.post-card__cat:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }

.post-card__title {
    font-size: 1.1rem;
    margin-bottom: .5rem;
    line-height: 1.3;
}
.post-card__title a { color: var(--color-text); text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }

.post-card__excerpt {
    font-size: .9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}
.post-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border);
}
.post-card__readmore {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-primary);
}
.post-card__readmore:hover { color: var(--color-primary-dark); }

/* ===================================================================
   9. Single Post / Page
   =================================================================== */
.entry-header { margin-bottom: 2rem; }
.entry-header .entry-meta {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--color-text-light);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .85rem;
    margin-bottom: .75rem;
}
.entry-header .entry-meta a { color: var(--color-text-light); }
.entry-header .entry-meta a:hover { color: var(--color-primary); }

.entry-thumbnail {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}
.entry-thumbnail img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }

.entry-content { max-width: 100%; }
.entry-content h2,
.entry-content h3 { margin-top: 1.75em; }
.entry-content ul,
.entry-content ol { margin-bottom: 1.25em; }
.entry-content li { margin-bottom: .35em; }
.entry-content a { color: var(--color-primary); }
.entry-content img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-block: 1.5em;
}
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text {
    font-size: .82rem;
    color: var(--color-text-light);
    text-align: center;
    font-family: var(--font-ui);
    margin-top: .4em;
}

.entry-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--color-text-light);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}
.entry-footer a { color: var(--color-text-light); }
.entry-footer a:hover { color: var(--color-primary); }

/* Post Navigation */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
}
.post-navigation a {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: all var(--transition);
}
.post-navigation a:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.nav-prev { text-align: left; }
.nav-next { text-align: right; }
.post-navigation .nav-subtitle { display: block; font-weight: 700; color: var(--color-text); margin-top: .2rem; font-size: .9rem; }

/* ===================================================================
   10. Page Templates — Bild + Kurztext Felder
   =================================================================== */

/* Image + Text Block (Custom Fields) */
.image-text-blocks { display: flex; flex-direction: column; gap: 3.5rem; margin: 2.5rem 0; }

.image-text-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.image-text-block--reverse { direction: rtl; }
.image-text-block--reverse > * { direction: ltr; }

.image-text-block__image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.image-text-block__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.image-text-block__content { display: flex; flex-direction: column; gap: .75rem; }
.image-text-block__label {
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-accent);
}
.image-text-block__title { font-size: 1.5rem; line-height: 1.25; color: var(--color-text); }
.image-text-block__text { font-size: .97rem; color: var(--color-text-light); line-height: 1.75; margin: 0; }

/* Feature Grid (3-column icons) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-md); }
.feature-card__icon { font-size: 2.5rem; margin-bottom: .75rem; display: block; }
.feature-card__title { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.feature-card__text { font-size: .88rem; color: var(--color-text-light); margin: 0; }

/* Teaser Boxes (for static pages) */
.teaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.teaser-box {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/2;
    box-shadow: var(--shadow-sm);
}
.teaser-box img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.teaser-box:hover img { transform: scale(1.05); }
.teaser-box__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%);
}
.teaser-box__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    color: #fff;
}
.teaser-box__caption h3 { color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }
.teaser-box__caption p { font-size: .82rem; opacity: .85; margin: 0; }
.teaser-box a {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* ===================================================================
   11. Sidebar & Widgets
   =================================================================== */
.sidebar { font-family: var(--font-ui); font-size: .9rem; }
.widget { margin-bottom: 2rem; }
.widget-title {
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: .4rem;
    margin-bottom: 1rem;
}
.widget ul { list-style: none; padding: 0; }
.widget ul li {
    padding: .35rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-light);
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--color-text-light); text-decoration: none; }
.widget ul li a:hover { color: var(--color-primary); }

.widget_search .search-form { display: flex; gap: .4rem; }
.widget_search input[type="search"] {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    outline: none;
    transition: border-color var(--transition);
}
.widget_search input[type="search"]:focus { border-color: var(--color-primary); }
.widget_search button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .5rem .85rem;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    transition: background var(--transition);
}
.widget_search button:hover { background: var(--color-primary-dark); }

/* ===================================================================
   12. Pagination
   =================================================================== */
.pagination {
    display: flex;
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    font-family: var(--font-ui);
}
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .88rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: all var(--transition);
}
.pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination .page-numbers.dots { border: none; }

/* ===================================================================
   13. Comments
   =================================================================== */
.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.comments-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}
.comment-list { list-style: none; padding: 0; }
.comment-list .comment {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.comment-meta { font-family: var(--font-ui); font-size: .82rem; color: var(--color-text-light); margin-bottom: .6rem; }
.comment-author b { font-size: .95rem; color: var(--color-text); }
.comment-content p { margin-bottom: .5em; font-size: .95rem; }
.comment-reply-link { font-family: var(--font-ui); font-size: .8rem; color: var(--color-primary); font-weight: 600; }

.comment-form label { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; display: block; margin-bottom: .3rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .95rem;
    font-family: var(--font-sans);
    transition: border-color var(--transition);
    margin-bottom: .75rem;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); outline: none; }
.comment-form .form-submit input {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: .65rem 1.5rem;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-weight: 700;
    cursor: pointer;
    font-size: .9rem;
    transition: background var(--transition);
    width: auto;
}
.comment-form .form-submit input:hover { background: var(--color-primary-dark); }

/* ===================================================================
   14. Footer
   =================================================================== */
.site-footer {
    background: var(--color-bg-dark);
    color: rgba(255,255,255,.8);
    padding-top: 3rem;
    margin-top: 4rem;
    font-family: var(--font-ui);
    font-size: .88rem;
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-widget-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.5);
    margin-bottom: 1rem;
}
.footer-widget ul { list-style: none; padding: 0; }
.footer-widget li { padding: .3rem 0; }
.footer-widget a { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--transition); }
.footer-widget a:hover { color: #fff; }
.footer-widget p { color: rgba(255,255,255,.7); line-height: 1.65; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding-block: 1.25rem;
}
.footer-copyright { color: rgba(255,255,255,.5); }
.footer-copyright a { color: rgba(255,255,255,.6); }
.footer-copyright a:hover { color: #fff; }
.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav a { color: rgba(255,255,255,.55); text-decoration: none; transition: color var(--transition); }
.footer-nav a:hover { color: #fff; }

/* Back to top */
.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius);
    padding: .3em .7em;
    font-size: .8rem;
    text-decoration: none;
    transition: all var(--transition);
}
.back-to-top:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }

/* ===================================================================
   15. Utility Classes
   =================================================================== */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.section-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ===================================================================
   16. Responsive
   =================================================================== */
@media (max-width: 960px) {
    .site-inner { grid-template-columns: 1fr; }
    .sidebar { border-top: 1px solid var(--color-border); padding-top: 2rem; }
    .image-text-block { grid-template-columns: 1fr; }
    .image-text-block--reverse { direction: ltr; }
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .main-navigation .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--color-primary);
        padding: .5rem 0;
    }
    .main-navigation .menu.is-open { display: flex; }
    .main-navigation ul { flex-direction: column; width: 100%; }
    .main-navigation li { flex-direction: column; }
    .main-navigation a { padding: .65rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
    .main-navigation .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,.15);
        padding: 0;
        width: 100%;
    }
    .main-navigation .sub-menu a { color: rgba(255,255,255,.8); padding-left: 2rem; }
    .main-navigation li:hover > .sub-menu,
    .main-navigation li:focus-within > .sub-menu { display: none; }
    .main-navigation li.is-open > .sub-menu { display: flex; }
    .post-navigation { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    :root { --gap: 1.25rem; }
    .hero-slide__caption { padding: 1.25rem; }
    .hero-slider__prev, .hero-slider__next { width: 36px; height: 36px; font-size: .95rem; }
    .container { padding-inline: 1rem; }
    .footer-widgets { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   17. WP Core Alignments
   =================================================================== */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { margin-inline: -2rem; }
.alignfull { margin-inline: calc(-50vw + 50%); max-width: 100vw; }

/* Gutenberg */
.wp-block-image img { border-radius: var(--radius); }
.wp-block-quote { border-left: 4px solid var(--color-accent); padding: .75em 1.25em; background: var(--color-bg-subtle); }