/*
 * substyles.css — List Dakota Sub-Page Styles
 * Brand colors: #43789B (primary blue) · #222222 (dark)
 * Font: Open Sans (Bunny Fonts)
 */

/* CSS CUSTOM PROPERTIES */
:root {
    /* Brand */
    --color-primary:        #43789B;
    --color-primary-dark:   #315d7c;
    --color-primary-light:  #5a94b8;
    --color-primary-xlight: #e8f2f8;
    --color-dark:           #222222;
    --color-dark-2:         #333333;
    --color-mid:            #4a4a4a;
    --color-light:          #f5f7fa;
    --color-white:          #ffffff;
    --color-border:         #dde4ea;
    --color-accent:         #2e7a6c;   /* teal green — CTAs */
    --color-accent-dark:    #246058;

    /* Typography */
    --font-base:    'Open Sans', sans-serif;
    --text-xs:      0.875rem;
    --text-sm:      1rem;
    --text-base:    1.0625rem;
    --text-lg:      1.125rem;
    --text-xl:      1.25rem;
    --text-2xl:     1.5rem;
    --text-3xl:     1.875rem;
    --text-4xl:     2.25rem;
    --text-5xl:     3rem;
    --fw-normal:    400;
    --fw-semibold:  600;
    --fw-bold:      700;
    --lh-tight:     1.2;
    --lh-base:      1.6;

    /* Layout */
    --radius-sm:    4px;
    --radius:       8px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
    --shadow:       0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.14);
    --transition:   0.2s ease;

    /* Header */
    --header-height: 88px;
}

/* BASE */
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family:    var(--font-base);
    font-size:      var(--text-base);
    line-height:    var(--lh-base);
    color:          var(--color-dark);
    background:     var(--color-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color:           var(--color-primary);
    text-decoration: none;
    transition:      color var(--transition);
}
a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}
a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-weight:  var(--fw-bold);
    line-height:  var(--lh-tight);
    color:        var(--color-dark);
    margin-top:   0;
    margin-bottom: 0.5em;
}

p { margin-top: 0; }

address { font-style: normal; line-height: var(--lh-base); }

/* SKIP LINK (accessibility) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: var(--fw-semibold);
    z-index: 9999;
    text-decoration: none;
    transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* HEADER & NAV */
.site-header {
    background:  var(--color-white);
    border-bottom: 2px solid var(--color-primary-xlight);
    height:      var(--header-height);
    display:     flex;
    align-items: center;
    position:    sticky;
    top: 0;
    z-index:     100;
    box-shadow:  var(--shadow-sm);
}

.site-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    width:           100%;
}

.site-logo {
    height:    58px;
    width:     auto;
    display:   block;
}

.nav-menu {
    display:    flex;
    align-items: center;
    gap:         0.25rem;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.nav-menu a {
    display:       block;
    padding:       0.5rem 0.85rem;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    color:         var(--color-dark-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition:    background var(--transition), color var(--transition);
}
.nav-menu a:hover,
.nav-menu a:focus {
    background: var(--color-primary-xlight);
    color:      var(--color-primary);
    text-decoration: none;
}
.nav-menu a[aria-current="page"] {
    background:  var(--color-primary);
    color:       var(--color-white);
    text-decoration: none;
}

/* Mobile nav toggle */
.nav-toggle {
    display:         none;
    flex-direction:  column;
    gap:             5px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         6px;
    border-radius:   var(--radius-sm);
}
.nav-toggle-bar {
    width:  26px;
    height: 3px;
    background:    var(--color-dark);
    border-radius: 2px;
    display:       block;
    transition:    transform var(--transition), opacity var(--transition);
}

@media (max-width: 840px) {
    .nav-toggle { display: flex; }
    .nav-menu {
        display:        none;
        flex-direction: column;
        align-items:    stretch;
        position:       absolute;
        top:            var(--header-height);
        left: 0; right: 0;
        background:     var(--color-white);
        padding:        1rem;
        border-bottom:  2px solid var(--color-border);
        box-shadow:     var(--shadow);
        gap:            0.25rem;
        z-index:        99;
    }
    .nav-menu.is-open { display: flex; }
    .nav-menu a { font-size: var(--text-base); padding: 0.75rem 1rem; }
    .nav-contact { margin-top: 0.5rem; }
}

/* BUTTONS */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.6rem 1.25rem;
    font-family:     var(--font-base);
    font-size:       var(--text-sm);
    font-weight:     var(--fw-semibold);
    border-radius:   var(--radius);
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--transition), color var(--transition),
                     border-color var(--transition), box-shadow var(--transition);
    white-space:     nowrap;
}
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.btn-primary {
    background:   var(--color-primary);
    color:        var(--color-white);
    border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background:   var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color:        var(--color-white);
    text-decoration: none;
}

.btn-accent {
    background:   var(--color-accent);
    color:        var(--color-white);
    border-color: var(--color-accent);
}
.btn-accent:hover, .btn-accent:focus {
    background:   var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color:        var(--color-white);
    text-decoration: none;
}

.btn-outline {
    background:   transparent;
    color:        var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover, .btn-outline:focus {
    background:   var(--color-primary);
    color:        var(--color-white);
    text-decoration: none;
}

.btn-outline-nav {
    background:   transparent;
    color:        var(--color-primary);
    border-color: var(--color-primary);
    padding:      0.45rem 1rem;
    font-size:    var(--text-sm);
    border-radius: var(--radius);
    border-width: 2px;
    font-weight:  var(--fw-semibold);
    text-decoration: none;
    display:      inline-block;
    transition:   background var(--transition), color var(--transition);
}
.btn-outline-nav:hover, .btn-outline-nav:focus {
    background: var(--color-primary);
    color:      var(--color-white);
    text-decoration: none;
}

.btn-secondary {
    background:   var(--color-light);
    color:        var(--color-dark);
    border-color: var(--color-border);
}
.btn-secondary:hover, .btn-secondary:focus {
    background:   var(--color-primary-xlight);
    border-color: var(--color-primary);
    color:        var(--color-primary);
    text-decoration: none;
}

.btn-lg { padding: 0.85rem 2rem; font-size: var(--text-base); }
.btn-sm { padding: 0.4rem 0.9rem; font-size: var(--text-xs); }

.btn-text-link {
    background:      none;
    border:          none;
    color:           var(--color-primary);
    font-family:     var(--font-base);
    font-size:       var(--text-sm);
    font-weight:     var(--fw-semibold);
    cursor:          pointer;
    padding:         0;
    text-decoration: underline;
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
}
.btn-text-link:hover { color: var(--color-primary-dark); }

/* SECTION WRAPPERS */
.section {
    padding-block: 3.5rem;
}
.section--alt {
    background: var(--color-light);
}
.section--dark {
    background: var(--color-dark);
    color:      var(--color-white);
}
.section-header {
    text-align:    center;
    margin-bottom: 2.5rem;
}
.section-header h2 {
    font-size:     clamp(var(--text-2xl), 3vw, var(--text-3xl));
    margin-bottom: 0.5rem;
}
.section-header p {
    color:         var(--color-mid);
    font-size:     var(--text-lg);
    max-width:     560px;
    margin-inline: auto;
    margin-bottom: 0;
}
.section-footer {
    text-align:  center;
    margin-top:  2.5rem;
}

/* BUSINESS CARDS */
.biz-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           1rem;
    box-shadow:    var(--shadow-sm);
    transition:    box-shadow var(--transition), transform var(--transition);
    height:        100%;
}
.biz-card:hover {
    box-shadow: var(--shadow);
    transform:  translateY(-2px);
}
.biz-card__logo {
    text-align: center;
}
.biz-card__logo img {
    max-height: 150px;
    width:      auto;
    margin:     0 auto;
    object-fit: contain;
}
.biz-card__name {
    font-size:     var(--text-lg);
    margin-bottom: 0.25rem;
}
.biz-card__tagline {
    color:       var(--color-mid);
    font-size:   var(--text-sm);
    margin-top:  0;
}
.biz-card__addresses {
    font-size:  var(--text-sm);
    color:      var(--color-dark-2);
}
.biz-card__address {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}
.biz-card__address:last-of-type { border-bottom: none; margin-bottom: 0; }
.addr-label {
    display:     block;
    font-weight: var(--fw-semibold);
    color:       var(--color-primary);
    font-size:   var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}
.addr-detail {
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
    color:       var(--color-mid);
    font-size:   var(--text-sm);
}
.addr-detail a { color: var(--color-primary); }

.all-addresses {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border);
}

.biz-card__contact {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   var(--text-sm);
    color:       var(--color-dark-2);
    margin:      0.15rem 0;
}
.biz-card__contact i { color: var(--color-primary); flex-shrink: 0; }

.biz-card__social {
    display:    flex;
    gap:        0.6rem;
    flex-wrap:  wrap;
    margin-top: 0.25rem;
}
.biz-card__social a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--color-primary-xlight);
    color:           var(--color-primary);
    font-size:       var(--text-sm);
    transition:      background var(--transition), color var(--transition);
}
.biz-card__social a:hover {
    background:      var(--color-primary);
    color:           var(--color-white);
    text-decoration: none;
}

.biz-card__cats {
    font-size:  var(--text-sm);
    color:      var(--color-mid);
    margin:     0.6rem 0 0;
    flex:       1;
}
.biz-card__cats a { color: var(--color-primary); }

.biz-card__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.biz-card__actions .btn { font-size: var(--text-sm); padding: 0.4rem 0.8rem; }

/* DEAL / COUPON CARDS */
.deal-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-top:    4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.85rem;
    box-shadow:    var(--shadow-sm);
    text-align:    center;
    height:        100%;
    transition:    box-shadow var(--transition);
}
.deal-card:hover { box-shadow: var(--shadow); }
.deal-card__logo img {
    max-height:    150px;
    width:         auto;
    margin:        0 auto;
    object-fit:    contain;
}
.deal-card__offer {
    font-size:   var(--text-lg);
    font-weight: var(--fw-bold);
    color:       var(--color-dark);
    line-height: var(--lh-tight);
}
.deal-card__offer strong { color: var(--color-accent); }
.deal-card__biz-name {
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-dark-2);
    margin:      0;
}
.deal-card__coupon-code {
    display:       inline-block;
    background:    var(--color-primary-xlight);
    border:        1px dashed var(--color-primary);
    border-radius: var(--radius-sm);
    padding:       0.25rem 0.75rem;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-bold);
    color:         var(--color-primary);
    letter-spacing: 0.08em;
}
.deal-card__address { font-style: normal; font-size: var(--text-sm); color: var(--color-dark-2); line-height: 1.6; }
.deal-card__expiry { font-size: var(--text-sm); color: var(--color-mid); display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin: 0; }
.deal-card__disclaimer {
    font-size:  var(--text-xs);
    color:      var(--color-mid);
    margin-top: auto;
    line-height: 1.5;
}
.deal-card__actions {
    display:         flex;
    gap:             0.5rem;
    justify-content: center;
    flex-wrap:       wrap;
}

/* CATEGORY CARDS (directory index grid) */
.cat-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         1.75rem 1rem;
    background:      var(--color-white);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    text-decoration: none;
    color:           var(--color-dark);
    gap:             0.75rem;
    transition:      background var(--transition), border-color var(--transition),
                     transform var(--transition), box-shadow var(--transition);
    box-shadow:      var(--shadow-sm);
}
.cat-card:hover, .cat-card:focus {
    background:      var(--color-primary-xlight);
    border-color:    var(--color-primary);
    color:           var(--color-primary-dark);
    transform:       translateY(-3px);
    box-shadow:      var(--shadow);
    text-decoration: none;
}
.cat-card i {
    font-size: 2.5rem;
    color:     var(--color-primary);
    transition: color var(--transition);
}
.cat-card:hover i { color: var(--color-primary-dark); }
.cat-card h3 {
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    margin:        0;
    line-height:   var(--lh-tight);
}

/* BREADCRUMB */
.breadcrumb-nav {
    background:    var(--color-light);
    border-bottom: 1px solid var(--color-border);
    padding-block: 0.6rem;
}
.breadcrumb {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.3rem;
    list-style:  none;
    margin:      0;
    padding:     0;
    font-size:   var(--text-sm);
}
.breadcrumb li { display: flex; align-items: center; gap: 0.3rem; }
.breadcrumb li:not(:last-child)::after {
    content: '/';
    color:   var(--color-mid);
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-mid); }

/* AD BLOCKS */
.ad-block {
    text-align:  center;
    padding:     2rem 0;
    border-top:  1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-block: 2rem;
}
.ad-block a {
    display: block;
    margin:  0 auto;
}
.ad-label {
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-mid);
    margin-bottom:  0.5rem;
}
.ad-image {
    display:       block;
    width:         100%;
    height:        auto;
    margin:        0 auto;
    border-radius: var(--radius-sm);
}
.ad-block--banner { }
.ad-block--banner a  { max-width: 1100px; }
.ad-block--banner .ad-image { max-width: 1100px; }
.ad-block--tile a    { max-width: 300px; }
.ad-block--tile .ad-image { max-width: 300px; }

/* FOOTER */
.site-footer {
    background:  var(--color-dark);
    color:       rgba(255,255,255,.8);
    padding-block: 3rem;
    margin-top:  4rem;
}
.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap:                   2rem;
    padding-bottom:        2rem;
    border-bottom:         1px solid rgba(255,255,255,.1);
    margin-bottom:         1.5rem;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-logo { max-height: 100px; width: auto; margin-bottom: 0.75rem; }
@media (max-width: 640px) { .footer-logo { max-height: 130px; } }
.footer-tagline { font-size: var(--text-sm); margin: 0; color: rgba(255,255,255,.88); }

.footer-nav-heading {
    color:          var(--color-white);
    font-size:      var(--text-sm);
    font-weight:    var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  0.75rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.4rem; }
.footer-nav a { color: rgba(255,255,255,.9); font-size: var(--text-base); text-decoration: none; }
.footer-nav a:hover { color: var(--color-white); text-decoration: underline; }

.footer-bottom { font-size: var(--text-sm); color: rgba(255,255,255,.85); text-align: center; line-height: var(--lh-base); }

/* PAGE BANNER */
/* ─── SWAP IMAGE: change the url() value below to your own image path ───
   Recommended image ratio: 16:9 or wider (e.g. 1600×900px minimum).
   This banner is shorter than the hero so a wider crop (21:9 or panoramic)
   works especially well — the center of the image is what shows. ─── */
.page-banner {
    background:  url('../images/header-back/sub-back.webp') center center / cover no-repeat;
    color:       var(--color-white);
    padding:     3rem 1.25rem;
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}
.page-banner::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(30,61,84,.88);
    pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 {
    color:       var(--color-white);
    font-size:   clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin:      0;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.page-banner p {
    color:       var(--color-white);
    font-size:   var(--text-lg);
    max-width:   560px;
    margin:      0.75rem auto 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* FILTERS BAR */
.filters-bar {
    display:       grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:           0.75rem;
    background:    var(--color-light);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1rem 1.25rem;
    margin-bottom: 2rem;
    align-items:   end;
}
.filters-bar__group {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}
.filters-bar__group label {
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-dark-2);
    white-space: nowrap;
}
.filters-bar__group select {
    font-family:  var(--font-base);
    font-size:    var(--text-sm);
    padding:      0.5rem 0.75rem;
    border:       1px solid var(--color-border);
    border-radius: var(--radius);
    background:   var(--color-white);
    color:        var(--color-dark);
    cursor:       pointer;
    width:        100%;
}
.filters-bar__group select:focus {
    outline:      2px solid var(--color-primary);
    border-color: var(--color-primary);
}
.filters-bar__clear {
    display:     flex;
    align-items: flex-end;
}
/* Legacy inline label support (non-group usage) */
.filters-bar > label {
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-dark-2);
    white-space: nowrap;
}
.filters-bar > select {
    font-family:  var(--font-base);
    font-size:    var(--text-sm);
    padding:      0.5rem 0.75rem;
    border:       1px solid var(--color-border);
    border-radius: var(--radius);
    background:   var(--color-white);
    color:        var(--color-dark);
    cursor:       pointer;
    min-width:    160px;
}
.filters-bar > select:focus {
    outline:      2px solid var(--color-primary);
    border-color: var(--color-primary);
}
@media (max-width: 640px) {
    .filters-bar {
        grid-template-columns: 1fr;
    }
}

/* JOB BOARD CARDS */
.job-card { background: var(--color-white); border: 1px solid var(--color-border); border-left: 5px solid var(--color-primary); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.job-card:hover { box-shadow: var(--shadow); }
.job-card__title { font-size: var(--text-xl); font-weight: var(--fw-bold); margin: 0; }
.job-card__meta { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-mid); }
.job-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.job-badge { display: inline-block; background: var(--color-primary-xlight); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--fw-semibold); border-radius: 99px; padding: 0.2rem 0.65rem; white-space: nowrap; }
.job-badge--remote { background: #e6f9f0; color: #1a7a45; }
.job-card__excerpt { font-size: var(--text-sm); color: var(--color-dark-2); margin: 0; }
.job-card__actions { margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* DISCOVER / FEATURED ITEM CARDS */
.item-card {
    position: relative; /* needed for stretched link */ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); height: 100%; }
.item-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.item-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--color-light); }
.item-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.item-card:hover .item-card__img img { transform: scale(1.04); }
.item-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-border); font-size: 3rem; }
.item-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.item-card__cat { font-size: var(--text-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); }
.item-card__name { font-size: var(--text-lg); font-weight: var(--fw-bold); margin: 0; }
.item-card__price { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-accent); }
.item-card__condition { font-size: var(--text-sm); color: var(--color-mid); }
.item-card__desc { font-size: var(--text-sm); color: var(--color-dark-2); flex: 1; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.item-card__listed-by { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); color: var(--color-mid); margin: 0.5rem 0 0; border-top: 1px solid var(--color-border); padding-top: 0.5rem; }
/* Whole-card clickable link */
.item-card__link {
    position:   absolute;
    inset:      0;
    background: transparent;
    border:     none;
    cursor:     pointer;
    z-index:    1;
    border-radius: inherit;
}
.item-card__link:focus-visible {
    outline:        3px solid var(--color-primary);
    outline-offset: 2px;
}
/* Ensure interactive elements inside card sit above the stretched link */
.item-card__body a,
.item-card__body button {
    position: relative;
    z-index:  2;
}

/* PAGINATION */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; color: var(--color-dark); transition: background var(--transition), color var(--transition); }
.pagination a:hover { background: var(--color-primary-xlight); border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.pagination .disabled { opacity: 0.4; pointer-events: none; }

/* EMPTY STATE */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--color-mid); }
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state h2 { font-size: var(--text-xl); color: var(--color-dark-2); }
.empty-state p { max-width: 400px; margin-inline: auto; }

/* UTILITIES */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-muted   { color: var(--color-mid); }
.text-accent  { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.fw-bold      { font-weight: var(--fw-bold); }
.no-margin    { margin: 0 !important; }
.hidden       { display: none !important; }

/* DISCOVER — category tabs */
.discover-tabs {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.5rem;
    margin-bottom: 2rem;
    list-style:  none;
    padding:     0;
    margin-top:  0;
}
.discover-tab {
    display:       inline-block;
    padding:       0.45rem 1rem;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    border:        2px solid var(--color-border);
    border-radius: 99px;
    color:         var(--color-dark-2);
    text-decoration: none;
    transition:    background var(--transition), border-color var(--transition), color var(--transition);
}
.discover-tab:hover, .discover-tab:focus {
    background:      var(--color-primary-xlight);
    border-color:    var(--color-primary);
    color:           var(--color-primary);
    text-decoration: none;
}
.discover-tab--active {
    background:   var(--color-primary);
    border-color: var(--color-primary);
    color:        var(--color-white);
}
.discover-tab--active:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); }

/* DISCOVER — item card extras */
.item-card__img { position: relative; }
.item-card__img-count {
    position:      absolute;
    bottom:        0.5rem;
    right:         0.5rem;
    background:    rgba(0,0,0,.6);
    color:         #fff;
    font-size:     var(--text-xs);
    font-weight:   var(--fw-semibold);
    padding:       0.2rem 0.5rem;
    border-radius: 99px;
    display:       inline-flex;
    align-items:   center;
    gap:           0.25rem;
}
.item-card__specs {
    list-style:  none;
    margin:      0.25rem 0;
    padding:     0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.4rem 1rem;
    font-size:   var(--text-xs);
    color:       var(--color-mid);
}
.item-card__specs li { display: inline-flex; align-items: center; gap: 0.3rem; }
.item-card__price { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-accent); margin: 0.25rem 0 0; }
.item-card__price--call { color: var(--color-mid); font-size: var(--text-base); }
.item-card__price-note { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--color-mid); margin-left: 0.25rem; }

/* DISCOVER — modal overlay */
.discover-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.65);
    z-index:    500;
    display:    flex;
    align-items: flex-start;
    justify-content: center;
    padding:    1.5rem 1rem;
    overflow-y: auto;
    transition: opacity var(--transition);
}
.discover-modal-overlay[aria-hidden="true"] { display: none; }

.discover-modal {
    background:    var(--color-white);
    border-radius: var(--radius-xl);
    width:         100%;
    max-width:     900px;
    box-shadow:    var(--shadow-lg);
    display:       flex;
    flex-direction: column;
    max-height:    90vh;
    overflow:      hidden;
    outline:       none;
    margin:        auto;
}

.discover-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1.5rem;
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
}
.discover-modal__title {
    font-size:   var(--text-xl);
    margin:      0;
    flex:        1;
    padding-right: 1rem;
}
.discover-modal__close {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     1.25rem;
    color:         var(--color-mid);
    padding:       0.4rem;
    border-radius: var(--radius-sm);
    line-height:   1;
    flex-shrink:   0;
    transition:    color var(--transition), background var(--transition);
}
.discover-modal__close:hover { color: var(--color-dark); background: var(--color-light); }
.discover-modal__close:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.discover-modal__body {
    display:    grid;
    grid-template-columns: 1fr 1fr;
    gap:        0;
    overflow-y: auto;
    flex:       1;
}
@media (max-width: 680px) {
    .discover-modal__body { grid-template-columns: 1fr; }
}

/* DISCOVER — modal gallery */
.modal-gallery {
    background:  var(--color-light);
    padding:     1rem;
    display:     flex;
    flex-direction: column;
    gap:         0.75rem;
}
.gallery-main { border-radius: var(--radius); overflow: hidden; }
.gallery-main__img { width: 100%; height: auto; display: block; max-height: 340px; object-fit: contain; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gallery-thumb {
    width:         60px;
    height:        60px;
    border-radius: var(--radius-sm);
    overflow:      hidden;
    border:        2px solid transparent;
    cursor:        pointer;
    padding:       0;
    background:    none;
    transition:    border-color var(--transition);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb--active { border-color: var(--color-primary); }
.gallery-thumb:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* DISCOVER — modal details panel */
.modal-details {
    padding:    1.5rem;
    overflow-y: auto;
    display:    flex;
    flex-direction: column;
    gap:        1rem;
}
.modal-details__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.item-badge {
    display:       inline-block;
    background:    var(--color-primary-xlight);
    color:         var(--color-primary);
    font-size:     var(--text-xs);
    font-weight:   var(--fw-semibold);
    border-radius: 99px;
    padding:       0.2rem 0.65rem;
}
.item-badge--condition { background: #e6f9f0; color: #1a7a45; }
.modal-price { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--color-accent); }
.modal-price--call { font-size: var(--text-lg); color: var(--color-mid); }
.modal-price-note { font-size: var(--text-sm); color: var(--color-mid); margin-left: 0.35rem; }

/* DISCOVER — specs table */
.specs-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--text-sm);
}
.specs-table th, .specs-table td {
    padding:     0.4rem 0.6rem;
    text-align:  left;
    border-bottom: 1px solid var(--color-border);
}
.specs-table th { font-weight: var(--fw-semibold); color: var(--color-dark-2); width: 40%; white-space: nowrap; }
.specs-table td { color: var(--color-dark); }

.modal-desc { font-size: var(--text-sm); color: var(--color-dark-2); line-height: 1.65; }
.modal-biz  { font-size: var(--text-sm); color: var(--color-mid); background: var(--color-light); border-radius: var(--radius); padding: 0.6rem 0.85rem; }

/* DISCOVER — modal contact form */
.modal-contact { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.modal-contact__heading { font-size: var(--text-base); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.modal-contact__phone { font-size: var(--text-sm); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.modal-contact__result { font-size: var(--text-sm); padding: 0.6rem 0.85rem; border-radius: var(--radius); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.modal-contact__result--ok    { background: #e6f9f0; color: #1a7a45; }
.modal-contact__result--error { background: #fde8e8; color: #c0392b; }

.form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.form-group label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-dark-2); }
.form-optional { font-weight: var(--fw-normal); color: var(--color-mid); font-size: var(--text-sm); }
.form-group input, .form-group textarea {
    font-family:   var(--font-base);
    font-size:     var(--text-sm);
    padding:       0.5rem 0.75rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-dark);
    background:    var(--color-white);
    width:         100%;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus, .form-group textarea:focus {
    outline:      none;
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(67,120,155,.15);
}
.form-group textarea { resize: vertical; min-height: 90px; }

/* JOBS — list layout */
.jobs-list { display: flex; flex-direction: column; gap: 1.5rem; }

/* JOBS — card top row (logo + header) */
.job-card__top {
    display:     flex;
    align-items: flex-start;
    gap:         1rem;
}
.job-card__logo { flex-shrink: 0; }
.job-card__logo img { max-height: 60px; width: auto; border-radius: var(--radius-sm); object-fit: contain; }
.job-card__header { flex: 1; }
.job-card__company {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   var(--text-sm);
    color:       var(--color-mid);
    margin:      0.2rem 0 0.5rem;
}
.job-card__company i { flex-shrink: 0; }
.job-card__company a { color: var(--color-primary); }

/* JOBS — description (HTML allowed) */
.job-card__desc {
    font-size:   var(--text-sm);
    color:       var(--color-dark-2);
    line-height: 1.65;
    border-top:  1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top:  0.25rem;
}
.job-card__desc p { margin-bottom: 0.5rem; }
.job-card__desc p:last-child { margin-bottom: 0; }
.job-card__desc ul, .job-card__desc ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.job-card__desc li { margin-bottom: 0.25rem; }

/* ADVERTISE — two-column layout */
.adv-layout {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   2.5rem;
    align-items:           start;
}
@media (max-width: 860px) {
    .adv-layout { grid-template-columns: 1fr; }
    .adv-aside  { order: -1; }
}

/* ADVERTISE — aside / sticky ad column */
.adv-aside__sticky {
    position: sticky;
    top:      calc(var(--header-height) + 1.5rem);
    display:  flex;
    flex-direction: column;
    gap:      1rem;
}
.adv-aside__label {
    font-size:      var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-mid);
    margin:         0;
}
.adv-aside__info {
    background:    var(--color-light);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.25rem;
}
.adv-aside__info-heading {
    font-size:     var(--text-base);
    margin-bottom: 0.75rem;
}
.adv-aside__info-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        0.5rem;
}
.adv-aside__info-list li {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   var(--text-sm);
    color:       var(--color-dark-2);
}
.adv-aside__info-list i { color: var(--color-accent); flex-shrink: 0; }

/* FORM CARD */
.form-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       2rem;
    box-shadow:    var(--shadow-sm);
}
.form-card__title {
    font-size:     var(--text-2xl);
    margin-bottom: 0.4rem;
}
.form-card__subtitle {
    font-size:     var(--text-sm);
    color:         var(--color-mid);
    margin-bottom: 1.5rem;
}

/* FORM ROWS */
.form-row { margin-bottom: 1rem; }
.form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .form-row--2col { grid-template-columns: 1fr; }
}

/* FORM ELEMENTS */
.form-label {
    display:       block;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    color:         var(--color-dark-2);
    margin-bottom: 0.35rem;
}
.form-required { color: #c62828; }
.form-input, .form-textarea {
    font-family:   var(--font-base);
    font-size:     var(--text-sm);
    padding:       0.55rem 0.85rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-dark);
    background:    var(--color-white);
    width:         100%;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-textarea:focus {
    outline:      none;
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(67,120,155,.15);
}
.form-input--short { max-width: 140px; }
.form-textarea { resize: vertical; min-height: 110px; }
.form-hint {
    display:    block;
    font-size:  var(--text-xs);
    color:      var(--color-mid);
    margin-top: 0.3rem;
}

/* ADVERTISING CHECKBOXES */
.adv-fieldset {
    border:  none;
    padding: 0;
    margin:  0;
}
.adv-legend {
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    color:         var(--color-dark-2);
    margin-bottom: 0.75rem;
    display:       block;
    width:         100%;
}
.adv-checkboxes {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
}
.adv-checkbox {
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
    cursor:        pointer;
    padding:       0.6rem 0.85rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    background:    var(--color-white);
    transition:    background var(--transition), border-color var(--transition);
}
.adv-checkbox:hover {
    background:   var(--color-primary-xlight);
    border-color: var(--color-primary);
}
.adv-checkbox input[type="checkbox"] {
    width:      1.1rem;
    height:     1.1rem;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor:     pointer;
}
.adv-checkbox__label {
    font-size:   var(--text-sm);
    color:       var(--color-dark-2);
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.adv-checkbox__label i { color: var(--color-primary); }

/* HONEYPOT */
.adv-hp { display: none; }

/* FORM SUBMIT */
.form-submit-area { margin-top: 1.5rem; }

/* FORM MESSAGES */
.form-message {
    display:       none;
    align-items:   center;
    gap:           0.6rem;
    padding:       0.85rem 1rem;
    border-radius: var(--radius);
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    margin-top:    1rem;
    outline:       none;
}
.form-message.is-visible      { display: flex; }
.form-message--success { background: #e6f9f0; color: #1a7a45; }
.form-message--error   { background: #fde8e8; color: #c0392b; }

/* FORM — error states */
.form-error {
    display:    none;
    font-size:  var(--text-xs);
    color:      #c62828;
    margin-top: 0.3rem;
    font-weight: var(--fw-semibold);
}
.form-input--error {
    border-color: #c62828 !important;
    box-shadow:   0 0 0 3px rgba(198,40,40,.12) !important;
}

/* CONTACT — info card */
.contact-info-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.25rem;
    margin-bottom: 1rem;
}
.contact-info-card__title {
    font-size:     var(--text-base);
    font-weight:   var(--fw-bold);
    margin-bottom: 0.75rem;
    display:       flex;
    align-items:   center;
    gap:           0.45rem;
    color:         var(--color-dark);
}
.contact-info-card__title i { color: var(--color-primary); }

/* CONTACT — quick links */
.contact-quick-links {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0.6rem;
}
.contact-quick-links li {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   var(--text-sm);
}
.contact-quick-links i { color: var(--color-primary); flex-shrink: 0; }
.contact-quick-links a { color: var(--color-primary); }
.contact-quick-links a:hover { color: var(--color-primary-dark); }

/* BUSINESS CARD — address grid (2 side by side) */
.biz-card__addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.biz-card__addr-grid .biz-card__address {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ADDRESS MODAL */
.addr-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.6);
    z-index:    600;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    1rem;
}
.addr-modal-overlay[aria-hidden="true"] { display: none; }
.addr-modal {
    background:    var(--color-white);
    border-radius: var(--radius-xl);
    width:         100%;
    max-width:     700px;
    max-height:    85vh;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    box-shadow:    var(--shadow-lg);
    outline:       none;
}
.addr-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1.5rem;
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
}
.addr-modal__title {
    font-size:   var(--text-xl);
    margin:      0;
    flex:        1;
}
.addr-modal__close {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     1.25rem;
    color:         var(--color-mid);
    padding:       0.4rem;
    border-radius: var(--radius-sm);
    line-height:   1;
    flex-shrink:   0;
    transition:    color var(--transition), background var(--transition);
}
.addr-modal__close:hover  { color: var(--color-dark); background: var(--color-light); }
.addr-modal__close:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.addr-modal__body  { padding: 1.5rem; overflow-y: auto; }
.addr-modal__grid  {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}
.addr-modal__address {
    font-style:  normal;
    font-size:   var(--text-sm);
    line-height: 1.6;
    color:       var(--color-dark-2);
    background:  var(--color-light);
    border-radius: var(--radius);
    padding:     0.85rem 1rem;
}

/* WCAG — placeholder text must meet 4.5:1 contrast */
::placeholder { color: #595959; opacity: 1; }

/* DEALS — multiple address grid */
.deal-card__addresses { margin-bottom: 0.5rem; }
.deal-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}
.deal-addr-grid .deal-card__address {
    background: var(--color-light);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}

/* ══════════════════════════════════════════════
   JOB CARDS
══════════════════════════════════════════════ */
.job-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           1rem;
    transition:    box-shadow var(--transition), transform var(--transition);
}
.job-card:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-2px);
}
.job-card__logo {
    text-align: center;
}
.job-card__logo img {
    max-height:  150px;
    width:       auto;
    margin:      0 auto;
    object-fit:  contain;
}
.job-card__body { flex: 1; }
.job-card__title {
    font-size:     var(--text-lg);
    font-weight:   var(--fw-bold);
    color:         var(--color-dark);
    margin:        0 0 0.35rem;
    line-height:   1.3;
}
.job-card__company {
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-primary);
    margin:      0 0 0.75rem;
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}
.job-card__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.4rem 0.75rem;
    font-size: var(--text-sm);
    color:     var(--color-mid);
}
.job-meta-item {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
}
.job-card__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-top: auto;
}

/* ══════════════════════════════════════════════
   JOB MODAL
══════════════════════════════════════════════ */
.job-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.6);
    z-index:         600;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}
.job-modal-overlay[aria-hidden="true"] { display: none; }
.job-modal {
    background:     var(--color-white);
    border-radius:  var(--radius-xl);
    width:          100%;
    max-width:      680px;
    max-height:     88vh;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    box-shadow:     var(--shadow-lg);
    outline:        none;
}
.job-modal__header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
    padding:         1.25rem 1.5rem;
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
    background:      var(--color-light);
}
.job-modal__header-inner {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex:        1;
    min-width:   0;
}
.job-modal__logo img {
    max-height:  70px;
    width:       auto;
    object-fit:  contain;
}
.job-modal__title {
    font-size:   var(--text-xl);
    font-weight: var(--fw-bold);
    margin:      0 0 0.2rem;
    line-height: 1.3;
}
.job-modal__company {
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-primary);
    margin:      0;
}
.job-modal__close {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     1.25rem;
    color:         var(--color-mid);
    padding:       0.4rem;
    border-radius: var(--radius-sm);
    line-height:   1;
    flex-shrink:   0;
    transition:    color var(--transition), background var(--transition);
}
.job-modal__close:hover { color: var(--color-dark); background: var(--color-border); }
.job-modal__close:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.job-modal__body {
    padding:    1.5rem;
    overflow-y: auto;
    display:    flex;
    flex-direction: column;
    gap:        1.25rem;
}
.job-modal__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem 1rem;
    font-size: var(--text-sm);
    color:     var(--color-mid);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.job-modal__desc-inner {
    font-size:   var(--text-sm);
    line-height: 1.75;
    color:       var(--color-dark-2);
}
.job-modal__desc-inner h3,
.job-modal__desc-inner h4 { font-size: var(--text-base); margin: 1rem 0 0.5rem; }
.job-modal__desc-inner ul,
.job-modal__desc-inner ol { padding-left: 1.5rem; }
.job-modal__desc-inner p  { margin: 0 0 0.75rem; }
.job-modal__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* LEGAL PAGES — privacy policy, terms of use */
.legal-content {
    max-width:   820px;
    margin:      0 auto;
    font-size:   var(--text-base);
    line-height: 1.8;
    color:       var(--color-dark-2);
}
.legal-content h2 {
    font-size:   var(--text-xl);
    font-weight: var(--fw-bold);
    color:       var(--color-dark);
    margin:      2rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top:  1px solid var(--color-border);
}
.legal-content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-content p  { margin: 0 0 1rem; }
.legal-content ul { margin: 0 0 1rem 1.5rem; }
.legal-content ul li { margin-bottom: 0.4rem; }
.legal-content a  { color: var(--color-primary); }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--color-dark); }