/* =========================================================================
   Venezia (738) — custom CSS override, hosted page + embed.

   DRAFT: reverse-engineered from a snippet of veneziainc.com's own jobs page
   markup (their #vz-jobs / .vz-* classes), which doesn't exist in our DOM.
   This file re-implements the same look — palette, Barlow/Barlow Condensed,
   all-caps labels, squared-off buttons — against Core-Landing's actual
   classes. Revisit once Venezia sends their design.md; treat this as a
   starting point, not a final spec.

   Loaded last in <head> (see core/index-base.php), after the tenant-color
   <style> block, so plain rules here win the cascade on source order alone.
   !important is only used where the base theme also uses !important on that
   property (font-family, chip colors, etc.) — see comments below.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap');

:root {
    /* Core-Landing's --color-primary drives section-title/job-detail-card
     accents; --color-secondary drives the CTA/apply button background.
     Venezia's red is their CTA color, green is their accent/eyebrow color —
     mapped accordingly rather than 1:1 by name. */
    --color-primary: #1E5B3A;
    /* vz-green */
    --color-secondary: #C8332B;
    /* vz-red */

    --vz-ink: #16241D;
    --vz-ground: #E9EAE6;
    --vz-steel: #5B6560;
    --vz-line: #CFD2CB;
    --vz-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --vz-body: 'Barlow', -apple-system, 'Segoe UI', sans-serif;

    /* Hero badge chips derive from these rather than --color-primary/secondary
     directly. The hero band itself is dark green (--color-primary), so both
     chips use a light/white treatment for contrast rather than tinting
     toward the (also dark) brand colors. */
    --hero-chip-bg-1: rgba(255, 255, 255, 0.16);
    --hero-chip-text-1: #ffffff;
    --hero-chip-border-1: rgba(255, 255, 255, 0.4);
    --hero-chip-bg-2: rgba(255, 255, 255, 0.12);
    --hero-chip-text-2: #ffffff;
    --hero-chip-border-2: rgba(255, 255, 255, 0.3);
}

/* Base font swap. The theme sets this list with !important, so we match it. */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
input,
button,
select,
textarea,
blockquote {
    font-family: var(--vz-body) !important;
}

/* Display font + all-caps for headings, labels, and the section-title pills */
.heading,
h1,
h2,
h3,
h4,
.section-title,
.chip-primary,
.chip-secondary,
.btn-see-full-details,
.job-detail-card .content-wrap h4 {
    font-family: var(--vz-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.heading {
    color: var(--vz-ground) !important;
    text-wrap: balance;
}

.chip-container {
    /* Establishes this element (not the viewport) as the sizing reference
       for the cqw units below, so the chips scale off their own actual
       available width — correct whether this column is full-width (mobile)
       or half-width (desktop hero), unlike vw which only knows the
       viewport. */
    container-type: inline-size;
    margin-left: -1%;
    width: 102%;
    max-width: 560px;
    display: block !important;
}

.chip-primary,
.chip-secondary {
    margin-left: auto;
    margin-right: auto !important;
    padding: 3px 7px;
    /* Scales with the chip row's own width (as large as possible) but
       clamped 10px-18px. Chips stay side by side as long as they fit at
       their current size; the container's existing flex-wrap
       (index-base.php) only drops them to a second line once two chips +
       gap no longer fit even at the 10px floor. */
    font-size: clamp(10px, 2.8cqw, 2.3rem);
}

body {
    color: var(--vz-ink);
}

/* Squared-off buttons and pills — Venezia's site uses hard edges everywhere */
.pb_btn-pill,
.section-title,
.chip-primary,
.chip-secondary,
.btn-see-full-details,
.job-detail-card,
.perk-card {
    border-radius: 0 !important;
}

/* Primary CTA (lead-form submit / "Full Application" link): squared, bold
   uppercase, wider letter-spacing to match vz-btn styling */
.pb_form_v1 {
    border-radius: 0px !important;
    padding: 12px !important;
}

.mb-4.mt-0.text-center {
    margin-bottom: .5rem !important;
}

.form-control.pb_height-50 {
    border-radius: 0px !important;
}

.pb_btn-pill {
    padding-left: 38px;
    padding-right: 38px;
    padding-top: 17px;
    padding-bottom: 17px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--vz-display) !important;
    transition: transform .15s ease, background .15s ease;
}

.pb_btn-pill:hover {
    transform: translateY(-2px);
}

/* Section title pills -> flat bordered tag, no pill radius (handled above) */
.section-title {
    border-width: 2px !important;
}