/* ═══════════════════════════════════════════════════════════════
   logo-fix.css — Saddam Adil
   Single CSS override file to constrain logos correctly across
   every page (homepage, blog, single post, services, admin, 404).
   Loaded AFTER all other stylesheets so it wins on cascade.
═══════════════════════════════════════════════════════════════ */

/* ─── HEADER LOGO ─────────────────────────────────────────────
   Used on: homepage, /blog, /blog/{slug}, all 8 service pages.
   Source: /assets/images/logo.png
   Behaviour: scales to 48px tall, never wider than 200px,
              keeps full image visible (no cropping).
─────────────────────────────────────────────────────────────── */
.brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.brand-logo-img,
header .brand-logo img,
header.site-header .brand-logo img,
nav .brand-logo img {
    height: 48px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Strip "Saddam.Adil" text node that sometimes renders next to
   the image when the alt text is interpreted as visible text. */
.brand-logo span,
.brand-logo .brand-name,
.brand-name,
.footer-brand-name,
.footer-brand span,
.brand-logo::before,
.brand-logo::after {
    display: none !important;
}

/* ─── FOOTER LOGO ─────────────────────────────────────────────
   Used on: every page footer.
   Source: /assets/images/logo-white.png
   Behaviour: scales to 52px tall, never wider than 220px,
              displayed as block on its own row above tagline.
─────────────────────────────────────────────────────────────── */
footer .footer-logo-img,
footer .footer-brand img,
footer .footer-brand .footer-logo-img,
footer .brand-logo img,
.site-footer .footer-logo-img,
.site-footer .footer-brand img,
.site-footer img[alt*="Saddam"][src*="logo-white"],
footer img[src*="logo-white"],
footer img[src*="logo.png"] {
    height: 52px !important;
    width: auto !important;
    max-width: 220px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
}

/* Force the footer-brand wrapper to behave as a block link with
   nothing weird sized around it. */
.footer-brand,
footer .footer-brand,
.site-footer .footer-brand {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    margin-bottom: 16px !important;
}

/* Catch the inline style="height:56px;..." older builds used. */
footer img[alt*="Saddam"] {
    max-height: 52px !important;
    max-width: 220px !important;
    object-fit: contain !important;
}

/* ─── NUCLEAR FALLBACK ───────────────────────────────────────
   Absolute final override: any img inside any footer is capped.
   Wrapped in :where() to keep specificity low so it doesn't
   accidentally affect images legitimately placed in footer
   (e.g. payment badges) — but height/width caps still apply.
─────────────────────────────────────────────────────────────── */
footer img,
.site-footer img,
.footer img {
    max-height: 60px !important;
    max-width: 240px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
/* If the image is the brand logo (white), force the precise size. */
footer img[src*="logo-white"],
footer img[src*="logo.png"],
.site-footer img[src*="logo-white"] {
    height: 52px !important;
    max-height: 52px !important;
    max-width: 220px !important;
    width: auto !important;
}

/* ─── ADMIN PANEL TOPBAR LOGO (if used) ──────────────────── */
.admin-topbar img,
.admin-sidebar img {
    max-height: 40px !important;
    max-width: 180px !important;
    object-fit: contain !important;
    height: auto !important;
    width: auto !important;
}

/* ─── MOBILE TIGHTENING ──────────────────────────────────── */
@media (max-width: 768px) {
    .brand-logo-img,
    header .brand-logo img,
    nav .brand-logo img {
        height: 40px !important;
        max-width: 160px !important;
    }
    footer .footer-logo-img,
    footer img[src*="logo-white"] {
        height: 46px !important;
        max-width: 180px !important;
    }
}