/**
 * Diana Oberoi — Design System (Phase 2)
 * Enhances existing Foundation markup without changing structure or branding.
 */

/* ─── Base & rhythm ─── */
html {
  scroll-behavior: smooth;
}

body.site-body {
  background-color: var(--color-bg-dark);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  line-height: var(--line-height-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.site-body--alt {
  background-color: var(--color-bg-dark-alt);
}

main {
  padding-bottom: var(--space-section);
}

.main-feed,
.main-sidebar {
  margin-bottom: var(--space-6);
}

.main-feed > h1,
.main-feed > h2,
.girl-view-panel h2,
.girl-view-panel h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

.main-feed p,
.girl-view-panel p,
.location-copy {
  font-size: var(--font-size-md);
  text-align: justify;
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

@media (max-width: 768px) {
  .main-feed p,
  .girl-view-panel p,
  .location-copy {
    font-size: var(--font-size-sm);
  }

  h2 {
    font-size: var(--font-size-lg);
    text-align: justify;
  }
}

/* ─── Skip link (accessibility) — off-screen until focused ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand-gold);
  color: var(--color-text-dark);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  left: 1rem !important;
  top: 1rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ─── Focus visibility ─── */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.btn-red:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Buttons ─── */
.btn-red {
  background-color: var(--color-brand-red);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  color: var(--color-text-dark);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  width: 100%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
    transform var(--transition-fast), box-shadow var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.btn-red:hover {
  background-color: var(--color-brand-gold);
  border-color: var(--color-brand-red);
  box-shadow: var(--shadow-md);
}

.btn-red:active {
  transform: translateY(1px);
  background-color: var(--color-brand-gold);
  border-color: var(--color-brand-red);
}

.btn-red:focus-visible {
  background-color: var(--color-brand-gold);
  border-color: var(--color-brand-red);
}

.btn-red:disabled,
.btn-red[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.button {
  min-height: var(--touch-target-min);
  transition: background-color var(--transition-base), opacity var(--transition-base);
  cursor: pointer;
}

.button:hover {
  opacity: 0.92;
}

.viewprofile,
.vidbutton {
  background: var(--color-accent-pink);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.viewprofile:hover,
.vidbutton:hover {
  filter: brightness(1.08);
}

#mobile-buttons a.button {
  font-size: var(--font-size-xs);
  min-height: var(--touch-target-min);
}

/* ─── Cards / panels ─── */
.panel {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.panel.snap {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.panel.snap:hover {
  box-shadow: var(--shadow-md);
}

.escort-profile-grid-view figure {
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.escort-profile-grid-view figure img {
  width: 100%;
  height: auto;
  display: block;
}

.escort-profile-grid-view:hover figure {
  box-shadow: var(--shadow-md);
}

.girl-view-panel {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
}

/* ─── Keyword pills ─── */
.keyword-menu ul li,
.keyword ul li {
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

.keyword-menu ul li:hover,
.keyword ul li:hover {
  transform: translateY(-1px);
}

.keyword-menu ul li a,
.keyword ul li a {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Navigation ─── */
nav.main-nav a,
nav.mobile-nav a,
nav.footer-nav a {
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

#scrolltop {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

#scrolltop:hover {
  transform: translateY(-2px);
}

#scrolltop:focus-visible {
  background-color: #e74c3c;
}

/* ─── Images & CLS ─── */
img {
  max-width: 100%;
  height: auto;
}

img[width][height] {
  height: auto;
}

/* Font loading — swap prevents invisible text during load */
@supports (font-display: swap) {
  body.site-body {
    font-display: swap;
  }
}

.blur-up {
  background-color: rgba(0, 0, 0, 0.08);
}

/* ─── Footer ─── */
.footer {
  box-shadow: var(--shadow-footer);
  margin-top: var(--space-section);
}

/* ─── Social / icon links ─── */
.panel.social-links a {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Profile page fixes ─── */
.profile-heading {
  color: var(--color-bg-dark-alt);
}

.profile-heading--accent {
  color: var(--color-brand-gold);
}

/* ─── Responsive overflow ─── */
.row {
  max-width: 100%;
}

#main-feed-wrap {
  overflow-x: hidden;
}

@media (max-width: 1024px) {
  .main-sidebar,
  .main-feed {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #mobile-buttons ul li {
    width: 32%;
  }

  .keyword-menu ul li {
    width: 48%;
  }

  .desktop-wrapper video {
    height: auto;
    border-width: 10px;
  }
}

@media (max-width: 375px) {
  .btn-red {
    font-size: var(--font-size-xs);
    padding: var(--space-2);
  }

  #mobile-buttons a.button {
    font-size: 0.6875rem;
  }
}

@media (min-width: 1440px) {
  #main-feed-wrap {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── High contrast ─── */
@media (prefers-contrast: more) {
  .btn-red {
    border: 2px solid var(--color-text-dark);
  }

  a:focus-visible,
  .button:focus-visible {
    outline-width: 3px;
  }
}