:root {
    --color-background: #f4f6f8;
    --color-background-main: #ffffff;
    --color-border: #e2e8f0;
    --color-page: #ffffff;
    --color-primary: #2563eb;
    --color-primary-contrast: #ffffff;
    --color-primary-hover: #1d4ed8;
    --color-surface: #f8fafc;
    --color-text: #1f2937;
    --color-text-header: #ffffff;
    --color-text-main: #2d3748;
    --color-text-muted: #64748b;
    --font-family-body: system-ui, -apple-system, sans-serif;
    --font-family-heading: system-ui, -apple-system, sans-serif;
    --font-size-2xl: 1.4rem;
    --font-size-3xl: 2rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-sm: 0.875rem;
    --font-size-xl: 1.2rem;
    --header-background-image: url("../images/header.jpg");
    --line-height-body: 1.5;
    --line-height-heading: 1.2;
    --page-background-image: none;
    --radius-lg: 0px;
    --radius-md: 0px;
    --radius-sm: 0px;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.14);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.12);
    --site-max-width: 1240px;
    --spacing-2xl: 4rem;
    --spacing-lg: 1.5rem;
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;
    --spacing-xl: 2.5rem;
    --spacing-xs: 0.25rem;
}

[data-theme="dark"] {
    --color-background: #0f172a;
    --color-background-main: #f1f5f9;
    --color-border: #334155;
    --color-page: #111827;
    --color-primary: #60a5fa;
    --color-primary-contrast: #0f172a;
    --color-primary-hover: #93c5fd;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-header: #ffffff;
    --color-text-main: #111827;
    --color-text-muted: #94a3b8;
    --font-family-body: system-ui, -apple-system, sans-serif;
    --font-family-heading: system-ui, -apple-system, sans-serif;
    --font-size-2xl: 1.4rem;
    --font-size-3xl: 2rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-sm: 0.875rem;
    --font-size-xl: 1.2rem;
    --header-background-image: url("../images/header.jpg");
    --line-height-body: 1.5;
    --line-height-heading: 1.2;
    --page-background-image: none;
    --radius-lg: 0px;
    --radius-md: 0px;
    --radius-sm: 0px;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.14);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.12);
    --site-max-width: 1240px;
    --spacing-2xl: 4rem;
    --spacing-lg: 1.5rem;
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;
    --spacing-xl: 2.5rem;
    --spacing-xs: 0.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-background);
    background-image: var(--page-background-image);
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 0 var(--spacing-md);
    font-family: var(--font-family-heading);
    line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p { margin-block: 0 var(--spacing-md); }

a { color: var(--color-primary); }
img { max-width: 100%; height: auto; }

.page-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "header" "navigation" "breadcrumb" "content" "footer";
    min-height: 100vh;
    width: 100%;
    margin-inline: auto;
    background: var(--color-page);
}

.layout-centered { max-width: var(--site-max-width); }
.layout-full-width { max-width: none; }
.top-bar { grid-area: top; }
.site-header { grid-area: header; }
.main-navigation { grid-area: navigation; }
.breadcrumb { grid-area: breadcrumb; }
.site-content { grid-area: content; min-width: 0; }
.site-footer { grid-area: footer; }

.navigation-left,
.navigation-right {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.navigation-left {
    grid-template-areas: "top top" "header header" "navigation breadcrumb" "navigation content" "footer footer";
}
.navigation-right {
    grid-template-areas: "top top" "header header" "breadcrumb navigation" "content navigation" "footer footer";
}

.top-bar,
.site-header,
.main-navigation,
.breadcrumb,
.site-content,
.site-footer {
    padding: var(--spacing-md);
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.top-navigation ul,
.footer-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}
.top-navigation a,
.footer-navigation a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.top-navigation li.active > a,
.footer-navigation li.active > a,
.top-navigation a:hover,
.footer-navigation a:hover {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.site-header {
    background-color: var(--color-surface);
    background-image: var(--header-background-image);
    background-size: cover;
    background-position: center;
    color:var(--color-text-header);
}
.header-centered { text-align: center; }
.site-title {
    margin-block: 0 var(--spacing-sm);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-heading);
}
.site-tagline { color: var(--color-text-header); }

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.mobile-menu-toggle { display: none; }
.main-navigation.menu-vertical ul { flex-direction: column; }
.main-navigation li { position: relative; }
.main-navigation a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.main-navigation li.active > a,
.main-navigation a:hover {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}
.submenu-toggle {
    position: absolute;
    inset-block-start: var(--spacing-xs);
    inset-inline-end: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    color: var(--color-text);
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    cursor: pointer;
}
.main-navigation.menu-vertical .submenu-toggle { display: none; }
.menu-horizontal ul{
    flex-direction: row;
}
main{
    background-color:var(--color-background-main);
    color:var(--color-text-main);
}
@media (min-width: 769px) {
    .main-navigation.menu-horizontal li.has-submenu > a {
        padding-inline-end: calc(var(--spacing-xl) + var(--spacing-sm));
    }
    .main-navigation.menu-horizontal .menu-level-1 ul {
        position: absolute;
        z-index: 20;
        inset-block-start: 100%;
        inset-inline-start: 0;
        display: none;
        min-width: 14rem;
        padding: var(--spacing-sm);
        flex-direction: column;
        flex-wrap: nowrap;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
    }
    .main-navigation.menu-horizontal .menu-level-1 ul ul {
        inset-block-start: 0;
        inset-inline-start: 100%;
    }
    .main-navigation.menu-horizontal li:hover > ul,
    .main-navigation.menu-horizontal li:focus-within > ul,
    .main-navigation.menu-horizontal li.submenu-open > ul {
        display: flex;
    }
}

.breadcrumb {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}
.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-content { padding-block: var(--spacing-xl); }
.page-text-content { max-width: 48rem; }

.widget {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.widget-hero {
    padding: var(--spacing-2xl) var(--spacing-xl);
    background-color: var(--color-surface);
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-lg);
}
.hero-centered { text-align: center; }
.hero-centered .hero-text { margin-inline: auto; }
.hero-text { max-width: 48rem; font-size: var(--font-size-lg); }

.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.btn:hover { background: var(--color-primary-hover); }

.widget-feature-grid { margin-bottom: var(--spacing-xl); }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(var(--feature-columns, 3), minmax(0, 1fr));
    gap: var(--spacing-lg);
}
.feature-item {
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.feature-item .image-figure { margin-bottom: var(--spacing-lg); }
.feature-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.widget-image-text {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--spacing-xl);
}
.widget-image-text.image-right .image-text-media { order: 2; }
.image-figure { margin: 0; }
.image-text-media img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
}
.image-text-content > :last-child { margin-bottom: 0; }

.site-footer {
    padding-block: var(--spacing-xl);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.footer-centered { text-align: center; }
.footer-columns,
.footer-grid {
    display: grid;
    grid-template-columns: repeat(var(--footer-columns, 3), minmax(0, 1fr));
    gap: var(--spacing-lg);
}
.footer-copyright { color: var(--color-text-muted); }
.footer-navigation { grid-column: 1 / -1; }
.footer-columns > .footer-copyright,
.footer-grid > .footer-copyright { grid-column: 1 / -1; }

.theme-toggle-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

@media (max-width: 768px) {
    .navigation-left,
    .navigation-right {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
        grid-template-areas: "top" "header" "navigation" "breadcrumb" "content" "footer";
    }
    .main-navigation ul { flex-direction: column; }
    .main-navigation .menu-level-1 ul {
        display: flex;
        position: static;
        padding-inline-start: var(--spacing-lg);
    }
    .main-navigation .submenu-toggle { display: none; }
    .main-navigation.mobile-collapsible > .mobile-menu-toggle {
        display: block;
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    html.navigation-enhanced .main-navigation.mobile-collapsible > .menu-level-1 {
        display: none;
    }
    html.navigation-enhanced .main-navigation.mobile-collapsible.menu-open > .menu-level-1 {
        display: flex;
        margin-top: var(--spacing-sm);
    }
    .footer-columns,
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .feature-grid { grid-template-columns: minmax(0, 1fr); }
    .widget-image-text { grid-template-columns: minmax(0, 1fr); }
    .widget-image-text.image-right .image-text-media { order: 0; }
    .widget-hero { padding: var(--spacing-xl) var(--spacing-md); }
    .top-bar { align-items: flex-start; flex-direction: column; }
    .top-navigation ul,
    .footer-navigation ul { flex-direction: column; }
}