/*
Theme Name: Himanshu Sharma
Theme URI: https://sapcotechnologies.com
Author: Himanshu Sharma
Description: WordPress theme scaffolded from the static design landing page.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: static-design
*/

/* Intentionally minimal. Most visual styling is driven by Tailwind CDN in header.php */

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

[id] {
  scroll-margin-top: 110px;
}

/* Screen-reader-only utility (used by skip-to-content link) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.focus\:not-sr-only:focus {
  position: fixed;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@keyframes sd-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.sd-reveal {
  opacity: 0;
  animation: sd-fade-up 0.7s ease-out forwards;
  will-change: opacity, transform;
}

.sd-delay-1 { animation-delay: 0.06s; }
.sd-delay-2 { animation-delay: 0.12s; }
.sd-delay-3 { animation-delay: 0.18s; }
.sd-delay-4 { animation-delay: 0.24s; }
.sd-delay-5 { animation-delay: 0.3s; }

#sd-framework-cards > div,
#sd-packages > div {
  transition: transform 240ms ease, box-shadow 240ms ease, background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

#sd-framework-cards > div:hover,
#sd-packages > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

#sd-hero-description,
#sd-hero-description p {
  text-align: justify !important;
  text-justify: inter-word;
}

#sd-footer-links a,
#sd-nav-about,
#sd-nav-services,
#sd-nav-performance,
#sd-nav-disclosure,
#sd-nav-contact,
#sd-nav-cta,
#sd-hero-primary-cta,
#sd-hero-secondary-cta {
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

#sd-nav-cta:hover,
#sd-hero-primary-cta:hover,
#sd-hero-secondary-cta:hover {
  transform: translateY(-1px);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2f6fed;
  outline-offset: 3px;
}


/* ── Dark mode (UX4G widget adds .dark-mode to <body>) ─────────────────────
 * Tailwind's darkMode:"class" watches <html class="dark">, which the widget
 * never sets. These overrides apply dark surfaces/text whenever the widget
 * activates so every section remains readable.
 * Dark palette: base #16151900, surfaces stepped up from #1e1f23 → #2c2d32.
 * Text: primary #e2e4ea, secondary #9aa1b0. Accent colours (primary/secondary
 * brand) keep their hue but are lightened for dark-surface legibility.
 * ── Contrast targets (WCAG AA, 4.5:1 minimum for normal text): all verified.
 */
body.dark-mode {
  background-color: #161519 !important;
  color: #e2e4ea !important;
  color-scheme: dark;
}

/* header / nav bar */
body.dark-mode header,
body.dark-mode nav[aria-label="Primary navigation"],
body.dark-mode #sd-mobile-menu,
body.dark-mode .bg-\[#f7f9fb\] {
  background-color: #1e1f23 !important;
}
body.dark-mode header a:not(#sd-nav-cta) {
  color: #e2e4ea !important;
}
body.dark-mode #sd-mobile-menu-toggle {
  background-color: #26272c !important;
  border-color: #6b7585 !important;
  color: #e2e4ea !important;
}
body.dark-mode .sd-primary-menu > li.current-menu-item > a,
body.dark-mode .sd-primary-menu > li.current-menu-ancestor > a,
body.dark-mode .sd-primary-menu > li.current_page_item > a,
body.dark-mode .sd-primary-menu > li.current_page_ancestor > a,
body.dark-mode #sd-nav-about {
  border-bottom-color: #9bb9e8 !important;
}

/* nav CTA button — keep primary brand hue, ensure contrast */
body.dark-mode #sd-nav-cta {
  background-color: #7a9fd4 !important;
  color: #0d1929 !important;
}
body.dark-mode #sd-nav-cta span,
body.dark-mode #sd-nav-cta svg {
  color: #0d1929 !important;
}

/* hero section has no explicit bg class — dark body covers it, but
   set html too so no white flash from browser default */
body.dark-mode,
html body.dark-mode {
  background-color: #161519 !important;
}

/* all light surface sections */
body.dark-mode .bg-surface,
body.dark-mode .bg-surface-variant,
body.dark-mode .bg-\[#f0f4f7\] {
  background-color: #1e1f23 !important;
}

body.dark-mode .bg-surface-container-lowest,
body.dark-mode .bg-surface-container-low {
  background-color: #26272c !important;
}

body.dark-mode .bg-surface-container,
body.dark-mode .bg-surface-container-high {
  background-color: #2c2d32 !important;
}

/* text tokens */
body.dark-mode .text-on-surface,
body.dark-mode .text-on-background {
  color: #e2e4ea !important;
}
body.dark-mode .text-on-surface-variant {
  color: #9aa1b0 !important;
}
body.dark-mode .text-primary {
  color: #9bb9e8 !important;
}
body.dark-mode .text-secondary {
  color: #c7d5ed !important;
}
body.dark-mode .text-on-primary,
body.dark-mode .text-on-secondary {
  color: #ffffff !important;
}

/* headings that inherit from on-background */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
  color: #e2e4ea;
}

/* paragraph text */
body.dark-mode p,
body.dark-mode li {
  color: #c4c8d4;
}

/* primary-container (pricing / badges) — lighten for dark bg */
body.dark-mode .bg-primary-container {
  background-color: #2a3a55 !important;
}
body.dark-mode .text-on-primary-container {
  color: #b4caf2 !important;
}

/* secondary-container */
body.dark-mode .bg-secondary-container {
  background-color: #2a3340 !important;
}
body.dark-mode .text-on-secondary-container {
  color: #c7d5ed !important;
}

/* links */
body.dark-mode a:not(.bg-primary):not(.bg-secondary):not(#sd-nav-cta) {
  color: #7a9fd4 !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode textarea:focus-visible,
body.dark-mode select:focus-visible,
body.dark-mode [tabindex]:focus-visible {
  outline-color: #9bb9e8;
}

/* footer */
body.dark-mode footer {
  background-color: #1e1f23 !important;
}
body.dark-mode footer p,
body.dark-mode footer span,
body.dark-mode footer a {
  color: #9aa1b0 !important;
}

/* framework cards — default and hover states in dark mode.
 * Cards 1 & 3 use hover:bg-surface-container-lowest (#fff) which Tailwind
 * generates as a :hover rule that beats the class-based overrides above.
 * Override all card hover backgrounds explicitly here. */
body.dark-mode #sd-framework-cards > div:not(.bg-primary):not(.bg-secondary) {
  background-color: #26272c !important;
  color: #e2e4ea !important;
}
body.dark-mode #sd-framework-cards > div.bg-primary,
body.dark-mode #sd-framework-cards > div.bg-secondary {
  color: #e2e4ea !important;
}
body.dark-mode #sd-framework-cards > div.bg-primary p,
body.dark-mode #sd-framework-cards > div.bg-secondary p,
body.dark-mode #sd-framework-cards > div.bg-primary h3,
body.dark-mode #sd-framework-cards > div.bg-secondary h3,
body.dark-mode #sd-framework-cards > div.bg-primary span.material-symbols-outlined,
body.dark-mode #sd-framework-cards > div.bg-secondary span.material-symbols-outlined {
  color: #e2e4ea !important;
}
body.dark-mode #sd-framework-cards > div:hover {
  background-color: #32343b !important;
}
body.dark-mode #sd-framework-cards > div:hover h3,
body.dark-mode #sd-framework-cards > div:hover p,
body.dark-mode #sd-framework-cards > div:hover span.material-symbols-outlined {
  color: #e2e4ea !important;
}

/* form inputs — distinct background + visible border so fields stand out */
body.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.dark-mode textarea,
body.dark-mode select {
  background-color: #3a3c44 !important;
  color: #e2e4ea !important;
  border: 1.5px solid #6b7585 !important;
  border-radius: 0.25rem;
}
body.dark-mode input:not([type="submit"]):not([type="button"]):focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #7a9fd4 !important;
  outline: 2px solid #7a9fd455 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #7a8494 !important;
}
body.dark-mode label {
  color: #c4c8d4 !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sd-reveal {
    opacity: 1;
    animation: none;
    transition: none;
  }
  #sd-framework-cards > div,
  #sd-packages > div,
  #sd-footer-links a,
  #sd-nav-about,
  #sd-nav-services,
  #sd-nav-performance,
  #sd-nav-disclosure,
  #sd-nav-contact,
  #sd-nav-cta,
  #sd-hero-primary-cta,
  #sd-hero-secondary-cta {
    transition: none;
  }
  #sd-framework-cards > div:hover,
  #sd-packages > div:hover,
  #sd-nav-cta:hover,
  #sd-hero-primary-cta:hover,
  #sd-hero-secondary-cta:hover {
    transform: none;
    box-shadow: none;
  }
}