/*
Theme Name: Lanks Hub Limited
Theme URI: https://example.com/fisher-oil-and-gas
Author: Fisher
Author URI: https://example.com
Description: WordPress theme for Lanks Hub Limited — energy and real estate solutions across Nigeria.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: fisher-oil-and-gas
*/

/*
  Primary styling is loaded from /css/*.css via wp_enqueue_scripts.
  Keep this file for WordPress metadata and small theme-level overrides.
*/

/*
  Homepage About section: the "15+ Locations Nationwide" card. Two problems,
  both in the original markup: the counter ("15"), suffix ("+"), and label
  text all sat inline in the same flex row with nothing to space them apart
  (a single whitespace character between flex items doesn't reliably render
  as a visible gap), and the card only had left/bottom padding (Bootstrap's
  ps-3/pb-3) with no right padding at all, most visible on wide desktop
  layouts where the text has nowhere to breathe before the card edge.
*/
.sis-e-about-content-left .sis-title,
.sis-e-about-content-left .sis-e-content > p {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.sis-e-about-content-left .fog-stat-label {
  margin-left: 8px;
}

/*
  Pagination (the_posts_pagination(), used on the Services/Projects archives
  and the Blog listing). custom.css has zero rules for .page-numbers/.nav-
  links — the original HTML template never had a pagination component to
  convert in the first place, so this is built from scratch to match the
  site's existing color system rather than left at browser defaults.
*/
.navigation.pagination {
  display: flex;
  justify-content: center;
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--secondary-color);
  color: var(--primary-color);
  font-family: var(--heading-font);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.navigation.pagination .page-numbers:hover {
  background: var(--main-color);
  color: var(--white-color);
}

.navigation.pagination .page-numbers.current {
  background: var(--main-color);
  color: var(--white-color);
}

.navigation.pagination .page-numbers.dots {
  background: transparent;
}

/*
  Footer "Powered by" credit line (Theme Options -> Footer). Hidden entirely
  when left blank; styled smaller/muted so it reads as a secondary credit,
  not competing with the copyright line above it. custom.css has a rule
  (.sisf-page-footer-bottom-area .footer-copyright-text p) coloring every
  paragraph in this container var(--primary-color) — the same dark color as
  the footer's own background, so without an explicit override here this
  text was rendering completely invisible: dark text directly on a
  dark background.
*/
.fog-powered-by {
  color: var(--white-color) !important;
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
}

.fog-powered-by a {
  color: inherit;
  text-decoration: underline;
}

/*
  Blog article body copy. custom.css has no .entry-content rules at all — it
  was built entirely from fixed, hand-authored markup, with no page anywhere
  that renders free-form the_content() from the block editor. Without this,
  a real blog post's headings/lists/quotes would fall back to bare browser
  defaults, visibly out of step with the rest of the site's typography.
*/
.entry-content {
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.8;
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.entry-content p {
  margin-bottom: 1.4em;
}

.entry-content a {
  color: var(--main-color);
  text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.4em;
  padding-left: 1.4em;
}

.entry-content li {
  margin-bottom: 0.5em;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.entry-content blockquote {
  margin: 1.6em 0;
  padding: 0.8em 1.4em;
  border-left: 4px solid var(--main-color);
  background: var(--secondary-color);
  font-style: italic;
  color: var(--primary-color);
}

/*
  Homepage SVG icons, recolored to the Accent Color (Theme Options -> Colors
  -> Match Homepage SVG Icons to Accent Color). fog_render_icon() inlines the
  SVG and swaps its baked-in fill for currentColor; this is what that color
  actually comes from.
*/
.fog-icon-accent {
  display: inline-flex;
  color: var(--main-color);
}

.fog-icon-accent svg {
  display: block;
}

/*
  The "How We Work" step cards swap their background to the accent color on
  hover. custom.css handled that for the old <img> icon with a
  `filter: brightness(0)` hack forcing it black — that filter doesn't touch
  an inline SVG, and without a replacement the now accent-colored icon would
  disappear into the equally accent-colored hover background. This swaps its
  color to match instead, using the same currentColor mechanism.
*/
.sis-how-it-works-hover-item:hover .sisf-e-inner .sisf-step-icons .fog-icon-accent {
  color: var(--primary-color);
}

/*
  Hero section: gap between the CTA buttons and the "Want efficient oil and
  gas solutions?" card below them. custom.css has no margin/padding on
  .sisf-hero-bottom at all (true in the original template too, not something
  the WordPress conversion dropped) — the two sit flush against each other,
  most noticeable on desktop where the button row and the card are both
  full-width and close together.
*/
.sisf-hero-bottom {
  margin-top: 32px;
}

/*
  Header: mobile menu toggle.
  .sisf-mobile-header-right holds the .navbar-toggle button slicknav needs,
  hidden on desktop and shown once the centered nav/CTA wrapper switches to
  its mobile layout at 991px. The header's own flex layout (.sisf-skin--dark
  .container gets justify-content: space-between at 991px) pushes it to the
  right of the logo automatically. Social icons stay desktop-only, in
  .sis-header-top, rather than sharing this small space with the toggle.
*/
.sisf-mobile-header-right {
  display: none;
}

@media only screen and (max-width: 991px) {
  .sisf-mobile-header-right {
    display: flex;
  }
}

/*
  Homepage About section: bottom counter row (Barrels Processed / Industrial
  Projects / Operational Efficiency). custom.css has no rule at all for
  .sisf-about-bottom-counters, so it was only getting an mt-5 (48px) top
  margin and nothing else — no separation from the content above it, and
  (on the "row" itself) no vertical gutter, so wrapped items touched with
  zero gap on mobile once they stack to two-per-row. This gives it its own
  clearly separated band, sized like the section padding around it rather
  than an afterthought stuck at the bottom of the About content.
*/
.sisf-about-bottom-counters {
  padding-top: 40px;
  margin-top: 40px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/*
  Contact Form 7 styling.
  CF7 renders its own markup/classes (.wpcf7-form-control, .wpcf7-submit, etc.)
  independent of anything set in the form editor, so it never matches the
  theme's .form-control / .sis-btn-default look out of the box. These rules
  make it match by targeting CF7's own default classes — nothing is changed
  in the CF7 plugin or form definition itself.
*/
.form-section .wpcf7-form-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--default-font);
  background-color: var(--secondary-color);
  color: var(--primary-color);
  box-shadow: none;
  line-height: normal;
  margin-bottom: 30px;
  text-align: left;
  padding: 15px;
  border-radius: 50px;
  outline: none;
  border: 1px solid transparent;
  transition: border-color 0.3s ease-in-out;
}

.form-section .wpcf7-form-control.wpcf7-textarea {
  border-radius: 12px;
  min-height: 140px;
  resize: vertical;
}

.form-section .wpcf7-form-control:focus {
  border-color: var(--main-color);
}

.form-section .wpcf7-form-control::placeholder {
  color: var(--text-color);
  opacity: 0.7;
}

/*
  .form-section's own background (var(--secondary-color), a light off-white)
  is the SAME color the fields above use by default, which is fine when the
  form sits on white (the homepage) but leaves the fields on the Contact
  page nearly invisible against their own container. Bump the fields to
  white there instead, the same fix the original static template applied
  via a "bg-white" class on that page's inputs.
*/
.sisf-comman-bg-light .form-section .wpcf7-form-control {
  background-color: var(--white-color);
}

.form-section p {
  margin-bottom: 0;
}

.form-section input.wpcf7-submit {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 0px;
  text-transform: uppercase;
  font-family: var(--default-font);
  background: var(--main-color);
  color: var(--primary-color);
  border-radius: 50px;
  padding: 14px 32px;
  border: 1px solid var(--main-color);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.form-section input.wpcf7-submit:hover {
  background: var(--primary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
}

.form-section .wpcf7-spinner {
  vertical-align: middle;
  margin-left: 8px;
}

.form-section .wpcf7-not-valid-tip {
  display: block;
  color: var(--error-color);
  font-size: 13px;
  margin-bottom: 20px;
}

.form-section .wpcf7-response-output {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0 0;
  font-size: 14px;
}

/* Generic initials avatar used in place of a testimonial photo. */
.fog-avatar-initials {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}