/**
 * WebCreator Theme - Base Stylesheet
 * 
 * This is the base theme CSS with CSS custom properties for easy theming
 * Color variants override these variables
 * 
 * @package WebCreator\Client\Theme
 * @version 5.0.0
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Colors - Primary (Clean Green / Nature) */
    --color-primary: #27ae60;
    --color-primary-dark: #219150;
    --color-primary-light: #a9dfbf;
    --color-primary-50: rgba(39, 174, 96, 0.1);

    /* ... */

    /* Colors - Neutral */
    --color-text: #1F2937;
    --color-text-muted: #6B7280;
    --color-text-light: #9CA3AF;
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-bg-tertiary: #F3F4F6;
    --color-border: #E5E7EB;
    --color-border-dark: #D1D5DB;

    /* Colors - Semantic */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: var(--font-family);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Layout */
    --container-max: 1200px;
    --header-height: 70px;
}

/* ============================================
   CSS Reset
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

/* ============================================
   Accessibility
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-primary);
    color: white;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Layout
   ============================================ */
.main-wrapper {
    min-height: calc(100vh - var(--header-height) - 200px);
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

/* Blog and shop pages bring no container of their own */
.blog-page,
.blog-post,
.shop-container,
.product-detail,
.cart-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
}

.shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spacing-4);
}

.shop-filters .filter-group {
    flex: 1 1 200px;
}

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

.header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-2) var(--spacing-4);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 var(--spacing-3);
        gap: var(--spacing-2);
    }

    .site-logo {
        font-size: var(--font-size-lg);
        /* Slightly smaller logo */
    }
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xl);
    font-weight: 800;
    /* Bolder */
    color: var(--color-primary);
    /* Primary color */
    letter-spacing: -0.5px;
    font-family: var(--font-family-heading);
    white-space: nowrap;
    flex-shrink: 0;
}

.site-logo .site-name {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-logo img {
    height: 40px;
    width: auto;
}

/* Shop Filters */
.filter-group {
    margin-bottom: var(--spacing-4);
}

.filter-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    transition: all var(--transition-fast);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.main-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* A long menu wraps onto a second row instead of running off the page */
.nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--spacing-6);
}

.nav-menu a {
    color: var(--color-text);
    font-weight: 500;
    padding: var(--spacing-2) 0;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Sub menu: pages nested under a parent page (one level) */
.nav-menu > li {
    position: relative;
}

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 110;
    min-width: 12rem;
    padding: var(--spacing-2) 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--transition-fast);
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.nav-menu .sub-menu a {
    display: block;
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 0;
    white-space: nowrap;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a.active {
    background: var(--color-bg-secondary);
}

@media (max-width: 1100px) {
    .nav-menu {
        column-gap: var(--spacing-4);
    }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    padding: var(--spacing-2);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.hamburger span {
    display: block;
    height: 2px;
    background: var(--color-text);
    transition: all var(--transition-normal);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.cart-link {
    position: relative;
    color: var(--color-text);
    padding: var(--spacing-2);
}

.cart-link:hover {
    color: var(--color-primary);
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile navigation: the menu slides in when the toggle sets .is-open */
@media (max-width: 900px) {
    /* Logo on the left, cart and menu toggle on the right */
    .header-container {
        justify-content: flex-start;
    }

    .site-logo {
        margin-right: auto;
    }

    .header-actions {
        order: 2;
    }

    .mobile-menu-toggle {
        display: block;
        order: 3;
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        display: block;
        padding: var(--spacing-6);
        background: var(--color-bg);
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--transition-normal), visibility 0s linear var(--transition-normal);
    }

    .main-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .nav-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--spacing-2);
    }

    .nav-menu a {
        display: block;
        font-size: var(--font-size-lg);
        padding: var(--spacing-3) 0;
        white-space: normal;
    }

    /* Sub menus are always open in the mobile menu */
    .nav-menu .sub-menu {
        position: static;
        min-width: 0;
        padding: 0 0 0 var(--spacing-4);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-menu .sub-menu a {
        padding: var(--spacing-2) 0;
        font-size: var(--font-size-base);
        white-space: normal;
    }

    .nav-menu .sub-menu a:hover,
    .nav-menu .sub-menu a.active {
        background: none;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-16);
}

.footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-4) var(--spacing-8);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.footer-widget h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
    color: var(--color-text);
}

.footer-links li {
    margin-bottom: var(--spacing-2);
}

.footer-links a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.social-links {
    display: flex;
    gap: var(--spacing-3);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--color-primary);
    color: white;
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.copyright {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.payment-methods {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.payment-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-right: var(--spacing-2);
}

.powered-by {
    width: 100%;
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-4);
}

.powered-by a {
    color: inherit;
}

.powered-by a:hover {
    color: var(--color-primary);
}

/* ============================================
   Buttons
   ============================================ */
.btn,
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-border);
}

/* ============================================
   Forms
   ============================================ */
.form-group {
    margin-bottom: var(--spacing-4);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

/* Darken form borders for better visibility */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-3);
    border: 1px solid var(--color-border-dark);
    /* Darker border */
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

/* ============================================
   Contact Page Styles
   ============================================ */
.info-card {
    text-align: center;
    padding: var(--spacing-6);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    height: 100%;
    transition: transform var(--transition-fast);
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-bg-tertiary);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}

.info-icon svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   Blog Layout
   ============================================ */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-8);
    margin: var(--spacing-8) 0;
}

.blog-content {
    min-width: 0;
    /* Prevent grid blowout */
}

.blog-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-6));
    align-self: start;
}

@media (max-width: 900px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
        margin-top: var(--spacing-8);
    }
}

/* Make images responsive */
.post-content img {
    height: auto;
    border-radius: var(--radius-md);
}

/* Mobile Menu Toggle via JavaScript */
.notification-container {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.notification.success {
    border-left: 4px solid var(--color-success);
}

.notification.error {
    border-left: 4px solid var(--color-error);
}

.notification button {
    margin-left: auto;
    padding: var(--spacing-1);
    color: var(--color-text-muted);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb {
    padding: var(--spacing-4) 0;
    font-size: var(--font-size-sm);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: var(--spacing-2);
    color: var(--color-text-light);
}

.breadcrumb a {
    color: var(--color-text-muted);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb [aria-current="page"] {
    color: var(--color-text);
}

/* ============================================
   Loading States
   ============================================ */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    color: var(--color-text-muted);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-3);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Empty States
   ============================================ */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
    color: var(--color-text-muted);
}

.empty-state svg {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-4);
    opacity: 0.5;
}

.empty-state h2,
.empty-state h3 {
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.empty-state p {
    margin-bottom: var(--spacing-6);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile Menu Toggle via JavaScript */
.notification-container {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.notification.success {
    border-left: 4px solid var(--color-success);
}

.notification.error {
    border-left: 4px solid var(--color-error);
}

.notification button {
    margin-left: auto;
    padding: var(--spacing-1);
    color: var(--color-text-muted);
}

/* ============================================
   Buttons
   ============================================ */
.btn,
button,
input[type="submit"],
input[type="button"],
.btn-primary,
.btn-secondary,
.btn-add-cart,
.btn-checkout,
.btn-place-order,
.btn-continue,
.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    line-height: 1.2;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-sm);
    gap: var(--spacing-2);
}

.btn-primary,
button[type="submit"],
.btn-add-cart,
.btn-checkout,
.btn-place-order {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover,
button[type="submit"]:hover,
.btn-add-cart:hover,
.btn-checkout:hover,
.btn-place-order:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary,
.btn-continue {
    background-color: white;
    color: var(--color-text);
    border-color: var(--color-border-dark);
}

.btn-secondary:hover,
.btn-continue:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-text-muted);
}

/* ============================================
   Product Cards
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-8);
    margin: var(--spacing-8) 0;
}

.product-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* Context for absolute positioning if needed */
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.product-card a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-tertiary);
    position: relative;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    /* Ensure it's not inline */
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-info {
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: white;
}

.product-info h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
    font-weight: 600;
    color: var(--color-text);
}

.product-price {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-xl);
    margin-top: auto;
    display: block;
}

/* ============================================
   Theme builder ("Thema & huisstijl")
   This markup (top bar, header button, tagline, header layouts, footer blocks) only exists when the owner has saved
   settings in the builder. The colours, fonts and sizes of those settings come from the block at the very end of the
   stylesheet that WebCreator generates (ThemeStyles); the rules here are the same for every site.
   ============================================ */

/* Top bar */
.topbar {
    background: var(--wc-secondary, var(--color-text));
    color: var(--wc-on-secondary, var(--color-bg));
    font-size: var(--font-size-sm);
}

.topbar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-2) var(--spacing-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-1) var(--spacing-6);
}

.topbar-text {
    margin: 0;
}

.topbar-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1) var(--spacing-5);
    margin: 0 0 0 auto;
    padding: 0;
}

.topbar a {
    color: inherit;
}

.topbar a:hover {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .topbar-inner {
        justify-content: center;
        text-align: center;
    }

    .topbar-contact {
        justify-content: center;
        margin-left: 0;
    }
}

/* Header: not sticky, the logo and its slogan, the button */
.site-header.is-static {
    position: static;
}

.site-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.site-logo img + .site-logo-text {
    margin-left: var(--spacing-3);
}

.site-tagline {
    max-width: 24rem;
    white-space: normal;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.site-tagline:empty {
    display: none;
}

.header-cta {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.nav-cta-item {
    display: none;
}

/* Header layouts: only on a wide screen, the mobile header is the same for all of them */
@media (min-width: 901px) {
    .header-layout-centered .header-container {
        justify-content: center;
    }

    .header-layout-centered .main-nav {
        flex: 0 1 auto;
    }

    .header-layout-logo-above .header-container {
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--spacing-1);
        padding-top: var(--spacing-3);
    }

    .header-layout-logo-above .site-logo {
        flex: 0 0 100%;
        justify-content: center;
    }

    .header-layout-logo-above .main-nav {
        flex: 1 1 100%;
    }

    .header-layout-logo-above .header-actions {
        position: absolute;
        top: var(--spacing-3);
        right: var(--spacing-4);
    }
}

@media (max-width: 900px) {
    /* A logo and a name of the builder must fit next to the menu button, whatever size the owner chose for a computer */
    [class*="header-layout-"] .site-logo {
        min-width: 0;
        flex-shrink: 1;
    }

    [class*="header-layout-"] .site-logo img {
        width: auto;
        height: auto;
        max-height: 44px;
        max-width: 55vw;
    }

    [class*="header-layout-"] .site-logo .site-name {
        white-space: normal;
        line-height: 1.15;
    }

    .site-tagline {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .nav-menu .nav-cta-item {
        display: list-item;
        margin-top: var(--spacing-4);
    }

    .nav-menu .nav-cta-item a.header-cta-mobile {
        display: inline-flex;
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--font-size-base);
        color: var(--wc-on-cta, #fff);
        border-bottom: 0;
    }

    .nav-menu .nav-cta-item a.header-cta-mobile:hover {
        color: var(--wc-on-cta, #fff);
    }
}

/* Footer: a fixed number of columns, the contact block, the opening hours */
@media (min-width: 769px) {
    .footer-widgets.footer-cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-widgets.footer-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-widgets.footer-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-widgets.footer-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .footer-widgets.footer-cols-3,
    .footer-widgets.footer-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* (scoped to .footer-about, the about widget of the builder: the footer of a site without settings has an empty
   .footer-contact of its own, which must stay as it was) */
.footer-about p {
    margin: 0 0 var(--spacing-3);
}

.footer-about .footer-contact {
    margin-top: var(--spacing-4);
}

.footer-about .footer-contact p,
.footer-about .footer-contact address {
    margin: 0 0 var(--spacing-2);
    font-style: normal;
    line-height: 1.6;
}

.footer-about .footer-contact a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-about .footer-contact a:hover {
    color: var(--color-primary);
}

.footer-about .footer-legal {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer-hours {
    margin: 0;
    padding: 0;
}

/* The day on the left, the hours on the right; when they do not fit on one line the hours go under the day */
.footer-hours li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--spacing-4);
    padding: 2px 0;
}

.footer-hours .hours-day {
    white-space: nowrap;
}

.footer-hours .hours-time {
    margin-left: auto;
    text-align: right;
}

.footer-hours .hours-range {
    white-space: nowrap;
}

/* The owner can show up to seven social networks: they wrap instead of running off the screen */
.social-links {
    flex-wrap: wrap;
}

.footer-hours .hours-time.is-closed {
    opacity: 0.7;
}

.footer-hours-note {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* Theme: modern-business */
/* Modern Business Theme CSS
 *
 * Appended to the site stylesheet (thema.css) when a site is built. The header,
 * footer and page layout come from the shared site runtime, so this file only
 * contributes colours and typography.
 */
:root {
    --primary: #27ae60;
    --secondary: #2c3e50;
    --light: #f9f9f9;
    --dark: #333;
    --text: #444;
    --radius: 6px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: #fff;
}