/**
 * Native Default Theme Styles
 * Version: 1.0.0
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --color-primary: #3b82f6;
    --color-secondary: #64748b;
    --color-accent: #f59e0b;
    --color-background: #ffffff;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-link: #3b82f6;
    --color-link-hover: #2563eb;
    --color-border: #e2e8f0;
    --color-light-bg: #f8fafc;

    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --container-width: 1200px;
    --container-padding: 1.5rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Base Styles
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--color-link, var(--color-primary));
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-link-hover, #2563eb);
}

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

/* ========================================
   Container
   ======================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ========================================
   Header
   ======================================== */
.site-header {
    background: var(--header-bg, var(--color-background));
    border-bottom: 1px solid var(--header-border, var(--color-border));
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Header wrapper — groups topbar + header; sticky lives here */
.header-wrapper {
    position: relative;
    z-index: 100;
}

/* Sticky: entire wrapper sticks (topbar + header) */
.header-wrapper--sticky {
    position: sticky;
    top: 0;
}

.header-wrapper--sticky.scrolled .site-header,
.site-header.site-header--sticky.scrolled {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* Topbar transition for scroll-transparency */
.header-topbar {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height, 3.5rem);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 1rem;
}

.site-branding {
    flex-shrink: 0;
}

.site-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--header-logo-color, var(--color-text));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.site-logo:hover {
    color: var(--header-link-hover, var(--color-primary));
}

.site-logo--image {
    display: inline-flex;
    align-items: center;
}

.header-logo-img {
    display: block;
    height: auto;
    object-fit: contain;
}

.site-tagline {
    font-size: 0.875rem;
    color: var(--header-text, var(--color-text-light));
    margin: 0.125rem 0 0;
    font-weight: 400;
}

/* Navigation */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: var(--header-link, var(--color-text));
    font-weight: 500;
    padding: 0.5rem 0;
    display: block;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-menu a:hover {
    color: var(--header-link-hover, var(--color-primary));
}

/* Header CTA Button */
.header-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md, 0.375rem);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-left: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-cta--primary {
    background: var(--color-primary, #2563eb);
    color: #fff;
}

.header-cta--primary:hover {
    opacity: 0.9;
}

.header-cta--secondary {
    background: var(--header-bg, var(--color-background));
    color: var(--header-link, var(--color-text));
    border: 1px solid var(--header-border, var(--color-border));
}

.header-cta--secondary:hover {
    background: var(--color-surface, #f9fafb);
}

.header-cta--outline {
    background: transparent;
    color: var(--header-link, var(--color-text));
    border: 2px solid currentColor;
}

.header-cta--outline:hover {
    background: var(--header-link, var(--color-text));
    color: var(--header-bg, var(--color-background));
}

/* Header Search Toggle */
.header-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--header-link, var(--color-text));
    padding: 0.375rem;
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.header-search-toggle:hover {
    color: var(--header-link-hover, var(--color-primary));
}

/* Search Overlay */
.header-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.header-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.header-search-overlay-inner {
    position: relative;
    width: 90%;
    max-width: 640px;
}

.header-search-form {
    display: flex;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.header-search-input {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    border: none;
    outline: none;
    background: transparent;
    color: #1f2937;
}

.header-search-input::placeholder {
    color: #9ca3af;
}

.header-search-submit {
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.header-search-submit:hover {
    color: var(--color-primary, #2563eb);
}

.header-search-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem;
    transition: color 0.15s ease;
}

.header-search-close:hover {
    color: #fff;
}

/* Header Top Bar (above main header) */
.header-topbar {
    position: relative;
    z-index: 101;
    line-height: 1.4;
}

.header-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.header-topbar .header-widget {
    color: var(--topbar-text, #e2e8f0);
    font-size: inherit;
}

.header-topbar .header-widget-text {
    color: var(--topbar-text, #e2e8f0);
}

.header-topbar .header-widget-contact,
.header-topbar .header-widget-menu a,
.header-topbar .header-social-link,
.header-topbar .header-widget-link {
    color: var(--topbar-link, #93c5fd);
}

.header-topbar .header-widget-contact:hover,
.header-topbar .header-widget-menu a:hover,
.header-topbar .header-social-link:hover,
.header-topbar .header-widget-link:hover {
    color: var(--topbar-link-hover, #ffffff);
}

.header-topbar .header-widget-hours,
.header-topbar .header-widget-address {
    color: var(--topbar-text, #e2e8f0);
}

.header-topbar .header-widget-btn--primary {
    background: var(--topbar-link, #93c5fd);
    color: var(--topbar-bg, #1e293b);
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}

.header-topbar .header-widget-btn--outline {
    border-color: var(--topbar-link, #93c5fd);
    color: var(--topbar-link, #93c5fd);
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}

.header-topbar .header-widget-btn--outline:hover {
    background: var(--topbar-link, #93c5fd);
    color: var(--topbar-bg, #1e293b);
}

@media (max-width: 767px) {
    .header-topbar-inner {
        justify-content: center !important;
        gap: 0.5rem;
        font-size: 11px;
    }

    .header-topbar .header-widget {
        font-size: 11px;
    }
}

/* Header Widgets */
.header-widgets {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.header-widget {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--header-text, var(--color-text));
}

.header-widget-text {
    color: var(--header-text, var(--color-text));
}

.header-widget-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--header-link, var(--color-text));
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 0.15s ease;
    margin-right: 0.75rem;
}

.header-widget-contact:hover {
    color: var(--header-link-hover, var(--color-primary));
}

.header-social-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-link, var(--color-text));
    transition: color 0.15s ease;
}

.header-social-link:hover {
    color: var(--header-link-hover, var(--color-primary));
}

.header-social-link svg {
    width: 18px;
    height: 18px;
}

/* Header widget: address */
.header-widget-address {
    text-decoration: none;
    cursor: default;
}

/* Header widget: nav_menu */
.header-widget-nav {
    display: inline-flex;
}

.header-widget-menu {
    list-style: none;
    display: flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.header-widget-menu a {
    color: var(--header-link, var(--color-text));
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 0.15s ease;
}

.header-widget-menu a:hover {
    color: var(--header-link-hover, var(--color-primary));
}

/* Header widget: button */
.header-widget-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.header-widget-btn--primary {
    background: var(--color-primary, #2563eb);
    color: #fff;
}

.header-widget-btn--primary:hover {
    opacity: 0.9;
}

.header-widget-btn--secondary {
    background: var(--header-text, #1f2937);
    color: var(--header-bg, #fff);
}

.header-widget-btn--secondary:hover {
    opacity: 0.9;
}

.header-widget-btn--outline {
    background: transparent;
    border: 1.5px solid var(--header-link, #1f2937);
    color: var(--header-link, #1f2937);
}

.header-widget-btn--outline:hover {
    background: var(--header-link, #1f2937);
    color: var(--header-bg, #fff);
}

.header-widget-link {
    color: var(--header-link, var(--color-text));
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.header-widget-link:hover {
    color: var(--header-link-hover, var(--color-primary));
    text-decoration: underline;
}

/* Header widget: opening hours */
.header-widget-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--header-text, var(--color-text));
    font-size: 0.8125rem;
}

.header-widget-hours svg {
    flex-shrink: 0;
}

/* Layout variants */
.site-header--centered .header-inner {
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.site-header--centered .main-navigation {
    justify-content: center;
}

/* Submenu */
.nav-menu-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
}

.nav-menu li:hover>.nav-menu-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu-sub a {
    padding: 0.5rem 1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--header-text, var(--color-text));
    transition: all 0.2s;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--header-mobile-bg, var(--header-bg, var(--color-background)));
        border-bottom: 1px solid var(--header-border, var(--color-border));
        display: none;
    }

    .main-navigation.active {
        display: block;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: 1rem;
    }

    .nav-menu a {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--header-border, var(--color-border));
        color: var(--header-mobile-text, var(--header-link, var(--color-text)));
    }
}

/* ========================================
   Main Content
   ======================================== */
.site-main {
    min-height: calc(100vh - 8rem);
}

/* ========================================
   Sections
   ======================================== */
.ikb-section {
    padding: 2rem 0;
}

.ikb-section-hero {
    background: linear-gradient(135deg, var(--color-primary), #1d4ed8);
    color: white;
    padding: 4rem 0;
}

.ikb-section-hero h1,
.ikb-section-hero h2 {
    color: white;
}

/* ========================================
   Cards
   ======================================== */
.ikb-card {
    background: var(--color-background);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ikb-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.ikb-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.ikb-card-title {
    margin: 0 0 0.5rem;
}

.ikb-card-title a {
    color: var(--color-text);
}

.ikb-card-title a:hover {
    color: var(--color-primary);
}

.card-excerpt {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.card-meta {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 1rem;
}

/* ========================================
   Posts
   ======================================== */
.post-header {
    margin-bottom: 2rem;
}

.post-title {
    margin-bottom: 0.5rem;
}

.post-meta {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.post-meta span {
    margin-right: 1rem;
}

.post-featured-image {
    margin: 0 0 2rem;
}

.post-featured-image img {
    border-radius: var(--radius-lg);
}

.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.post-content h2 {
    margin-top: 2rem;
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content img {
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

.post-tags {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.post-tags .tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-light-bg);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ========================================
   Breadcrumbs
   ======================================== */
.native-breadcrumbs {
    padding: 1rem 0;
    font-size: 0.9rem;
}

.native-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.native-breadcrumbs li {
    display: flex;
    align-items: center;
}

.native-breadcrumbs a {
    color: var(--color-text-light);
}

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

.native-breadcrumbs .separator {
    margin: 0 0.25rem;
    color: var(--color-text-light);
}

/* ========================================
   Pagination
   ======================================== */
.native-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.native-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}

.native-pagination li {
    display: inline-block;
}

.native-pagination a,
.native-pagination span {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.native-pagination a:hover {
    background: var(--color-light-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.native-pagination .current span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ========================================
   Search
   ======================================== */
.native-search {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
}

.native-search input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.native-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.native-search button {
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.native-search button:hover {
    background: #2563eb;
}

/* ========================================
   Buttons
   ======================================== */
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.button-primary {
    background: var(--color-primary);
    color: white;
    border: none;
}

.button-primary:hover {
    background: #2563eb;
    color: white;
}

.button-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.button-secondary:hover {
    background: var(--color-primary);
    color: white;
}

.view-all {
    text-align: center;
    margin-top: 2rem;
}

/* ========================================
   404 Page
   ======================================== */
.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    line-height: 1;
}

.error-title {
    font-size: 2rem;
    margin: 1rem 0;
}

.error-message {
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.error-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* ========================================
   Footer
   ======================================== */
.site-footer {
    background: var(--footer-bg, var(--color-text));
    color: var(--footer-text, white);
    margin-top: auto;
}

.footer-widgets {
    /* padding set via inline style from customizer, fallback here */
    padding: 2.5rem 0 2rem;
}

.footer-widgets .container {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 1.5rem);
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-widgets-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.footer-widgets-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.footer-widgets-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.footer-widgets-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.footer-widgets-grid[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.footer-widget-col {
    min-width: 0;
}

.footer-widget-col .widget {
    margin-bottom: 1.5rem;
}

.footer-widget-col .widget-title,
.footer-widget h4 {
    color: var(--footer-title-color, var(--footer-text, white));
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-widget-col .widget-content,
.footer-widget p {
    color: var(--footer-text, #94a3b8);
    font-size: 0.875rem;
    line-height: 1.7;
}

.footer-widget-col .widget-content a {
    color: var(--footer-link, #94a3b8);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-widget-col .widget-content a:hover {
    color: var(--footer-link-hover, white);
}

.footer-widget-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-widget-col li {
    margin-bottom: 0.5rem;
}

.footer-widget-col li a {
    color: var(--footer-link, #94a3b8);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-widget-col li a:hover {
    color: var(--footer-link-hover, white);
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 0.5rem;
}

.footer-menu a {
    color: var(--footer-link, #94a3b8);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-menu a:hover {
    color: var(--footer-link-hover, white);
}

.social-links {
    margin-top: 0.5rem;
}

.social-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.social-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--footer-link, #94a3b8);
    transition: all 0.15s ease;
}

.social-menu a:hover {
    background: var(--color-primary, #3b82f6);
    color: #fff;
}

.contact-info {
    font-size: 0.875rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--footer-link, #94a3b8);
}

.contact-item .icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-item a {
    color: var(--footer-link, #94a3b8);
    text-decoration: none;
    transition: color 0.15s ease;
}

.contact-item a:hover {
    color: var(--footer-link-hover, white);
}

.footer-bottom {
    text-align: center;
    margin-top: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--footer-text, #64748b);
    font-size: 0.875rem;
}

.footer-bottom .container {
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 1.5rem);
}

.footer-bottom a {
    color: var(--footer-link, #94a3b8);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-bottom a:hover {
    color: var(--footer-link-hover, white);
}

/* Footer responsive */
@media (max-width: 991px) {

    .footer-widgets-grid[data-columns="4"],
    .footer-widgets-grid[data-columns="5"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .footer-widgets-grid,
    .footer-widgets-grid[data-columns="2"],
    .footer-widgets-grid[data-columns="3"],
    .footer-widgets-grid[data-columns="4"],
    .footer-widgets-grid[data-columns="5"] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .ikb-block {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .ikb-block {
        grid-template-columns: 1fr !important;
    }

    .error-code {
        font-size: 5rem;
    }
}

/* ===========================================
   Page Builder Node Styles
   =========================================== */
.cms-builder-fullwidth {
    width: 100%;
}

.cms-builder-document {
    width: 100%;
    line-height: 1.6;
    color: var(--color-text, #222);
    font-family: var(--font-body, 'Inter', sans-serif);
}

.cms-builder-document *,
.cms-builder-document *::before,
.cms-builder-document *::after {
    box-sizing: border-box;
}

.cms-builder-node {
    position: relative;
}

.cms-builder-node img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cms-builder-node--section {
    width: 100%;
}

/* Only apply width:100% to containers that are direct section children (page-width wrappers).
   Containers nested inside flex/grid parents must auto-size to participate correctly in layout. */
.cms-builder-node--section>.cms-builder-node--container {
    width: 100%;
}

.cms-builder-node--row {
    width: 100%;
}

.cms-builder-node--column {
    min-width: 0;
}

.cms-builder-node--heading h1,
.cms-builder-node--heading h2,
.cms-builder-node--heading h3,
.cms-builder-node--heading h4,
.cms-builder-node--heading h5,
.cms-builder-node--heading h6 {
    margin: 0;
    line-height: 1.3;
}

.cms-builder-node--text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cms-builder-node--text p:last-child {
    margin-bottom: 0;
}

.cms-builder-node--button a {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cms-builder-node--button a:hover {
    opacity: 0.85;
}

.cms-builder-node--divider hr {
    border: none;
    border-top-style: solid;
}

.cms-builder-node--spacer {
    display: block;
}

.cms-builder-node--image {
    display: block;
    margin: 0;
    padding: 0;
}

.cms-builder-node--embed {
    margin: 0;
}

.cms-builder-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.cms-builder-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-builder-node--quote {
    margin: 0;
}

.cms-builder-node--quote blockquote {
    border-left: 4px solid var(--color-primary, #3b82f6);
    padding: 0.75rem 1.25rem;
    margin: 0;
    background: var(--color-light-bg, #f8f9fa);
    border-radius: 0 0.375rem 0.375rem 0;
}

.cms-builder-node--list ul,
.cms-builder-node--list ol {
    padding-left: 1.5rem;
    margin: 0;
}

.cms-builder-node--list li {
    margin-bottom: 0.35rem;
}

.cms-builder-node--html {
    overflow: hidden;
}

.cms-builder-node--slideshow {
    position: relative;
    overflow: hidden;
}

/* Slide visibility is managed by inline styles & JS; no display:none override */
.cms-builder-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Ken Burns: initial scale for smooth pan animation */
.cms-kb-img {
    transform: scale(1);
    transition: transform 8s ease-in-out;
}

.cms-builder-node--posts_list {
    width: 100%;
}

.cms-builder-node--posts_grid {
    width: 100%;
}

.cms-builder-node--dynamic_field {
    display: inline;
}

.cms-builder-accordion-item {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.375rem;
    overflow: hidden;
}

.cms-builder-accordion-header {
    cursor: pointer;
    user-select: none;
}

.cms-builder-accordion-body {
    display: none;
}

.cms-builder-accordion-item[open] .cms-builder-accordion-body {
    display: block;
}

.cms-builder-tab-panel {
    display: none;
}

.cms-builder-tab-panel.active {
    display: block;
}

.cms-builder-tab-btn.active {
    border-bottom: 2px solid var(--color-primary, #3b82f6);
}

.cms-builder-alert {
    border-radius: 0.5rem;
}

.cms-builder-node--table table {
    border-collapse: collapse;
    width: 100%;
}

.cms-builder-node--table th,
.cms-builder-node--table td {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border, #e5e7eb);
    text-align: left;
}

.cms-builder-node--table th {
    background: var(--color-surface, #f9fafb);
    font-weight: 600;
}

.cms-builder-form input,
.cms-builder-form textarea,
.cms-builder-form select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

.cms-builder-gallery {
    display: grid;
    gap: 0.5rem;
}

.cms-builder-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.cms-builder-map iframe {
    border: 0;
    border-radius: 0.375rem;
}

.cms-builder-node--code_block pre {
    border-radius: 0.5rem;
    overflow-x: auto;
}

/* ─── Layout box-sizing reset ─────────────────────────────────────────── */
.cms-builder-node {
    box-sizing: border-box;
}

.cms-builder-node--section,
.cms-builder-node--container,
.cms-builder-node--row,
.cms-builder-node--column {
    box-sizing: border-box;
}

.cms-builder-node--image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}

/* ─── Builder Button Variants ─────────────────────────────────────────── */
.cms-builder-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.cms-builder-button:hover {
    opacity: 0.9;
}

.cms-builder-button--primary {
    background: var(--color-primary, #3b82f6);
    color: #fff;
}

.cms-builder-button--primary:hover {
    filter: brightness(1.1);
}

.cms-builder-button--secondary {
    background: var(--color-secondary, #64748b);
    color: #fff;
}

.cms-builder-button--secondary:hover {
    filter: brightness(1.1);
}

.cms-builder-button--outline {
    background: transparent;
    border: 2px solid currentColor;
    color: var(--color-primary, #3b82f6);
}

.cms-builder-button--outline:hover {
    background: var(--color-primary, #3b82f6);
    color: #fff;
}

.cms-builder-button--ghost {
    background: transparent;
    color: var(--color-primary, #3b82f6);
}

.cms-builder-button--ghost:hover {
    background: var(--color-light-bg, #f8fafc);
}

.cms-builder-button--small {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.cms-builder-button--medium {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}

.cms-builder-button--large {
    padding: 0.875rem 1.75rem;
    font-size: 1.0625rem;
}

/* ─── Flip Box ────────────────────────────────────────────────────────── */
.cms-builder-node--flip_box {
    perspective: 1000px;
    cursor: pointer;
}

.cms-builder-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.cms-builder-node--flip_box:hover .cms-builder-flip-inner,
.cms-builder-node--flip_box.flipped .cms-builder-flip-inner {
    transform: rotateY(180deg);
}

.cms-builder-flip-front,
.cms-builder-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-builder-flip-back {
    transform: rotateY(180deg);
}

/* ─── Entrance Animations ─────────────────────────────────────────────── */
[data-animate] {
    opacity: 0;
    transition: opacity var(--cms-animation-duration, 0.6s) ease,
        transform var(--cms-animation-duration, 0.6s) ease;
    transition-delay: var(--cms-animation-delay, 0s);
}

[data-animate].cms-animated {
    opacity: 1;
    transform: none !important;
}

[data-animate="fadeIn"] {
    opacity: 0;
}

[data-animate="fadeInUp"] {
    opacity: 0;
    transform: translateY(30px);
}

[data-animate="fadeInDown"] {
    opacity: 0;
    transform: translateY(-30px);
}

[data-animate="fadeInLeft"] {
    opacity: 0;
    transform: translateX(-30px);
}

[data-animate="fadeInRight"] {
    opacity: 0;
    transform: translateX(30px);
}

[data-animate="zoomIn"] {
    opacity: 0;
    transform: scale(0.85);
}

[data-animate="slideInUp"] {
    opacity: 0;
    transform: translateY(60px);
}

[data-animate="slideInDown"] {
    opacity: 0;
    transform: translateY(-60px);
}

[data-animate="slideInLeft"] {
    opacity: 0;
    transform: translateX(-60px);
}

[data-animate="slideInRight"] {
    opacity: 0;
    transform: translateX(60px);
}

[data-animate="bounceIn"] {
    opacity: 0;
    transform: scale(0.7);
}

[data-animate="bounceIn"].cms-animated {
    animation: cms-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes cms-bounce-in {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

[data-animate="flipInX"] {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}

[data-animate="flipInY"] {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}

[data-animate="rotateIn"] {
    opacity: 0;
    transform: rotate(-120deg);
}

/* ─── Hover Animations ────────────────────────────────────────────────── */
[data-hover-animate="grow"] {
    transition: transform 0.3s ease;
}

[data-hover-animate="grow"]:hover {
    transform: scale(1.05);
}

[data-hover-animate="shrink"] {
    transition: transform 0.3s ease;
}

[data-hover-animate="shrink"]:hover {
    transform: scale(0.95);
}

[data-hover-animate="lift"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-hover-animate="lift"]:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

[data-hover-animate="float"] {
    transition: transform 0.3s ease;
}

[data-hover-animate="float"]:hover {
    transform: translateY(-5px);
}

[data-hover-animate="pulse"] {
    transition: transform 0.15s ease;
}

[data-hover-animate="pulse"]:hover {
    animation: cms-pulse-animation 0.4s ease;
}

@keyframes cms-pulse-animation {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08);
    }

    50% {
        transform: scale(0.95);
    }

    75% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

[data-hover-animate="bob"] {
    transition: transform 0.15s ease;
}

[data-hover-animate="bob"]:hover {
    animation: cms-bob-animation 0.5s ease-in-out infinite;
}

@keyframes cms-bob-animation {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

[data-hover-animate="shake"] {
    transition: transform 0.15s ease;
}

[data-hover-animate="shake"]:hover {
    animation: cms-shake-animation 0.5s ease-in-out;
}

@keyframes cms-shake-animation {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

[data-hover-animate="glow"] {
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}

[data-hover-animate="glow"]:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(100, 100, 255, 0.3);
    filter: brightness(1.1);
}

[data-hover-animate="shadow"] {
    transition: box-shadow 0.3s ease;
}

[data-hover-animate="shadow"]:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-hover-animate="shadowGrow"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-hover-animate="shadowGrow"]:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* ─── Responsive Visibility ──────────────────────────────────────────── */
.cms-builder-visible--desktop-only {
    display: inherit;
}

.cms-builder-visible--mobile-only {
    display: none;
}

.cms-builder-visible--tablet-only {
    display: none;
}

.cms-builder-visible--desktop-tablet {
    display: inherit;
}

.cms-builder-visible--tablet-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .cms-builder-node--row {
        flex-wrap: wrap !important;
    }

    .cms-builder-node--row>.cms-builder-node--column {
        min-width: 0 !important;
    }

    /* Grid widgets: reduce to 2 columns on tablet */
    .cms-builder-node--gallery>div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cms-builder-node--posts_grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cms-builder-node--products_grid>div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cms-builder-node--team_grid>div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cms-builder-node--logo_grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .cms-builder-visible--desktop-only {
        display: none !important;
    }

    .cms-builder-visible--tablet-only {
        display: inherit !important;
    }

    .cms-builder-visible--desktop-tablet {
        display: inherit !important;
    }

    .cms-builder-visible--tablet-mobile {
        display: inherit !important;
    }
}

@media (max-width: 640px) {
    .cms-builder-node--row:not([data-mobile-layout="0"]) {
        flex-direction: column !important;
    }

    .cms-builder-node--row:not([data-mobile-layout="0"])>.cms-builder-node--column {
        width: 100% !important;
        flex: none !important;
    }

    .cms-builder-node--container[data-mobile-layout="1"],
    .cms-builder-node--layout_container[data-mobile-layout="1"] {
        flex-direction: column !important;
    }

    .cms-builder-node--container[data-mobile-layout="1"]>.cms-builder-node--container,
    .cms-builder-node--container[data-mobile-layout="1"]>.cms-builder-node--layout_container,
    .cms-builder-node--layout_container[data-mobile-layout="1"]>.cms-builder-node--container,
    .cms-builder-node--layout_container[data-mobile-layout="1"]>.cms-builder-node--layout_container {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .cms-builder-node--container[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Grid widgets: single column on mobile */
    .cms-builder-node--gallery>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .cms-builder-node--posts_grid {
        grid-template-columns: 1fr !important;
    }

    .cms-builder-node--products_grid>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .cms-builder-node--team_grid>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .cms-builder-node--logo_grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Horizontal flex widgets: stack or wrap on mobile */
    .cms-builder-node--call_to_action {
        flex-direction: column !important;
    }

    .cms-builder-node--countdown {
        flex-wrap: wrap !important;
    }

    .cms-builder-node--social_icons {
        flex-wrap: wrap !important;
    }

    .cms-builder-node--flip_box {
        max-width: 100% !important;
    }

    .cms-builder-node--search_box {
        flex-wrap: wrap !important;
    }

    .cms-builder-visible--desktop-only {
        display: none !important;
    }

    .cms-builder-visible--tablet-only {
        display: none !important;
    }

    .cms-builder-visible--mobile-only {
        display: inherit !important;
    }

    .cms-builder-visible--desktop-tablet {
        display: none !important;
    }

    .cms-builder-visible--tablet-mobile {
        display: inherit !important;
    }
}