/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Byte Theme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values.
 */

:root {
--background: #001233 !important;
  --foreground: #ffffff !important;
  --card: #001845 !important;
  --card-foreground: #ffffff !important;
  --primary: #0466c8 !important;
  --primary-foreground: #ffffff !important;
  --secondary: #002855 !important;
  --secondary-foreground: #ffffff !important;
  --muted: #001845 !important;
  --muted-foreground: #979dac !important;
  --accent: #0466c8 !important;
  --accent-foreground: #ffffff !important;
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: #002855 !important;
  --input: #002855 !important;
  --font-sans: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* ==========================================================================
   Language switcher (flag icons)  replaces the former "Sign up" button
   ========================================================================== */
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 {
  display: flex;
  align-items: center;
}

.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 ul.links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 ul.links li {
  display: flex;
}

.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  line-height: 1;
  text-decoration: none;
  opacity: 0.7;
  font-size: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link::before {
  content: "";
  display: block;
  width: 1.35rem;
  height: 0.9rem;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
}

.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link:hover,
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link:focus-visible,
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link.is-active {
  opacity: 1;
  background-color: rgb(255 255 255 / 0.12);
  transform: scale(1.08);
}

.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a[hreflang="en"]::before { background-image: url("../icons/flags/gb.svg"); }
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a[hreflang="id"]::before { background-image: url("../icons/flags/id.svg"); }
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a[hreflang="zh-hans"]::before { background-image: url("../icons/flags/cn.svg"); }
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a[hreflang="de"]::before { background-image: url("../icons/flags/de.svg"); }
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a[hreflang="ja"]::before { background-image: url("../icons/flags/jp.svg"); }

@media (max-width: 767px) {
  .navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 ul.links {
    gap: 0.25rem;
  }
  .navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link {
    width: 1.75rem;
    height: 1.75rem;
  }
  .navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link::before {
    width: 1.15rem;
    height: 0.77rem;
  }
}

/* ==========================================================================
   Footer links: remove underline (Visigraphic footer columns + legal links)
   ========================================================================== */
.region-footer a {
  text-decoration: none;
}

/* ==========================================================================
   Mobile fixes: footer column stacking + nav menu language-switcher spacing
   ========================================================================== */
@media (max-width: 767px) {
  .region-footer > div.flex-row {
    flex-direction: column;
    align-items: stretch;
  }

  .navbar--menu {
    grid-template-rows: auto auto auto;
  }
}

@media (max-width: 767px) {
  .region-footer > div.flex-row > div {
    width: 100%;
  }
}

/* ==========================================================================
   Language switcher flag button: circular badge
   ========================================================================== */
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link {
  width: 1.35rem;
  height: 1.35rem;
}
.navbar--links #block-6701f750-449b-41df-90fc-93805a2ecce1 a.language-link::before {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
}

/* ==========================================================================
   Footer: more top padding above the column content
   ========================================================================== */
.region-footer > div.flex-row {
  padding-top: 3rem;
}

/* ==========================================================================
   Footer bottom bar: align legal links and copyright, match font size
   ========================================================================== */
.site-footer--bottom-col {
  align-self: center;
}
.site-footer--bottom-col p {
  font-size: 1rem;
  margin: 0;
}

/* ==========================================================================
   Footer bottom bar: force single-row layout (Tailwind md:grid was losing
   to the base .flex utility due to source-order specificity conflict)
   ========================================================================== */
.site-footer div:has(> .site-footer--bottom-col) {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .site-footer div:has(> .site-footer--bottom-col) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   Mobile nav menu: force grid rows to hug content (same Tailwind source-
   order conflict as footer bottom bar) so the language-switcher row is not
   pushed off-screen below the viewport
   ========================================================================== */
@media (max-width: 767px) {
  .navbar--menu {
    grid-template-rows: auto auto auto !important;
  }
}

/* Mobile nav menu: allow the menu to scroll if content (logo/close + links
   + language switcher) is taller than the viewport, so the flag row is
   always reachable instead of being clipped off-screen on shorter phones */
@media (max-width: 767px) {
  .navbar--menu {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile nav menu: let the middle (nav-links) row flex to fill remaining
   space and scroll internally if too tall, while the logo row and the
   language-switcher row always keep their natural size so the flags are
   never pushed off the bottom of the screen */
@media (max-width: 767px) {
  .navbar--menu {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  .navbar--dropdown-menu-wrapper {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto;
  }
}

/* Mobile nav menu, corrected: links row must hug its own content (auto),
   not stretch with 1fr, so the flag row sits right below the last link
   instead of being pushed to the very bottom edge with a big empty gap */
@media (max-width: 767px) {
  .navbar--menu {
    grid-template-rows: auto auto auto !important;
  }
  .navbar--dropdown-menu-wrapper {
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }
  .navbar--dropdown-menu-wrapper::after {
    content: none !important;
  }
}

/* Mobile nav menu: directly cap the links row height (something inside was
   inflating it well beyond the actual links) so the flag row is not left
   with a big empty gap above it */
@media (max-width: 767px) {
  .navbar--dropdown-menu-wrapper {
    max-height: 300px !important;
    overflow-y: auto !important;
  }
}

/* Final fix: the grid's "auto" row sizing was using the links wrapper's
   unconstrained max-content size even with max-height set on the item, so
   set the middle track to an explicit size that matches the wrapper's cap
   directly, bypassing that quirk */
@media (max-width: 767px) {
  .navbar--menu {
    grid-template-rows: auto 300px auto !important;
  }
}

/* TRUE root cause found: CSS Grid defaults to align-content:stretch, which
   was stretching every "auto" row to fill the fixed-height fullscreen menu
   container, inflating each row far beyond its real content. Fixing that
   directly lets all three rows hug their actual content. */
@media (max-width: 767px) {
  .navbar--menu {
    align-content: start !important;
    grid-template-rows: auto auto auto !important;
  }
  .navbar--dropdown-menu-wrapper {
    max-height: none !important;
  }
}

/* Remove the leftover 96px bottom padding that was reserved for the
   gradient overlay we already disabled above; this was the last source of
   dead space between the last nav link and the flag row on mobile */
@media (max-width: 767px) {
  .navbar--dropdown-menu-wrapper .navbar--dropdown-menu {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   Wider spacing + modern divider between main content sections
   (Why Choose Us, Our Process, FAQ, What Clients Say, and the Our Services
   section that precedes them for visual consistency)
   ========================================================================== */
.region-content > section[class*="mt-8"][class*="cq-full"] + section[class*="mt-8"][class*="cq-full"],
.region-content > section[class*="mt-8"][class*="cq-full"] + div[class*="rounded-sm"],
.region-content > div.accordion-container + section[class*="mt-8"][class*="cq-full"] {
  position: relative;
  margin-top: 6rem !important;
}
.region-content > section[class*="mt-8"][class*="cq-full"] + section[class*="mt-8"][class*="cq-full"]::before,
.region-content > section[class*="mt-8"][class*="cq-full"] + div[class*="rounded-sm"]::before,
.region-content > div.accordion-container + section[class*="mt-8"][class*="cq-full"]::before {
  content: '';
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(4,102,200,0.7), transparent);
}
@media (max-width: 767px) {
  .region-content > section[class*="mt-8"][class*="cq-full"] + section[class*="mt-8"][class*="cq-full"],
  .region-content > section[class*="mt-8"][class*="cq-full"] + div[class*="rounded-sm"],
  .region-content > div.accordion-container + section[class*="mt-8"][class*="cq-full"] {
    margin-top: 4rem !important;
  }
  .region-content > section[class*="mt-8"][class*="cq-full"] + section[class*="mt-8"][class*="cq-full"]::before,
  .region-content > section[class*="mt-8"][class*="cq-full"] + div[class*="rounded-sm"]::before,
  .region-content > div.accordion-container + section[class*="mt-8"][class*="cq-full"]::before {
    top: -2rem;
    width: 100px;
  }
}

/* ==========================================================================
   Footer: wave-shaped top divider
   ========================================================================== */
.region-footer {
  position: relative;
  z-index: 2;
}
.region-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  transform: translateY(-99%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 Q360,0 720,60 T1440,60 L1440,120 L0,120 Z' fill='%23001845'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 767px) {
  .region-footer::before {
    height: 36px;
  }
}

/* ==========================================================================
   Footer wave divider v2: more pronounced, multi-crest wave (overrides the
   single gentle curve above with a bigger amplitude, more visible wave)
   ========================================================================== */
.region-footer::before {
  height: 120px;
  transform: translateY(-98%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath d='M0,90 C120,150 240,30 360,90 C480,150 600,30 720,90 C840,150 960,30 1080,90 C1200,150 1320,30 1440,90 L1440,180 L0,180 Z' fill='%23001845'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .region-footer::before {
    height: 70px;
  }
}

/* Our Process section: reduce card title font-size so long titles fit on one line */
.region-content > section:nth-of-type(4) h3 {
  font-size: 22px;
}

/* ==========================================================================
   Hero section: subtle hi-tech background (circuit grid + glow) behind the
   title, kept low-opacity/transparent so text stays fully readable and it
   fades out toward the bottom of the section
   ========================================================================== */
.region-content > section:nth-of-type(1) {
  overflow: hidden;
}
.region-content > section:nth-of-type(1)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 32%, rgba(70,150,235,0.28), rgba(4,102,200,0.14) 42%, transparent 72%),
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(3,83,164,0.10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 90% 15%, rgba(2,62,125,0.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 0H48M0 0V48' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='rgba(4,102,200,0.18)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}
.region-content > section:nth-of-type(1) > div {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .region-content > section:nth-of-type(1)::before {
    background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px;
  }
}

/* ==========================================================================
   Our Services cards: hi-tech corner accent (top-left glow fading to
   transparent + diagonal hatch pattern) - deliberately different pattern
   from the hero section's grid/dot background
   ========================================================================== */
.region-content > section:nth-of-type(2) article {
  position: relative;
  overflow: hidden;
}
.region-content > section:nth-of-type(2) article::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(4,102,200,0.20) 0%, rgba(4,102,200,0.09) 22%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 9px);
  -webkit-mask-image: linear-gradient(135deg, black 0%, black 28%, transparent 62%);
  mask-image: linear-gradient(135deg, black 0%, black 28%, transparent 62%);
  transition: opacity 0.3s ease;
}
.region-content > section:nth-of-type(2) article > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Our Services cards: make the whole card clickable (not just the button)
   by stretching the card's link over the full article via a transparent
   overlay pseudo-element, while the button itself stays visually normal
   ========================================================================== */
.region-content > section:nth-of-type(2) article {
  cursor: pointer;
}
.region-content > section:nth-of-type(2) article footer a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}

/* ==========================================================================
   Fix: the earlier corner-glow z-index rule made footer position:relative,
   which trapped the stretched-link overlay to the button's own tiny box
   instead of the whole card. Switch the glow to isolation + negative
   z-index (no positioning needed on children) so footer can stay
   unpositioned and the click overlay correctly sizes against the article.
   ========================================================================== */
.region-content > section:nth-of-type(2) article {
  isolation: isolate;
}
.region-content > section:nth-of-type(2) article::before {
  z-index: -1;
}
.region-content > section:nth-of-type(2) article > * {
  position: static;
  z-index: auto;
}
.region-content > section:nth-of-type(2) article footer {
  position: static;
}


/* Section subtitles: narrow the intro paragraph under a section heading (Our Services, Why Choose Us, Our Process, What Clients Say) to a centered column instead of full width. Scoped to header.mb-6 (Canvas "Section > Header" component wrapper) so it never touches the site navbar header or other rich text. */
header.mb-6 > div {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
@media (min-width: 768px) {
    header.mb-6 > div {
        max-width: 65%;
    }
}
@media (min-width: 1024px) {
    header.mb-6 > div {
        max-width: 50%;
  
    }
}