/* === Generic Reset === */
:root {
    --boxed-layout-width: 1200px;
}

.layout-boxed {
    min-height: 100vh;
    background-repeat: repeat;
    background-position: top left;
}

html.theme-layout-boxed {
    min-height: 100%;
    background-color: var(--boxed-layout-bg-color);
    background-attachment: fixed;
}

html.theme-layout-boxed.boxed-bg-type-color {
    background-image: none;
}

html.theme-layout-boxed.boxed-bg-type-gradient {
    background-image: linear-gradient(135deg, var(--boxed-layout-bg-color), var(--primary-color));
    background-repeat: no-repeat;
    background-size: cover;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
    html.theme-layout-boxed.boxed-bg-type-gradient {
        background-image: linear-gradient(
            135deg,
            var(--boxed-layout-bg-color),
            color-mix(in srgb, var(--boxed-layout-bg-color), var(--primary-color) 38%)
        );
    }
}

html.theme-layout-boxed.boxed-bg-type-pattern {
    background-color: var(--boxed-layout-bg-color);
    background-repeat: repeat;
}

/* === No Pattern === */
.bg-pattern-none {
    background: none;
}

/* === Dots Pattern === */
.bg-pattern-dots {
    background-color: var(--boxed-layout-bg-color);
    background-image: radial-gradient(var(--contrast-layout-bg-color) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* === Grid Pattern === */
.bg-pattern-grid {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(var(--contrast-layout-bg-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--contrast-layout-bg-color) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* === Diagonal Stripes Pattern === */
.bg-pattern-diagonal-stripes {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-linear-gradient(45deg, var(--contrast-layout-bg-color), var(--contrast-layout-bg-color) 1px, transparent 1px, transparent 10px);
}

/* === Vertical Stripes Pattern === */
.bg-pattern-vertical-stripes {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-linear-gradient(90deg, var(--contrast-layout-bg-color), var(--contrast-layout-bg-color) 1px, transparent 1px, transparent 10px);
}

/* === Horizontal Lines Pattern === */
.bg-pattern-horizontal-lines {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-linear-gradient(180deg, var(--contrast-layout-bg-color), var(--contrast-layout-bg-color) 1px, transparent 1px, transparent 10px);
}

/* === Crosshatch Pattern === */
.bg-pattern-crosshatch {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-linear-gradient(0deg, var(--contrast-layout-bg-color), var(--contrast-layout-bg-color) 1px, transparent 1px, transparent 10px),
        repeating-linear-gradient(90deg, var(--contrast-layout-bg-color), var(--contrast-layout-bg-color) 1px, transparent 1px, transparent 10px);
}

/* === Zigzag Pattern === */
.bg-pattern-zigzag {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(135deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(225deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(45deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(315deg, var(--contrast-layout-bg-color) 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* === Waves Pattern === */
.bg-pattern-waves {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-radial-gradient(circle at 0 0, var(--contrast-layout-bg-color), var(--contrast-layout-bg-color) 1px, transparent 1px, transparent 30px);
}

/* === Noise Texture (Image-based) === */
.bg-pattern-noise {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        radial-gradient(var(--contrast-layout-bg-color) 0.7px, transparent 0.7px),
        radial-gradient(var(--contrast-layout-bg-color) 0.7px, transparent 0.7px);
    background-position: 0 0, 7px 7px;
    background-size: 14px 14px;
}

/* === Paper Texture (Image-based) === */
.bg-pattern-paper {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--contrast-layout-bg-color), transparent 72%) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--contrast-layout-bg-color), transparent 82%) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* === Fabric Texture (Image-based) === */
.bg-pattern-fabric {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--contrast-layout-bg-color), transparent 78%) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, color-mix(in srgb, var(--contrast-layout-bg-color), transparent 84%) 0 1px, transparent 1px 6px);
}

.bg-pattern-hexagons {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        radial-gradient(circle farthest-side at 0 50%, transparent 9px, var(--contrast-layout-bg-color) 10px 11px, transparent 12px),
        radial-gradient(circle farthest-side at 100% 50%, transparent 9px, var(--contrast-layout-bg-color) 10px 11px, transparent 12px);
    background-size: 28px 24px;
}

.bg-pattern-chevron {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(135deg, var(--contrast-layout-bg-color) 12px, transparent 12px),
        linear-gradient(225deg, var(--contrast-layout-bg-color) 12px, transparent 12px);
    background-size: 28px 28px;
    background-position: 0 0, 14px 0;
}

.bg-pattern-triangles {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(60deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(300deg, var(--contrast-layout-bg-color) 25%, transparent 25%);
    background-size: 28px 28px;
}

.bg-pattern-plaid {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 12px, var(--contrast-layout-bg-color) 12px 14px),
        repeating-linear-gradient(90deg, transparent 0 12px, var(--contrast-layout-bg-color) 12px 14px);
}

.bg-pattern-cubes {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(30deg, var(--contrast-layout-bg-color) 12%, transparent 12.5%, transparent 87%, var(--contrast-layout-bg-color) 87.5%, var(--contrast-layout-bg-color)),
        linear-gradient(150deg, var(--contrast-layout-bg-color) 12%, transparent 12.5%, transparent 87%, var(--contrast-layout-bg-color) 87.5%, var(--contrast-layout-bg-color)),
        linear-gradient(30deg, var(--contrast-layout-bg-color) 12%, transparent 12.5%, transparent 87%, var(--contrast-layout-bg-color) 87.5%, var(--contrast-layout-bg-color)),
        linear-gradient(150deg, var(--contrast-layout-bg-color) 12%, transparent 12.5%, transparent 87%, var(--contrast-layout-bg-color) 87.5%, var(--contrast-layout-bg-color));
    background-size: 32px 56px;
    background-position: 0 0, 0 0, 16px 28px, 16px 28px;
}

.bg-pattern-geometric {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        linear-gradient(45deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(-45deg, var(--contrast-layout-bg-color) 25%, transparent 25%);
    background-size: 24px 24px;
}

.bg-pattern-abstract {
    background-color: var(--boxed-layout-bg-color);
    background-image:
        radial-gradient(circle at 20% 30%, var(--contrast-layout-bg-color) 0 8%, transparent 9%),
        radial-gradient(circle at 80% 70%, var(--contrast-layout-bg-color) 0 10%, transparent 11%),
        linear-gradient(135deg, transparent 0 45%, var(--contrast-layout-bg-color) 46% 48%, transparent 49%);
    background-size: 42px 42px;
}

.btn-facebook   { background-color: #3b5998 !important; }
.btn-twitter    { background-color: #1da1f2 !important; }
.btn-instagram  { background-color: #e4405f !important; }
.btn-linkedin   { background-color: #0077b5 !important; }
.btn-youtube    { background-color: #ff0000 !important; }

.theme-base-inner-banner {
    align-items: center;
    background-color: var(--secondary-color, #0055aa);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    min-height: 220px;
    padding: 56px 0;
    position: relative;
    text-align: center;
}

.theme-base-inner-banner::before {
    background: rgba(0, 0, 0, 0.42);
    content: "";
    inset: 0;
    position: absolute;
}

.theme-base-inner-banner .container {
    position: relative;
    z-index: 1;
}

.theme-base-inner-banner h1 {
    color: inherit;
    font-family: var(--header-font-family, inherit);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}