/**
 * Leewadee theme — mobile overrides
 */

/* ── Logo: smaller header on mobile ── */
@media (max-width: 639px) {
    #header img {
        max-height: 2.5rem;
        width: auto;
        height: auto;
    }
}

/* ── Header inner bar: reduced padding + no min-height on mobile ──
   Covers the static fallback before Alpine.js initialises.
   The reactive :style binding handles the live state after init. */
@media (max-width: 639px) {
    #header .transition-all {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        min-height: 0 !important;
    }
}

/* ── Hero image: anchor to right side instead of center on mobile ── */
@media (max-width: 639px) {
    .hero-image img {
        object-position: right center;
    }
}

/* ── .columns: reduce horizontal padding from 1.5rem to 1rem on mobile ── */
@media (max-width: 639px) {
    .columns {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── Homepage: no top margin on .page-main so hero sits flush below header ── */
.cms-index-index .page-main {
    margin-top: 0;
}