/* ============================================================
   KABES MEDIA — GLOBAL STYLESHEET
   Theme: Inspiro Premium 9.6.4
   Last updated: 15 May 2026

   CHANGE LOG (15 May):
   - Section 13: mobile .km-footer padding-bottom 80px → 40px
   - Section 15: ::after backdrop height 240px → 40px
   - Section 16: added homepage intro line styles (.km-intro-line)
   - Section 16: switched to clamp() for proportional scaling
     (mobile duplicate inside Section 13 removed — clamp handles all sizes)
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
------------------------------------------------------------ */
:root {
  --color-primary: #0bb4aa;
  --color-secondary: #101010;
  --color-tertiary: #6C6C77;
  --color-white: #ffffff;
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-muted: rgba(255, 255, 255, 0.55);
  --color-legal: rgba(255, 255, 255, 0.45);

  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------
   2. INTER FONT
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body,
.entry-content,
.site-content,
input,
select,
textarea,
button {
  font-family: var(--font-base);
}

/* ------------------------------------------------------------
   3. HIDE INSPIRO FOOTER BUILDER OUTPUTS — KEEP WRAPPER ALIVE
------------------------------------------------------------ */

/* Hide all Inspiro Footer Builder device containers */
.footer-device-container,
.footer-view-desktop,
.footer-view-tablet,
.footer-view-mobile,
#site-footer .footer-device-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide WPZOOM credits */
.site-info,
.designed-by,
.footer-credits,
.flavor,
.copyright,
a[href*="wpzoom"],
a[href*="WPZOOM"] {
  display: none !important;
  visibility: hidden !important;
}

/* Remove decorative separators */
.site-footer hr,
#colophon hr,
.footer-builder-output hr,
.site-footer .wp-block-separator {
  display: none !important;
}

/* Clean stray horizontal rules after content */
body > hr,
.site-content + hr,
#main + hr {
  display: none !important;
}

/* ------------------------------------------------------------
   4. FULL-BLEED CUSTOM FOOTER (works in any container)
------------------------------------------------------------ */
.km-footer {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  display: block !important;
  box-sizing: border-box;
}

/* Allow footer to escape constrained containers on desktop only */
@media (min-width: 782px) {
  .entry-content {
    overflow-x: visible !important;
  }
}

/* ------------------------------------------------------------
   4B. INSPIRO NATIVE FOOTER WRAPPER — DARK SHELL
------------------------------------------------------------ */
.site-footer,
footer.site-footer,
#site-footer,
.footer-builder-output {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #101010 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  border: none !important;
}

/* ------------------------------------------------------------
   5. SHRINK THEME HEADER BAR
------------------------------------------------------------ */
.site-header,
.site-header.is-fixed,
.site-header .site-branding,
header.site-header,
header.site-header.is-fixed {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 64px !important;
}

.site-header .site-logo img,
.site-header .custom-logo {
  max-height: 40px !important;
  width: auto !important;
}

/* ------------------------------------------------------------
   6. KILL WHITE PATCH ABOVE HERO VIDEO
------------------------------------------------------------ */
.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.entry-content > .wp-block-cover:first-child {
  margin-top: 0 !important;
}

.site-content,
#main,
.site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ------------------------------------------------------------
   7. PORTFOLIO BLOCK MARGIN FIX (legacy)
------------------------------------------------------------ */
.wpzoom-blocks_portfolio-block {
  margin-top: 0;
}

/* ------------------------------------------------------------
   8. HERO LAYOUT — HEADLINE TOP, BUTTONS BOTTOM
------------------------------------------------------------ */
.km-hero {
  padding-top: 160px !important;
  padding-bottom: 60px !important;
}

.km-hero .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: calc(80vh - 220px) !important;
}

.km-hero-headline {
  margin: 0 !important;
  color: #ffffff !important;
}

.km-hero-buttons {
  margin: 0 !important;
}

/* ------------------------------------------------------------
   9. TABLET — 782px to 1024px
------------------------------------------------------------ */
@media screen and (min-width: 782px) and (max-width: 1024px) {
  .wp-block-cover .wp-block-heading[style*="font-size"] {
    font-size: 44px !important;
  }
}

/* ------------------------------------------------------------
   10. ABOUT PAGE — TEAM GRID SPACING (desktop)
------------------------------------------------------------ */
.km-team-grid .wp-block-image {
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

.km-team-grid .wp-block-image figure {
  margin-bottom: 0 !important;
}

.km-team-grid .wp-block-column p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

.km-team-grid .wp-block-column p strong {
  display: block;
  line-height: 1.2;
  margin-bottom: 2px;
}

.km-team-grid .wp-block-column p span {
  display: block;
  line-height: 1.2;
}

.km-team-grid .wp-block-column p br {
  display: none;
}

/* ------------------------------------------------------------
   11. POLICY PAGES — TIGHT BODY TEXT RHYTHM
------------------------------------------------------------ */
.km-policy-body p {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  line-height: 1.7;
}

.km-policy-body p + p {
  margin-top: 12px !important;
}

.km-policy-body h3 {
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}

.km-policy-body h3:first-child {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------
   12. IMAGE SIZING — keep images within their container
------------------------------------------------------------ */
.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   13. MOBILE — consolidated rules (max-width 781px)
------------------------------------------------------------ */
@media (max-width: 781px) {

  /* Prevent horizontal scroll on body */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Mobile header solid dark */
  .site-header,
  #masthead,
  .header-main,
  .navigation-top {
    background-color: #101010 !important;
  }

  /* Mobile hero clearance — push non-homepage hero content below sticky header */
  body:not(.home) .entry-content > .wp-block-group.alignfull.has-secondary-background-color:first-child,
  body:not(.home) .entry-content > .wp-block-group.alignfull.has-secondary-background-color:first-of-type {
    padding-top: 90px !important;
  }

  /* Remove extra top spacer inside mobile page hero */
  body:not(.home) .entry-content > .wp-block-group.alignfull.has-secondary-background-color:first-child > .wp-block-spacer:first-child,
  body:not(.home) .entry-content > .wp-block-group.alignfull.has-secondary-background-color:first-of-type > .wp-block-spacer:first-child {
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
  }

  /* Mobile typography scaling */
  .entry-content h1,
  .entry-content .wp-block-heading.has-max-60-font-size {
    font-size: 38px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.5px !important;
  }

  .entry-content h2,
  .entry-content .wp-block-heading.has-max-48-font-size {
    font-size: 32px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.3px !important;
  }

  .entry-content .wp-block-heading.has-max-36-font-size {
    font-size: 27px !important;
    line-height: 1.18 !important;
  }

  .entry-content h3,
  .entry-content .wp-block-heading.has-medium-font-size {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  .entry-content p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* Tighten spacer heights on mobile */
  .entry-content .wp-block-spacer {
    max-height: 40px !important;
  }

  /* Hero cover heading override */
  .wp-block-cover .wp-block-heading[style*="font-size"] {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  .wp-block-cover .has-medium-font-size {
    font-size: 15px !important;
  }

  .wp-block-cover[style*="min-height"] {
    min-height: 60vh !important;
  }

  /* Default mobile: stack all columns */
  .entry-content .wp-block-columns {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .entry-content .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Homepage stats: 2x2 grid layout */
  .km-mobile-stats.wp-block-columns,
  .km-mobile-stats .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 24px !important;
  }

  .km-mobile-stats.wp-block-columns > .wp-block-column,
  .km-mobile-stats .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .km-mobile-stats h2,
  .km-mobile-stats .wp-block-heading {
    font-size: 48px !important;
    line-height: 1 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  .km-mobile-stats p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: 4px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  /* Team grid: 2 cards per row on mobile */
  .km-team-grid.wp-block-columns,
  .km-team-grid .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 18px !important;
  }

  .km-team-grid.wp-block-columns > .wp-block-column,
  .km-team-grid .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  .km-team-grid .wp-block-image {
    margin-bottom: 8px !important;
  }

  .km-team-grid .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .km-team-grid .wp-block-column p {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .km-team-grid .wp-block-column p strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .km-team-grid .wp-block-column p span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Buttons stack vertically on mobile */
  .wp-block-buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Hero adjustments for mobile */
  .km-hero {
    padding-top: 120px !important;
  }

  .km-hero .wp-block-cover__inner-container {
    min-height: calc(70vh - 180px) !important;
  }

  /* Shrink header on mobile */
  .site-header,
  header.site-header {
    min-height: 56px !important;
  }

  .site-header .site-logo img,
  .site-header .custom-logo {
    max-height: 32px !important;
  }

  /* Footer: stack and contain on mobile */
  .km-footer {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 56px 32px 40px 32px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .km-footer .wp-block-columns,
  .km-footer .wp-block-columns.is-not-stacked-on-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }

  .km-footer .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  .km-footer h2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  .km-footer h3,
  .km-footer h4 {
    font-size: 13px !important;
    letter-spacing: 4px !important;
    margin-top: 20px !important;
    margin-bottom: 16px !important;
  }

  .km-footer p,
  .km-footer a {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Prevent footer text overflow */
  .km-footer p,
  .km-footer h2,
  .km-footer h3,
  .km-footer h4 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------
   14. SMALL PHONE — max-width 480px
------------------------------------------------------------ */
@media (max-width: 480px) {

  .entry-content h1,
  .entry-content .wp-block-heading.has-max-60-font-size {
    font-size: 36px !important;
  }

  .entry-content h2,
  .entry-content .wp-block-heading.has-max-48-font-size {
    font-size: 30px !important;
  }

  .wp-block-cover .wp-block-heading[style*="font-size"] {
    font-size: 28px !important;
  }
}

/* ------------------------------------------------------------
   15. MOBILE FOOTER BOTTOM FIX
   Small dark backdrop below footer (covers iOS safe area only)
------------------------------------------------------------ */
@media (max-width: 781px) {
  .km-footer::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    height: 40px;
    background: #101010;
    z-index: -1;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------
   16. HOMEPAGE INTRO LINE — proportional to viewport
   Scales between 16px (mobile) and 32px (large monitor)
   to stay visually balanced with the 96px stat numbers above.
------------------------------------------------------------ */
.km-intro-line {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(16px, 2vw, 32px) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #101010;
  padding-left: 16px;
  padding-right: 16px;
}

/* ============================================================
   END
============================================================ */