:root {
    /* Newspaper-inspired palette (palette.lua) */
    --hexpel-bg        : #F4E9D9;
    --hexpel-text      : #333333;
    --hexpel-accent    : #FF7D1C;
    --hexpel-accent-dim: #D35400;
    --hexpel-border    : #C8C8C8;
    --hexpel-muted     : #967777;
}

/* Fonts: local Inter Display family */
@font-face {
    font-family : 'Inter Display';
    src         : url('/hexpel/fonts/Inter/InterDisplay-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family : 'Inter Display';
    src         : url('/hexpel/fonts/Inter/InterDisplay-SemiBold.ttf') format('truetype');
    font-weight : 600;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family : 'Inter Display';
    src         : url('/hexpel/fonts/Inter/InterDisplay-Bold.ttf') format('truetype');
    font-weight : 700;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family : 'Inter Display';
    src         : url('/hexpel/fonts/Inter/InterDisplay-ExtraBold.ttf') format('truetype');
    font-weight : 800;
    font-style  : normal;
    font-display: swap;
}

html,
body {
    margin : 0;
    padding: 0;
}

.hexpel-root.front {
    min-height: 100vh;
}

/* Minimal, light theme for Hexpel route only */
.hexpel-root {

    font-family: var(--bulma-family-primary);
    font-size  : 1.2rem;

    color: var(--hexpel-text);

    display       : flex;
    flex-direction: column;

    /* min-width: 320px; */
    max-width: 500px;

    /* center horizontally */
    margin: 0 auto;
}


body {
    background-color: var(--hexpel-bg);
}




/* Keep Hexpel route locked to its own palette regardless of OS/browser color scheme */
.hexpel-root {
    /* Force light color-scheme: controls how UA form controls and such render */
    color-scheme    : light;
    /* Ensure our palette applied to the route overrides global theme differences */
    background-color: var(--hexpel-bg) !important;
    color           : var(--hexpel-text) !important;
}

/* Make sure common blocks render with the route palette (overriding Bulma dark styles) */
.hexpel-root .section,
.hexpel-root .container,
.hexpel-root .hexpel-main,
.hexpel-root .hexpel-legal,
.hexpel-root .hexpel-hero {
    background-color: var(--hexpel-bg) !important;
    color           : var(--hexpel-text) !important;
}



/* If Bulma applies dark utility classes, override them */
.hexpel-root .has-background-dark,
.hexpel-root .has-background-black,
.hexpel-root .has-background-grey-darker {
    background-color: var(--hexpel-bg) !important;
}

.hexpel-main {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    background-color: var(--hexpel-bg);
    gap             : 1.25rem;

    box-sizing    : border-box;
    padding-left  : 0;
    padding-right : 0;
    padding-top   : 2rem;
    padding-bottom: 1.5rem;
}


/* Layout column for Hexpel content (used in page container) */
.hexpel-column {
    max-width     : 500px;
    margin        : 0 auto;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    /* keep children center-aligned horizontally */
    min-height    : calc(100vh - 4rem);
    /* ensure column occupies full viewport so footer can push to bottom */
}

/* Push the action buttons to the bottom of the hexpel-column so they sit just above the footer */
.hexpel-column .hexpel-actions {
    margin-top   : auto;
    margin-bottom: 0.25rem;
    /* small gap between actions and footer */
}

.hexpel-hero {
    text-align: center;
    display   : grid;
    gap       : 0.75rem;
}

.hexpel-title {
    font-size     : 3rem;
    font-weight   : 800;
    text-transform: uppercase;
    margin        : 0;
}

.hexpel-subtitle {
    font-size: 1.1rem;
    color    : var(--hexpel-muted);
    margin   : 0;
}

.hexpel-actions {
    display        : flex;
    justify-content: center;
    margin-top     : 0.75rem;
    flex-direction : column;
    gap            : 0.5rem;
    align-items    : center;
    margin-top     : 0.75rem;
}




.hexpel-button {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.3rem;
    padding        : 0.5rem 0.9rem;
    border         : 1px solid var(--hexpel-border);
    border-radius  : 999px;
    background     : transparent;
    color          : var(--hexpel-muted);
    font-weight    : 600;
    text-decoration: none;
    box-shadow     : none;
    transition     : color 0.15s ease, border-color 0.15s ease;
}

.hexpel-button:hover,
.hexpel-button:focus-visible {
    border-color: var(--hexpel-accent-dim);
    color       : var(--hexpel-accent-dim);
}

.hexpel-button:active {
    border-color: var(--hexpel-accent);
    color       : var(--hexpel-accent);
}

.hexpel-privacy-link {
    color                : var(--hexpel-muted);
    font-weight          : 500;
    font-size            : 0.8rem;
    text-decoration      : underline;
    text-underline-offset: 3px;
    opacity              : 0.9;
    padding              : 0.15rem 0;
    margin               : 0;
    /* small vertical touch area */
    display              : inline-block;
}

.hexpel-privacy-link:hover,
.hexpel-privacy-link:focus {
    color  : var(--hexpel-accent-dim);
    opacity: 1;
}

/* Smaller privacy button variant for the landing page */
/* .hexpel-privacy-button removed; using `.hexpel-privacy-link` for a subtle text link */

.hexpel-legal {
    /* max-width        : 780px; */
    /* margin        : 2rem auto; */
    padding    : 1.5rem;
    display    : grid;
    gap        : 1rem;
    line-height: 1.7;
}

.hexpel-legal h1 {
    font-size     : clamp(2rem, 3.2vw, 2.6rem);
    margin        : 0;
    color         : var(--hexpel-text);
    letter-spacing: 0.01em;
}

.hexpel-legal h2 {
    font-size: 1.1rem;
    margin   : 0;
    color    : var(--hexpel-accent-dim);
}

.hexpel-legal p {
    margin: 0;
}

.hexpel-legal ul {
    margin    : 0.25rem 0 0 1.25rem;
    padding   : 0;
    display   : grid;
    gap       : 0.25rem;
    list-style: disc;
}

.hexpel-updated {
    color    : var(--hexpel-muted);
    font-size: 0.95rem;
}

/** identity **/
.identityBlock {
    text-align: center;
}

.logo {
    width    : 50px;
    /* recommended final size */
    max-width: 100%;
    height   : auto;
    display  : block;
    margin   : 0 auto 0.5rem;
}

/** tagline **/
.tagline {
    color        : var(--hexpel-muted);
    font-size    : 1.4rem;
    margin-top   : 0rem;
    margin-bottom: 0rem;
}

/** screenshot **/
.screenshot {
    width        : 100%;
    max-width    : 420px;
    /* fits inside the 500px column */
    height       : 300px;
    /* fixed height so it fits on most screens without causing scroll */
    max-height   : 300px;
    object-fit   : contain;
    /* maintain aspect ratio */
    display      : block;
    margin-top   : 0.8rem;
    margin-bottom: 1.2rem;
    /* vertical spacing */
    border-radius: 10px;
    box-shadow   : 0 8px 16px rgba(0, 0, 0, 0.04);
    border-top   : 1px solid rgba(0, 0, 0, 0.04);
}

/* Optional: reduce screenshot height on very short screens */
@media (max-height: 420px) {
    .screenshot {
        height    : 220px;
        max-height: 220px;
    }
}

/* Call to Action (CTA) styles */
.cta {
    display        : flex;
    gap            : 0.75rem;
    justify-content: center;
    margin         : 2rem 0 1.5rem;
    flex-wrap      : wrap;
}

.comingSoon {
    color              : var(--hexpel-muted);
    font-weight        : 500;
    font-size          : 1rem;
    /* slightly smaller: subtle */
    text-align         : center;
    /* reduce opacity for subtlety */
    opacity            : 0.8;
}

/* Store badge inside CTA */
.store {
    display        : flex;
    /* Horizontal arrangement on wide viewports (customary) */
    gap            : 1.5rem;
    align-items    : center;
    flex-direction : row;
    justify-content: center;
    flex-wrap      : nowrap;
}

.storeBadgeLink {
    display        : inline-block;
    line-height    : 0;
    text-decoration: none;
}

.playBadge {
    /* Mirror previous route-scoped sizing but scoped to CTA */
    height       : clamp(32px, 6vw, 48px);
    width        : auto;
    display      : block;
    margin-bottom: 0;
}

.appleBadge {
    /* Match play badge sizing for consistency */
    height       : clamp(32px, 6vw, 48px);
    width        : auto;
    display      : block;
    margin-bottom: 0;
}

/* Responsive: stack badges on narrow viewports */
@media (max-width: 420px) {
    .store {
        flex-direction: column;
        gap           : 0.75rem;
    }

    .playBadge,
    .appleBadge {
        margin-bottom: 0.5rem;
    }
}

.storeBadgeLink:focus-visible {
    outline       : 3px solid var(--hexpel-accent);
    outline-offset: 3px;
    border-radius : 6px;
}

.applePending {
    color      : var(--hexpel-muted);
    font-weight: 500;
    font-size  : 0.95rem;
    opacity    : 0.8;
}

/* Keep default button styling (no custom styles) for disabled buttons */
/* Optionally re-enable custom store button styling in the future */

/* Footer module — scoped styles for Hexpel footer */
.wrapper {
    background-color: transparent !important;
    color           : var(--hexpel-muted) !important;
    display         : block;
    width           : 100%;
    text-align      : center;
    font-size       : 0.75rem;
    padding         : 0.6rem 0;
    margin          : 0;
    margin-top      : auto;
}

.line {
    margin     : 0.15rem 0;
    line-height: 1.35;
}

/* Optional modifiers (apply from component if needed) */
.landing {
    margin-top   : 0.5rem;
    margin-bottom: 0.5rem;
    padding      : 0.5rem 0.25rem;
    line-height  : 1.4;
}

.legalPage {
    margin-top   : 1.5rem;
    margin-bottom: 0.75rem;
    padding      : 0.25rem 0;
}

/** extras **/
.has-text-centered {
    text-align: center;
}