/* The coming-soon page of the old site (WordPress plugin "Nifty Coming Soon" 3.0.17), in the plugin's
   own measurements plus the extra CSS of hooklegal.com: every block without vertical margin, the logo
   half the width of the column at 40px from the top, the message at 26px, the contact details at 25px,
   and the photo at 60 % on a white page. Measured with getComputedStyle on hooklegal.com on
   28 September 2026 at 390 and 1440 pixels. Loaded ONLY on the coming-soon page
   (PublicPageChrome.ComingSoonStylesheets). */

/* The colours of the page, fixed like the plugin had them: white text and message over the photo,
   the plugin's colour for a link under the mouse (#9e0039), the white page the photo lies on at 60 %,
   the shadow under the message, and the gold and dark grey of the logo for the cookie notice. They
   stood on a colours screen of the CMS that is gone; these are the values that screen held. */
:root {
    --hl-cs-text: #ffffff;
    --hl-cs-message: #ffffff;
    --hl-cs-active: #9e0039;
    --hl-cs-bg: #ffffff;
    --hl-cs-shadow: #333333;
    --hl-cs-accent: #ad890f;
    --hl-cs-dark: #1d1d1b;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* No min-height: the old body was as high as its content (689 px at 1440), the photo and pattern
   are fixed and fill the screen anyway. */
body.hl-coming-soon {
    margin: 0;
    font-family: Abel, sans-serif;
    font-size: 16px;
    line-height: 1.15;
    color: #000;
    background: var(--hl-cs-bg);
}

/* The plugin's link rule (white, the plugin colour under the mouse). This sheet only loads on the
   coming-soon page, so a bare element rule cannot reach any other page. */
a {
    color: var(--hl-cs-text);
    text-decoration: none;
}

a:hover {
    color: var(--hl-cs-active);
}

/* The photos: fixed behind everything at 60 % (the site's extra CSS: .vegas-slide-inner opacity .6).
   vegas.js brought a photo in by zooming out from 150 % in two seconds (the plugin's "animation time")
   and did that again every ten seconds, also with a single photo. Real <img> elements from a gallery
   in /beheer, never a CSS background. */
.hl-cs-slides {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hl-cs-slides__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hl-cs-slides__img.is-active {
    opacity: .6;
    animation: hl-cs-kenburns 10s ease-out infinite;
}

@keyframes hl-cs-kenburns {
    0% { transform: scale(1.5); }
    20% { transform: scale(1); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hl-cs-slides__img.is-active {
        animation: none;
    }
}

/* The dot pattern over the photos, at half strength. A decoration of the plugin, not a photo. */
.hl-cs-pattern {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: .5;
    background: url(/assets/coming-soon-pattern.png) repeat;
    pointer-events: none;
}

.nifty-main-wrapper {
    position: relative;
    z-index: 2;
}

.nifty-container {
    max-width: 1170px;
    margin-inline: auto;
    padding-inline: clamp(.938rem, .551rem + 1.93vw, 2rem);
}

.nifty-text-center {
    text-align: center;
}

/* ".nifty-block { margin-block: 0 !important }" in the site's extra CSS: the blocks touch, and the
   space between them is the default margin of the lists inside them. */
.nifty-block {
    margin-block: 0;
    color: var(--hl-cs-text);
}

.nifty-logo {
    display: inline-block;
    max-width: 50%;
}

.nifty-logo a {
    display: block;
    margin-top: 40px;
}

.nifty-logo img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.nifty-coming-soon-message {
    margin-inline: auto;
    font-family: Lato, sans-serif;
    font-size: clamp(1.125rem, .08rem + 5.23vw, 4rem);
    color: var(--hl-cs-message);
    text-shadow: var(--hl-cs-shadow) 1px 1px 2px;
    -webkit-text-stroke: .2px;
}

.nifty-coming-soon-message ul {
    list-style-type: none;
    padding: 0;
}

/* The site's extra CSS: ".intro-first { font-size: 26px !important }". */
.nifty-coming-soon-message .intro-first {
    font-size: 26px;
}

h4 {
    font-family: Lato, sans-serif;
}

/* The site's extra CSS: ".nifty-contact-details { font-size: 25px !important }". */
.nifty-contact-details {
    font-size: 25px;
    color: var(--hl-cs-text);
}

.nifty-contact-details h4 {
    font-weight: 700;
}

.nifty-contact-details .contact-company-name {
    margin-block: clamp(.25rem, -.341rem + 2.95vw, 1.875rem);
}

.nifty-contact-details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nifty-contact-details ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-block: 16px;
}

.nifty-contact-details a {
    color: var(--hl-cs-text);
    text-decoration: none;
}

.nifty-contact-details a:hover,
.nifty-contact-details a:focus-visible {
    color: var(--hl-cs-active);
}

/* The language switch under the contact details: the one visible addition to the old page (the
   second language), in the size and colour of the contact lines so it reads as part of the page. */
.hl-cs-language {
    margin-block: 16px 40px;
    font-size: 20px;
    letter-spacing: .1em;
}

.hl-cs-language a {
    color: var(--hl-cs-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hl-cs-language a:hover,
.hl-cs-language a:focus-visible {
    color: var(--hl-cs-active);
}

/* The three icons, from the icon font of the plugin (a subset: fonts/coming-soon-icons.woff2). */
.hl-cs-icon {
    font-family: "hl-coming-soon-icons";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
}

.hl-cs-icon--home::before { content: "\f015"; }
.hl-cs-icon--phone::before { content: "\eaca"; }
.hl-cs-icon--envelope::before { content: "\f0e0"; }

/* ---- The cookie notice on the coming-soon page ----------------------------------------------------
   ⛔ This page does not load the stylesheets of the site, so without these rules the notice sat
   unstyled in the flow of the page, UNDER the fixed photo layer, and could not be clicked away
   (valkuil 21, measured headless on 27 September 2026). It floats above everything here. */
.hl-consent {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.1rem 1.3rem;
    border: 2px solid var(--hl-cs-accent);
    border-radius: 3px;
    background: #fff;
    color: var(--hl-cs-dark);
    font-family: Lato, sans-serif;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.hl-consent[hidden] {
    display: none;
}

.hl-consent__text {
    margin-bottom: .75rem;
}

.hl-consent__more {
    margin-left: .35rem;
    color: var(--hl-cs-dark);
}

.hl-consent__buttons {
    display: flex;
    gap: .6rem;
}

.hl-consent .button {
    padding: .5rem 1rem;
    border: 1px solid var(--hl-cs-accent);
    border-radius: 3px;
    background: var(--hl-cs-accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.hl-consent #hl-consent-decline {
    background: #fff;
    color: var(--hl-cs-dark);
}

/* ---- The error page ------------------------------------------------------------------------------
   The only other public page (App.razor loads this sheet for it too): one short message, centred,
   in the letter of the coming-soon page. */
body.hl-public {
    margin: 0;
    font-family: Lato, sans-serif;
    color: var(--hl-cs-dark);
    background: var(--hl-cs-bg);
}

.hl-error-page {
    max-width: 40rem;
    margin: 15vh auto 0;
    padding: 0 1.5rem;
    text-align: center;
}

.hl-error-page a {
    color: var(--hl-cs-dark);
    text-decoration: underline;
}