/* ════════════════════════════════════════════
   HEADFOOT.CSS — Header & Footer Styles
   Breadcrumb header bar + footer enquiry/CTA strips
════════════════════════════════════════════ */

/* ── Breadcrumb (header bar) ──
   Note: Two class-name variants exist across pages;
   both are included here for compatibility.
── */
.zt_breadcrumb {
    background: var(--zt_dark);
    padding: 22px 0;
}

/* Variant A (brand & category pages) */
.zt_bc_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.zt_bc_h1 {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--zt_white);
    margin: 0;
}

.zt_bc_nav {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .08em;
}

.zt_bc_nav a {
    color: var(--zt_blue);
    text-decoration: none;
}

.zt_bc_nav a:hover {
    text-decoration: underline;
}

.zt_bc_nav span {
    margin: 0 8px;
    opacity: .5;
}

/* Variant B (about & granite pages) */
.zt_breadcrumb_inner,
.zt_breadcrumb_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.zt_breadcrumb_h1 {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--zt_white);
    margin: 0;
    letter-spacing: .02em;
}

.zt_breadcrumb_nav {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .08em;
}

.zt_breadcrumb_nav a {
    color: var(--zt_blue);
    text-decoration: none;
}

.zt_breadcrumb_nav a:hover {
    text-decoration: underline;
}

.zt_breadcrumb_nav span {
    margin: 0 8px;
    opacity: .5;
}

/* ── Footer Enquiry CTA Strip ── */
.zt_enq_strip {
    background: var(--zt_blue);
    padding: 40px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.zt_enq_strip_hatch {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
    background-size: 18px 18px;
    opacity: .06;
    pointer-events: none;
}

.zt_enq_strip h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.zt_enq_strip p {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 20px;
}

.zt_enq_strip_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--zt_white);
    color: var(--zt_blue);
    padding: 12px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0 6px;
    transition: opacity .25s, transform .25s;
}

.zt_enq_strip_btn:hover {
    opacity: .88;
    color: var(--zt_blue);
    transform: translateY(-2px);
}

.zt_enq_strip_btn.outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .6);
}

.zt_enq_strip_btn.outline:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}