/* ==========================================================================
   Web Design Sri Lanka - Custom Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global Typography Configuration
   Consistent font-family across all content and headings
   Body minimum font size: 14px
   -------------------------------------------------------------------------- */
:root {
  --font-content: 'Montserrat', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-content);
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

p, span, a, li, button, input, textarea, select, label {
  font-family: var(--font-content);
}

/* Enforce 14px minimum font size across all body copy and sub-text elements */
.text-xs,
.text-\[9px\],
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-\[13px\] {
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   1. Hero & Parallax Showcase (Home Page)
   -------------------------------------------------------------------------- */
.wood-hero-bg {
  background: radial-gradient(circle at center, #ffffff 0%, #eceff1 60%, #cfd8dc 100%);
  background-size: cover;
  background-position: center;
}

.sketch-element {
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s ease-in-out, visibility 0.75s ease-in-out;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   2. UX Architecture Showcase Section (Home Page)
   -------------------------------------------------------------------------- */
#ux-section {
  background-image: url('../images/home_webdesign_about_bg.jpg');
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* --------------------------------------------------------------------------
   3. Anti-Spam Honeypot Hidden Fields (Global Forms)
   -------------------------------------------------------------------------- */
.hp-field {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. FAQ Accordions & Background (Global FAQ Sections)
   -------------------------------------------------------------------------- */
#faq {
  background-color: #ebedeecc;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

details[open] summary .faq-icon {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   5. Page Hero Header Parallax Effect (All Inner Pages)
   -------------------------------------------------------------------------- */
.page-hero-header {
  position: relative;
  overflow: hidden;
  background-color: #020617; /* Slate-950 fallback */
}

.page-hero-parallax-bg {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
}