/*
 * Site-specific overrides, loaded after the theme stylesheet (main.css).
 * Keep fixes here instead of editing the 31k-line theme file.
 */

/* ===== Fonts: self-hosted Figtree (was a render-blocking @import from Google Fonts) =====
 * SIL Open Font License 1.1. Variable font, weights 300-900. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Accessibility: visible keyboard focus (WCAG 2.4.7) =====
 * The theme removes outlines everywhere. Dark ring + yellow halo shows on light and dark backgrounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #090B0E !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #f5b819 !important;
}

/* ===== Accessibility: skip link (visible only when focused) and main landmark ===== */
.ce-skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100000;
  padding: 10px 16px;
  background: #090B0E;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
}
.ce-skip-link:focus {
  top: 16px;
}
#main-content:focus {
  outline: none; /* focused programmatically by the skip link, not by the user tabbing */
}

/* ===== Accessibility: reduced motion (WCAG 2.3.3) =====
 * Visitors who ask their OS for less motion get no entrance/loop animations.
 * (GSAP animations are sped to instant in site.js.) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Tap targets: at least 44 x 44px ===== */
.mobile-nav-icon {
  width: 44px;
  height: 44px;
}
.footer1-section-area .footer-logo-area ul li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
}
.case-inner-section-area .tabs-area ul li button {
  min-height: 44px;
}

/* ===== /projects filter pills: one swipeable row on phones instead of 4-6 wrapped rows ===== */
@media (max-width: 767px) {
  .case-inner-section-area .tabs-area .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .case-inner-section-area .tabs-area .nav .nav-item {
    flex: 0 0 auto;
  }
  .case-inner-section-area .tabs-area ul li button {
    margin-bottom: 0;
    margin-right: 10px;
    white-space: nowrap;
  }
}

/* ===== Horizontal overflow: clip instead of hidden where supported =====
 * The theme uses overflow-x: hidden on <html>, which older iOS Safari still lets you pan. */
@supports (overflow-x: clip) {
  .homepage1-body,
  html {
    overflow-x: clip !important;
  }
}

/* ===== Accessibility: text contrast on the brand yellow (WCAG 1.4.3) =====
 * White on #f5b819 was 1.8:1 and white on the orange hover was 2.7:1. Dark text is 11:1 / 7.2:1. */
.header-btn1,
.header-btn1:hover,
.header-btn1:focus,
.header-btn2,
.header-btn2:hover,
.header-btn2:focus {
  color: #090B0E !important;
}
.header-btn1 span,
.header-btn2 span,
.hero1-section-area .header-main-content .btn-area .header-btn2 span {
  color: #090B0E; /* arrows were yellow on white / white on yellow */
}

/* Project filter pills: yellow text on white was 1.6:1 */
.tabs-area .nav .nav-item .nav-link {
  color: #7a5800; /* 6.5:1 on white */
}
.tabs-area .nav .nav-item .nav-link.active,
.case-inner-section-area .tabs-area ul li button.active {
  color: #090B0E !important; /* on #ffc107 / #f5b819: 11-12:1 */
}

/* Desktop menu hover: yellow on white was 1.8:1 */
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a {
  color: #8a6400 !important; /* 5.4:1 */
}

/* ===== Preloader failsafe =====
 * main.js hides the preloader; if a script fails, never leave visitors on a spinner. */
.preloader {
  animation: ce-preloader-failsafe 0s linear 5s forwards;
}
@keyframes ce-preloader-failsafe {
  to { visibility: hidden; opacity: 0; pointer-events: none; }
}

/* ===== Contact forms ===== */
.ce-form-notice {
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0 0;
}
.ce-form-notice a {
  text-decoration: underline;
}
/* Honeypot field: hidden from people (and screen readers), still submitted by bots. */
.ce-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Mobile menu toggles are real <button>s now: drop the browser's button styling ===== */
button.mobile-nav-icon,
button.menu-close {
  background: transparent;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}
button.menu-close {
  border: 0;
}

/* ===== Project detail: gallery (matches the /projects cards) ===== */
.ce-gallery {
  padding-bottom: 20px;
}
.ce-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 30px;
  aspect-ratio: 746 / 637; /* the size the admin asks for */
}
.ce-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.4s;
}
.ce-gallery-item:hover img {
  transform: scale(1.05);
}

/* ===== Project detail: click-to-load YouTube videos ===== */
.ce-videos {
  padding-bottom: 60px;
}
.ce-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: #090B0E;
}
.ce-video--portrait {
  aspect-ratio: 9 / 16;
  max-height: 640px;
  margin-left: auto;
  margin-right: auto;
}
.ce-video iframe,
.ce-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ce-video-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #090B0E 0%, #2a2f36 100%);
  color: #fff;
  cursor: pointer;
  font-family: var(--ztc-family-font1);
}
.ce-video-play .fa-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f5b819;
  color: #090B0E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding-left: 4px;
  transition: transform 0.3s;
}
.ce-video-play:hover .fa-play,
.ce-video-play:focus-visible .fa-play {
  transform: scale(1.08);
}
.ce-video-label {
  font-size: 18px;
  font-weight: 600;
}
.ce-video-play small {
  font-size: 13px;
  color: #c9ced6; /* 11:1 on the dark background */
}

/* ===== About: team member name (was a dead link styled by the theme) ===== */
.team-inner-section-area .team-boxarea .content .ce-team-name {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s24);
  line-height: var(--ztc-font-size-font-s24);
  font-weight: var(--ztc-weight-semibold);
  color: var(--ztc-text-text-2);
  margin-bottom: 12px;
}

/* ===== Home "featured projects" accordion on tablets/phones =====
 * The theme stacked every card at min-height 400px (10 cards ≈ 4,000px of scrolling). */
@media (max-width: 991px) {
  .case1-section-area .cs_case_study_1_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .case1-section-area .cs_case_study_1_list .cs_case_study.cs_style_1 {
    min-height: 280px;
  }
  /* No hover on touch screens: show every card in its "open" state (horizontal title)
     instead of the desktop accordion's rotated vertical titles. */
  .case1-section-area .cs_case_study.cs_style_1.cs_hover_active .content-area1 {
    opacity: 0;
  }
  .case1-section-area .cs_case_study.cs_style_1.cs_hover_active .content-area {
    left: 0;
    opacity: 1;
  }
}
@media (max-width: 575px) {
  .case1-section-area .cs_case_study_1_list {
    grid-template-columns: minmax(0, 1fr);
  }
  .case1-section-area .cs_case_study_1_list .cs_case_study.cs_style_1 {
    min-height: 240px;
  }
}

/* ===== Home hero image on laptop widths =====
 * The theme shifts the 487px hero image 160px to the right, which cut it off at 1200-1299px wide
 * (59px clipped at 1200px). Smaller shift in that range; other widths unchanged. */
@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .hero1-section-area .header-images-area .main-images-area {
    left: 40px;
  }
  .hero1-section-area .header-images-area .main-images-area .img1 {
    left: 20px;
  }
}

/* ===== Error pages ===== */
.ce-error p {
  max-width: 560px;
  margin: 12px auto 28px;
}
.ce-error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.ce-error-page {
  background: #F6F8F9;
  font-family: 'Figtree', system-ui, sans-serif;
  color: #090B0E;
}
.ce-error-minimal {
  max-width: 560px;
  margin: 12vh auto;
  padding: 0 20px;
  text-align: center;
}
.ce-error-minimal h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 40px 0 12px;
}
.ce-error-minimal p {
  font-size: 18px;
  line-height: 1.6;
  color: #3D4C5E;
}
.ce-error-contact a {
  color: #090B0E;
  text-decoration: underline;
}

/* ===== Privacy policy page ===== */
.ce-legal {
  max-width: 820px;
  margin: 0 auto;
}
.ce-legal h2 {
  font-size: 28px;
  margin: 40px 0 16px;
}
.ce-legal h3 {
  font-size: 20px;
  margin: 24px 0 8px;
}
.ce-legal p,
.ce-legal li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ztc-text-text-3, #3D4C5E);
}
.ce-legal ul {
  padding-left: 22px;
  margin-bottom: 16px;
}
.ce-legal ul li {
  list-style: disc; /* the theme sets "ul li { list-style: none }" */
}
.ce-legal a {
  text-decoration: underline;
}