/* =========================================================================
   YukKuliah — Custom styles layered on top of Tailwind CDN
   ========================================================================= */

:root {
  --brand: #2563eb;
  --accent: #f59e0b;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* Offset smooth-scroll anchors below the sticky 64px navbar */
  scroll-padding-top: 5rem;
  /* Prevent iOS rotating text resize */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Guard against any accidental horizontal scroll on small screens */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Softer, on-brand tap highlight instead of the default grey box */
* {
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12);
}

/* Momentum scrolling for horizontal filter chips / tab bars on touch */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* Subtle entrance animation utility */
@keyframes yk-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.yk-fade-up {
  animation: yk-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.yk-delay-1 { animation-delay: 0.08s; }
.yk-delay-2 { animation-delay: 0.16s; }
.yk-delay-3 { animation-delay: 0.24s; }
.yk-delay-4 { animation-delay: 0.32s; }

/* Card lift on hover */
.yk-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease, border-color 0.25s ease;
}
.yk-card:hover {
  transform: translateY(-4px);
}

/* Hero gradient mesh background */
.yk-hero-bg {
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(37, 99, 235, 0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 90% 20%, rgba(245, 158, 11, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Decorative dotted grid */
.yk-dots {
  background-image: radial-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Custom scrollbar (desktop) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}

/* Line clamp helper (fallback if plugin unavailable) */
.yk-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yk-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tab underline transition */
.yk-tab {
  position: relative;
  transition: color 0.2s ease;
}
.yk-tab[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 9999px;
  background: var(--brand);
}

/* =========================================================================
   MOBILE & TOUCH REFINEMENTS
   ========================================================================= */

/* Safe-area padding for notched phones (sticky navbar & footer) */
@supports (padding: max(0px)) {
  header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* On phones, force form controls to 16px so iOS Safari does NOT auto-zoom
   when a field gains focus. Keeps the compact look on larger screens. */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Give the hero headline a touch more breathing room on narrow screens */
  h1 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Tactile press feedback on touch devices (no hover) */
@media (hover: none) {
  a[class*="rounded"]:active,
  button:active {
    transform: scale(0.97);
  }
}

/* Comfortable minimum tap target (Apple/Google guideline ~44px) for the
   small icon-only and pagination controls. */
@media (max-width: 640px) {
  #pagination button {
    min-width: 2.75rem;
    height: 2.75rem;
  }
  .filter-chip {
    scroll-snap-align: start;
  }
}