/* ============================================================
   PAGES.CSS — Karim Painting v2
   Page-specific overrides and extra utility classes
   ============================================================ */

/* ----------------------------------------
   KEYBOARD NAVIGATION FOCUS STYLE
   ---------------------------------------- */
body.keyboard-nav *:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------
   STATS SECTION — white heading override
   ---------------------------------------- */
.stats-section .section-header h2 {
  color: var(--color-white);
}

.stats-section .section-header h2::after {
  background: var(--gradient-brand);
}

/* ----------------------------------------
   SECTION HEADER left-align variant
   ---------------------------------------- */
.section-header.left {
  text-align: start;
}

.section-header.left h2::after {
  margin: 0.75rem 0 0;
}

/* ----------------------------------------
   CONTACT PAGE — options heading override
   ---------------------------------------- */
.contact-options .section-header h3::after {
  display: none;
}

.contact-options h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

/* ----------------------------------------
   HERO — stats-section heading
   ---------------------------------------- */
.stats-section .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------
   SPLIT SECTION — full-bleed inside container
   ---------------------------------------- */
.container > .split-section {
  margin-left: calc(-1 * var(--container-pad));
  margin-right: calc(-1 * var(--container-pad));
}

/* ----------------------------------------
   CTA BANNER — override heading color
   ---------------------------------------- */
.cta-banner h2 {
  color: var(--color-white) !important;
}

/* ----------------------------------------
   PORTFOLIO ITEM — hidden state
   ---------------------------------------- */
.portfolio-item[style*="display: none"],
.portfolio-item[style*="display:none"] {
  display: none !important;
}

/* ----------------------------------------
   TESTIMONIAL CARD — first child alt color
   ---------------------------------------- */
.testimonials-grid .testimonial-card:nth-child(3n+1) .testimonial-badge {
  background: var(--color-orange-ultra);
  color: var(--color-orange);
}

.testimonials-grid .testimonial-card:nth-child(3n+2) .testimonial-badge {
  background: rgba(46, 122, 48, 0.1);
  color: var(--color-green);
}

/* ----------------------------------------
   SERVICE PAGES — split section flush spacing
   ---------------------------------------- */
.section > .container[style*="padding:0"],
.section > .container[style*="padding: 0"] {
  max-width: 100%;
  padding: 0;
}

/* ----------------------------------------
   FOOTER — bottom container padding
   ---------------------------------------- */
.footer .container {
  padding-bottom: 0;
}

/* ----------------------------------------
   FORM — date input styling
   ---------------------------------------- */
input[type="date"] {
  color: var(--color-text);
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}

/* ----------------------------------------
   GALLERY — placeholder when no image
   ---------------------------------------- */
.gallery-item img[src=""],
.gallery-item img:not([src]) {
  display: none;
}

.gallery-item:not(:has(img[src])) {
  min-height: 240px;
}

/* ----------------------------------------
   SCROLLBAR STYLING (webkit)
   ---------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-teal);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal-light);
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
  .navbar,
  .splash-overlay,
  .mobile-overlay,
  .float-whatsapp,
  .float-cta,
  .loading-overlay,
  .scroll-progress {
    display: none !important;
  }

  .hero {
    min-height: auto;
    page-break-after: avoid;
  }

  body {
    font-size: 12pt;
  }
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-title,
  .hero-sub,
  .hero-actions,
  .hero-badge,
  .hero-accent-bar,
  .splash-title,
  .splash-subtitle,
  .splash-btn,
  .splash-accent,
  .splash-countdown {
    animation: none;
    opacity: 1;
    transform: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}