/* ==========================================================================
   Sizwe Photography - 2026 refinement layer
   Loaded AFTER css/style.css. Everything here is an override, so the
   original template file is untouched and this can be removed to revert.
   ========================================================================== */

:root {
    --ink:        #15130f;   /* near-black, warm */
    --ink-soft:   #5c564e;   /* body copy */
    --ink-mute:   #8c857b;   /* captions, meta */
    --accent:     #a97d6d;   /* warm clay - replaces the pink #dd888d */
    --accent-dk:  #8b6355;
    --stone:      #faf7f3;   /* warm off-white panels */
    --stone-2:    #f1ebe4;
    --line:       #e4dcd2;
    --white:      #fff;
    --shadow:     0 18px 50px rgba(21, 19, 15, .08);
    --ease:       cubic-bezier(.2, .7, .3, 1);
    --maxread:    62ch;
}

/* --- 0. Fail-safe: the preloader can never permanently cover the page -----
   Even with every script broken, this uncovers the site after 5s.          */
.karla-pageloading {
    animation: sp-loader-failsafe 0s linear 5s forwards;
}
@keyframes sp-loader-failsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --- 1. Typography -------------------------------------------------------- */
body {
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
p { margin-bottom: 1.25em; }
.section-padding p, .karla-post-section p { max-width: var(--maxread); }

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.005em; }

h1, .banner-padding h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.9rem);
    line-height: 1.12;
    margin-bottom: .2em;
}
.section-padding h2, h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.7rem);
    line-height: 1.2;
    margin-bottom: .45em;
}
.section-padding h5, .prices .item .content h5,
.recent-weddings .item .content h5 { font-size: 1.3rem; line-height: 1.35; }

/* small-caps eyebrow labels - more air, less shout */
.section-padding span,
.heading-meta {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    font-weight: 600;
}
.section-padding .sp-plain span { letter-spacing: normal; text-transform: none;
    font-size: inherit; color: inherit; font-weight: inherit; }

/* The h1 on inner pages was pink + uppercase. Make it the page's real title. */
.section-padding h1 {
    color: var(--ink);
    text-transform: none;
    letter-spacing: -.01em;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
}

/* --- 2. Accent recolour (the old #dd888d appears ~90 times) ---------------- */
.line-hr-center, .line-hr-left, .line-hr-right, .line-hr-primary,
.line-vr-section, .travel-dates-table tr { border-color: var(--line); }
.line-hr-center, .line-hr-left, .line-hr-right { border-top-width: 1px; }
.line-hr-left, .line-hr-right { width: 48px; margin-bottom: 26px; }
.line-hr-center { width: 72px; }

.banner-padding .cat { color: var(--ink); }
.exstra-services h5 .price { color: var(--accent); font-weight: 600; }
.recent-weddings .item .content h5 a:hover,
.navbar-light .navbar-nav .show > .nav-link { color: var(--accent); }
.testimonials .item-box .info i { color: var(--accent); }
.faqs-accordion .accordion .active .title { background: var(--ink); }
.faqs-accordion .accordion .accordion-info { border-left-color: var(--line); }
.prices .item .prices-img .cat,
.recent-weddings .item .recent-weddings-img .cat { background: var(--ink); }
.footer-section .footer-top .left-cont li:hover a,
.footer-section .right-cont li a:hover { color: var(--accent); }

/* --- 3. Rhythm ------------------------------------------------------------ */
.section-padding { padding: clamp(64px, 9vw, 130px) 0; }
.bg-gray { background: var(--stone); }
.mb-30 { margin-bottom: 30px; }
.mb-60 { margin-bottom: clamp(40px, 6vw, 80px); }

/* --- 4. Header ------------------------------------------------------------ */
.karla-navigation-wrap {
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: all .35s var(--ease);
}
.karla-navigation-wrap.scroll-on {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom-color: var(--line);
    box-shadow: 0 1px 24px rgba(21, 19, 15, .06);
}
.navbar-light .navbar-nav .nav-link {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    position: relative;
    padding: 10px 0;
}
.navbar-light .navbar-nav .nav-link::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 4px;
    height: 1px; background: var(--accent); transition: right .35s var(--ease);
}
.navbar-light .navbar-nav .nav-link:hover::after,
.nav-item.active .nav-link::after { right: 0; }
.nav-item.active .nav-link { color: var(--accent); }

/* Nav call-to-action */
.sp-nav-cta .nav-link,
.sp-nav-cta .nav-link:hover {
    background: var(--ink);
    color: #fff !important;
    padding: 11px 22px;
    letter-spacing: .16em;
    transition: background .3s var(--ease);
}
.sp-nav-cta .nav-link::after { display: none; }
.sp-nav-cta .nav-link:hover { background: var(--accent); }

/* --- 5. Buttons ----------------------------------------------------------- */
.sp-btn {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    padding: 15px 34px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sp-btn:hover, .sp-btn:focus { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-btn--ghost { background: transparent; color: var(--ink); }
.sp-btn--ghost:hover { background: var(--ink); color: #fff; }
.sp-btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.sp-btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-btn + .sp-btn { margin-left: 12px; }
@media (max-width: 575px) {
    .sp-btn { display: block; text-align: center; }
    .sp-btn + .sp-btn { margin-left: 0; margin-top: 12px; }
}

/* Form submit inherits the same language */
.contact-form button[type="submit"] {
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    padding: 15px 38px; font-size: 11px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    transition: background .3s var(--ease);
}
.contact-form button[type="submit"]:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.contact-form button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.form-sent { text-align: center; padding: 20px 0 40px; }
.form-sent h5 { font-size: 1.5rem; margin-bottom: .4em; }
.form-sent a { color: var(--accent); font-weight: 600; }

/* --- 6. Hero -------------------------------------------------------------- */
.karla-slider-caption {
    background: linear-gradient(to top, rgba(21,19,15,.62), rgba(21,19,15,0));
    padding: 90px 6vw 46px;
}
.karla-slider-title, .karla-slider-subtitle { color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,.35); }

.sp-hero-intro {
    text-align: center;
    padding: clamp(56px, 7vw, 92px) 0 clamp(10px, 2vw, 24px);
}
.sp-hero-intro h1 {
    max-width: 17ch; margin: 0 auto .5em;
}
.sp-hero-intro p {
    max-width: 56ch; margin: 0 auto 2em; font-size: 1.07rem; color: var(--ink-soft);
}
.sp-eyebrow {
    display: block; color: var(--accent); font-size: 11px; font-weight: 600;
    letter-spacing: .34em; text-transform: uppercase; margin-bottom: 1.6em;
}

/* --- 7. Cards & imagery --------------------------------------------------- */
.prices .item {
    box-shadow: none;
    border: 1px solid var(--line);
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prices .item:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.prices .item .content { padding: 34px 30px 38px; }
.prices .item .content ul { list-style: none; }
.prices .item .content li { padding: 5px 0; font-size: .95rem; line-height: 1.55; }
.prices .item .content li i { color: var(--accent); margin-right: 8px; }
.prices .item .content li i.ti-close { color: var(--ink-mute); }
.prices .item .prices-img .cat span { font-size: 11px; letter-spacing: .18em; font-weight: 700; }

.recent-weddings .item .content { padding: 28px 0 0; }
.karla-gallery-item { padding: 6px; }
.karla-project-imghover { background: rgba(21, 19, 15, .55); }

img { max-width: 100%; height: auto; }
.recent-weddings-img img, .prices-img img, .karla-gallery-item img,
.post-img img, .karla-about-img img { display: block; width: 100%; }

/* --- 8. Testimonials ------------------------------------------------------ */
.testimonials .item-box { padding: clamp(32px, 5vw, 56px); }
.testimonials .item-box h3 {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.55;
    font-family: 'Old Standard TT', serif;
    font-style: italic;
    margin-bottom: 26px;
}
.testimonials .item-box .info h6 { letter-spacing: .24em; font-size: 11px; font-weight: 700; }
.testimonials .item-box .info .sp-meta {
    display: block; text-transform: none; letter-spacing: normal;
    font-size: 13px; color: var(--ink-mute); font-weight: 400; margin-top: 6px;
}

/* --- 9. Enquiry band (sits above the footer on every page) ---------------- */
.sp-cta-band {
    background: var(--ink);
    color: #fff;
    text-align: center;
    padding: clamp(64px, 8vw, 110px) 0;
}
.sp-cta-band h2 { color: #fff; margin-bottom: .35em; }
.sp-cta-band p {
    color: rgba(255,255,255,.76);
    max-width: 50ch;
    margin: 0 auto 2.2em;
}
.sp-cta-band .sp-eyebrow { color: rgba(255,255,255,.6); }
.sp-cta-band .sp-dates {
    margin-top: 2.4em; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* --- 10. Footer ----------------------------------------------------------- */
.footer-section { background: var(--stone); }
.footer-section .footer-top { padding: clamp(56px, 7vw, 90px) 0 48px; }
.footer-section .footer-top li a { transition: color .25s var(--ease); }
.footer-section .footer-bottom { background: var(--stone-2); }
.sp-footer-contact {
    margin-top: 18px; font-size: 13px; letter-spacing: normal;
    text-transform: none; line-height: 2;
}
.sp-footer-contact a { color: var(--ink); border-bottom: 1px solid var(--line); }
.sp-footer-contact a:hover { color: var(--accent); border-color: var(--accent); }
.sp-areas {
    font-size: 12px; color: var(--ink-mute); max-width: 70ch;
    margin: 0 auto; line-height: 1.9;
}

/* --- 11. WhatsApp quick contact ------------------------------------------ */
.sp-whatsapp {
    position: fixed; right: 18px; bottom: 18px; z-index: 998;
    display: flex; align-items: center; gap: 10px;
    background: #1fab5a; color: #fff;
    padding: 13px 20px 13px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(21, 19, 15, .22);
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.sp-whatsapp:hover { background: #18914b; color: #fff; transform: translateY(-2px); }
.sp-whatsapp svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
@media (max-width: 575px) {
    .sp-whatsapp { padding: 14px; right: 14px; bottom: 14px; }
    .sp-whatsapp span { display: none; }
}
.totop { bottom: 92px; top: auto; }

/* --- 12. FAQ -------------------------------------------------------------- */
.faqs-accordion .accordion .title {
    box-shadow: none; border: 1px solid var(--line); background: #fff;
    transition: border-color .25s var(--ease);
}
.faqs-accordion .accordion .title:hover { border-color: var(--accent); }
.faqs-accordion .accordion .title h6 { font-size: 1.05rem; font-family: 'Old Standard TT', serif; }
.faqs-accordion .accordion .item { margin-bottom: 14px; }
.faqs-accordion .accordion .accordion-info { margin-top: 16px; padding: 4px 20px; }

/* --- 13. Process strip ---------------------------------------------------- */
.sp-steps { counter-reset: sp-step; }
.sp-steps .sp-step { padding-right: 24px; }
.sp-steps .sp-step h5 { margin-bottom: .5em; font-size: 1.2rem; }
.sp-steps .sp-step::before {
    counter-increment: sp-step;
    content: counter(sp-step, decimal-leading-zero);
    display: block;
    font-family: 'Old Standard TT', serif;
    font-size: 2.1rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: .35em;
}
.sp-steps .sp-step p { font-size: .97rem; }

/* --- 14. Kit strip (was mislabelled "Clients") ---------------------------- */
.clients { background: #fff; padding: 56px 0 10px; border-top: 1px solid var(--line); }
.sp-strip-label {
    text-align: center; display: block; color: var(--ink-mute);
    font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 10px;
}
.clients img { filter: grayscale(100%); opacity: .5; transition: all .4s var(--ease); max-height: 46px; width: auto; margin: 0 auto; }
.clients img:hover { filter: grayscale(100%); opacity: .85; }
.clients .client-logo { display: flex; align-items: center; justify-content: center; height: 70px; }

/* --- 15. Booked-dates table ---------------------------------------------- */
.travel-dates-table td { padding: 14px 0; vertical-align: middle; }
.travel-dates-table h6 { font-size: 12px; letter-spacing: .2em; }
.travel-dates-table .sp-open { color: var(--accent); }

/* --- 16. Accessibility & motion ------------------------------------------ */
a, button { outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.sp-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: var(--ink); color: #fff; padding: 12px 20px; font-size: 13px;
}
.sp-skip:focus { left: 8px; top: 8px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .karla-pageloading { animation: sp-loader-failsafe 0s linear 1s forwards !important; }
}

/* --- 17. Mobile ----------------------------------------------------------- */
@media (max-width: 767px) {
    .navbar-collapse {
        background: #fff;
        margin: 0 -15px;
        padding: 8px 24px 24px !important;
        border-top: 1px solid var(--line);
    }
    .navbar-light .navbar-nav .nav-link { padding: 13px 0; font-size: 13px; }
    .sp-nav-cta { margin-top: 14px; }
    .sp-nav-cta .nav-link { text-align: center; }
    .banner-padding { margin-top: 86px; padding: 72px 0; }
    .karla-gallery-items[data-columns="3"] .karla-gallery-item { width: 50%; }
    .footer-section .footer-top .center-cont { padding: 34px 0; }
}
@media (max-width: 420px) {
    .karla-gallery-items[data-columns="3"] .karla-gallery-item { width: 100%; }
}

/* --- 18. Button variant for use on the dark enquiry band ----------------- */
.sp-btn--ondark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}
.sp-btn--ondark:hover, .sp-btn--ondark:focus {
    background: #fff; border-color: #fff; color: var(--ink);
}

/* --- 19. <picture> is layout-neutral ------------------------------------
   Every <img> is now wrapped in <picture> for WebP delivery. display:contents
   keeps the img in the same layout box it had before. One rule in style.css
   used a direct-child selector, so it is restated here as a descendant.   */
picture { display: contents; }
.gallery-box .gallery-img img {
    transition: all .3s cubic-bezier(.3, .1, .58, 1);
    border-radius: 0;
}

/* --- 20. Back-to-top ------------------------------------------------------ */
.totop { background-color: var(--ink); }
.totop:hover { background-color: var(--accent); }

/* --- 21. Hero intro measure ---------------------------------------------- */
.sp-hero-intro h1 { max-width: 22ch; font-size: clamp(2rem, 4.2vw, 3.3rem); }

/* --- 22. Remaining overrides -------------------------------------------- */
/* style.css styles nav hover/active with the old pink at a higher
   specificity than section 4, so restate it here. */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-item.active .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active { color: var(--accent); }
.navbar-light .navbar-nav .sp-nav-cta .nav-link,
.navbar-light .navbar-nav .sp-nav-cta .nav-link:hover { color: #fff; }

/* Brand logos are white-on-black in places, so greyscale + opacity turned
   them into grey slabs. Show them as they are, just smaller and calmer. */
.clients img, .clients img:hover { filter: none; opacity: .72; }
.clients img:hover { opacity: 1; }

@media (max-width: 575px) {
    .navbar-brand h2 { font-size: 22px; }
    .navbar-brand span { font-size: 8px; letter-spacing: .2em; }
}

/* --- 23. Final polish ----------------------------------------------------- */
/* Tick lists: keep wrapped lines aligned with the text, not under the icon. */
.prices .item .content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.prices .item .content li i { margin-right: 0; flex: none; line-height: 1.6; font-size: .85em; }

/* The submit button sits in a full-width row, so centre it properly. */
.contact-form .text-center { width: 100%; margin-top: 10px; }

/* Package cards: let the copy block breathe to the bottom of the card. */
.prices .item .content ul { margin-bottom: 0; }

/* --- 24. Mobile tap targets ---------------------------------------------
   Footer nav links were 12px tall and the contact details 16px - well under
   the ~44px a thumb needs. Widened on small screens only, so the desktop
   footer keeps its density. */
@media (max-width: 767px) {
    .footer-section .footer-top li { margin-bottom: 0; }
    .footer-section .footer-top li a {
        display: block;
        padding: 12px 0;
        min-height: 44px;
        line-height: 20px;
    }
    .sp-footer-contact { line-height: 1.4; }
    .sp-footer-contact a {
        display: inline-block;
        padding: 11px 0;
        min-height: 44px;
        line-height: 22px;
    }
    /* phone / WhatsApp / email on the contact page */
    .section-padding p a[href^="tel:"],
    .section-padding p a[href^="mailto:"],
    .section-padding p a[href*="wa.me"] {
        display: inline-block;
        padding: 10px 0;
        min-height: 44px;
        line-height: 24px;
    }
    /* gallery filter tabs */
    .karla-gallery-toolbar .karla-toolbar-item a {
        display: inline-block;
        padding: 10px 4px;
        min-height: 44px;
    }
}

/* Price badge: make the whole badge the tap target, not just the text. */
.prices .item .prices-img .cat { padding: 0; }
.prices .item .prices-img .cat a { display: block; padding: 11px 18px; }

/* Slider pagination dots were 10px - too small to aim at. */
.karla-slider .slick-dots li,
.karla-slider .slick-dots li button { width: 28px; height: 28px; }
.karla-slider .slick-dots li button:before { line-height: 28px; width: 28px; height: 28px; }

/* --- 25. Booked dates ----------------------------------------------------
   "Check your date" lands on #dates, so the anchor must clear the sticky
   header rather than hiding under it. */
#dates { scroll-margin-top: 104px; }
@media (max-width: 767px) { #dates { scroll-margin-top: 100px; } }
.sp-dates-block .travel-dates-table { max-width: 560px; margin: 0 auto; }
.sp-dates-block .travel-dates-table td:first-child { width: 62%; }
.sp-dates-block .travel-dates-table h6,
.sp-dates-block .travel-dates-table span { text-align: left; }
.sp-dates-block .travel-dates-table p { padding-left: 24px; }

/* --- 26. Two-tier package pricing --------------------------------------- */
.sp-tiers {
    border-top: 1px solid var(--line);
    margin: 0 0 22px;
}
.sp-tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.sp-tier span {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 600;
}
.sp-tier b {
    font-family: 'Old Standard TT', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ink);
}

/* --- 27. Invitation film ------------------------------------------------
   The YouTube iframe is never loaded on page view. This is a poster the
   existing Magnific Popup lightbox swaps for the player on click, so the
   video costs nothing until somebody actually wants it. Below 700px the
   lightbox is disabled by design and the link opens the YouTube app. */
.sp-film .video-gallery {
    position: relative;
    padding: 0;
    overflow: hidden;
}
.sp-film .video-gallery a { display: block; position: relative; }
.sp-film .video-gallery img { transition: transform .6s var(--ease); }
.sp-film .video-gallery a:hover img { transform: scale(1.03); }
.sp-film .video-gallery a::after {      /* darken slightly so the button reads */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom left, rgba(21,19,15,0) 60%, rgba(21,19,15,.26));
    transition: background .4s var(--ease);
}
.sp-film .video-gallery a:hover::after { background: rgba(21,19,15,.18); }
.sp-film .video-gallery .icon {
    /* Lower left: this thumbnail has its title block top-left, the speaker
       centre and an inset photo bottom-right, leaving the dark jacket at
       lower left as the one area a white disc can sit without covering
       anything. */
    position: absolute;
    top: auto;
    right: auto;
    left: clamp(18px, 4vw, 40px);
    bottom: clamp(18px, 4vw, 40px);
    transform: none;
    z-index: 2;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.sp-film .video-gallery a:hover .icon { background: #fff; transform: scale(1.08); }
.sp-film .video-gallery .icon i {
    font-size: 24px;
    color: var(--ink);
    margin-left: 4px;             /* optical centring of the play triangle */
    line-height: 1;
}
@media (max-width: 575px) {
    .sp-film .video-gallery .icon { width: 62px; height: 62px; }
    .sp-film .video-gallery .icon i { font-size: 19px; }
}