/* Buttons, section titles, ringed icons and filter pills.
   Values follow the Zeinet thm-btn--two and section-title--two rules. */

/* Square button: diagonal light stripes at the bottom right corner, and a
   rotated blue panel that sweeps in on hover. */
.zn-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    padding: 13px 40.5px;
    border: 0;
    border-radius: 0;
    outline: none;
    background-color: var(--primary);
    color: var(--white);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.5s linear;
}
.zn-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%; top: 50%;
    width: 100%; height: 0%;
    background-color: var(--secondary);
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: all 500ms ease;
}
.zn-btn:hover::before, .zn-btn:focus-visible::before { height: 380%; }
.zn-btn:hover, .zn-btn:focus-visible { color: var(--white); }
/* Two overlapping translucent bars, drawn as one gradient. */
.zn-btn::after {
    content: '';
    position: absolute;
    right: -65px; bottom: -6px;
    width: 100%; height: 25px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0 12px, rgba(255, 255, 255, 0.1) 12px 100%);
    transform: rotate(-45deg);
    pointer-events: none;
}
.zn-btn .zn-icon { font-size: 18px; }

.zn-btn--navy { background-color: var(--secondary); padding: 9px 30.5px; }
.zn-btn--navy::before { background-color: var(--primary); }
.zn-btn--navy::after { right: -45px; }
.zn-btn--light { background-color: var(--white); color: var(--secondary); }
.zn-btn--light::before { background-color: var(--primary); }
.zn-btn--light::after { background: linear-gradient(to top, rgba(2, 62, 88, 0.12) 0 12px, rgba(2, 62, 88, 0.06) 12px 100%); }
.zn-btn--sm { padding: 6px 30px; }
.zn-btn--block { width: 100%; }

/* Bootstrap buttons still in use (pagination, CKEditor content). */
.btn { border-radius: 0; font-family: var(--font); font-weight: 700; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--secondary); border-color: var(--secondary); }

/* Section title: tagline with two short bars, then the 40px heading. */
.zn-head { position: relative; margin-top: -11px; margin-bottom: 48px; }
.zn-head--center { text-align: center; }
.zn-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.zn-tag {
    position: relative;
    display: inline-block;
    padding-left: 26px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.zn-tag::before,
.zn-tag::after {
    content: '';
    position: absolute;
    height: 2px;
    border-radius: 10px;
}
.zn-tag::before { left: 10px; top: 3px; width: 10px; background-color: var(--primary); }
.zn-tag::after { left: 0; top: 9px; width: 20px; background-color: var(--secondary); }
.zn-tag--light::after, .zn-section--navy .zn-tag::after { background-color: var(--white); }
.zn-title {
    margin: 5px 0 0;
    color: var(--secondary);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}
.zn-tag--light + .zn-title, .zn-section--navy .zn-title { color: var(--white); }
.zn-lead { max-width: 640px; margin: 16px 0 0; }
.zn-head--center .zn-lead { margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
    .zn-title { font-size: 32px; }
}

/* Ringed icon (service-five): gradient ring orange to blue, white disc. */
.zn-ring {
    position: relative;
    z-index: 2;
    width: 75px; height: 75px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(105deg, var(--primary) 0%, var(--secondary) 100%);
}
.zn-ring__inner {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--secondary);
    font-size: 40px;
    line-height: 1;
}
.zn-ring__inner .zn-icon, .zn-ring__inner i { transition: transform 300ms linear; }

/* Pill filters (blog categories, career departments). */
.zn-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 48px; }
.zn-filter { padding: 8px 22px; background: var(--surface); color: var(--secondary); font-size: 15px; font-weight: 500; border: 1px solid var(--border); }
.zn-filter:hover { color: var(--primary); border-color: var(--primary); }
.zn-filter.is-active { background: var(--primary); border-color: var(--primary); color: var(--white); }