/* Zimba overrides.
 *
 * Loaded last, after style.css and theme.css, so a rule here wins on specificity
 * order alone and nothing needs !important. Keep Digital Agency's own files
 * untouched: when the theme is updated they can be replaced wholesale, and
 * everything site-specific survives because it lives here.
 */

/* The brand lockup is wider than the theme's 213x32 logo and the theme only caps
   its height, so without a width cap it pushes the menu on narrow desktops. */
.navbar-default .navbar-header .navbar-brand img {
    max-height: 32px;
    width: auto;
}

/* Inner-page shell used by layout-default.tpl. The theme ships covers for its own
   demo pages but nothing generic, so this is the neutral version: brand navy, the
   title reversed out of it, breadcrumb sitting under it. */
.page-cover {
    background: #27313d;
    padding: 48px 0 40px;
    margin-bottom: 40px;
}
.page-cover h1 {
    color: #fff;
    margin: 0 0 12px;
}
.page-cover .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}
.page-cover .breadcrumb > li,
.page-cover .breadcrumb > li + li:before {
    color: rgba(255, 255, 255, .65);
}
.page-cover .breadcrumb > li > a {
    color: #f6a134;
}

.page-content {
    padding-bottom: 60px;
}

/* Editor output: content written in Summernote arrives as plain HTML with no theme
   classes, so give it readable defaults rather than leaving it at browser defaults. */
.page-content img {
    max-width: 100%;
    height: auto;
}
.page-content table {
    width: 100%;
    margin-bottom: 20px;
}
.page-content table th,
.page-content table td {
    padding: 8px;
    border-top: 1px solid #ddd;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Zimba home sections
   ═══════════════════════════════════════════════════════════════════════════
   The Digital Agency theme styles its own demo sections. These are the pieces it
   has no equivalent for: a five-step process, a five-card reason grid, the
   portfolio filter, and the contact detail list. Everything reuses the theme's
   spacing and colour so the sections do not read as bolted on.
   Brand: #f6a134 (orange), #27313d (navy). */

/* ── Process: five steps, so a 12-column grid cannot divide them evenly ───── */
.z-process-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
}
.z-step {
    flex: 1 1 180px;
    max-width: 220px;
    text-align: center;
    position: relative;
}
.z-step-no {
    width: 46px;
    height: 46px;
    line-height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #f6a134;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}
.z-step .this-title { margin-bottom: 8px; }

/* ── Why us: five cards ───────────────────────────────────────────────────── */
.z-why-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
}
.z-why-item {
    flex: 1 1 260px;
    max-width: 320px;
    text-align: center;
    padding: 26px 20px;
    background: rgba(255, 255, 255, .55);
    border-radius: 4px;
}
.z-why-item i {
    font-size: 30px;
    color: #f6a134;
    margin-bottom: 14px;
    display: block;
}

/* ── Portfolio filter + grid ──────────────────────────────────────────────── */
.z-filter {
    text-align: center;
    margin: 26px 0 30px;
}
.z-filter .btn { margin: 0 4px 8px; }
.z-filter .btn.active {
    background: #f6a134;
    border-color: #f6a134;
    color: #fff;
}
.z-portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.z-shot {
    flex: 1 1 260px;
    max-width: 360px;
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
    background: #27313d;
}
.z-shot img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
}
.z-shot:hover img { transform: scale(1.05); opacity: .85; }
.z-shot figcaption {
    padding: 10px 12px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Set by js/zimba.js when a filter is active. Not [hidden], because the theme's
   bootstrap.css does not reset it and a stray display rule would win. */
.z-shot.z-out { display: none; }

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.z-testimonials {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.z-testimonial {
    flex: 1 1 280px;
    max-width: 360px;
    border-left: 3px solid #f6a134;
    padding: 18px 22px;
    margin: 0;
    background: rgba(255, 255, 255, .6);
    font-size: 15px;
}
.z-testimonial footer {
    margin-top: 12px;
    font-weight: 700;
    color: #27313d;
}

/* ── Contact details ──────────────────────────────────────────────────────── */
.z-contact-details {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
    margin-top: 24px;
}
.z-contact-item {
    flex: 1 1 200px;
    max-width: 260px;
    text-align: center;
}
.z-contact-item .z-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a929b;
    margin-bottom: 6px;
}
.z-contact-item i { color: #f6a134; margin-right: 6px; }

/* ── Anchor offset: the navbar is fixed once it sticks, so an in-page jump
      would otherwise land with the heading hidden underneath it. ─────────── */
section[id] { scroll-margin-top: 90px; }