/**
 * Loaded after Tailwind CDN in layouts/frontend/frontend.blade.php.
 *
 * 1) .container — Tailwind’s .container was overriding Bootstrap + theme (1240px @ ≥1000px).
 * 2) Header / subheader — If Tailwind preflight is on, it sets h1–h6 to font-size:inherit and
 *    shrinks nav; we also disable preflight in frontend.blade.php. These rules back up Playhost.
 */

@media (min-width: 1000px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1240px !important;
    }
}

/* Header row: logo, #mainmenu, cart + Shop Now aligned on one vertical center (matches Playhost _template) */
header.transparent .de-flex.sm-pt10 {
    align-items: center;
}

header.transparent .de-flex > .de-flex-col {
    display: flex;
    align-items: center;
}

header.transparent .menu_side_area.ecom-header-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}

header.transparent .menu_side_area .ecom-shop-now-btn {
    margin-top: 0 !important;
}

/* Primary nav: style.css uses 14.5px — ensure it wins over any base reset */
header.transparent #mainmenu {
    font-size: 14.5px;
}

/* Jarallax subheader (About, etc.): restore Playhost h2 scale when preflight affected headings */
#subheader h2 {
    font-size: 52px;
    font-weight: bold;
    line-height: 1.1em;
    letter-spacing: -0.025em;
}

/*
 * Images — Tailwind preflight (when active) sets img { max-width: 100%; height: auto; } for all
 * images. That can break Playhost layouts that rely on percentage widths, absolute stacking
 * (.images-deco-1), or jarallax full-bleed background imgs. Preflight is disabled in
 * frontend.blade.php; these rules back that up and keep .img-fluid responsive.
 */
#wrapper .images-deco-1 img.d-img-1,
#wrapper .images-deco-1 img.d-img-2 {
    max-width: none;
}

#wrapper .jarallax .jarallax-img {
    max-width: none;
}

/* Overlaid decorative imgs (e.g. avatar on CTA strip) — not fluid-filled */
#wrapper .jarallax.position-relative > img.position-absolute:not(.jarallax-img) {
    max-width: none;
}

#wrapper .img-fluid {
    max-width: 100%;
    height: auto;
}