/* =========================================================================
   Strategic Focus Limited – corporate brand overrides
   -------------------------------------------------------------------------
   Loaded AFTER the template CSS so it wins the cascade. The theme uses the
   CSS custom property --primary-color-one ~660 times, so re-defining the
   palette here re-skins the whole site.

   Brand palette derived from the Strategic Focus logo:
     • forest / olive green  (primary)
     • very dark green-black (headings, dark sections)
     • red dot               (accent highlight)
   ========================================================================= */

:root {
   --primary-color-one: #4f7c2f;   /* brand forest-green accent */
   --menu-active-color: #4f7c2f;
   --primary-color-two: #17280f;   /* dark green-black / headings */
   --heading-dark: #17280f;
   --link-color-dark: #17280f;
   --menu-color: #17280f;
   --menu-dropdown-color: #17280f;

   /* Local design tokens (blue names kept for compatibility, now green) */
   --sfl-navy: #17280f;            /* dark green-black */
   --sfl-blue: #4f7c2f;            /* brand green      */
   --sfl-blue-600: #3e6425;        /* darker green (hover) */
   --sfl-green-bright: #7cb342;    /* bright green for dark backgrounds */
   --sfl-red: #c62828;             /* logo red accent  */
   --sfl-grey: #5f6a5b;            /* warm neutral grey */
   --sfl-light: #f4f7ef;           /* light green-tinted surface */
}

/* ---- Typography: professional, corporate, readable ---- */
body.theme-creote {
   color: #4a5260;
}
.theme-creote h1, .theme-creote h2, .theme-creote h3,
.theme-creote h4, .theme-creote h5, .theme-creote h6 {
   color: var(--sfl-navy);
   letter-spacing: -0.01em;
}

/* ---- Brand wordmark (replaces the template logo image) ---- */
.sfl-wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.sfl-wordmark .sfl-wm-mark {
   width: 46px; height: 46px; flex: 0 0 46px;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 10px 0 10px 0;
   background: var(--sfl-blue); color: #fff;
   font-weight: 800; font-size: 1.15rem; letter-spacing: .5px;
}
.sfl-wordmark .sfl-wm-text { display: flex; flex-direction: column; line-height: 1; }
.sfl-wordmark .sfl-wm-main { font-weight: 800; font-size: 1.35rem; color: var(--sfl-navy); letter-spacing: -.01em; }
/* Red dot accent echoing the logo */
.sfl-wordmark .sfl-wm-main::after {
   content: ""; display: inline-block;
   width: 7px; height: 7px; border-radius: 50%;
   background: var(--sfl-red); margin-left: 4px; vertical-align: super;
}
.sfl-wordmark .sfl-wm-sub { font-weight: 600; font-size: .72rem; letter-spacing: .42em; color: var(--sfl-blue); margin-top: 4px; }
/* Light variant for the dark footer */
.sfl-wordmark-light .sfl-wm-main { color: #fff; }
.sfl-wordmark-light .sfl-wm-sub { color: #7cb342; }
@media (max-width: 420px) {
   .sfl-wordmark .sfl-wm-main { font-size: 1.1rem; }
   .sfl-wordmark .sfl-wm-mark { width: 40px; height: 40px; flex-basis: 40px; }
}

/* ---- Top bar: brighter accent icons for contrast on the dark navy bar.
   Match the template's selector specificity (4 classes) + .style_one so this
   wins, giving every leading icon (location, email, phone, share) the same
   bright, fully-opaque colour. ---- */
.top_bar.style_one .top_inner .common_css .contntent i,
.top_bar.style_one .top_inner .common_css .contntent .text a i {
   color: #7cb342;
   opacity: 1;
}
.top_bar.style_one .left_side,
.top_bar.style_one .right_side { flex-wrap: nowrap; }
.top_bar.style_one .contntent.address .text span { white-space: nowrap; }

/* ---- Dark section backgrounds tuned to navy (not near-black) ---- */
.bg_dark_1 { background-color: #1f3817 !important; }
.bg_dark_2 { background-color: #17280f !important; }
.bg_dark_3 { background-color: #0f1c09 !important; }
.bg_light_1 { background-color: var(--sfl-light) !important; }

/* ---- Buttons: solid blue at rest; on hover invert to a white background
   while keeping the blue border + blue text (matches the template). ---- */
.theme-btn.one {
   background: var(--sfl-blue);
   border: 1px solid var(--sfl-blue);
   color: #fff;
}
.theme-btn.one:hover {
   background: #ffffff;
   border-color: var(--sfl-blue);
   color: var(--sfl-blue);
}
/* Secondary outline button: transparent at rest, fills white on hover. */
.theme-btn.two {
   background: transparent;
   border: 1px solid var(--sfl-blue);
   color: var(--sfl-blue);
}
.theme-btn.two:hover {
   background: #ffffff;
   border-color: var(--sfl-blue);
   color: var(--sfl-blue);
}

/* Outline / ghost button (hero + dark CTA rows).
   Mirrors the .theme-btn.one box model so it is exactly the same size as the
   primary button, but with a transparent background and a visible border. */
.theme-btn.ghost {
   display: inline-block;
   padding: 0 25px;
   line-height: 56px;
   min-height: 56px;
   min-width: 160px;
   font-weight: 600;
   font-size: 15px;
   text-align: center;
   border-radius: 10px 0 10px 0;
   background: transparent;
   border: 1px solid #ffffff;
   color: #ffffff;
   transition: all 0.5s ease;
}
.theme-btn.ghost:hover {
   background: #ffffff;
   color: var(--sfl-navy);
   border-color: #ffffff;
   border-radius: 0 10px 0 10px;
}

/* ---- Generous corporate whitespace helpers ---- */
.sfl-section { padding-top: 90px; padding-bottom: 90px; }
.sfl-lead { font-size: 1.125rem; line-height: 1.8; color: var(--sfl-grey); }

/* ---- Cards used on service / value / stat blocks ---- */
.sfl-card {
   background: #fff;
   border: 1px solid #e7ebf1;
   border-radius: 8px;
   padding: 34px 30px;
   height: 100%;
   transition: transform .25s ease, box-shadow .25s ease;
}
.sfl-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(23, 40, 15, .10);
}
.sfl-card .sfl-card-icon {
   width: 64px; height: 64px;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 10px;
   background: rgba(79, 124, 47, .08);
   color: var(--sfl-blue);
   font-size: 28px;
   margin-bottom: 20px;
}
.sfl-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.sfl-card p { color: var(--sfl-grey); margin-bottom: 0; }

/* ---- Process steps (Our Process) ---- */
.sfl-process-step { text-align: center; padding: 8px 12px; }
.sfl-process-step .sfl-step-num {
   width: 68px; height: 68px; line-height: 68px;
   margin: 0 auto 20px;
   border-radius: 50%;
   background: var(--sfl-blue);
   color: #fff; font-weight: 800; font-size: 1.4rem;
   box-shadow: 0 10px 24px rgba(79, 124, 47, .25);
}
.sfl-process-step h3 {
   font-size: 1.2rem; margin-bottom: 10px; color: var(--sfl-navy);
   word-break: normal; overflow-wrap: normal; hyphens: none;
}
.sfl-process-step p { color: var(--sfl-grey); margin: 0; }

/* ---- Simple statistic band ---- */
.sfl-stat h2 { color: var(--sfl-blue); font-size: 2.6rem; margin-bottom: 4px; }
.sfl-stat p { color: var(--sfl-grey); margin: 0; font-weight: 600; }
/* On dark navy bands, brighten the numbers and lighten the labels so the
   stats are clearly legible. */
.bg_dark_1 .sfl-stat h2,
.bg_dark_2 .sfl-stat h2,
.bg_dark_3 .sfl-stat h2 { color: #8bc34a; }
.bg_dark_1 .sfl-stat p,
.bg_dark_2 .sfl-stat p,
.bg_dark_3 .sfl-stat p { color: #cdd6e4; }

/* ---- Forms (enquiry / contact) ---- */
.sfl-form label { font-weight: 600; color: var(--sfl-navy); margin-bottom: 6px; display: block; }
.sfl-form .form-control,
.sfl-form .form-select {
   border: 1px solid #d8dee8;
   border-radius: 6px;
   padding: 12px 14px;
   margin-bottom: 18px;
}
.sfl-form .form-control:focus,
.sfl-form .form-select:focus {
   border-color: var(--sfl-blue);
   box-shadow: 0 0 0 .2rem rgba(79, 124, 47, .12);
}

/* ---- Alerts ---- */
.sfl-alert { border-radius: 6px; padding: 14px 18px; margin-bottom: 22px; }
.sfl-alert-success { background: #e8f5ec; color: #1e6b3a; border: 1px solid #bfe2c9; }
.sfl-alert-danger  { background: #fdecec; color: #a02626; border: 1px solid #f3c4c4; }

/* ---- Blog post card v2 (image-forward, category + title + arrow) ---- */
.sfl-pcv2 {
   background: #fff;
   border-radius: 14px;
   overflow: hidden;
   height: 100%;
   box-shadow: 0 2px 18px rgba(23,40,15,.07);
   transition: transform .25s ease, box-shadow .25s ease;
}
.sfl-pcv2:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 36px rgba(23,40,15,.13);
}
.sfl-pcv2-thumb {
   display: block;
   aspect-ratio: 16/10;
   overflow: hidden;
}
.sfl-pcv2-thumb img {
   width: 100%; height: 100%;
   object-fit: cover;
   transition: transform .45s ease;
}
.sfl-pcv2:hover .sfl-pcv2-thumb img { transform: scale(1.06); }
.sfl-pcv2-body { padding: 22px 24px 24px; }
.sfl-pcv2-cat {
   display: inline-block;
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: var(--sfl-blue);
   text-decoration: none;
   margin-bottom: 12px;
}
.sfl-pcv2-cat:hover { color: var(--sfl-blue-600); }
.sfl-pcv2-footer {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 14px;
}
.sfl-pcv2-title {
   font-size: 1.08rem;
   line-height: 1.4;
   margin: 0;
   flex: 1;
}
.sfl-pcv2-title a { color: var(--sfl-navy); text-decoration: none; }
.sfl-pcv2-title a:hover { color: var(--sfl-blue); }
.sfl-pcv2-arrow {
   flex: 0 0 40px;
   width: 40px; height: 40px;
   border-radius: 10px;
   border: 1.5px solid #dde3ec;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--sfl-navy);
   font-size: 1.15rem;
   text-decoration: none;
   margin-top: 2px;
   transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sfl-pcv2-arrow:hover {
   background: var(--sfl-blue);
   border-color: var(--sfl-blue);
   color: #fff;
}

/* ---- Blog index: horizontal card list layout ---- */
.sfl-blog-list { display: flex; flex-direction: column; gap: 26px; }

.sfl-bli {
   display: flex;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 22px rgba(23,40,15,.08);
   overflow: hidden;
   min-height: 230px;
   transition: box-shadow .25s ease, transform .25s ease;
}
.sfl-bli:hover {
   box-shadow: 0 8px 36px rgba(23,40,15,.13);
   transform: translateY(-3px);
}

/* Thumbnail — fills full card height */
.sfl-bli-img {
   flex: 0 0 38%;
   position: relative;
   overflow: hidden;
}
.sfl-bli-img-link {
   display: block;
   width: 100%;
   height: 100%;
}
.sfl-bli-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .45s ease;
}
.sfl-bli:hover .sfl-bli-img img { transform: scale(1.05); }

/* Category badge */
.sfl-bli-badge {
   position: absolute;
   top: 14px; left: 14px;
   background: rgba(15,28,9,.80);
   color: #fff;
   font-size: .67rem;
   font-weight: 700;
   letter-spacing: .07em;
   text-transform: uppercase;
   padding: 6px 12px;
   border-radius: 5px;
   z-index: 1;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: background .2s ease;
}
.sfl-bli-badge:hover { background: var(--sfl-blue); color: #fff; }

/* Content */
.sfl-bli-body {
   flex: 1;
   min-width: 0;
   padding: 28px 32px;
   display: flex;
   flex-direction: column;
}
.sfl-bli-date {
   font-size: .73rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--sfl-blue);
   margin-bottom: 10px;
}
.sfl-bli-title {
   font-size: 1.4rem;
   line-height: 1.3;
   margin-bottom: 12px;
   color: var(--sfl-navy);
}
.sfl-bli-title a { color: inherit; text-decoration: none; }
.sfl-bli-title a:hover { color: var(--sfl-blue); }
.sfl-bli-excerpt {
   color: var(--sfl-grey);
   line-height: 1.72;
   margin-bottom: 14px;
   flex: 1;
}
.sfl-bli-readmore {
   font-size: .73rem;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--sfl-navy);
   text-decoration: none;
   display: inline-block;
   margin-bottom: 0;
}
.sfl-bli-readmore:hover { color: var(--sfl-blue); }
.sfl-bli-divider {
   border: none;
   border-top: 1px solid #eaecf0;
   margin: 16px 0;
}
.sfl-bli-author { display: flex; align-items: center; gap: 12px; }
.sfl-bli-avatar {
   width: 42px; height: 42px; flex: 0 0 42px;
   border-radius: 50%;
   background: var(--sfl-blue);
   color: #fff;
   font-weight: 700;
   font-size: 1.05rem;
   display: flex; align-items: center; justify-content: center;
}
.sfl-bli-posted-lbl {
   font-size: .67rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--sfl-blue);
   margin: 0 0 2px;
}
.sfl-bli-posted-name {
   font-weight: 600;
   color: var(--sfl-navy);
   font-size: .92rem;
   margin: 0;
}

/* Responsive */
@media (max-width: 767px) {
   .sfl-bli { flex-direction: column; min-height: auto; }
   .sfl-bli-img { flex: none; width: 100%; height: 220px; }
   .sfl-bli-body { padding: 22px 20px; }
   .sfl-bli-title { font-size: 1.15rem; }
}

/* Legacy card class kept for single-post related section */
.sfl-post-card { background: #fff; border: 1px solid #e7ebf1; border-radius: 8px; overflow: hidden; height: 100%; }
.sfl-post-card .sfl-post-thumb { aspect-ratio: 16/10; overflow: hidden; }
.sfl-post-card .sfl-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sfl-post-card:hover .sfl-post-thumb img { transform: scale(1.06); }
.sfl-post-card .sfl-post-body { padding: 24px; }
.sfl-post-meta { font-size: .85rem; color: var(--sfl-grey); margin-bottom: 10px; }
.sfl-post-meta .cat { color: var(--sfl-blue); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Share buttons ---- */
.sfl-share a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 40px; height: 40px; border-radius: 50%;
   background: var(--sfl-light); color: var(--sfl-navy);
   margin-right: 8px; transition: all .2s ease;
}
.sfl-share a:hover { background: var(--sfl-blue); color: #fff; }

/* ---- Home "Who We Are" intro image ---- */
.sfl-about-image { height: 100%; }
.sfl-about-image img {
   width: 100%;
   height: 100%;
   min-height: 420px;
   object-fit: cover;
   border-radius: 12px;
   box-shadow: 0 18px 50px rgba(23, 40, 15, .12);
}
@media (max-width: 991px) {
   .sfl-about-image { margin-bottom: 36px; }
   .sfl-about-image img { min-height: 300px; }
}

/* ---- Checklist used on intro / service pages ---- */
.sfl-checklist { list-style: none; padding: 0; margin: 0 0 10px; }
.sfl-checklist li {
   position: relative; padding: 8px 0 8px 0; font-weight: 600; color: var(--sfl-navy);
}
.sfl-checklist li i { color: var(--sfl-blue); margin-right: 10px; }

/* ---- Highlight callout (e.g. minimum deal size) ---- */
.sfl-highlight {
   background: #f2f6ee; border-left: 4px solid var(--sfl-blue); border-radius: 6px;
   padding: 16px 20px; color: var(--sfl-navy); font-size: 1.02rem; line-height: 1.6;
}
.sfl-highlight strong { color: var(--sfl-blue-600); }

/* ---- Feature list (two-column ticks) on service pages ---- */
.sfl-features { list-style: none; padding: 0; margin: 0; }
.sfl-features li { position: relative; padding: 10px 0 10px 30px; color: var(--sfl-grey); border-bottom: 1px solid #eef1f5; }
.sfl-features li::before {
   content: "\f00c"; font-family: "FontAwesome"; position: absolute; left: 0; top: 10px; color: var(--sfl-blue);
}

/* ---- Blog sidebar widgets ---- */
.sfl-blog-sidebar { padding-left: 10px; }
.sfl-widget { background: #fff; border: 1px solid #e7ebf1; border-radius: 8px; padding: 24px; margin-bottom: 26px; }
.sfl-widget-title { font-size: 1.1rem; color: var(--sfl-navy); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #eef1f5; }
.sfl-search-form { position: relative; }
.sfl-search-form .form-control { padding-right: 46px; border-radius: 6px; }
.sfl-search-form button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--sfl-blue); color: #fff; width: 34px; height: 34px; border-radius: 5px; }
.sfl-recent-posts { list-style: none; padding: 0; margin: 0; }
.sfl-recent-posts li { margin-bottom: 16px; }
.sfl-recent-posts a { display: flex; gap: 12px; align-items: center; color: var(--sfl-navy); }
.sfl-recent-posts .thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px; overflow: hidden; }
.sfl-recent-posts .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sfl-recent-posts .info .t { display: block; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.sfl-recent-posts .info small { color: var(--sfl-grey); }
.sfl-cat-list { list-style: none; padding: 0; margin: 0; }
.sfl-cat-list li { border-bottom: 1px solid #eef1f5; }
.sfl-cat-list a { display: flex; justify-content: space-between; padding: 10px 0; color: var(--sfl-navy); font-weight: 600; }
.sfl-cat-list a:hover { color: var(--sfl-blue); }
.sfl-cat-list a span { background: var(--sfl-light); color: var(--sfl-grey); border-radius: 12px; padding: 1px 10px; font-size: .8rem; }
.sfl-widget-cta { background: var(--sfl-navy); color: #fff; }
.sfl-widget-cta h3 { color: #fff; font-size: 1.15rem; }
.sfl-widget-cta p { color: #c9d2de; }

/* ---- Single post ---- */
.sfl-single-post .sfl-post-content { font-size: 1.05rem; line-height: 1.85; color: #3f4754; }
.sfl-single-post .sfl-post-content h2 { font-size: 1.6rem; margin: 28px 0 14px; }
.sfl-single-post .sfl-post-content h3 { font-size: 1.3rem; margin: 24px 0 12px; }
.sfl-single-post .sfl-post-content p { margin-bottom: 18px; }
.sfl-single-post .sfl-post-content ul,
.sfl-single-post .sfl-post-content ol { margin: 0 0 18px 1.2rem; }
.sfl-single-post .sfl-post-content li { margin-bottom: 8px; }
.sfl-single-post .sfl-post-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 14px 0; }
.sfl-single-post .sfl-post-content blockquote { border-left: 4px solid var(--sfl-blue); padding: 10px 20px; background: var(--sfl-light); margin: 18px 0; color: var(--sfl-navy); }
.sfl-post-tags .sfl-tag { display: inline-block; background: var(--sfl-light); color: var(--sfl-blue); padding: 4px 12px; border-radius: 14px; margin: 0 6px 6px 0; font-size: .85rem; font-weight: 600; }
.sfl-share button.sfl-copy-link { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sfl-light); color: var(--sfl-navy); }
.sfl-share button.sfl-copy-link:hover { background: var(--sfl-blue); color: #fff; }

/* ---- Pagination ---- */
.sfl-pagination .pagination { margin-top: 20px; }
.sfl-pagination .page-link { color: var(--sfl-navy); border-color: #e2e7ee; }
.sfl-pagination .page-item.active .page-link { background: var(--sfl-blue); border-color: var(--sfl-blue); color: #fff; }

/* ---- Map placeholder ---- */
.sfl-map-placeholder { line-height: 0; }

/* ---- Hero overlay so headline text stays legible on photos ---- */
.slider .slide-item .image-layer::after {
   content: ""; position: absolute; inset: 0;
   background: linear-gradient(90deg, rgba(15,28,9,.78) 0%, rgba(15,28,9,.45) 60%, rgba(15,28,9,.25) 100%);
}
.slider .slide-item .slider_content { position: relative; z-index: 2; }

/* ---- Hero text sizing: the template h1 is a fixed 72px tuned for very short
   headlines. Our longer corporate headline needs a responsive, slightly
   smaller scale and a constrained measure so it reads in 2–3 tidy lines
   like the original model, rather than overflowing the hero. ---- */
.slider.style_four .slide-item-content .slider_content {
   max-width: 760px;
}
.slider.style_four .slide-item-content .slider_content h1 {
   font-size: clamp(2.1rem, 4.4vw, 3.4rem);   /* ~34–54px */
   line-height: 1.15;
   margin-bottom: 18px;
}
.slider.style_four .slide-item-content .slider_content p.description {
   font-size: 1.05rem;
   line-height: 1.7;
   max-width: 620px;
}
@media (max-width: 575px) {
   .slider.style_four .slide-item-content .slider_content h1 { font-size: 1.9rem; line-height: 1.2; }
}

/* ---- Actual logo image (replaces text wordmark) ---- */
.sfl-logo-img {
   height: 58px;
   width: auto;
   display: block;
}
/* Footer: white pill so the logo reads on the dark footer background */
.sfl-footer-logo-link {
   display: inline-block;
   background: #fff;
   border-radius: 8px;
   padding: 10px 18px;
}
.sfl-footer-logo-link .sfl-logo-img {
   height: 50px;
}
@media (max-width: 575px) {
   .sfl-logo-img { height: 46px; }
   .sfl-footer-logo-link .sfl-logo-img { height: 40px; }
}