/* Jobs-inspired styling: photo-directed, non-destructive visual layer
   - Applied only via CSS so no HTML text is changed
   - Use variables below to iterate quickly on lamp position, intensity, and window hints
*/
:root{
  /* lamp origin as percentages of viewport (x y) */
  --lamp-x: 0%;
  --lamp-y: 0%;
  /* lamp cone width (unitless degrees, set by JS) and radial size (px) */
  --lamp-cone-width: 120;
  --lamp-radial-width: 4000px;
  --lamp-radial-height: 3000px;
  /* warmer, denser core to match the Tiffany lamp feel */
  --lamp-core-color: rgba(255,249,220,1);
  --lamp-mid-color: rgba(255,224,140,0.75);
  --lamp-edge-color: rgba(245,241,232,0);
  /* wall/floor tints (very low opacity) */
  --backwall-tint: rgba(169,152,133,0.06);
  --sidewall-tint: rgba(155,140,125,0.08);
  --floor-tint: rgba(139,105,68,0.06);
  --window-opacity: 0.065;
  --vignette-opacity: 0.26;
}

/* Debug toggle: when body.disable-lamp is present (or set via ?nolamp=1), hide
   all lamp/vignette-related visual layers so developers can inspect layout without
   the lighting effect interfering. This keeps DOM present but visually disables it.
*/
body.disable-lamp .lamp-oval-overlay,
body.disable-lamp .vignette-layer,
body.disable-lamp .window-hints-overlay,
body.disable-lamp .film-grain,
body.disable-lamp .lamp-cone-overlay{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure the header stays visible above disabled layers */
body.disable-lamp header { z-index: 10000 !important; opacity: 1 !important; }

/* Lamp toggle button styling (dev-only): keep it visible and above the vignette */
/* removed lamp toggle styles (toggle UI is removed) */



/* robust lamp oval overlay (cross-browser) */
.lamp-oval-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,249,220,0.38) 0%, rgba(255,224,140,0.14) 65%, transparent 100%);
  background-blend-mode: screen;
  filter: blur(36px) saturate(1.01);
  opacity: 0.93;
  transition: width 0.3s cubic-bezier(.4,0,.2,1), height 0.3s cubic-bezier(.4,0,.2,1), left 0.3s cubic-bezier(.4,0,.2,1), top 0.3s cubic-bezier(.4,0,.2,1);
  will-change: width, height, left, top, transform, opacity;
}

/* Stronger visual for hero-only mode (makes spotlight clearly visible for testing) */
/* Focused spotlight for hero-only mode: strong warm core + quicker falloff so hero text pops
   - tighter core radius, higher mid intensity, increased vignette so surrounding content darkens
*/
/* Restore the earlier, more pleasant spotlight core while avoiding a harsh dot.
   - slightly brighter core and stronger mid halo, but still controlled falloff
*/
/* Hide the white spotlight overlay completely — we only want the vignette to create contrast */
body.hero-only .lamp-oval-overlay{
  display: none;
}

/* Darken vignette slightly so the hero area reads with stronger contrast */
/* Dim the page but keep a clear transparent hole where the spotlight is. The hole
   is positioned using CSS variables (set by JS) so the dim follows the spotlight center.
*/
/* Dark vignette that clearly dims surrounding page while preserving a soft spot for the lamp.
   Reduce the transparent radius slightly so the hero remains the main bright region.
*/
/* Strong dramatic vignette: page is dark everywhere except the hero area.
   The transparent ellipse creates a pool of normal brightness centered on hero,
   with aggressive darkening outside to replicate the Jobs photo lighting.
*/
body.hero-only .vignette-layer{
  position: fixed; inset:0; z-index: 50; pointer-events:none;
  background: radial-gradient(
    ellipse var(--spotlight-w, 900px) var(--spotlight-h, 600px) at var(--lamp-left,50%) var(--lamp-top,50%),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.82) 58%,
    rgba(0,0,0,0.92) 100%);
  backdrop-filter: none;
  transition: background 180ms ease-out;
}
.lamp-cone-overlay { display: none !important; }

/* Ensure header backdrop blur works cross-browser (including Safari) */
header{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* window hints using an SVG data-URI for crispness and exact positioning (low opacity) */
.window-hints-overlay{
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--window-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'><g fill='%23FFFFFF' opacity='0.06'><rect x='550' y='150' width='120' height='380' rx='2'/><rect x='730' y='150' width='120' height='380' rx='2'/><rect x='910' y='150' width='120' height='380' rx='2'/><rect x='1090' y='150' width='120' height='380' rx='2'/><path d='M1550 160 L1680 165 L1680 505 L1550 495 Z'/><path d='M1720 170 L1820 175 L1820 510 L1720 500 Z'/></g></svg>");
  background-repeat: no-repeat; background-position: 0 0; background-size: cover;
}

/* vignette to focus toward left/center like the photo */
.vignette-layer{ 
  position: fixed; 
  inset:0; 
  z-index:1; 
  pointer-events:none; 
  background: radial-gradient(closest-side at 30% 45%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.32) 100%); 
}

/* Subtle vignette: gentle darkness for depth without being dramatic */
body.hero-only .vignette-layer{
  z-index: 9998;
  background: radial-gradient(
    ellipse var(--spotlight-w, 900px) var(--spotlight-h, 600px) at var(--lamp-left,50%) var(--lamp-top,50%),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.05) 42%,
    rgba(0,0,0,0.42) 68%,
    rgba(0,0,0,0.58) 100%) !important;
  transition: background 180ms ease-out;
}

/* ...existing code... */

/* keep content above the visual layers BUT below the spotlight vignette */
.content, main, footer { position: relative; z-index: 10; }

/* Header should always stay on top with backdrop blur visible */
header { position: sticky; top: 0; z-index: 10000 !important; }

/* In hero-only mode, ensure vignette is above most content but NOT header */
body.hero-only .content,
body.hero-only main,
body.hero-only footer,
body.hero-only section { position: relative; z-index: 1 !important; }

/* helper classes for iterative tuning */
.jobs-lamp-raise{ --lamp-y: 58%; }
.jobs-lamp-lower{ --lamp-y: 68%; }
.jobs-lamp-left{ --lamp-x: 80%; }
.jobs-lamp-right{ --lamp-x: 90%; }
.jobs-lamp-strong{ filter: contrast(1.06) brightness(1.04); }

/* (Gradients-only approach retained per project direction.) */

@media (max-width: 800px){ :root{ --lamp-x: 86%; --lamp-y: 36%; } }

/* visible lamp-follow toggle button */
#lamp-follow-toggle{ background:#111; color:#fff; border-radius:999px; padding:10px 14px; font-size:13px; border:none; box-shadow:0 6px 18px rgba(0,0,0,0.25); cursor:pointer; }
#lamp-follow-toggle[aria-pressed="false"]{ background: rgba(255,255,255,0.9); color:#111; }

/* hero light overlay - removed in favor of single natural lamp effect */
.hero-light{ display: none; }

/* hero-only mode: disable the ambient window hints and grain, but KEEP the vignette as it creates the spotlight */
body.hero-only::before,
body.hero-only::after{
  opacity: 0 !important;
  pointer-events: none !important;
}
body.hero-only .window-hints-overlay,
body.hero-only .film-grain{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Global mobile hamburger visibility: ensure the mobile menu hamburger shows on small screens */
.mobile-hamburger { display: none; background: transparent; border: 0; }
@media (max-width: 768px) {
  /* hide desktop nav on small screens only */
  .desktop-nav { display: none !important; }
  .mobile-hamburger { display: block !important; }
}
@media (min-width: 769px) {
  .mobile-hamburger { display: none !important; }
}

/* Emergency override: ensure desktop nav is visible and interactive on desktop widths.
   This guards against accidental rules or injected CSS hiding the nav. Remove once
   the underlying cause is confirmed fixed. */
@media (min-width: 769px) {
  .desktop-nav { display: flex !important; pointer-events: auto !important; opacity: 1 !important; }
}

/* Mobile menu overlay - hidden by default */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu styles moved to mobile-menu.css */

/* Unified card styling for consistent green-bordered boxes across all pages */
.content-card {
  background: #fff;
  border: 2px solid #7BA686;
  border-radius: 1.5rem;
  box-shadow: 6px 6px 0 rgba(123,166,134,0.2);
}

.content-card--soft {
  background: #F9F7F4;
  border: 1.5px solid rgba(123,166,134,0.45);
  border-radius: 1.25rem;
  box-shadow: 4px 4px 0 rgba(123,166,134,0.12);
}

/* Unified button styling */
.btn-mono {
  font-family: 'Berkeley Mono', monospace;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-mono svg {
  flex-shrink: 0;
}