/* =============================================================
 * hm_branding — Horecamerk huisstijl
 * Bron: ai-project-management/huisstijl/Horecamerk-Huisstijl-Handboek.pdf
 *
 * CSS custom properties (--hm-*) worden geinjecteerd via PHP zodat
 * PHP en CSS uit één palette putten. Pas waarden daar aan, niet hier.
 * ============================================================= */

/* ---------- Basis typografie -------------------------------- */
html {
    font-family: var(--hm-font-body);
    color: var(--hm-color-ink);
}

body,
button,
input,
optgroup,
select,
textarea {
    font-family: var(--hm-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--hm-color-ink);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.page-title {
    font-family: var(--hm-font-heading);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
/* Color as a zero-specificity default so Elementor's per-widget Title color wins. */
:where(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .entry-title, .page-title) {
    color: var(--hm-color-navy);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }

a {
    color: var(--hm-color-navy);
    text-decoration-color: var(--hm-color-gold);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--hm-color-gold);
}

strong, b { font-weight: 700; }

.hm-script,
.hm-handwritten {
    font-family: var(--hm-font-script);
    font-weight: 700;
    color: var(--hm-color-gold);
    letter-spacing: 0.01em;
}

/* ---------- Brand utilities --------------------------------- */
.hm-brand-logo {
    display: inline-block;
    height: auto;
    max-width: 100%;
}
.hm-brand-logo--default      { width: 220px; }
.hm-brand-logo--white-frame  { width: 240px; }
.hm-brand-logo--icon         { width: 56px; }

/* ---------- Buttons (theme-wide) ----------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.elementor-button,
.gform_button,
.wp-block-button__link {
    font-family: var(--hm-font-heading);
    font-weight: 700;
    background: var(--hm-color-navy);
    color: #fff;
    border: 2px solid var(--hm-color-navy);
    padding: 12px 26px;
    border-radius: var(--hm-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    line-height: 1.2;
    font-size: 1rem;
    letter-spacing: 0.01em;
    box-shadow: var(--hm-shadow);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.elementor-button:hover,
.gform_button:hover,
.wp-block-button__link:hover {
    background: var(--hm-color-gold);
    border-color: var(--hm-color-gold);
    color: #fff;
    transform: translateY(-1px);
}

/* Secondary / "ghost" button variant */
.button.button--ghost,
.elementor-button.elementor-button-secondary,
.button-secondary {
    background: transparent;
    color: var(--hm-color-navy);
}
.button.button--ghost:hover,
.elementor-button.elementor-button-secondary:hover,
.button-secondary:hover {
    background: var(--hm-color-navy);
    color: #fff;
}

/* Accent gold button */
.button.button--gold {
    background: var(--hm-color-gold);
    border-color: var(--hm-color-gold);
}
.button.button--gold:hover {
    background: var(--hm-color-navy);
    border-color: var(--hm-color-navy);
}

/* ---------- Forms (incl. Gravity Forms) ---------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
    font-family: var(--hm-font-body);
    font-size: 1rem;
    color: var(--hm-color-ink);
    background: #fff;
    border: 1.5px solid var(--hm-color-line);
    border-radius: var(--hm-radius);
    padding: 10px 14px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--hm-color-navy);
    box-shadow: 0 0 0 3px rgba(16, 19, 63, 0.12);
}

label,
.gform_legacy_markup_wrapper .gfield_label,
.gform-theme--framework .gfield_label,
.gfield_label {
    font-family: var(--hm-font-heading);
    font-weight: 700;
    color: var(--hm-color-navy);
}

/* ---------- Site header / Elementor header ------------------ */
.site-header,
.elementor-location-header,
header[role="banner"] {
    background: #fff;
    border-bottom: 1px solid var(--hm-color-line);
}

.site-header .custom-logo,
.elementor-location-header .custom-logo {
    /* The brand SVG has only a viewBox (no width/height attrs), so Chromium
     * can't derive width from max-height alone — pin aspect-ratio explicitly. */
    height: 56px;
    width: auto;
    max-width: 280px;
    aspect-ratio: 593 / 158;
}

/* Default WP / theme nav */
.site-header a,
.main-navigation a {
    font-family: var(--hm-font-heading);
    font-weight: 700;
    color: var(--hm-color-navy);
    text-decoration: none;
}

.site-header a:hover,
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--hm-color-gold);
}

/* ---------- Elementor scoped overrides ---------------------- */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--hm-font-heading);
}

.elementor-button {
    --button-background-color: var(--hm-color-navy);
    --button-text-color: #fff;
}

/* Make Elementor section dividers more "magazine-y" */
.elementor-section.hm-section--gold {
    background: linear-gradient(180deg, var(--hm-color-gold-soft) 0%, #fff 100%);
}
.elementor-section.hm-section--navy {
    background: var(--hm-color-navy);
    color: #fff;
}

/* ---------- Footer ------------------------------------------ */
.site-footer,
.elementor-location-footer {
    background: var(--hm-color-navy);
    color: #fff;
}
.site-footer a,
.elementor-location-footer a {
    color: #fff;
    text-decoration-color: var(--hm-color-gold-soft);
}
.site-footer a:hover,
.elementor-location-footer a:hover {
    color: var(--hm-color-gold-soft);
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.elementor-location-footer h1, .elementor-location-footer h2, .elementor-location-footer h3,
.elementor-location-footer h4, .elementor-location-footer h5, .elementor-location-footer h6 {
    color: #fff;
}

/* ---------- Selection / scrollbar / focus ring -------------- */
::selection {
    background: var(--hm-color-gold);
    color: #fff;
}
:focus-visible {
    outline: 3px solid var(--hm-color-gold);
    outline-offset: 2px;
    border-radius: var(--hm-radius);
}

/* ---------- Card pattern (used by metrics + landing pages) -- */
.hm-card {
    background: #fff;
    border: 1px solid var(--hm-color-line);
    border-radius: var(--hm-radius-lg);
    padding: 24px;
    box-shadow: var(--hm-shadow);
}
.hm-card--accent {
    border-top: 4px solid var(--hm-color-gold);
}

/* ---------- Print: keep brand colors -------------------------- */
@media print {
    a { color: var(--hm-color-navy); }
}

/* =============================================================
 * PDF visual primitives (Horecamerk-Huisstijl-Handboek.pdf p.1-2)
 *
 * These are opt-in classes you assign in Elementor's section/widget
 * "CSS Classes" field. They never need custom HTML or custom CSS
 * inside Elementor — just point and click.
 * ============================================================= */

/* ---------- Section with rotated gold sidebar ---------------
 * Reproduces the vertical "HUISSTIJL HANDBOEK" strip from the PDF.
 *
 * In Elementor: a Section with class "hm-side-strip" — the strip
 * label comes from a data-label attribute, but since Elementor
 * doesn't easily set data-attrs without custom HTML, we use the
 * CSS ::before with content-attr fallback. Simplest path is to
 * add the label in a Heading widget with class "hm-side-strip__label"
 * inside the first column of the section, the column itself gets
 * class "hm-side-strip__col".
 * ------------------------------------------------------------- */
.hm-side-strip {
    position: relative;
    background: var(--hm-color-paper-warm);
    padding: 72px 0;
    overflow: hidden;
}
.hm-side-strip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 96px;
    background: var(--hm-color-gold-soft);
    z-index: 0;
}
.hm-side-strip > .elementor-container,
.hm-side-strip > .e-con-inner,
.hm-side-strip > .elementor-column-wrap {
    position: relative;
    z-index: 1;
    padding-left: 120px;
}
.hm-side-strip__label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    padding: 24px 0;
}
.hm-side-strip__label .elementor-heading-title,
.hm-side-strip__label.elementor-widget-heading .elementor-heading-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: var(--hm-color-navy);
    letter-spacing: 0.12em;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

/* Mirror variant — strip on the right */
.hm-side-strip--right::before { inset: 0 0 0 auto; }
.hm-side-strip--right > .elementor-container,
.hm-side-strip--right > .e-con-inner,
.hm-side-strip--right > .elementor-column-wrap { padding-left: 0; padding-right: 120px; }
.hm-side-strip--right .hm-side-strip__label {
    left: auto;
    right: 0;
}
.hm-side-strip--right .hm-side-strip__label .elementor-heading-title {
    transform: rotate(0deg);
    writing-mode: vertical-rl;
}

/* Navy variant of the strip section */
.hm-side-strip--navy { background: var(--hm-color-navy); color: #fff; }
.hm-side-strip--navy::before { background: var(--hm-color-gold); }
/* Default child text → white, but with zero-specificity so Elementor's
 * own Title color / Text color setting still wins. */
.hm-side-strip--navy :where(h1, h2, h3, h4, h5, h6, p, .elementor-heading-title) {
    color: #fff;
}
.hm-side-strip--navy .hm-side-strip__label,
.hm-side-strip--navy .hm-side-strip__label .elementor-heading-title { color: var(--hm-color-gold-soft); }

@media (max-width: 768px) {
    .hm-side-strip { padding: 48px 0; }
    .hm-side-strip::before { width: 48px; }
    .hm-side-strip > .elementor-container,
    .hm-side-strip > .e-con-inner,
    .hm-side-strip > .elementor-column-wrap { padding-left: 64px; }
    .hm-side-strip__label,
    .hm-side-strip__label .elementor-heading-title {
        left: -22px;
        font-size: 1.1rem;
    }
}

/* ---------- Stat / inline highlight callout ------------------
 * Small inline accent used for KPI numbers ("15.000 horeca",
 * "6× per jaar"). Class "hm-stat" on Heading widget.
 * ------------------------------------------------------------- */
.hm-stat,
.hm-stat .elementor-heading-title {
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: var(--hm-color-gold);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.hm-stat--navy,
.hm-stat--navy .elementor-heading-title { color: var(--hm-color-navy); }

/* ---------- Generic "section title eyebrow" -----------------
 * Small navy ExtraBold uppercase label used above section headings.
 * Class "hm-eyebrow" on a Heading widget.
 * ------------------------------------------------------------- */
.hm-eyebrow,
.hm-eyebrow .elementor-heading-title {
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: var(--hm-color-gold);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.4em;
}


/* ---------- Side-strip full-bleed variant -------------------
 * Verwijdert de verticale padding (72/48px) van .hm-side-strip
 * zodat content (bv. een app-screenshot) de volle sectiehoogte
 * vult. De gouden/navy ::before-strip en het __label lopen al
 * over de volle hoogte (inset:0 / top:0 bottom:0), dus die
 * blijven correct. Class "hm-side-strip--flush" op de sectie.
 * ------------------------------------------------------------- */
.hm-side-strip--flush { padding-top: 0; padding-bottom: 0; }
@media (max-width: 768px) {
    .hm-side-strip--flush { padding-top: 0; padding-bottom: 0; }
}

/* ---------- App-screenshot in de DE APP side-strip ----------
 * Gemini-afbeelding: vult de volle hoogte van zijn grid-cel,
 * links uitgelijnd, object-fit cover gecentreerd. Rechterrand
 * faded via mask naar transparant zodat de navy-sectie
 * (#101340) doorschijnt -> "fade naar het blauw".
 * Class "hm-app-image" op de Image-widget.
 * ------------------------------------------------------------- */
.hm-app-image,
.hm-app-image .elementor-widget-container,
.hm-app-image .elementor-image,
.hm-app-image figure,
.hm-app-image a { height: 100%; margin: 0; }
.hm-app-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-mask-image: linear-gradient(to right, #000 60%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, #000 60%, rgba(0,0,0,0) 100%);
}

/* ---------- DE APP side-strip: mobiele weergave -------------
 * Op mobiel (<=767px) blijft de verticale "DE APP"-strip rechts
 * staan over de volle hoogte (net als "HET MAGAZINE" links),
 * maar dunner. De content houdt rechts ruimte vrij zodat er
 * niets onder de strip valt. De app-afbeelding behoudt de
 * fade naar rechts richting de strip.
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
    .hm-side-strip--flush.hm-side-strip--right::before { width: 46px; }
    .hm-side-strip--flush .hm-side-strip__label { width: 46px; }
    .hm-side-strip--flush .hm-side-strip__label .elementor-heading-title { font-size: 1.05rem; }
}

/* ---------- Sticky header: border-bottom bij scrollen ------
 * De header is sticky vanaf de top; om hem zichtbaar te houden
 * tegen de content krijgt hij een zwarte onderrand zodra je
 * scrollt. Transparante border standaard => geen layout-shift.
 * De class hm-header-scrolled wordt via JS getoggled.
 * ------------------------------------------------------------- */
.hm-elementor-header {
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.hm-elementor-header.hm-header-scrolled {
    border-bottom-color: #000;
}

/* ---------- Cashback claimen ([hm_cashback_claim]) ---------- */
.awcf-hm-claim__intro, .awcf-hm-claim__empty { color: #5b6070; line-height: 1.6; }
.awcf-hm-claim__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.awcf-hm-claim__item { border: 1px solid var(--hm-color-line); border-radius: 10px; padding: 1rem 1.25rem; background: #fff; }
.awcf-hm-claim__item-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.awcf-hm-claim__item-title { font-weight: 700; color: var(--hm-color-navy); }
.awcf-hm-claim__item-date { color: #6b7280; font-size: .85rem; }
.awcf-hm-claim__item-lp { color: #5b6070; font-size: .9rem; margin-top: .25rem; }
.awcf-hm-claim__form { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.awcf-hm-claim__file-label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--hm-color-navy); }
.awcf-hm-claim__message { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.awcf-hm-claim__message--success { background: #e7f6ec; color: #0a7a33; }
.awcf-hm-claim__message--error { background: #fbeaea; color: #b91c1c; }

/* ---------- Advertentie-types: 3 kolommen met gekleurd hoekje ----
 * Herkenbaarheid print<->online: elke actie-type-kaart heeft een
 * gevouwen gekleurd hoekje rechtsboven, net als in het magazine.
 * Toegepast via class "hm-actietype" + kleurmodifier op de kolom-
 * containers; de Elementor grid-container regelt 3-koloms (desktop)
 * en 1-koloms (mobiel).
 * ------------------------------------------------------------------ */
.hm-actietype {
    position: relative;
    background: #fff;
    border: 1px solid var(--hm-color-line);
    border-radius: 12px;
    padding: 2rem 1.5rem 1.75rem !important;
    overflow: hidden;
}
.hm-actietype::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-top: 58px solid var(--hm-actietype-color, var(--hm-color-gold));
    border-left: 58px solid transparent;
}
.hm-actietype--cashback { --hm-actietype-color: var(--hm-color-gold); }
.hm-actietype--sample   { --hm-actietype-color: #2f8f5b; }
.hm-actietype--info     { --hm-actietype-color: var(--hm-color-navy); }
.hm-actietype .hm-eyebrow,
.hm-actietype .hm-eyebrow .elementor-heading-title {
    color: var(--hm-actietype-color, var(--hm-color-gold));
}

/* ---------- Adverteerders-knop visueel onderscheiden ----------
 * Horeca-knoppen zijn voor deelnemers; de Adverteerders-knop
 * (uiterst rechts) krijgt de goud-accentkleur zodat het onder-
 * scheid horeca <-> adverteerder direct zichtbaar is.
 * ------------------------------------------------------------- */
.adverteerders-nav-item > a,
.adverteerders-nav-item > a.elementor-item {
    color: var(--hm-color-gold) !important;
    font-weight: 800;
}