/* ==================================================
   SQUEAK – HERO LAYOUT / RHYTHM
   Centrale verticale uitlijning, per paginatype.
   Styling/typografie blijft in de pagina-CSS bestanden.
================================================== */

/* --------------------------------------------------
   HOME
-------------------------------------------------- */

.squeak-home-hero-inner,
.squeak-hero-inner {
    min-height: var(--sq-hero-min-height) !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: var(--sq-hero-bottom) !important;
    box-sizing: border-box !important;
}

.squeak-home-hero-copy,
.squeak-hero-content,
.squeak-hero-copy {
    align-self: start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.squeak-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}


/* --------------------------------------------------
   ALARM
-------------------------------------------------- */

.squeak-alarm-hero-inner {
    min-height: var(--sq-hero-min-height) !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: var(--sq-hero-bottom) !important;
    box-sizing: border-box !important;
}

.squeak-alarm-hero-copy {
    align-self: start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.squeak-alarm-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}


/* --------------------------------------------------
   BRAND + CAMERA
   Beide gebruiken dezelfde service-hero markup.
-------------------------------------------------- */

.squeak-service-hero-inner {
    min-height: var(--sq-hero-min-height) !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: var(--sq-hero-bottom) !important;
    box-sizing: border-box !important;
}

.squeak-service-hero-copy {
    align-self: start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.squeak-service-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}


/* --------------------------------------------------
   OVER SQUEAK
-------------------------------------------------- */

.squeak-about-hero-inner {
    min-height: var(--sq-hero-min-height) !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

.squeak-about-hero-copy {
    align-self: start !important;
    padding-top: 0 !important;
    padding-bottom: var(--sq-hero-bottom) !important;
}

.squeak-about-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

/* De illustratie blijft mooi op de onderrand van de hero rusten. */
.squeak-about-hero-visual {
    align-self: end !important;
}


/* --------------------------------------------------
   CONTACT
   Eigen compositie: copy + visual + formulier.
   Dus GEEN gedeelde hero-gridregels hierboven toepassen.
-------------------------------------------------- */

.squeak-contact-main-inner {
    min-height: 760px !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: var(--sq-hero-bottom) !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

.squeak-contact-main .copy {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.squeak-contact-main .form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1180px) {

    .squeak-home-hero-inner,
    .squeak-hero-inner,
    .squeak-alarm-hero-inner,
    .squeak-service-hero-inner,
    .squeak-about-hero-inner,
    .squeak-access-hero-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }

    .squeak-about-hero-inner {
        padding-bottom: 0 !important;
    }

    .squeak-contact-main-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    .squeak-home-hero-inner,
    .squeak-hero-inner,
    .squeak-alarm-hero-inner,
    .squeak-service-hero-inner,
    .squeak-about-hero-inner,
    .squeak-contact-main-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }

    .squeak-about-hero-inner {
        padding-bottom: 0 !important;
    }

    .squeak-contact-main .copy {
        padding-right: 0 !important;
    }

    .squeak-contact-main .form {
        margin-top: 28px !important;
    }
}


/* ==================================================
   SHARED HERO EYEBROW COMPONENT
   Eén visuele bron voor Home, Alarm, Brand, Camera,
   Toegangscontrole en Over Squeak.
   Dit bestand wordt na de pagina-CSS geladen en is
   daarom bewust de autoritatieve hero-laag.
================================================== */

.squeak-eyebrow,
.squeak-alarm-eyebrow,
.squeak-service-eyebrow,
.squeak-access-eyebrow,
.squeak-about-eyebrow {
    display: flex !important;
    align-items: center !important;
    width: 170px !important;
    max-width: 100% !important;
    min-height: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.35) !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #f2efe8 !important;
    box-sizing: border-box !important;
}

/* Home gebruikt een echt <i>-element als rode dot. */
.squeak-eyebrow i {
    display: block !important;
    flex: 0 0 4px !important;
    width: 4px !important;
    height: 4px !important;
    margin-left: 18px !important;
    background: #e51d24 !important;
    border-radius: 50% !important;
}

/* De overige hero's gebruiken dezelfde dot via ::after. */
.squeak-alarm-eyebrow::after,
.squeak-service-eyebrow::after,
.squeak-access-eyebrow::after,
.squeak-about-eyebrow::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 4px !important;
    width: 4px !important;
    height: 4px !important;
    margin-left: 18px !important;
    background: #e51d24 !important;
    border-radius: 50% !important;
}

/* Toegangscontrole volgt voortaan dezelfde hero-rhythm. */
.squeak-access-hero-inner {
    min-height: var(--sq-hero-min-height) !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: var(--sq-hero-bottom) !important;
    box-sizing: border-box !important;
}

.squeak-access-hero-copy {
    align-self: start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 1180px) {
    .squeak-access-hero-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }
}

@media (max-width: 767px) {
    .squeak-access-hero-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }

    .squeak-eyebrow,
    .squeak-alarm-eyebrow,
    .squeak-service-eyebrow,
    .squeak-access-eyebrow,
    .squeak-about-eyebrow {
        font-size: 13px !important;
    }
}


/* ==================================================
   v0.17.6 – DESKTOP HERO ALIGNMENT
   Eén horizontale grid voor header + alle hero's.
   Dit voorkomt dat Home enkele pixels verder naar
   binnen begint dan de andere hoofdpagina's.
================================================== */
@media (min-width: 981px) {
    .squeak-home-hero-inner,
    .squeak-hero-inner,
    .squeak-alarm-hero-inner,
    .squeak-service-hero-inner,
    .squeak-access-hero-inner,
    .squeak-about-hero-inner {
        width: min(92%, 1500px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==================================================
   REMOTE SUPPORT
   Volgt dezelfde verticale hero-rhythm als de andere
   Squeak hoofdpagina's. De pagina-eigen grid/formulier-
   styling blijft in squeak-remote-support.css.
================================================== */

.squeak-remote-hero-inner {
    min-height: var(--sq-hero-min-height) !important;
    padding-top: var(--sq-hero-top) !important;
    padding-bottom: var(--sq-hero-bottom) !important;
    box-sizing: border-box !important;
}

.squeak-remote-hero-copy {
    align-self: start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 1180px) {
    .squeak-remote-hero-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }
}

@media (max-width: 767px) {
    .squeak-remote-hero-inner {
        min-height: 0 !important;
        padding-top: var(--sq-hero-top) !important;
        padding-bottom: var(--sq-hero-bottom) !important;
    }
}