/* ==========================================================================
   Theme (colors + components + "block" layout)
   Modern 2025: Warm, refined, consistent. Black / Yellow / White palette.
   ========================================================================== */

:root {
  /* Warm dark instead of pure black - feels more premium */
  --c-black: #1a1a1f;
  --c-black-warm: #2a2a2f;
  --c-white: #ffffff;
  --c-cream: #fafaf8;
  
  /* Light gray for alternating sections - subtle but distinct */
  --c-gray-light: #ecece9;
  --c-gray-medium: #e0e0dd;
  
  /* Warm golden yellow instead of bright yellow - more sophisticated */
  --c-yellow: #f5b942;
  --c-yellow-light: #f8c966;
  --c-yellow-dark: #d9a035;

  /* Soft, warm text colors */
  --c-ink: rgba(26, 26, 31, 0.88);
  --c-ink-soft: rgba(26, 26, 31, 0.65);
  --c-line: rgba(26, 26, 31, 0.08);
  --c-line-inv: rgba(255, 255, 255, 0.12);
  
  /* Warm background tints */
  --c-bg-light: rgba(250, 250, 248, 0.6);
  --c-bg-dark: rgba(26, 26, 31, 0.96);

  /* Softer, more refined styling */
  --radius: 20px;
  --radius-small: 12px;
  --shadow: 0 8px 24px rgba(26, 26, 31, 0.08);
  --shadow-hover: 0 12px 32px rgba(26, 26, 31, 0.12);

  --pad-block: clamp(24px, 3vw, 36px);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background: var(--c-cream);
  color: var(--c-ink);
  transition: var(--transition);
}

/* Top navigation - refined, warm header */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg-dark);
  backdrop-filter: blur(12px);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(26, 26, 31, 0.04);
}

header nav {
  max-width: 1060px;
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 24px;
  line-height: 1.3;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}

header nav a {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 12px 18px;
  border-radius: var(--radius-small);
  display: inline-block;
  transition: var(--transition);
  font-size: 1.15rem;
}

header nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Active page link - highlighted in yellow (except Contact which uses grey) */
header nav a.active {
  background: var(--c-yellow) !important; /* Same yellow as buttons and sections */
  color: var(--c-black) !important;
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(245, 185, 66, 0.3);
}

header nav a.active:hover {
  background: var(--c-yellow) !important; /* Same yellow as buttons and sections */
  box-shadow: 0 6px 16px rgba(245, 185, 66, 0.4);
  transform: translateY(-2px);
}

/* Contact link uses yellow when active, like other pages */
header nav a:last-child.active {
  background: var(--c-yellow) !important;
  color: var(--c-black) !important;
  box-shadow: 0 4px 12px rgba(245, 185, 66, 0.3) !important;
}

/* Make "Contact" stand out with grey highlight and push to right */
header nav a:last-child {
  background: linear-gradient(135deg, var(--c-gray-light) 0%, var(--c-gray-medium) 100%);
  color: var(--c-ink);
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(26, 26, 31, 0.15);
  margin-left: auto !important;
  display: flex !important;
  align-items: center;
}

header nav a:last-child:hover {
  background: linear-gradient(135deg, var(--c-gray-medium) 0%, var(--c-gray-light) 100%);
  box-shadow: 0 6px 16px rgba(26, 26, 31, 0.2);
  transform: translateY(-2px);
}


/* Links in content - warm, subtle */
main a {
  color: var(--c-yellow-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: var(--transition);
}

main a:hover {
  color: var(--c-yellow);
  text-decoration-thickness: 2px;
}

/* CTA "button" blocks - only for links to Contact page */
main p > a[href*="/contact/"]:only-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-small);
  background: linear-gradient(135deg, var(--c-black) 0%, var(--c-black-warm) 100%);
  color: var(--c-white) !important; /* Ensure text is always visible */
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  letter-spacing: -0.01em;
  margin-left: 0; /* Align to left border with section padding */
}

/* Ensure buttons at the end of sections have equal spacing to bottom and left */
main > section p:last-child:has(> a[href*="/contact/"]:only-child),
main > section p:last-child > a[href*="/contact/"]:only-child {
  margin-bottom: 0; /* Remove paragraph margin to match left spacing */
}

/* Remove paragraph bottom margin when it contains a button (for equal spacing) */
main > section p:has(> a[href*="/contact/"]:only-child):last-child {
  margin-bottom: 0;
}

main p > a[href*="/contact/"]:only-child:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--shadow-hover);
  background: linear-gradient(135deg, var(--c-black-warm) 0%, var(--c-black) 100%);
  color: var(--c-white) !important; /* Maintain white text on hover */
}

main p > a[href*="/contact/"]:only-child:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 4px;
  color: var(--c-white) !important;
}

/* "Block sections" - modern WordPress blocks feel with warm, subtle alternation
   - each top-level section becomes a refined card-like block
   - soft alternating backgrounds for gentle visual separation
*/
main > section {
  margin-top: 24px;
  border-radius: var(--radius);
  padding: var(--pad-block);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* Subtle warm gradient overlay on even sections */
main > section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(245, 185, 66, 0.02) 0%, rgba(26, 26, 31, 0.01) 100%);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition);
}

main > section:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

main > section:hover::before {
  opacity: 1;
}

/* Alternate sections with medium gray background - subtle but distinct from white */
main > section:nth-of-type(even) {
  background: linear-gradient(135deg, var(--c-gray-light) 0%, var(--c-gray-medium) 100%) !important;
  border: 1px solid rgba(26, 26, 31, 0.06) !important;
  color: var(--c-ink) !important;
  box-shadow: 0 2px 8px rgba(26, 26, 31, 0.04) !important;
}

main > section:nth-of-type(even)::before {
  background: linear-gradient(135deg, rgba(245, 185, 66, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  opacity: 0.5;
}

main > section:nth-of-type(even) a {
  color: var(--c-yellow-dark);
}

main > section:nth-of-type(even) a:hover {
  color: var(--c-yellow);
}

/* "Highlight" blocks for CTA sections - warm golden gradient */
main > section#cta,
main > section#cta-bottom {
  background: linear-gradient(135deg, var(--c-yellow) 0%, var(--c-yellow-light) 100%) !important;
  border-color: rgba(245, 185, 66, 0.3) !important;
  color: var(--c-black) !important;
  box-shadow: 0 8px 24px rgba(245, 185, 66, 0.25) !important;
}

main > section#cta:hover,
main > section#cta-bottom:hover {
  box-shadow: 0 12px 32px rgba(245, 185, 66, 0.35) !important;
}

main > section#cta a,
main > section#cta-bottom a {
  color: var(--c-black) !important;
  font-weight: 700;
}

/* Ensure buttons in CTA sections maintain white text on dark background */
main > section#cta p > a:only-child,
main > section#cta-bottom p > a:only-child {
  color: var(--c-white) !important;
  background: linear-gradient(135deg, var(--c-black) 0%, var(--c-black-warm) 100%) !important;
}

main > section#cta::before,
main > section#cta-bottom::before {
  display: none;
}

/* Testimonial quotes - refined, warm styling */
blockquote {
  padding: 20px 24px;
  border-radius: var(--radius-small);
  border-left: 4px solid var(--c-yellow);
  background: var(--c-bg-light);
  font-style: italic;
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(26, 26, 31, 0.04);
}

main > section:nth-of-type(even) blockquote {
  border-left-color: var(--c-yellow);
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--c-line);
}

/* Articles inside testimonials page - refined cards */
article {
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  padding: var(--pad-block);
  background: var(--c-white);
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(26, 26, 31, 0.06);
  transition: var(--transition);
}

article:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

main > section:nth-of-type(even) article {
  border-color: var(--c-line);
  background: rgba(255, 255, 255, 0.9);
}

/* CEO photo styling - modern, professional portrait */
.ceo-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
  display: block;
  object-fit: cover;
  transition: var(--transition);
}

.ceo-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

.ceo-content p:last-child {
  margin-bottom: 0;
}

.ceo-photo:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Photo styling in light gray sections */
main > section:nth-of-type(even) .ceo-photo {
  box-shadow: var(--shadow);
}

main > section:nth-of-type(even) .ceo-photo:hover {
  box-shadow: var(--shadow-hover);
}

@media (max-width: 820px) {
  .ceo-layout {
    grid-template-columns: 1fr;
  }
  .ceo-photo {
    max-width: 420px;
    margin-bottom: 0.5rem;
  }
}

/* Contact form styling */
#contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
}

#contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#contact-form label {
  font-weight: 650;
  color: var(--c-ink);
}

#contact-form input[type="email"],
#contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-small);
  font-size: 1rem;
  font-family: inherit;
  background: var(--c-white);
  color: var(--c-ink);
  transition: var(--transition);
}

#contact-form input[type="email"]:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.2);
}

#contact-form textarea {
  resize: vertical;
  min-height: 280px;
  line-height: 1.6;
}

#contact-form button[type="submit"] {
  align-self: flex-start;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-small);
  background: linear-gradient(135deg, var(--c-black) 0%, var(--c-black-warm) 100%);
  color: var(--c-white);
  font-weight: 650;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

#contact-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: linear-gradient(135deg, var(--c-black-warm) 0%, var(--c-black) 100%);
}

#contact-form button[type="submit"]:active {
  transform: translateY(0);
}

/* Footer - warm, subtle */
footer {
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-white) 100%);
  color: var(--c-ink-soft);
  margin-top: 24px; /* Reduced from 48px to 24px (half) */
}

.footer-content {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.footer-left span {
  display: inline;
  white-space: nowrap;
}

.footer-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-right a {
  color: var(--c-yellow-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: var(--transition);
}

.footer-right a:hover {
  color: var(--c-yellow);
  text-decoration-thickness: 2px;
}

footer p {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 16px;
  font-size: 0.9rem;
}

/* Hero Gallery - clean, modern carousel - full width, starts at top */
.hero-gallery {
  margin: 0;
  margin-top: -100px; /* Pull up to start from top, completely removing gap */
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  z-index: 1;
}

.hero-gallery::before {
  display: none;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 500px;
  max-height: 800px;
  overflow: hidden;
}

.gallery-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  z-index: 1;
}

.gallery-slide.active {
  opacity: 1;
  z-index: 2;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Removed dark overlay to show original image brightness */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.gallery-content {
  text-align: left;
  color: var(--c-white);
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 16px;
  padding-top: calc(40px + 80px); /* Account for sticky header height + extra spacing */
  box-sizing: border-box;
}

.gallery-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  margin: 0 0 30px 0;
  line-height: 1.1;
  letter-spacing: 0.05em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Text-based "ID" caption (previous version) - still active in CSS for easy restoration */
/* To restore: uncomment the <span class="gallery-title-id">ID</span> in index.html and comment out the <img> tag */
.gallery-title-id {
  color: var(--c-yellow);
  text-transform: uppercase;
}

.gallery-title-id-image {
  height: 182px !important; /* 30% bigger (140px * 1.3 = 182px) */
  width: auto !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  margin-right: -0.5em !important; /* Negative margin to bring Masters much closer (two times closer) */
  margin-left: -80px !important; /* Move left to align with Masters */
  margin-bottom: -37px !important; /* Move down to align with Masters */
  max-width: 260px !important;
  object-fit: contain !important;
}

.gallery-tech-partner-image {
  height: 182px !important; /* 30% bigger (140px * 1.3 = 182px) */
  width: auto !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  margin-right: -0.5em !important; /* Negative margin to bring Masters much closer (two times closer) */
  margin-left: -60px !important; /* Move left to align with Masters */
  margin-bottom: -35px !important; /* Move down to align with Masters */
  max-width: 260px !important;
  object-fit: contain !important;
}


.gallery-title-masters {
  color: #1a1a1f; /* Very dark grey */
  text-transform: capitalize; /* Only first letter capitalized */
}

.gallery-text {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.4;
  margin: 0 0 40px 0;
  color: var(--c-white);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.gallery-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: var(--radius-small);
  background: var(--c-yellow);
  color: var(--c-black) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(26, 26, 31, 0.3);
  transition: var(--transition);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gallery-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26, 26, 31, 0.4);
  background: var(--c-yellow-light);
  text-decoration: none;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--c-white);
  font-size: 6rem; /* 2x bigger (was 3rem) */
  width: auto;
  height: auto;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  line-height: 1;
  padding: 0;
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* Add shadow for visibility */
}

.gallery-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.gallery-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.gallery-arrow-prev {
  left: 30px;
}

.gallery-arrow-next {
  right: 30px;
}

/* Small screen tweaks - maintain warmth and spacing */
@media (max-width: 720px) {
  .gallery-container {
    height: 60vh;
    min-height: 400px;
  }

  .gallery-content {
    padding: 30px 20px;
  }

  .gallery-title {
    margin-bottom: 20px;
  }

  .gallery-text {
    margin-bottom: 30px;
    font-size: 1.1rem;
  }

  .gallery-arrow {
    width: auto;
    height: auto;
    font-size: 5rem; /* 2x bigger for mobile (was 2.5rem) */
  }

  .gallery-arrow-prev {
    left: 15px;
  }

  .gallery-arrow-next {
    right: 15px;
  }

  header nav {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 3px;
    flex-wrap: wrap;
  }
  
  header nav a {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  
  main {
    padding-top: 24px;
    padding-bottom: 48px;
  }
  
  main > section {
    margin-top: 18px;
    padding: clamp(20px, 4vw, 28px);
  }
  
  :root {
    --pad-block: clamp(20px, 4vw, 28px);
  }
}