/* ============================================================
   Sharif Creative Center — Responsive Overrides
   Target: 320px … 430px phones, 768px tablets, up to desktop.
   Keeps desktop behaviour under the applicable breakpoints.
   ============================================================ */

/* ---------- Reset / safe defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }

/* Prevent horizontal page scroll anywhere */
body {
  max-width: 100vw;
  overflow-x: hidden;
}
img, video, canvas, iframe, svg, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Navbar — mobile hamburger
   ============================================================ */
.navbar { height: var(--nav-h); }

/* Base logout button — resets browser default, desktop-only */
.navbar__logout-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
  text-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.navbar__logout-btn:hover,
.navbar__logout-btn:focus-visible {
  color: var(--color-text);
}
.navbar__logout-icon {
  font-size: 1.1rem;
  opacity: 0.7;
  transition: opacity 150ms ease;
}
.navbar__logout-btn:hover .navbar__logout-icon,
.navbar__logout-btn:focus-visible .navbar__logout-icon {
  opacity: 1;
}

@media (max-width: 860px) {
  .navbar__inner { flex-wrap: wrap; height: auto; padding: var(--space-3) var(--space-4); }
  .navbar__brand { margin-inline-end: auto; font-size: 1.08rem; }
}

/* Hamburger trigger — visible below 860px */
.navbar__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  cursor: pointer;
  padding: 0.3rem 0.55rem;
  font-size: 1.15rem;
  line-height: 1;
}
@media (max-width: 860px) {
  .navbar__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; }
}

/* Links dropdown on mobile — hidden by default */
@media (max-width: 860px) {
  .navbar__links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    background: rgba(14, 21, 37, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) 0;
    margin-top: calc(-1 * var(--nav-h));
    position: relative;
    z-index: 10;
  }
  .navbar__links.is-open { display: flex; }
  .navbar__links li { width: 100%; }
  .navbar__links a,
  .navbar__links button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: 0;
    color: var(--color-muted);
    font-size: 1rem;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: start;
    cursor: pointer;
    font-family: var(--font-body);
    line-height: 1.5;
  }
  .navbar__links a:hover,
  .navbar__links a:focus-visible,
  .navbar__links button:hover,
  .navbar__links button:focus-visible {
    background: rgba(255,255,255,0.05);
    color: var(--color-text);
  }

  /* Section labels */
  .navbar__section-label {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-2);
    margin-top: var(--space-2);
  }
  .navbar__links li:first-child { margin-top: 0; }

  /* Divider between sections */
  .navbar__section-divider {
    display: block;
    height: 1px;
    background: var(--color-border);
    margin: var(--space-2) var(--space-4);
  }

  /* Notification bell icon in menu item */
  .navbar__bell-icon { font-size: 1rem; }
  .navbar__bell-badge {
    margin-inline-start: auto;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    min-width: 1.1rem;
    text-align: center;
  }

  /* Close button — hidden until menu opens */
  .navbar__close-wrap {
    display: none;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-1);
  }
  .navbar__links.is-open .navbar__close-wrap { display: block; }
  .navbar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    margin-inline-start: auto;
  }
  .navbar__close:hover,
  .navbar__close:focus-visible {
    background: rgba(255, 77, 106, 0.12);
    border-color: rgba(255, 77, 106, 0.4);
    color: var(--color-danger);
  }

  /* Logout button — styled as a deliberate action item */
  .navbar__logout-form {
    margin: 0;
    display: list-item;
    list-style: none;
  }
  .navbar__links .navbar__logout-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: 1rem;
    font-family: var(--font-body);
    line-height: 1.5;
    cursor: pointer;
    text-align: start;
    border-radius: 0;
    transition: background 150ms ease, color 150ms ease;
  }
  .navbar__links .navbar__logout-btn:hover,
  .navbar__links .navbar__logout-btn:focus-visible {
    background: rgba(255, 77, 106, 0.08);
    color: var(--color-danger);
  }
  .navbar__links .navbar__logout-icon {
    font-size: 1.1rem;
    transform: scaleX(-1); /* point left in RTL */
    opacity: 0.7;
  }
  .navbar__links .navbar__logout-btn:hover .navbar__logout-icon,
  .navbar__links .navbar__logout-btn:focus-visible .navbar__logout-icon {
    opacity: 1;
  }

  /* Account items — subtle right-border distinction (higher specificity than .navbar__links a) */
  .navbar__links .navbar__action-item {
    border-inline-start: 2px solid transparent;
    padding-inline-start: calc(var(--space-4) - 2px);
    transition: border-color 150ms ease, background 150ms ease;
  }
  .navbar__links .navbar__action-item:hover,
  .navbar__links .navbar__action-item:focus-visible {
    border-inline-start-color: var(--color-secondary);
    background: rgba(0, 184, 255, 0.06);
  }
}

/* Force show links on desktop */
@media (min-width: 861px) {
  .navbar__links { display: flex !important; flex-direction: row; width: auto; background: none; border: none; padding: 0; margin: 0; gap: var(--space-4); }
  .navbar__toggle { display: none !important; }
  .navbar__section-label,
  .navbar__section-divider,
  .navbar__close-wrap { display: none !important; }
}

/* Very small screens — hide bell, shrink buttons */
@media (max-width: 400px) {
  .navbar__bell-icon { display: none; }
}
@media (max-width: 480px) {
  .navbar__btn { max-width: 150px; font-size: 0.9rem; padding: 0.35rem 0.75rem; }
}
@media (max-width: 380px) {
  .navbar__btn { max-width: 130px; }
}

/* ============================================================
   Hero — mobile sizing
   ============================================================ */
.hero {
  min-height: calc(100svh - var(--nav-h));
}
@media (max-width: 768px) {
  .hero { min-height: calc(70svh - var(--nav-h)); }
  .hero__inner { padding: var(--space-5) var(--space-3); }
  h1 { font-size: clamp(1.5rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
}
@media (max-width: 480px) {
  .hero { min-height: calc(60svh - var(--nav-h)); }
  .hero__inner { padding: var(--space-4) var(--space-2); }
}

/* Phone-specific fine-tuning */
@media (max-width: 430px) {
  .section { padding-block: var(--space-5); }
  .event-card__title { font-size: 1rem; }
}
@media (max-width: 414px) {
  .toast-container { left: var(--space-2); right: var(--space-2); }
  .auth__card { padding: var(--space-4); }
}
@media (max-width: 390px) {
  .site-footer__name { font-size: 0.85rem; }
}
@media (max-width: 375px) {
  html { font-size: 15px; }
  h1 { font-size: clamp(1.3rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.15rem, 6vw, 1.6rem); }
}
@media (max-width: 360px) {
  .navbar__inner { padding: 0 var(--space-2); }
  .event-detail { padding-inline: var(--space-2); }
}
@media (max-width: 320px) {
  html { font-size: 14px; }
  .section { padding-inline: var(--space-2); }
  .auth__card { padding: var(--space-3); }
  .profile { padding-inline: var(--space-2); }
}

/* ============================================================
   Sections & containers — safe widths
   ============================================================ */
.section { padding-inline: var(--space-3); }
@media (max-width: 480px) {
  .section { padding-inline: var(--space-2); padding-block: var(--space-5); }
}
.event-detail { padding-inline: var(--space-3); }
@media (max-width: 480px) {
  .event-detail { padding-inline: var(--space-2); }
}

/* ============================================================
   Cards & grids — avoid overflow
   ============================================================ */
.events-grid { gap: var(--space-3); }
.event-card { min-width: 0; }
@media (max-width: 480px) {
  .events-grid { gap: var(--space-2); }
  .event-card__body { padding: var(--space-3) var(--space-2); }
  .event-card__title { font-size: 1rem; }
}

/* ============================================================
   Forms — touch-friendly inputs
   ============================================================ */
input, select, textarea, button, .btn, a.btn { min-height: 44px; }
@media (max-width: 480px) {
  input, select, textarea, button, .btn, a.btn { min-height: 48px; }
}

/* ============================================================
   Tables — safe overflow for data-table / leaderboard / reg-table
   ============================================================ */
.data-table,
.leaderboard__table,
.reg-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table thead,
.leaderboard__table thead,
.reg-table thead,
.data-table tbody,
.leaderboard__table tbody,
.reg-table tbody,
.data-table tfoot,
.leaderboard__table tfoot,
.reg-table tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
  min-width: 560px;
}

/* Panel wrapper: let panels overflow on mobile for tables */
.panel { overflow: visible; }
.panel__body--flush { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* Leaderboard filters — stack on mobile */
.leaderboard__filters { flex-direction: column; align-items: stretch; }
.leaderboard__filters select,
.leaderboard__filters input[type="datetime-local"] { min-width: unset; width: 100%; }

/* Event detail tabs */
.event-detail__tabs { top: var(--nav-h); }
@media (max-width: 860px) {
  .event-detail__tabs { top: calc(var(--nav-h) + 56px); }
}
@media (max-width: 480px) {
  .event-detail__tabs { position: static; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border); }
}

/* ============================================================
   Toast — mobile-safe position
   ============================================================ */
.toast-container {
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  max-width: unset;
  width: auto;
}
@media (max-width: 480px) {
  .toast-container { bottom: var(--space-2); left: var(--space-2); right: var(--space-2); }
  .toast { padding: var(--space-2) var(--space-3); font-size: 0.9rem; }
}

/* ============================================================
   Footer — mobile stacking
   ============================================================ */
.site-footer { padding-inline: var(--space-3); }
@media (max-width: 480px) {
  .site-footer { padding-inline: var(--space-2); padding-block: var(--space-4); }
  .site-footer__inner { gap: var(--space-3); }
  .site-footer__logo { width: 2rem; height: 2rem; font-size: 0.85rem; }
  .site-footer__name { font-size: 0.9rem; }
  .site-footer__sub { font-size: 0.78rem; }
}

/* ============================================================
   Profile — stack fields
   ============================================================ */
.profile__head { flex-direction: column; align-items: stretch; }
.profile__dl { grid-template-columns: 1fr; }
.profile-edit__row { grid-template-columns: 1fr; }
@media (min-width: 601px) {
  .profile-edit__row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Auth cards — safe padding
   ============================================================ */
.auth { padding-inline: var(--space-3); }
@media (max-width: 380px) {
  .auth { padding-inline: var(--space-2); }
  .auth__card { padding: var(--space-4); }
}

/* ============================================================
   Announcements / Notifications — spacing
   ============================================================ */
.announcements, .notification-item { padding-inline: var(--space-3); }
@media (max-width: 480px) {
  .announcements, .notifications, .announcement-detail { padding-inline: var(--space-2); }
}

/* ============================================================
   Working Groups — extra safeguards
   ============================================================ */
.wg-container { padding-inline: var(--space-3); }
@media (max-width: 480px) {
  .wg-container { padding-inline: var(--space-2); }
  .wg-page-header { padding-block: var(--space-4) 0; }
  .wg-list { grid-template-columns: 1fr; gap: var(--space-3); }
}
.wg-tabs { flex-wrap: wrap; }
.wg-tabs__link { flex: 1 1 auto; text-align: center; white-space: nowrap; }
.wg-portfolio-detail__gallery { grid-template-columns: 1fr; }
.wg-form__actions { flex-direction: column; }
.wg-form__actions .btn { width: 100%; justify-content: center; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}