/*
Theme Name: gurdal-theme
Theme URI: http://gurdal.com
Author: Process & Systems | Gurdal Team
Author URI: http://gurdal.com
Description: GGM Website Theme
Version: 1.0
*/

/* ==================================================
   DESIGN TOKENS (VARIABLES)
================================================== */

:root {
  /* === BRAND === */
  --color-primary: #214386;
  --color-primary-hover: #1a356b;
  --color-primary-light: #3f63b8;

  /* === ACCENT === */
  --color-accent: #c7a24a;
  --color-accent-hover: #a8842e;

  /* === BACKGROUNDS === */
  --color-bg: #f4f5f7; /* Warm soft gray */
  --color-bg-alt: #f8f9fb; /* Very soft surface */
  --color-bg-dark: #1e2a3a; /* Calm deep navy */
  --transparent: rgba(255, 255, 255, 0.12);
  --layer-dark: rgba(0, 0, 0, 0.38);

  /* === TEXT === */
  --text-primary: #2c3138; /* Soft charcoal */
  --text-secondary: #6b7280; /* Calm gray */
  --text-muted: #9aa3af; /* Light muted */
  --text-on-dark: #eef2f7; /* Soft white */

  /* === BORDERS === */
  --color-border: #e3e7ef;

  /* === EFFECTS === */
  --blur: blur(3px);

  /* === CONTAINER SYSTEM === */
  --gutter: clamp(1rem, 3.5vw, 3rem);
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1200px;
  --container-xl: 1400px;
  --container-2xl: 1600px;
  --container-wide: 1700px;

  --container: var(--container-2xl);

  /* === SPACE SYSTEM === */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-1: clamp(0.6rem, 1.2vw, 0.9rem);
  --space-2: clamp(0.9rem, 1.8vw, 1.3rem);
  --space-3: clamp(1.2rem, 2.6vw, 1.9rem);
  --space-4: clamp(1.8rem, 4vw, 3rem);
  --space-5: clamp(2.6rem, 6vw, 4.5rem);
  --space-6: clamp(3.4rem, 8vw, 6rem);

  /* === RADIUS SYSTEM === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-round: 999px;

  /* === MEASURE SYSTEM === */
  --measure-narrow: 820px;
  --measure-default: 1100px;
  --measure-wide: 1280px;

  /* === LAYOUT === */
  --header-height: 90px;

  /* --- Fluid type scale --- */
  --fs-1: clamp(0.95rem, 0.35vw + 0.9rem, 1.05rem);
  --fs-2: clamp(1.1rem, 0.6vw + 1rem, 1.25rem);
  --fs-3: clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  --fs-4: clamp(1.7rem, 1.6vw + 1.2rem, 2.4rem);
  --fs-5: clamp(2.1rem, 2.4vw + 1.3rem, 3.2rem);

  /* --- Motion tokens (optional, matches your reveal vibe) --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 260ms;
  --dur-3: 420ms;

  /* Marquee component spacing */
  --marquee-pad-block: var(--space-4);

  /* Reveal/Stagger tuning */
  --reveal-distance: 28px;
  --reveal-scale: 0.985;

  --stagger-distance: 16px;
  --stagger-blur: 4px;

  --reveal-dur: 900ms;
  --stagger-dur: 900ms;

  --stagger-step: 120ms; /* was ~60ms, this is the main "slower & nicer" change */
  --stagger-max: 840ms; /* cap for long grids */
}

/* ==================================================
   RESET & BASE
================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* margin: 0;
  padding: 0; */
  /* max-width: 100%; */
  /* height: auto; */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-1);
  /* line-height: 1.6; */
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--color-bg-alt);
}

/* html,
body { */
/* height: 100%; */
/* overscroll-behavior: none; */
/* } */

body.menu-open {
  overflow: hidden;
}

/* Scroll anchor offset */
section[id] {
  scroll-margin-top: var(--header-height);
}

/* ==================================================
   LAYOUT STRUCTURE
================================================== */

#site-wrapper {
  /* min-height: 100%; */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#site-content {
  flex: 1;
}

/* ==================================================
   CONTAINER SYSTEM
   ================================================== */

.container,
.container-narrow,
.container-wide,
.container-page {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-width: var(--container);
}

/* Narrow for text-heavy sections */
.container-narrow {
  max-width: var(--measure-narrow);
}

.container-wide {
  max-width: var(--container-wide);
}

.container-page {
  max-width: var(--container-xl);
}
/* ==================================================
   SECTION SYSTEM
================================================== */

.section {
  padding-block: 4rem;
}

.section-sm {
  padding-block: 2.5rem;
}

.section-lg {
  padding-block: 6rem;
}

/* ==================================================
   TYPOGRAPHY SYSTEM
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 {
  font-size: var(--fs-5);
}
h2 {
  font-size: var(--fs-4);
}
h3 {
  font-size: var(--fs-3);
}

p {
  margin: 0 0 1rem;
  color: var(--text-primary);
  line-height: 1.75;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* a:hover {
  color: var(--color-primary-hover);
} */

/* ==================================================
   GLOBAL INTERACTION RULES
================================================== */

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  touch-action: manipulation;
}

a,
button,
input,
textarea,
select {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  /* transform 0.2s ease,
    opacity 0.2s ease; */
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

/* =========================
   GLOBAL BADGE SYSTEM
========================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.04em;
  /* padding: 6px 12px; */
  /* letter-spacing: 0.02em; */
  /* text-transform: uppercase; */
}

.badge--sm {
  font-size: 0.65rem;
  padding: 3px 8px;
}

.badge--lg {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* Variants */
.badge--primary {
  background: rgba(33, 67, 134, 0.1);
  color: var(--color-primary);
}

.badge--primary-solid {
  background: var(--color-primary);
  color: #fff;
}

.badge--blog {
  background: rgba(33, 67, 134, 0.08);
  color: var(--color-primary);
}

.badge--news {
  background: rgba(200, 30, 30, 0.08);
  color: #c81e1e;
}

.badge--document {
  background: rgba(60, 90, 150, 0.08);
  color: #3c5a96;
}

.badge--presentation {
  background: rgba(0, 150, 136, 0.1);
  color: #009688;
}

.badge--success {
  background: #e6f4ea;
  color: #137333;
}

.badge--warning {
  background: #fff4e5;
  color: #b26a00;
}

.badge--error {
  background: #fdecea;
  color: #c62828;
}

.badge--info {
  background: #e8f0fe;
  color: #1a73e8;
}

.badge--neutral {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
}

.badge--soft {
  background: rgba(33, 67, 134, 0.08);
  color: var(--color-primary);
}

/* =========================
   GLOBAL REVEAL ANIMATIONS
========================= */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(var(--reveal-scale));
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Slight variations */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   STAGGER SYSTEM
========================= */

.reveal-stagger > * {
  opacity: 0;
  filter: blur(var(--stagger-blur));
  transform: translateY(var(--stagger-distance));
  transition-property: opacity, filter, transform;
  transition-duration: var(--stagger-dur);
  transition-timing-function: var(--ease-out);
  transition-delay: 0ms;
  will-change: opacity, filter, transform;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger delays (slower, smoother). Capped for long lists. */
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(1) {
  transition-delay: calc(var(--stagger-step) * 0);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(2) {
  transition-delay: calc(var(--stagger-step) * 1);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(3) {
  transition-delay: calc(var(--stagger-step) * 2);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(4) {
  transition-delay: calc(var(--stagger-step) * 3);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(5) {
  transition-delay: calc(var(--stagger-step) * 4);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(6) {
  transition-delay: calc(var(--stagger-step) * 5);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(7) {
  transition-delay: calc(var(--stagger-step) * 6);
}
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(8) {
  transition-delay: calc(var(--stagger-step) * 7);
}

/* If there are more than 8 children, don't let delay grow forever */
.reveal-stagger.is-visible:not(.reveal-done) > *:nth-child(n + 9) {
  transition-delay: var(--stagger-max);
}

.reveal-stagger.reveal-done > * {
  transition-delay: 0s !important;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 5rem;
  }

  .section-lg {
    padding-block: 7rem;
  }
}

/* =====================================
   MID DESKTOP CONTAINER OPTIMIZATION
===================================== */

@media (min-width: 1024px) and (max-width: 1400px) {
  :root {
    --gutter: clamp(1rem, 2vw, 1.8rem);
  }
  /* .container {
    width: min(100% - (var(--gutter) * 2), 95%);
  } */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Optional: disable heavy motion components */
  .hero-slide,
  .float-img {
    transition: none !important;
    animation: none !important;
  }
  /* * {
    transition: none !important;
    animation: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  } */
}

/* ==================================================
   ACCESSIBILITY
================================================== */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
  z-index: 9999;
}
.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 162, 74, 0.5);
  border-radius: 6px;
  /* outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px; */
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}