/* =============================================
   GYDA — Premium Apple-Style Design
   White + Red Accents · No Blue · Subtle Motion
   ============================================= */

/* --- Design Tokens --- */
:root {
  --gp-red: #CC2936;
  --gp-red-hover: #A8222D;
  --gp-red-light: rgba(204, 41, 54, 0.08);
  --gp-red-border: rgba(204, 41, 54, 0.18);
  --gp-dark: #1d1d1f;
  --gp-secondary: #6e6e73;
  --gp-tertiary: #86868b;
  --gp-bg-white: #ffffff;
  --gp-bg-gray: #f5f5f7;
  --gp-border: rgba(0, 0, 0, 0.06);
  --gp-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --gp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --gp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --gp-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
  --gp-radius: 12px;
  --gp-radius-lg: 18px;
  --gp-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --gp-duration: 0.3s;
  --gp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, "Open Sans", sans-serif;
}

/* --- Smooth Scroll & Base --- */
html { scroll-behavior: smooth; }

.u-body {
  font-family: var(--gp-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--gp-dark) !important;
  background-color: var(--gp-bg-white) !important;
}

.u-body h1, .u-body h2, .u-body h3,
.u-body h4, .u-body h5, .u-body h6 {
  font-family: var(--gp-font) !important;
  color: var(--gp-dark);
  letter-spacing: -0.01em;
}

/* ===================== *
 *  COLOR OVERRIDES      *
 *  Blue → Red globally  *
 * ===================== */

/* --- Custom Color 1 (was blue #478ac9) → Red --- */
.u-text-custom-color-1 {
  color: var(--gp-red) !important;
}
.u-custom-color-1,
.u-btn.u-custom-color-1,
.u-button-style.u-custom-color-1 {
  background-color: var(--gp-red) !important;
  color: #fff !important;
}

/* --- Palette 1 (was blue #478ac9) → Red --- */
.u-palette-1-base,
.u-button-style.u-palette-1-base {
  background-color: var(--gp-red) !important;
  color: #fff !important;
}
.u-text-palette-1-base {
  color: var(--gp-red) !important;
}
.u-border-palette-1-base {
  border-color: var(--gp-red) !important;
}
.u-palette-1,
.u-button-style.u-palette-1,
.u-palette-1-light-1,
.u-palette-1-light-2 {
  background-color: var(--gp-red-light) !important;
  color: var(--gp-dark) !important;
}
.u-palette-1-dark-1,
.u-palette-1-dark-2,
.u-palette-1-dark-3 {
  background-color: var(--gp-red-hover) !important;
  color: #fff !important;
}
a.u-text-custom-color-1,
a.u-text-palette-1-base {
  color: var(--gp-red) !important;
}
a.u-text-custom-color-1:hover,
a.u-text-palette-1-base:hover {
  color: var(--gp-red-hover) !important;
}

/* Hover states for nav links with custom color hover class */
.u-text-hover-custom-color-1:hover {
  color: var(--gp-red) !important;
}
.u-text-active-palette-1-base.active,
li.active > .u-text-active-palette-1-base {
  color: var(--gp-red) !important;
}
.u-hover-palette-2-base:hover {
  color: var(--gp-red) !important;
}
.u-text-hover-palette-2-base:hover {
  color: var(--gp-red) !important;
}

/* --- Palette 2 icon colors → Red --- */
.u-text-palette-2-base {
  color: var(--gp-red) !important;
}

/* --- Palette 5 light 3 (used on footer & sections) → Clean white/gray --- */
.u-palette-5-light-3,
section.u-palette-5-light-3:before,
.u-palette-5-light-3 > .u-container-layout:before,
.u-palette-5-light-3 > .u-inner-container-layout:before {
  background-color: var(--gp-bg-gray) !important;
  color: var(--gp-dark) !important;
}

/* Theme color override */
.u-body[class*="u-color-1"],
.u-body[class*="u-palette-1"] {
  background-color: var(--gp-red) !important;
}

/* Active pagination/num color */
.u-body {
  --num-active-color: var(--gp-red) !important;
}

/* ======================== *
 *  HEADER — With Banner    *
 * ======================== */
.u-header {
  position: relative;
  transition: box-shadow var(--gp-duration) var(--gp-ease);
}
.u-header.gyda-scrolled {
  box-shadow: var(--gp-shadow-xs);
}

/* Nav links — white on banner, readable */
.u-header .u-nav-link {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: color var(--gp-duration) var(--gp-ease),
              opacity var(--gp-duration) var(--gp-ease);
}
.u-header .u-nav-link:hover {
  color: #fff !important;
  opacity: 0.75;
}

/* Hamburger icon — white on banner */
.u-header .u-hamburger-link {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ======================== *
 *  SECTIONS — Clean White  *
 * ======================== */

/* Section defaults — don't remove background-image, just tidy up base color */
section.u-white {
  background-color: var(--gp-bg-white) !important;
}
section.u-palette-5-light-3 {
  background-color: var(--gp-bg-gray) !important;
}

/* Section 1 "ვინ ვართ ჩვენ" on index */
.u-section-1.u-palette-5-light-3 {
  background-color: var(--gp-bg-gray) !important;
}

/* Section headings */
section h1,
section h2,
section h3,
section h4 {
  color: var(--gp-dark);
}
section p {
  color: var(--gp-secondary);
  line-height: 1.6;
}

/* ======================== *
 *  CARDS & LIST ITEMS      *
 * ======================== */
.u-list-item,
.u-repeater-item {
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

/* Member cards (grey-10 background) */
.u-grey-10 {
  background-color: var(--gp-bg-white) !important;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}
.u-grey-10:hover {
  transform: translateY(-4px);
  box-shadow: var(--gp-shadow-md);
}

/* Grey-5 backgrounds (forms etc.) */
.u-grey-5 {
  background-color: var(--gp-bg-gray) !important;
}

/* White cards */
.u-white {
  background-color: var(--gp-bg-white) !important;
}

/* Circle shapes (stats section) */
.u-shape-circle.u-grey-10 {
  background-color: var(--gp-red-light) !important;
  border: none;
}

/* ======================== *
 *  IMAGES                  *
 * ======================== */
.u-image-circle {
  border-radius: 50%;
  transition: transform var(--gp-duration) var(--gp-ease);
}
.u-list-item:hover .u-image-circle {
  transform: scale(1.03);
}
.u-image-contain {
  transition: opacity var(--gp-duration) var(--gp-ease);
}

/* ======================== *
 *  BUTTONS                 *
 * ======================== */
.u-btn,
.u-button-style.u-btn {
  font-family: var(--gp-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background-color var(--gp-duration) var(--gp-ease),
              color var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}
.u-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--gp-shadow-sm);
}

/* Primary CTA button (Join form etc.) */
.u-btn.u-grey-25,
.u-btn.u-hover-grey-15 {
  background-color: var(--gp-red) !important;
  color: #fff !important;
  border: none;
  border-radius: 50px;
}
.u-btn.u-grey-25:hover,
.u-btn.u-hover-grey-15:hover {
  background-color: var(--gp-red-hover) !important;
  color: #fff !important;
}

/* Contact form submit button */
.u-btn-submit.u-custom-color-1 {
  background-color: var(--gp-red) !important;
  color: #fff !important;
}
.u-btn-submit.u-custom-color-1:hover,
.u-btn-submit.u-hover-black:hover {
  background-color: var(--gp-red-hover) !important;
  color: #fff !important;
}

/* Blog "Read More" links */
.u-blog-control.u-btn {
  color: var(--gp-red) !important;
  border-color: var(--gp-red) !important;
}
.u-blog-control.u-btn:hover {
  background-color: var(--gp-red) !important;
  color: #fff !important;
}

/* Blog post header links */
.u-post-header-link {
  color: var(--gp-dark) !important;
  transition: color var(--gp-duration) var(--gp-ease);
}
.u-post-header-link:hover {
  color: var(--gp-red) !important;
}

/* ======================== *
 *  FORMS                   *
 * ======================== */
.u-input,
.u-field-input {
  font-family: var(--gp-font) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  background-color: var(--gp-bg-white) !important;
  transition: border-color var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}
.u-input:focus,
.u-field-input:focus {
  border-color: var(--gp-red) !important;
  box-shadow: 0 0 0 3px var(--gp-red-light) !important;
  outline: none;
}

/* ======================== *
 *  MEMBER PROFILE PAGES    *
 * ======================== */

/* Course number badges (u-custom-color-1 circles) */
.u-group.u-custom-color-1 {
  background-color: var(--gp-red) !important;
}

/* Layout cells — keep them clean */
.u-layout-cell {
  border-radius: var(--gp-radius);
}
.u-layout-cell.u-white {
  background-color: var(--gp-bg-white) !important;
}

/* Section images on profile pages */
.u-image-round {
  border-radius: var(--gp-radius) !important;
}

/* ======================== *
 *  FOOTER — Clean          *
 * ======================== */
.u-footer {
  background-color: var(--gp-bg-gray) !important;
  border-top: 1px solid var(--gp-border);
}
.u-footer .u-text-1 {
  color: var(--gp-dark) !important;
  font-weight: 600;
}
.u-footer p {
  color: var(--gp-secondary);
}
.u-footer .u-social-icon {
  color: var(--gp-dark) !important;
  transition: color var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease);
}
.u-footer .u-social-icon:hover {
  color: var(--gp-red) !important;
  transform: scale(1.08);
}
.u-footer .u-text-9 {
  color: var(--gp-tertiary) !important;
  font-size: 0.8rem;
}

/* ======================== *
 *  LINKS (Global)          *
 * ======================== */
a {
  color: var(--gp-red);
  transition: color var(--gp-duration) var(--gp-ease);
}
a:hover {
  color: var(--gp-red-hover);
}

/* ============================= *
 *  SCROLL REVEAL ANIMATIONS     *
 *  (Subtle — Apple style)       *
 * ============================= */

/* Initial hidden state */
.gyda-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--gp-ease), transform 0.6s var(--gp-ease);
}
.gyda-reveal.gyda-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.gyda-reveal-children > .u-repeater > .u-repeater-item,
.gyda-reveal-children > .u-repeater > .u-blog-post {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--gp-ease), transform 0.5s var(--gp-ease);
}
.gyda-reveal-children.gyda-visible > .u-repeater > .u-repeater-item,
.gyda-reveal-children.gyda-visible > .u-repeater > .u-blog-post {
  opacity: 1;
  transform: translateY(0);
}
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(1) { transition-delay: 0.05s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(2) { transition-delay: 0.10s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(3) { transition-delay: 0.15s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(4) { transition-delay: 0.20s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(5) { transition-delay: 0.25s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(6) { transition-delay: 0.30s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(7) { transition-delay: 0.35s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(8) { transition-delay: 0.40s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(9) { transition-delay: 0.45s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(10) { transition-delay: 0.50s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(11) { transition-delay: 0.55s; }
.gyda-reveal-children.gyda-visible > .u-repeater > :nth-child(12) { transition-delay: 0.60s; }

/* ======================== *
 *  SHADING OVERRIDE        *
 *  (Banner sections)       *
 * ======================== */
.u-shading::before,
section.u-shading::before {
  background: linear-gradient(180deg, rgba(29, 29, 31, 0.60), rgba(29, 29, 31, 0.40)) !important;
}
section.u-image:not(.u-shading) {
  /* Keep section background images visible */
}

/* ======================== *
 *  GALLERY NAV ARROWS      *
 * ======================== */
.u-gallery-nav {
  background-color: var(--gp-dark) !important;
  opacity: 0.5;
  transition: opacity var(--gp-duration) var(--gp-ease);
}
.u-gallery-nav:hover {
  opacity: 0.85;
}

/* ======================== *
 *  MISC OVERRIDES          *
 * ======================== */

/* Clean up section borders */
section + section {
  border-top: 1px solid var(--gp-border);
}

/* Icon colors in stats section */
.u-icon.u-text-custom-color-1 img {
  filter: none;
}

/* Nicepage selection color */
::selection {
  background-color: var(--gp-red-light);
  color: var(--gp-dark);
}

/* ======================== *
 *  REDUCED MOTION          *
 * ======================== */
@media (prefers-reduced-motion: reduce) {
  .gyda-reveal,
  .gyda-reveal-children > .u-repeater > .u-repeater-item,
  .gyda-reveal-children > .u-repeater > .u-blog-post {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}