/* ==========================================================================
   header-footer.css — Styles for synced header/footer from helloagain.com
   All Tailwind utility classes scoped to .ha-synced-header / .ha-synced-footer
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    --ha-gray-800: rgb(38, 45, 53);
    --ha-gray-700: rgb(55, 65, 81);
    --ha-gray-600: rgb(125, 129, 134);
    --ha-gray-200: rgb(230, 232, 235);
    --ha-blue-500: rgb(0, 167, 225);
    --ha-blue-600: rgb(46, 124, 192);
    --ha-blue-100: rgb(204, 237, 249);
    --ha-white: #ffffff;
    --ha-font-heading: 'Nexa', sans-serif;
    --ha-font-body: 'BrutalType', sans-serif;
    --ha-max-site: 1536px;
}

/* ---------- Reset for synced partials ---------- */
.ha-synced-header *,
.ha-synced-footer * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid var(--ha-gray-200);
}

.ha-synced-header hr,
.ha-synced-footer hr {
    border-top-width: 1px;
    color: inherit;
    height: 0;
}

.ha-synced-header img,
.ha-synced-footer img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ha-synced-header a,
.ha-synced-footer a {
    color: inherit;
    text-decoration: none;
}

.ha-synced-header ul,
.ha-synced-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ha-synced-header button,
.ha-synced-footer button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ha-synced-header,
.ha-synced-footer {
    font-family: var(--ha-font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ha-gray-800);
}

/* ---------- Container ---------- */
.ha-synced-header .container,
.ha-synced-footer .container {
    width: 100%;
    max-width: var(--ha-max-site);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .ha-synced-header .container,
    .ha-synced-footer .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 1024px) {
    .ha-synced-header .container,
    .ha-synced-footer .container {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* ---------- Custom Classes ---------- */

/* max-w-site */
.ha-synced-header .max-w-site,
.ha-synced-footer .max-w-site {
    max-width: var(--ha-max-site);
}

/* mx-auto */
.ha-synced-header .mx-auto,
.ha-synced-footer .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ha-nav-button */
.ha-synced-header .ha-nav-button {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.ha-synced-header .ha-nav-button:hover {
    background-color: var(--ha-gray-200);
}

/* typo-h6 */
.ha-synced-header .typo-h6,
.ha-synced-footer .typo-h6 {
    font-family: var(--ha-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* typo-sm */
.ha-synced-header .typo-sm,
.ha-synced-footer .typo-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* typo-xs */
.ha-synced-header .typo-xs,
.ha-synced-footer .typo-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

/* link */
.ha-synced-header .link,
.ha-synced-footer .link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.ha-synced-header .link:hover,
.ha-synced-footer .link:hover {
    color: var(--ha-blue-500);
}

/* form-select-lang */
.ha-synced-header .form-select-lang {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--ha-gray-200);
    border-radius: 0.5rem;
    padding: 0.375rem 1.5rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.3c-.2 0-.3-.1-.5-.2L2.2 5.8c-.2-.3-.2-.7 0-.9.3-.3.7-.3.9 0L8 9.7l4.9-4.9c.3-.3.7-.3.9 0 .3.3.3.7 0 .9L8.5 11c-.2.2-.3.3-.5.3z' fill='rgb(38,45,53)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 1rem;
}

/* shadow-main */
.ha-synced-header .shadow-main,
.ha-synced-footer .shadow-main {
    box-shadow: 0 4px 24px rgba(38, 45, 53, 0.08);
}

/* iconify base */
.ha-synced-header .iconify,
.ha-synced-footer .iconify {
    display: inline-block;
    vertical-align: middle;
}

/* ---------- Layout Utilities ---------- */

.ha-synced-header .fixed,
.ha-synced-footer .fixed { position: fixed; }

.ha-synced-header .relative,
.ha-synced-footer .relative { position: relative; }

.ha-synced-header .absolute,
.ha-synced-footer .absolute { position: absolute; }

.ha-synced-header .flex,
.ha-synced-footer .flex { display: flex; }

.ha-synced-header .hidden,
.ha-synced-footer .hidden { display: none; }

.ha-synced-header .grid,
.ha-synced-footer .grid { display: grid; }

.ha-synced-header .block,
.ha-synced-footer .block { display: block; }

.ha-synced-header .items-center,
.ha-synced-footer .items-center { align-items: center; }

.ha-synced-header .justify-between,
.ha-synced-footer .justify-between { justify-content: space-between; }

.ha-synced-header .justify-center,
.ha-synced-footer .justify-center { justify-content: center; }

.ha-synced-header .justify-end,
.ha-synced-footer .justify-end { justify-content: flex-end; }

.ha-synced-header .flex-col,
.ha-synced-footer .flex-col { flex-direction: column; }

.ha-synced-header .flex-row,
.ha-synced-footer .flex-row { flex-direction: row; }

.ha-synced-header .flex-row-reverse,
.ha-synced-footer .flex-row-reverse { flex-direction: row-reverse; }

.ha-synced-header .grow,
.ha-synced-footer .grow { flex-grow: 1; }

.ha-synced-header .shrink-0,
.ha-synced-footer .shrink-0 { flex-shrink: 0; }

.ha-synced-header .overflow-hidden,
.ha-synced-footer .overflow-hidden { overflow: hidden; }

.ha-synced-header .overflow-y-auto,
.ha-synced-footer .overflow-y-auto { overflow-y: auto; }

.ha-synced-header .inset-0,
.ha-synced-footer .inset-0 { inset: 0; }

.ha-synced-header .top-0,
.ha-synced-footer .top-0 { top: 0; }

.ha-synced-header .z-50,
.ha-synced-footer .z-50 { z-index: 50; }

.ha-synced-header .cursor-pointer,
.ha-synced-footer .cursor-pointer { cursor: pointer; }

.ha-synced-header .w-max,
.ha-synced-footer .w-max { width: max-content; }

/* ---------- Spacing Utilities ---------- */

.ha-synced-header .m-2,
.ha-synced-footer .m-2 { margin: 0.5rem; }

.ha-synced-header .mt-auto,
.ha-synced-footer .mt-auto { margin-top: auto; }

.ha-synced-header .mt-0\.5,
.ha-synced-footer .mt-0\.5 { margin-top: 0.125rem; }

.ha-synced-header .mt-3,
.ha-synced-footer .mt-3 { margin-top: 0.75rem; }

.ha-synced-header .mt-12,
.ha-synced-footer .mt-12 { margin-top: 3rem; }

.ha-synced-header .mb-2,
.ha-synced-footer .mb-2 { margin-bottom: 0.5rem; }

.ha-synced-header .mb-3,
.ha-synced-footer .mb-3 { margin-bottom: 0.75rem; }

.ha-synced-header .mb-12,
.ha-synced-footer .mb-12 { margin-bottom: 3rem; }

.ha-synced-header .ml-2,
.ha-synced-footer .ml-2 { margin-left: 0.5rem; }

.ha-synced-header .-mt-0\.5,
.ha-synced-footer .-mt-0\.5 { margin-top: -0.125rem; }

.ha-synced-header .p-2,
.ha-synced-footer .p-2 { padding: 0.5rem; }

.ha-synced-header .p-3,
.ha-synced-footer .p-3 { padding: 0.75rem; }

.ha-synced-header .pt-4,
.ha-synced-footer .pt-4 { padding-top: 1rem; }

.ha-synced-header .pt-12,
.ha-synced-footer .pt-12 { padding-top: 3rem; }

.ha-synced-header .px-4,
.ha-synced-footer .px-4 { padding-left: 1rem; padding-right: 1rem; }

.ha-synced-header .px-6,
.ha-synced-footer .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.ha-synced-header .py-1\.5,
.ha-synced-footer .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }

.ha-synced-header .py-3,
.ha-synced-footer .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.ha-synced-header .py-6,
.ha-synced-footer .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.ha-synced-header .gap-1,
.ha-synced-footer .gap-1 { gap: 0.25rem; }

.ha-synced-header .gap-2,
.ha-synced-footer .gap-2 { gap: 0.5rem; }

.ha-synced-header .gap-3,
.ha-synced-footer .gap-3 { gap: 0.75rem; }

.ha-synced-header .gap-6,
.ha-synced-footer .gap-6 { gap: 1.5rem; }

.ha-synced-header .gap-12,
.ha-synced-footer .gap-12 { gap: 3rem; }

.ha-synced-header .gap-x-4,
.ha-synced-footer .gap-x-4 { column-gap: 1rem; }

.ha-synced-header .space-x-2 > * + *,
.ha-synced-footer .space-x-2 > * + * { margin-left: 0.5rem; }

.ha-synced-header .space-x-4 > * + *,
.ha-synced-footer .space-x-4 > * + * { margin-left: 1rem; }

.ha-synced-header .space-x-5 > * + *,
.ha-synced-footer .space-x-5 > * + * { margin-left: 1.25rem; }

.ha-synced-header .space-x-8 > * + *,
.ha-synced-footer .space-x-8 > * + * { margin-left: 2rem; }

/* ---------- Sizing Utilities ---------- */

.ha-synced-header .w-4,
.ha-synced-footer .w-4 { width: 1rem; }

.ha-synced-header .w-6,
.ha-synced-footer .w-6 { width: 1.5rem; }

.ha-synced-header .w-8,
.ha-synced-footer .w-8 { width: 2rem; }

.ha-synced-header .w-10,
.ha-synced-footer .w-10 { width: 2.5rem; }

.ha-synced-header .w-24,
.ha-synced-footer .w-24 { width: 6rem; }

.ha-synced-header .w-40,
.ha-synced-footer .w-40 { width: 10rem; }

.ha-synced-header .w-44,
.ha-synced-footer .w-44 { width: 11rem; }

.ha-synced-header .w-full,
.ha-synced-footer .w-full { width: 100%; }

.ha-synced-header .h-4,
.ha-synced-footer .h-4 { height: 1rem; }

.ha-synced-header .h-6,
.ha-synced-footer .h-6 { height: 1.5rem; }

.ha-synced-header .h-8,
.ha-synced-footer .h-8 { height: 2rem; }

.ha-synced-header .h-10,
.ha-synced-footer .h-10 { height: 2.5rem; }

.ha-synced-header .h-12,
.ha-synced-footer .h-12 { height: 3rem; }

.ha-synced-header .h-full,
.ha-synced-footer .h-full { height: 100%; }

.ha-synced-header .max-w-full,
.ha-synced-footer .max-w-full { max-width: 100%; }

.ha-synced-header .max-w-xs,
.ha-synced-footer .max-w-xs { max-width: 20rem; }

.ha-synced-header .max-w-fit,
.ha-synced-footer .max-w-fit { max-width: fit-content; }

/* ---------- Typography Utilities ---------- */

.ha-synced-header .text-center,
.ha-synced-footer .text-center { text-align: center; }

.ha-synced-header .text-left,
.ha-synced-footer .text-left { text-align: left; }

.ha-synced-header .whitespace-nowrap,
.ha-synced-footer .whitespace-nowrap { white-space: nowrap; }

/* ---------- Color Utilities ---------- */

.ha-synced-header .text-gray-800,
.ha-synced-footer .text-gray-800 { color: var(--ha-gray-800); border: 0 solid var(--ha-gray-200); }

.ha-synced-header .text-gray-600,
.ha-synced-footer .text-gray-600 { color: var(--ha-gray-600); }

.ha-synced-header .text-gray-200,
.ha-synced-footer .text-gray-200 { color: var(--ha-gray-200); }

.ha-synced-header .text-blue-500,
.ha-synced-footer .text-blue-500 { color: var(--ha-blue-500); }

.ha-synced-header .text-blue-600,
.ha-synced-footer .text-blue-600 { color: var(--ha-blue-600); }

.ha-synced-header .text-white,
.ha-synced-footer .text-white { color: var(--ha-white); }

.ha-synced-header .bg-gray-800,
.ha-synced-footer .bg-gray-800 { background-color: var(--ha-gray-800); }

.ha-synced-header .bg-gray-700,
.ha-synced-footer .bg-gray-700 { background-color: var(--ha-gray-700); }

.ha-synced-header .bg-gray-200,
.ha-synced-footer .bg-gray-200 { background-color: var(--ha-gray-200); }

.ha-synced-header .bg-blue-100,
.ha-synced-footer .bg-blue-100 { background-color: var(--ha-blue-100); }

.ha-synced-header .bg-blue-600,
.ha-synced-footer .bg-blue-600 { background-color: var(--ha-blue-600); }

.ha-synced-header .bg-white,
.ha-synced-footer .bg-white { background-color: var(--ha-white); }

.ha-synced-header .fill-current,
.ha-synced-footer .fill-current { fill: currentColor; }

/* ---------- Border Utilities ---------- */

.ha-synced-header .border,
.ha-synced-footer .border { border: 1px solid var(--ha-gray-200); }

.ha-synced-header .border-gray-800,
.ha-synced-footer .border-gray-800 { border-color: var(--ha-gray-800); }

.ha-synced-header .rounded-2xl,
.ha-synced-footer .rounded-2xl { border-radius: 1rem; }

.ha-synced-header .rounded-3xl,
.ha-synced-footer .rounded-3xl { border-radius: 1.5rem; }

.ha-synced-header .rounded-full,
.ha-synced-footer .rounded-full { border-radius: 9999px; }

/* ---------- Effects Utilities ---------- */

.ha-synced-header .backdrop-blur-md,
.ha-synced-footer .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.ha-synced-header .opacity-0,
.ha-synced-footer .opacity-0 { opacity: 0; }

.ha-synced-header .transition-colors,
.ha-synced-footer .transition-colors { transition-property: color, background-color, border-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.ha-synced-header .transition-opacity,
.ha-synced-footer .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.ha-synced-header .duration-200,
.ha-synced-footer .duration-200 { transition-duration: 200ms; }

.ha-synced-header .duration-300,
.ha-synced-footer .duration-300 { transition-duration: 300ms; }

/* ---------- Hover Utilities ---------- */

.ha-synced-header .hover\:bg-gray-700:hover,
.ha-synced-footer .hover\:bg-gray-700:hover { background-color: var(--ha-gray-700); }

.ha-synced-header .active\:bg-gray-800:active,
.ha-synced-footer .active\:bg-gray-800:active { background-color: var(--ha-gray-800); }

.ha-synced-header .hover\:text-gray-600:hover,
.ha-synced-footer .hover\:text-gray-600:hover { color: var(--ha-gray-600); }

.ha-synced-header .hover\:text-blue-100:hover,
.ha-synced-footer .hover\:text-blue-100:hover { color: var(--ha-blue-100); }

.ha-synced-header .hover\:bg-blue-600:hover,
.ha-synced-footer .hover\:bg-blue-600:hover { background-color: var(--ha-blue-600); }

/* group hover */
.ha-synced-header .group:hover .group-hover\:border-gray-600,
.ha-synced-footer .group:hover .group-hover\:border-gray-600 { border-color: var(--ha-gray-600); }

/* ---------- sm: (min-width: 640px) ---------- */
@media (min-width: 640px) {
    .ha-synced-header .sm\:gap-y-24,
    .ha-synced-footer .sm\:gap-y-24 { row-gap: 6rem; }

    .ha-synced-header .sm\:grid,
    .ha-synced-footer .sm\:grid { display: grid; }

    .ha-synced-header .sm\:grid-cols-2,
    .ha-synced-footer .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ha-synced-header .sm\:items-start,
    .ha-synced-footer .sm\:items-start { align-items: flex-start; }

    .ha-synced-header .sm\:text-left,
    .ha-synced-footer .sm\:text-left { text-align: left; }

    .ha-synced-header .sm\:flex-row,
    .ha-synced-footer .sm\:flex-row { flex-direction: row; }

    .ha-synced-header .sm\:flex-row-reverse,
    .ha-synced-footer .sm\:flex-row-reverse { flex-direction: row-reverse; }

    .ha-synced-header .sm\:gap-4,
    .ha-synced-footer .sm\:gap-4 { gap: 1rem; }

    .ha-synced-header .sm\:justify-between,
    .ha-synced-footer .sm\:justify-between { justify-content: space-between; }

    .ha-synced-header .sm\:justify-end,
    .ha-synced-footer .sm\:justify-end { justify-content: flex-end; }

    .ha-synced-header .sm\:right-0,
    .ha-synced-footer .sm\:right-0 { right: 0; }

    .ha-synced-header .sm\:bottom-0,
    .ha-synced-footer .sm\:bottom-0 { bottom: 0; }

    .ha-synced-header .sm\:mt-0,
    .ha-synced-footer .sm\:mt-0 { margin-top: 0; }

    .ha-synced-header .sm\:py-2,
    .ha-synced-footer .sm\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    .ha-synced-header .sm\:gap-y-0 { row-gap: 0; }
    .ha-synced-header .sm\:items-center { align-items: center; }
}

/* ---------- lg: (min-width: 1024px) ---------- */
@media (min-width: 1024px) {
    .ha-synced-header .lg\:px-16,
    .ha-synced-footer .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }

    .ha-synced-header .lg\:ml-0,
    .ha-synced-footer .lg\:ml-0 { margin-left: 0; }

    .ha-synced-header .lg\:gap-8,
    .ha-synced-footer .lg\:gap-8 { gap: 2rem; }

    .ha-synced-header .lg\:grid-rows-none,
    .ha-synced-footer .lg\:grid-rows-none { grid-template-rows: none; }

    .ha-synced-header .lg\:grid-cols-none,
    .ha-synced-footer .lg\:grid-cols-none { grid-template-columns: none; }

    .ha-synced-header .lg\:flex,
    .ha-synced-footer .lg\:flex { display: flex; }

    .ha-synced-header .lg\:flex-row,
    .ha-synced-footer .lg\:flex-row { flex-direction: row; }

    .ha-synced-header .lg\:justify-between,
    .ha-synced-footer .lg\:justify-between { justify-content: space-between; }
}

/* ---------- xl: (min-width: 1280px) ---------- */
@media (min-width: 1280px) {
    .ha-synced-header .xl\:gap-x-0,
    .ha-synced-footer .xl\:gap-x-0 { column-gap: 0; }

    .ha-synced-header .xl\:grow-0,
    .ha-synced-footer .xl\:grow-0 { flex-grow: 0; }

    .ha-synced-header .xl\:flex,
    .ha-synced-footer .xl\:flex { display: flex; }

    .ha-synced-header .xl\:hidden,
    .ha-synced-footer .xl\:hidden { display: none; }

    .ha-synced-header .xl\:w-40,
    .ha-synced-footer .xl\:w-40 { width: 10rem; }
}

/* ---------- Header-specific layout ---------- */
.ha-synced-header {
    position: relative;
    z-index: 50;
}

.ha-synced-header header {
    top: 0;
    left: 0;
    right: 0;
}

/* Main content — matches original site: mt-20 xl:mt-32 (margin-top: 5rem / 8rem) */
.ha-blog-content {
    margin-top: 5rem;
}

@media (min-width: 1280px) {
    .ha-blog-content {
        margin-top: 8rem;
    }
}

/* ---------- Mega Menu Panels ---------- */
.ha-mega-panel {
    display: none;
    padding-bottom: 2rem;
}

.ha-mega-panel--open {
    display: block;
}

.ha-synced-header .ha-nav-button--active {
    background-color: rgb(229, 246, 252);
    border-radius: 9999px;
}

.ha-synced-header .ha-nav-button .iconify {
    transition: transform 0.2s;
}

/* Mega menu text weight — h4 uses BrutalType Medium (not Nexa) */
.ha-mega-panel h4 {
    font-family: var(--ha-font-body);
    font-weight: 500;
}

.ha-mega-panel p,
.ha-mega-panel .typo-xs {
    font-weight: 400;
}

/* Mega menu max-width */
.ha-synced-header .max-w-screen-lg {
    max-width: 1024px;
}

/* Mega menu additional utilities */
.ha-synced-header .w-2\/3 { width: 66.666667%; }
.ha-synced-header .w-1\/3 { width: 33.333333%; }

.ha-synced-header .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.ha-synced-header .bg-blue-50 { background-color: rgb(229, 246, 252); }

.ha-synced-header .rounded-4xl { border-radius: 2rem; }

.ha-synced-header .typo-h4-fixed {
    font-family: var(--ha-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.ha-synced-header .content-start { align-content: flex-start; }
.ha-synced-header .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ha-synced-header .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ha-synced-header .gap-x-6 { column-gap: 1.5rem; }
.ha-synced-header .gap-y-4 { row-gap: 1rem; }

.ha-synced-header .text-lg { font-size: 1.125rem; }

.ha-synced-header .hyphens-auto { hyphens: auto; }

.ha-synced-header .bg-transparent { background-color: transparent; }
.ha-synced-header .hover\:border-gray-600:hover { border-color: var(--ha-gray-600); }
.ha-synced-header .hover\:text-gray-600:hover { color: var(--ha-gray-600); }

.ha-synced-header .w-12 { width: 3rem; }
.ha-synced-header .h-12 { height: 3rem; }

/* xl: responsive utilities moved to @media block below */

.ha-synced-header .mt-2 { margin-top: 0.5rem; }
.ha-synced-header .mt-6 { margin-top: 1.5rem; }
.ha-synced-header .mb-4 { margin-bottom: 1rem; }
.ha-synced-header .mb-6 { margin-bottom: 1.5rem; }
.ha-synced-header .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ha-synced-header .pb-8 { padding-bottom: 2rem; }
.ha-synced-header .p-4 { padding: 1rem; }

.ha-synced-header .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ha-synced-header .self-end { align-self: flex-end; }

.ha-synced-header .text-xs { font-size: 0.75rem; line-height: 1rem; }
.ha-synced-header .text-base { font-size: 1rem; line-height: 1.5rem; }
/* xl:text-base and xl:py-6 moved to @media block below */

.ha-synced-header .h-32 { height: 8rem; }
.ha-synced-header .max-w-md { max-width: 28rem; }

.ha-synced-header .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.ha-synced-header .xl\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }

/* Additional mega menu / mobile utilities */
.ha-synced-header .py-2,
.ha-synced-footer .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.ha-synced-header .my-3,
.ha-synced-footer .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }

.ha-synced-header .mx-4,
.ha-synced-footer .mx-4 { margin-left: 1rem; margin-right: 1rem; }

.ha-synced-header .ml-5,
.ha-synced-footer .ml-5 { margin-left: 1.25rem; }

.ha-synced-header .m-4,
.ha-synced-footer .m-4 { margin: 1rem; }

.ha-synced-header .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem;
}

.ha-synced-header .rotate-90 { transform: rotate(90deg); }

/* sm:gap-y-0 and sm:items-center moved to sm media query block */

.ha-synced-header .gap-y-4 { row-gap: 1rem; }

/* xl: responsive utilities — must be inside media query */
@media (min-width: 1280px) {
    .ha-synced-header .xl\:text-sm,
    .ha-mega-panel .xl\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }

    .ha-synced-header .xl\:font-medium,
    .ha-mega-panel .xl\:font-medium { font-weight: 500; }

    .ha-synced-header .xl\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .ha-synced-header .xl\:flex-row { flex-direction: row; }
    .ha-synced-header .xl\:gap-x-4 { column-gap: 1rem; }
    .ha-synced-header .xl\:items-baseline { align-items: baseline; }
    .ha-synced-header .xl\:mt-0 { margin-top: 0; }
    .ha-synced-header .xl\:block { display: block; }
    .ha-synced-header .xl\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .ha-synced-header .xl\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* ---------- Mobile Navigation — Full-screen takeover with accordion ---------- */
.ha-mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Full-screen panel — hidden by default, shown on xl:hidden + JS toggle */
.ha-mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ha-white, #fff);
    z-index: 999;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ha-mobile-nav--open {
    display: flex;
}

/* Header bar: logo + CTA + close */
.ha-mobile-nav__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ha-gray-200);
    flex-shrink: 0;
}

.ha-mobile-nav__logo {
    flex-shrink: 0;
}

.ha-mobile-nav__logo img {
    height: 2.25rem;
    width: auto;
}

.ha-mobile-nav__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: 0.5rem 1.25rem;
    background-color: var(--ha-blue-500);
    color: var(--ha-white, #fff) !important;
    font-family: var(--ha-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 1.5rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.ha-mobile-nav__cta:hover {
    background-color: var(--ha-blue-600);
}

.ha-mobile-nav__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ha-gray-800);
    padding: 0.25rem;
    flex-shrink: 0;
    line-height: 0;
}

/* Body — scrollable area with accordion items and direct links */
.ha-mobile-nav__body {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

/* Direct links */
.ha-mobile-nav__link {
    display: block;
    padding: 1rem 1.5rem;
    font-family: var(--ha-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ha-gray-800);
    text-decoration: none;
    border-bottom: 1px solid var(--ha-gray-200);
}

/* Accordion container */
.ha-mobile-accordion {
    border-bottom: 1px solid var(--ha-gray-200);
}

/* Accordion toggle button — needs .ha-mobile-nav prefix to beat .ha-synced-header button reset */
.ha-mobile-nav .ha-mobile-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    font-family: var(--ha-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ha-gray-800);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.ha-mobile-accordion__chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: var(--ha-gray-600);
}

.ha-mobile-accordion--open .ha-mobile-accordion__chevron {
    transform: rotate(180deg);
}

/* Collapsed by default; shown when open */
.ha-mobile-accordion__panel {
    display: none;
    padding: 0 0 1rem;
}

.ha-mobile-accordion--open .ha-mobile-accordion__panel {
    display: block;
}

/* Rich content inside accordion panels (icons, promo banners, etc.) */
.ha-mobile-accordion__panel * {
    box-sizing: border-box;
}

.ha-mobile-accordion__panel img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ha-mobile-accordion__panel a {
    text-decoration: none;
    color: var(--ha-gray-800);
}

.ha-mobile-accordion__panel a:hover {
    color: var(--ha-blue-500);
}

/* Promo banner inside accordion */
.ha-mobile-accordion__panel .bg-blue-50 {
    background-color: rgb(229, 246, 252);
}

.ha-mobile-accordion__panel .rounded-4xl {
    border-radius: 2rem;
}

.ha-mobile-accordion__panel .overflow-hidden {
    overflow: hidden;
}

.ha-mobile-accordion__panel .max-w-md {
    max-width: 28rem;
}

.ha-mobile-accordion__panel .typo-h4-fixed {
    font-family: var(--ha-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.ha-mobile-accordion__panel h4 {
    font-family: var(--ha-font-body);
    font-weight: 500;
    font-size: 1rem;
}

.ha-mobile-accordion__panel p {
    font-weight: 400;
}

.ha-mobile-accordion__panel .typo-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.ha-mobile-accordion__panel .typo-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Icon link rows inside accordion */
.ha-mobile-accordion__panel .flex.items-center {
    display: flex;
    align-items: center;
}

.ha-mobile-accordion__panel .w-12 { width: 3rem; }
.ha-mobile-accordion__panel .h-12 { height: 3rem; }
.ha-mobile-accordion__panel .h-32 { height: 8rem; }

.ha-mobile-accordion__panel .fill-current { fill: currentColor; }

.ha-mobile-accordion__panel .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }

.ha-mobile-accordion__panel .mx-4 { margin-left: 1rem; margin-right: 1rem; }
.ha-mobile-accordion__panel .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.ha-mobile-accordion__panel .mt-2 { margin-top: 0.5rem; }
.ha-mobile-accordion__panel .mt-3 { margin-top: 0.75rem; }
.ha-mobile-accordion__panel .mt-6 { margin-top: 1.5rem; }
.ha-mobile-accordion__panel .mb-6 { margin-bottom: 1.5rem; }
.ha-mobile-accordion__panel .ml-5 { margin-left: 1.25rem; }
.ha-mobile-accordion__panel .m-4 { margin: 1rem; }
.ha-mobile-accordion__panel .p-4 { padding: 1rem; }
.ha-mobile-accordion__panel .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ha-mobile-accordion__panel .px-4 { padding-left: 1rem; padding-right: 1rem; }
.ha-mobile-accordion__panel .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.ha-mobile-accordion__panel .rounded-2xl { border-radius: 1rem; }
.ha-mobile-accordion__panel .rounded-3xl { border-radius: 1.5rem; }

.ha-mobile-accordion__panel .flex-col { flex-direction: column; }
.ha-mobile-accordion__panel .gap-y-4 { row-gap: 1rem; }
.ha-mobile-accordion__panel .gap-1 { gap: 0.25rem; }
.ha-mobile-accordion__panel .self-end { align-self: flex-end; }

.ha-mobile-accordion__panel .text-blue-500 { color: var(--ha-blue-500); }
.ha-mobile-accordion__panel .text-gray-800 { color: var(--ha-gray-800); }
.ha-mobile-accordion__panel .text-xs { font-size: 0.75rem; line-height: 1rem; }
.ha-mobile-accordion__panel .text-lg { font-size: 1.125rem; }

.ha-mobile-accordion__panel .border { border: 1px solid var(--ha-gray-200); }
.ha-mobile-accordion__panel .border-gray-800 { border-color: var(--ha-gray-800); }
.ha-mobile-accordion__panel .bg-transparent { background-color: transparent; }

.ha-mobile-accordion__panel .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.ha-mobile-accordion__panel .hover\:border-gray-600:hover { border-color: var(--ha-gray-600); }
.ha-mobile-accordion__panel .hover\:text-gray-600:hover { color: var(--ha-gray-600); }

.ha-mobile-accordion__panel .cursor-pointer { cursor: pointer; }
.ha-mobile-accordion__panel .transition-colors { transition-property: color, background-color, border-color; transition-duration: 200ms; }
.ha-mobile-accordion__panel .duration-200 { transition-duration: 200ms; }
.ha-mobile-accordion__panel .hyphens-auto { hyphens: auto; }
.ha-mobile-accordion__panel .max-w-fit { max-width: fit-content; }

.ha-mobile-accordion__panel .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }

.ha-mobile-accordion__panel .w-6 { width: 1.5rem; }
.ha-mobile-accordion__panel .h-6 { height: 1.5rem; }

.ha-mobile-accordion__panel .shrink-0 { flex-shrink: 0; }

/* "hidden xl:block" elements should be hidden in mobile accordion (descriptions) */
.ha-mobile-accordion__panel .hidden { display: none; }

/* link style in mobile accordion */
.ha-mobile-accordion__panel .link {
    color: inherit;
    text-decoration: none;
}

.ha-mobile-accordion__panel hr {
    border: 0;
    border-top: 1px solid var(--ha-gray-200);
    margin: 0;
}

/* Prevent body scroll when mobile nav is open */
body.ha-mobile-open {
    overflow: hidden;
}

/* Hide mobile nav on xl screens */
@media (min-width: 1280px) {
    .ha-mobile-nav {
        display: none !important;
    }
}

/* ---------- Mobile header fix: hide CTA + lang below xl ---------- */
@media (max-width: 1279px) {
    .ha-synced-header .ha-desktop-cta {
        display: none;
    }
}

/* ---------- Footer spacing from main content ---------- */
.ha-synced-footer footer {
    margin-top: auto;
}