/*
 * Premium refinement layer.
 * Loaded after the generated Tailwind bundle and section-specific styles.
 * Keeps the existing architecture intact, upgrades polish site-wide.
 */

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--clr-surface, #fafaf5);
  color: var(--clr-text-primary, #1a1f1a);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p {
  line-height: 1.75;
  text-wrap: pretty;
}

a,
button,
summary,
input,
select,
textarea,
.mikal-btn,
.footer-cta,
.header-cta,
.header-phone-link,
.header-menu-btn,
.mobile-menu-cta {
  transition:
    transform 240ms var(--ease-out-expo),
    box-shadow 240ms ease,
    background-color 240ms ease,
    color 240ms ease,
    border-color 240ms ease,
    opacity 240ms ease;
}

a:hover,
button:hover,
.mikal-btn:hover,
.footer-cta:hover,
.header-cta:hover,
.header-phone-link:hover,
.header-menu-btn:hover,
.mobile-menu-cta:hover {
  transform: translateY(-2px);
}

a:active,
button:active,
.mikal-btn:active,
.footer-cta:active,
.header-cta:active,
.header-phone-link:active,
.header-menu-btn:active,
.mobile-menu-cta:active {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mikal-btn:focus-visible,
.footer-cta:focus-visible,
.header-cta:focus-visible,
.header-phone-link:focus-visible,
.header-menu-btn:focus-visible,
.mobile-menu-cta:focus-visible {
  outline: 2px solid rgba(10, 92, 24, 0.24);
  outline-offset: 3px;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* -------------------------------------------------
   Shared section and typography polish
   ------------------------------------------------- */

.mikal-page-banner,
.mikal-contact-hero,
.mikal-stats-bar,
.mikal-site-footer,
.mikal-final-cta,
.services-premium-section,
.why-us-section,
.mikal-footer {
  scroll-margin-top: 96px;
}

.hero-title,
.section-title,
.services-premium-title,
.why-us-header h2,
.mikal-final-cta h2,
.page-banner h1,
.mikal-contact-hero h1,
.mikal-contact-hero p,
.mikal-page-banner h1 {
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.hero-sub,
.page-banner p,
.mikal-contact-hero .hero-sub,
.mikal-final-cta p,
.footer-brand p,
.footer-contact-card p,
.services-card-subtitle,
.services-card-method-list li,
.why-us-card-description,
.feature-card p,
.service-card p,
.contact-method-copy,
.contact-methods p,
.trust-feature-card p {
  max-width: 68ch;
}

/* -------------------------------------------------
   Header refinement
   ------------------------------------------------- */

.site-header {
  transform: translateZ(0);
}

.site-header--scrolled {
  background: rgba(250, 250, 245, 0.96);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(10, 92, 24, 0.08);
  box-shadow: 0 12px 36px rgba(15, 26, 15, 0.08);
}

.site-header--transparent {
  background: transparent;
}

.header-inner {
  min-height: 80px;
}

.header-brand,
.header-phone-link,
.header-cta,
.header-menu-btn,
.mobile-menu-cta {
  will-change: transform;
}

.header-phone-link,
.header-cta,
.header-menu-btn {
  border: 1px solid transparent;
}

.header-nav-link,
.header-nav-list a,
.mobile-menu-nav a {
  letter-spacing: 0.01em;
}

.header-cta {
  box-shadow: 0 18px 30px -24px rgba(10, 92, 24, 0.75);
}

.header-cta:hover {
  box-shadow: 0 20px 34px -22px rgba(10, 92, 24, 0.68);
}

.header-menu-btn {
  box-shadow: 0 10px 24px -22px rgba(15, 26, 15, 0.4);
}

.site-header--transparent .header-phone-link,
.site-header--transparent .header-menu-btn {
  border-color: rgba(255, 255, 255, 0.16);
}

.mobile-menu {
  background: rgba(15, 26, 15, 0.94);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

.mobile-menu-nav a {
  min-width: 11rem;
}

.mobile-menu-nav li {
  transition-delay: 0ms;
}

.mobile-menu-actions {
  width: min(320px, calc(100vw - 48px));
}

.mobile-menu-cta {
  box-shadow: 0 14px 26px -22px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------
   Buttons and CTAs
   ------------------------------------------------- */

.mikal-btn,
.footer-cta,
.mikal-footer-cta,
.header-cta,
.mobile-menu-cta {
  border-radius: 14px;
}

.mikal-btn-primary,
.footer-cta-primary,
.mikal-footer-cta--whatsapp,
.header-cta,
.mobile-menu-cta--primary {
  box-shadow: 0 18px 34px -24px rgba(10, 92, 24, 0.72);
}

.mikal-btn-primary:hover,
.footer-cta-primary:hover,
.mikal-footer-cta--whatsapp:hover,
.header-cta:hover,
.mobile-menu-cta--primary:hover {
  box-shadow: 0 22px 40px -22px rgba(10, 92, 24, 0.66);
}

.mikal-btn-secondary,
.footer-cta-secondary,
.mikal-footer-cta--phone,
.mobile-menu-cta--secondary,
.header-phone-link {
  background: rgba(250, 250, 245, 0.92);
  border: 1px solid rgba(10, 92, 24, 0.12);
}

.mikal-btn-secondary:hover,
.footer-cta-secondary:hover,
.mikal-footer-cta--phone:hover,
.mobile-menu-cta--secondary:hover,
.header-phone-link:hover {
  border-color: rgba(10, 92, 24, 0.2);
}

/* -------------------------------------------------
   Premium cards and repeated content
   ------------------------------------------------- */

.feature-card,
.service-card,
.premium-card,
.premium-card--contact,
.premium-card--trust,
.trust-feature-card,
.footer-contact-card,
.mikal-footer-contact,
.why-us-card,
.services-zigzag-card,
.mikal-contact-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 245, 0.98));
  border: 1px solid rgba(10, 92, 24, 0.08);
  box-shadow: 0 14px 36px rgba(15, 26, 15, 0.06);
}

.feature-card,
.service-card,
.premium-card,
.premium-card--contact,
.premium-card--trust,
.trust-feature-card,
.footer-contact-card,
.mikal-contact-form-panel {
  border-radius: 20px;
}

.card-hover:hover,
.shadow-card-hover:hover,
.feature-card:hover,
.service-card:hover,
.premium-card:hover,
.premium-card--contact:hover,
.premium-card--trust:hover,
.trust-feature-card:hover,
.footer-contact-card:hover,
.mikal-footer-contact:hover,
.why-us-card:hover,
.services-zigzag-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15, 26, 15, 0.09);
}

.img-zoom-container img,
.shadow-card-hover img,
.service-card img {
  transition-duration: 800ms;
}

.feature-card .feature-icon-bg {
  border-color: rgba(10, 92, 24, 0.12);
  background: radial-gradient(circle at 30% 30%, rgba(10, 92, 24, 0.14), rgba(10, 92, 24, 0.05));
}

.service-card .mikal-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--clr-primary, #0a5c18);
  font-weight: 700;
}

.service-card .mikal-card-link:hover {
  color: var(--clr-primary-hover, #084d14);
}

/* -------------------------------------------------
   Page banner, hero and CTA polish
   ------------------------------------------------- */

.mikal-page-banner,
.mikal-contact-hero,
.mikal-final-cta,
.mikal-stats-bar,
.site-footer,
.page-banner {
  position: relative;
  isolation: isolate;
}

.mikal-page-banner::before,
.mikal-contact-hero::before,
.mikal-final-cta::before,
.mikal-stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-banner img,
.mikal-contact-hero img {
  object-position: center;
}

.page-banner nav a,
.mikal-contact-hero nav a {
  text-decoration: none;
}

.page-banner h1,
.mikal-contact-hero h1,
.mikal-final-cta h2,
.services-premium-title,
.section-title,
.why-us-header h2 {
  text-wrap: balance;
}

.mikal-final-cta {
  background:
    linear-gradient(135deg, rgba(136, 217, 130, 0.12), transparent 36%),
    var(--clr-surface-dark, #0f1a0f);
}

.mikal-final-cta .mikal-eyebrow {
  opacity: 0.88;
}

.mikal-final-cta-actions {
  gap: 14px;
}

/* -------------------------------------------------
   Trust and proof blocks
   ------------------------------------------------- */

.footer-proof-row span,
.services-premium-chip,
.why-us-trust-item,


.footer-proof-row span {
  background: rgba(237, 245, 232, 0.08);
}

.why-us-trust-inner,
.services-premium-chip,
.footer-contact-card,
.premium-card--contact,
.premium-card--trust,
.trust-feature-card,
.mikal-contact-form-panel,
.premium-card {
  border-color: rgba(10, 92, 24, 0.1);
}

.why-us-trust-inner {
  box-shadow: 0 14px 34px rgba(15, 26, 15, 0.05);
}

.services-premium-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 92, 24, 0.16);
}

.services-card-result,
.footer-cta-primary,
.header-cta,
.mobile-menu-cta--primary {
  text-shadow: none;
}

.services-card-result {
  box-shadow: 0 16px 28px -22px rgba(10, 92, 24, 0.7);
}

/* -------------------------------------------------
   Footer and floating action
   ------------------------------------------------- */

.mikal-footer,
.mikal-site-footer {
  background: linear-gradient(180deg, rgba(15, 26, 15, 0.98), rgba(15, 26, 15, 1));
}

.mikal-footer-brand-desc,
.mikal-footer-contact-desc,
.mikal-footer-bottom {
  color: rgba(240, 245, 236, 0.72);
}

.mikal-footer-link:hover {
  color: #d8f2d3;
}

.mikal-footer-badge {
  border-color: rgba(237, 245, 232, 0.16);
  color: #d8f2d3;
}

.mikal-footer-contact {
  background: rgba(237, 245, 232, 0.05);
}

.floating-whatsapp {
  background: linear-gradient(180deg, #2dd66b, #1fa954);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -20px rgba(18, 27, 21, 0.95);
}

.floating-whatsapp:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 24px 46px -20px rgba(18, 27, 21, 0.78);
}

/* -------------------------------------------------
   Reveal helpers and reduced motion
   ------------------------------------------------- */

.reveal,
.animate-on-scroll,
.services-reveal,
.why-us-reveal-up,
.why-us-reveal-scale {
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  a,
  button,
  summary,
  input,
  select,
  textarea,
  .mikal-btn,
  .footer-cta,
  .mikal-footer-cta,
  .header-cta,
  .header-phone-link,
  .header-menu-btn,
  .mobile-menu-cta,
  .card-hover,
  .shadow-card-hover,
  .feature-card,
  .service-card,
  .premium-card,
  .footer-contact-card,
  .mikal-footer-contact,
  .why-us-card,
  .services-zigzag-card {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   SHARED BUTTON STYLES (relocated from hero-premium.css)
   Kept global so .btn-primary / .btn-outline render correctly on every
   page after hero-premium.css became front-page-only. polish.css loads
   last, so these win the cascade.
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(10, 92, 24, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(10, 92, 24, 0.4);
}

.btn-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline:hover {
    background: var(--accent);
    color: var(--surface-dark);
    box-shadow: 0 4px 20px rgba(232, 168, 23, 0.3);
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 — extend EXISTING consistency conventions to the
   section-specific components polish.css didn't originally cover.
   Matches the established 14px button / 20px card radii. Radius +
   equal-height only — no colour/background changes, so each
   component keeps its own intended look (e.g. .bp-card overlay).
   ════════════════════════════════════════════════════════════ */

/* Buttons missed by the block above — align to the site's 14px button radius */
.btn-primary,
.btn-outline,
.hero-cta-btn,
.svc-btn,
.svc-btn-primary,
.svc-btn-outline,
.svc-btn-whatsapp {
    border-radius: 14px;
}

/* Section cards missed above — align corner radius to the 20px card scale */
.bp-card,
.svc-why-item,
.contact-method-card {
    border-radius: 20px;
}

/* Equal-height cards in their grids (excludes .bp-card which is aspect-ratio based) */
.svc-why-item,
.contact-method-card {
    height: 100%;
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 — mobile menu: reveal service submenus
   The dropdown <ul> is shared with desktop and carries Tailwind
   'hidden lg:block ... group-hover' utilities, so on touch the
   submenu is display:none and the parent link is a dead '#'.
   In the mobile drawer, show submenus as an always-open indented
   list so individual service pages are reachable.
   ════════════════════════════════════════════════════════════ */
.mobile-menu-nav .has-dropdown > ul {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0.25rem 0 0.5rem;
    padding: 0 1rem 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.mobile-menu-nav .has-dropdown > ul a {
    padding: 0.4rem 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* The parent is a non-navigating '#' on touch; show it as a group label,
   not a tappable link, since its children are listed right below. */
.mobile-menu-nav .has-dropdown > a {
    cursor: default;
}
.mobile-menu-nav .has-dropdown > a .material-symbols-outlined {
    display: none; /* submenu is always expanded here; drop the chevron */
}

/* ════════════════════════════════════════════════════════════════════
   FIXED-HEADER CLEARANCE
   #site-header is position:fixed and 81px tall at every breakpoint, so
   page heroes render underneath it. That underlap is intentional (the
   dark hero bleeds edge-to-edge behind the glass bar), but several heroes
   place their first line — breadcrumb / eyebrow / title — within ~64–80px
   of the top, where the header hides it.

   These rules guarantee the hero CONTENT starts a consistent distance
   below the bar. --site-header-h + 2rem = 113px of top padding, applied
   only to the heroes that actually clip, so no extra whitespace lands on
   heroes that already clear the bar (home, about) or on desktop layouts
   that aren't affected. Loaded last in <head> with !important so it also
   wins over the in-body <style> heroes on the contact and FAQ pages.
   ════════════════════════════════════════════════════════════════════ */
:root { --site-header-h: 81px; }

/* .page-banner (services, blog archive, terms, privacy, service-areas,
   locations) uses a flat 64px top padding that sits under the bar at
   ALL widths — so it is corrected across every breakpoint. */
.page-banner {
    padding-top: calc(var(--site-header-h) + 2rem) !important;
}

/* Content-padded heroes clear the bar on desktop, but their clamp() top
   padding bottoms out at ~64–80px on the hamburger breakpoints (≤1024px),
   which is exactly where the mobile navbar is in play. Correct them there
   only, leaving desktop spacing untouched. */
@media (max-width: 1024px) {
    .mc-hero,
    .fkc-hero,
    .blog-hero,
    .svc-hero,
    .mikal-article-hero {
        padding-top: calc(var(--site-header-h) + 2rem) !important;
    }
}