/*
 * "Modern Editorial" skin for landing / service pages.
 *
 * Reuses the same dark, editorial look built for the blog "Modern" article
 * template (includes/blog_modern_template.php) - same background, accent
 * color, and typography - but as pure CSS restyling of the class names
 * every landing page already renders (service-details, content-side,
 * service-sidebar, category-widget-two, consult-widget, page-title,
 * bread-crumb, and the lb-* modular blocks from admin/includes/landing_blocks.php).
 *
 * Nothing about the HTML/PHP structure of any landing page changes - this
 * file is only loaded (see header.php) when a page defines $page_service,
 * which every landing page already does. To keep a specific page on the
 * OLD light design, set `$landing_classic_mode = true;` before that page's
 * `include "header.php";` line - one line, fully reversible, no CSS edits.
 */

/* ---------- Hero / page-title banner ---------- */
.page-title {
    position: relative;
    background-color: #0d0d0d;
}
.page-title::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(13, 13, 13, .72);
}
.page-title .content-box,
.page-title .content-wrapper { position: relative; z-index: 2; }
.page-title .title h1 {
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}
.page-title .bread-crumb,
.page-title .bread-crumb li,
.page-title .bread-crumb li a {
    color: #b8b8b8 !important;
}
.page-title .bread-crumb li a:hover { color: #e8484e !important; }

/* ---------- Main content section ---------- */
.service-details {
    background-color: #0d0d0d !important;
    padding-top: 60px;
    padding-bottom: 20px;
}
.service-details .content-side,
.service-details .content-side * {
    font-family: 'Poppins', sans-serif;
}
.service-details .content-side h1 {
    color: #fff !important;
    font-weight: 800;
    line-height: 1.2;
    background: #8B1A1A;
    display: inline-block;
    padding: 4px 14px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.service-details .content-side h2 {
    color: #fff !important;
    font-weight: 700;
    margin-top: 1.6em;
}
.service-details .content-side h3 { color: #fff !important; font-weight: 700; }
.service-details .content-side p,
.service-details .content-side li {
    color: #d8d8d8 !important;
    line-height: 1.85;
}
.service-details .content-side a { color: #e8484e; }
.service-details .content-side .image img {
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

/* ---------- Sidebar ---------- */
.service-sidebar .widget {
    background: #1c1c1c !important;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 20px;
}
.service-sidebar .category-widget-two .cat-list li a {
    color: #d8d8d8 !important;
    border-bottom: 1px solid #2a2a2a;
}
.service-sidebar .category-widget-two .cat-list li a:hover { color: #e8484e !important; }
.service-sidebar .consult-widget {
    background: #8B1A1A !important;
    border: none;
    padding: 22px 16px !important;
    text-align: center;
    border-radius: 10px;
}
.service-sidebar .consult-widget .icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    position: relative;
}
.service-sidebar .consult-widget .icon span {
    font-size: 22px;
    color: #fff !important;
}
/* Gentle pulse ring so the phone icon draws the eye without dominating the sidebar */
.service-sidebar .consult-widget .icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    animation: lp-consult-pulse 2s ease-out infinite;
}
@keyframes lp-consult-pulse {
    0%   { transform: scale(.9); opacity: .9; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
.service-sidebar .consult-widget .text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.service-sidebar .consult-widget .icon,
.service-sidebar .consult-widget .text,
.service-sidebar .consult-widget .phone a {
    color: #fff !important;
}
.service-sidebar .consult-widget .phone a {
    font-size: 18px;
    font-weight: 700;
}

/* ---------- Modular landing blocks (admin/includes/landing_blocks.php) ---------- */
.lb-block {
    background: #1c1c1c !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px;
}
.lb-block h2, .lb-block h3 { color: #fff !important; }
.lb-block p, .lb-block li { color: #d8d8d8 !important; }
.lb-faq-item { border-bottom: 1px solid #2a2a2a !important; }
.lb-faq-item h3 { color: #fff !important; }
.lb-faq-item p { color: #c4c4c4 !important; }

/* ---------- Inline "light box" fix (CTA boxes, testimonial callouts, etc.) ---------- */
/* A few landing pages have their own self-contained callout boxes with a
   hardcoded LIGHT inline background (e.g. `.cta-box { background-color:
   #f8f9fa }`, testimonial quotes on `#f7f5f0`), written before this dark
   skin existed. The blanket ".content-side h2/p" rules above force white
   text everywhere, which made text inside those specific boxes invisible
   (white text on their own light background). This rule detects ANY
   element carrying an inline `background`/`background-color` style and
   gives its text back a normal dark, readable color - automatically fixes
   every current and future page with this pattern, no per-file edits. */
.service-details .content-side [style*="background"] {
    color: #1a202c !important;
}
.service-details .content-side [style*="background"] h1,
.service-details .content-side [style*="background"] h2,
.service-details .content-side [style*="background"] h3,
.service-details .content-side [style*="background"] p,
.service-details .content-side [style*="background"] li,
.service-details .content-side [style*="background"] strong,
.service-details .content-side [style*="background"] span {
    color: #1a202c !important;
}
.service-details .content-side [style*="background"] a {
    color: #2b6cb0 !important;
}

/* ---------- Opt-out escape hatch ---------- */
/* Any page that sets $landing_classic_mode = true; before including
   header.php gets body.landing-classic-mode - this simply un-does
   everything above so that one page reverts to the original look. */
body.landing-classic-mode .page-title,
body.landing-classic-mode .page-title::before,
body.landing-classic-mode .service-details,
body.landing-classic-mode .content-side h1,
body.landing-classic-mode .content-side h2,
body.landing-classic-mode .content-side h3,
body.landing-classic-mode .content-side p,
body.landing-classic-mode .content-side li,
body.landing-classic-mode .service-sidebar .widget,
body.landing-classic-mode .service-sidebar .consult-widget,
body.landing-classic-mode .lb-block {
    all: revert;
}