/* ==========================================================================
   ROCKHILL — SHARED STYLESHEET
   Design tokens (:root) + common component styles used across every page.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COLOR TOKENS
     --------------------------------------------------------------------- */
  /* Primary — Navy (brand, headers, dark surfaces) */
  --color-primary-950: #071B2C;
  --color-primary-900: #0B2A43;
  --color-primary-800: #123A5C;
  --color-primary-700: #16405F;
  --color-primary-600: #1D5279;

  /* Secondary — Safety Orange (accent, CTAs) */
  --color-secondary: #E86E1C;
  --color-secondary-hover: #C85A11;
  --color-secondary-tint: #FCE7D6;

  /* Neutral — Concrete (backgrounds, borders) */
  --color-neutral-50: #F5F6F4;
  --color-neutral-100: #EEF0EC;
  --color-neutral-200: #E1E4DF;
  --color-neutral-300: #CBCFC8;

  /* Slate — secondary / muted text */
  --color-slate-500: #5B6670;
  --color-slate-600: #495158;

  /* Semantic aliases */
  --color-success: #2E7D32;
  --color-danger: #B00020;
  --color-surface: #FFFFFF;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY TOKENS
     --------------------------------------------------------------------- */
  --font-family-display: 'Poppins', sans-serif;   /* Headings */
  --font-family-body: 'Work Sans', sans-serif;    /* Paragraphs */
  --font-family-mono: 'IBM Plex Mono', monospace; /* Eyebrows, labels, nav */

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* ---------------------------------------------------------------------
     MOTION TOKENS
     --------------------------------------------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.6s ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */
html { scroll-behavior: smooth; }

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

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* ==========================================================================
   DECORATIVE — Blueprint grid + corner registration marks
   ========================================================================== */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

.blueprint-grid-dark {
  background-image:
    linear-gradient(rgba(11,42,67,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,42,67,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.corner-tick { position: relative; }
.corner-tick::before, .corner-tick::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-color: currentColor;
}
.corner-tick::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.corner-tick::after  { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.tick-bl, .tick-br { content: ""; position: absolute; width: 14px; height: 14px; border-color: currentColor; }
.tick-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.tick-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
header { transition: box-shadow var(--transition-slow); }
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel { display: block; }

/* ==========================================================================
   ACCORDIONS
   ========================================================================== */

/* Legacy whole-group accordion (kept for compatibility) */
details.division > summary::-webkit-details-marker { display: none; }
details.division[open] .div-chevron { transform: rotate(180deg); }

/* Per-item accordion — each scope-of-work line is its own expandable row */
.item-accordion > summary { list-style: none; cursor: pointer; }
.item-accordion > summary::-webkit-details-marker { display: none; }
.item-accordion[open] > summary .item-chevron { transform: rotate(180deg); }
.item-accordion .item-chevron { transition: transform var(--transition-base); }
.item-accordion + .item-accordion { border-top: 1px solid var(--color-neutral-200); }

@media (prefers-reduced-motion: no-preference) {
  .item-accordion[open] .item-body { animation: scopeFadeIn 0.3s ease; }
}

@keyframes scopeFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   LIGHTBOX (photo enlarge — custom, videos now use Fancybox)
   ========================================================================== */
.lightbox {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition-base);
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox figure {
  transform: scale(0.96); transition: transform var(--transition-base);
}
.lightbox.open figure { transform: scale(1); }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
#backToTop {
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base), background-color var(--transition-fast);
}
#backToTop.show { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   SCROLL REVEAL + HOVER LIFT (motion respects prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-group > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }
  .reveal-group.in-view > *:nth-child(1)  { transition-delay: 0ms; }
  .reveal-group.in-view > *:nth-child(2)  { transition-delay: 60ms; }
  .reveal-group.in-view > *:nth-child(3)  { transition-delay: 120ms; }
  .reveal-group.in-view > *:nth-child(4)  { transition-delay: 180ms; }
  .reveal-group.in-view > *:nth-child(5)  { transition-delay: 240ms; }
  .reveal-group.in-view > *:nth-child(6)  { transition-delay: 300ms; }
  .reveal-group.in-view > *:nth-child(7)  { transition-delay: 340ms; }
  .reveal-group.in-view > *:nth-child(8)  { transition-delay: 380ms; }
  .reveal-group.in-view > *:nth-child(9)  { transition-delay: 420ms; }
  .reveal-group.in-view > *:nth-child(10) { transition-delay: 460ms; }
  .reveal-group.in-view > *:nth-child(11) { transition-delay: 500ms; }
  .reveal-group.in-view > *:nth-child(12) { transition-delay: 540ms; }
  .reveal-group.in-view > * { opacity: 1; transform: none; }

  .reveal-fade { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal-fade.in-view { opacity: 1; transform: none; }

  a.group, .project-card, .video-card, .gallery-tile {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  a.group:hover, .project-card:hover, .video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -14px rgba(11,42,67,0.22);
  }
}