/*
Theme Name: FireJaws Stage
Template: hello-elementor
Version: 0.3.1
Description: Scoped WIAD-002 staging presentation layer for Elementor-editable FireJaws pages.
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Permanent+Marker&display=swap');

:root {
  --fj-black: #050505;
  --fj-panel: #101010;
  --fj-panel-2: #17110f;
  --fj-red: #e50914;
  --fj-orange: #ff5a1f;
  --fj-white: #f5f2ee;
  --fj-muted: #aaa49d;
  --fj-line: rgba(229, 9, 20, .38);
}

html, body { overflow-x: hidden; }
body { background: var(--fj-black); color: var(--fj-white); font-family: 'Barlow Condensed', sans-serif; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: 20; background-image: radial-gradient(rgba(255,255,255,.12) .6px, transparent .6px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.site-header, .site-footer, .page-header { display: none !important; }
.elementor-page .site-main { max-width: none; padding: 0; }
.elementor-widget-text-editor { color: inherit; }

.fj-page { background: var(--fj-black); min-height: 100vh; }
.fj-header > .e-con-inner,
.fj-hero > .e-con-inner,
.fj-page-hero > .e-con-inner,
.fj-section > .e-con-inner,
.fj-footer > .e-con-inner {
  width:100% !important;
  max-width:none !important;
}
.fj-shell { --width:1320px; width:min(1320px,calc(100% - 80px)) !important; max-width:1320px !important; margin-inline:auto; }
.fj-header { min-height: 92px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5,5,5,.94); position: relative; z-index: 5; }
.fj-header .e-con-inner { gap: 24px; align-items: center; }
.fj-logo img { width: 106px !important; filter: drop-shadow(0 0 18px rgba(229,9,20,.35)); }
.fj-nav { margin-left: auto; }
.fj-nav a { color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; margin: 0 13px; font-size: 15px; }
.fj-nav a:hover { color: var(--fj-red); }
.fj-social { color: #fff; font-weight: 700; letter-spacing: .18em; white-space: nowrap; }

.fj-hero { min-height: 650px; position: relative; background: linear-gradient(90deg,#050505 0%,rgba(5,5,5,.78) 40%,rgba(5,5,5,.08) 72%), var(--fj-hero) var(--fj-focus, center)/cover no-repeat; overflow: hidden; }
.fj-hero-home { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-08.jpg'); --fj-focus:52% 22%; --fj-mobile-focus:52% 22%; }
.fj-hero-bio { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-01.jpg'); --fj-focus:47% 34%; --fj-mobile-focus:47% 30%; }
.fj-hero-music { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-08.jpg'); --fj-focus:52% 22%; --fj-mobile-focus:52% 22%; }
.fj-hero-videos { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-07.jpg'); --fj-focus:58% 21%; --fj-mobile-focus:58% 20%; }
.fj-hero-shop { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-05.jpg'); --fj-focus:72% 26%; --fj-mobile-focus:72% 24%; }
.fj-hero-events { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-03.jpg'); --fj-focus:53% 24%; --fj-mobile-focus:53% 22%; }
.fj-hero-contact { --fj-hero: url('/wp-content/uploads/firejaws-source/asset-08.jpg'); --fj-focus:52% 22%; --fj-mobile-focus:52% 22%; }
.fj-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 88% 74%, rgba(229,9,20,.38), transparent 25%), repeating-linear-gradient(112deg, transparent 0 27px, rgba(229,9,20,.035) 28px 29px); }
.fj-hero .e-con-inner { position: relative; z-index: 1; }
.fj-kicker { color: var(--fj-red); text-transform: uppercase; letter-spacing: .17em; font-weight: 800; }
.fj-brush .elementor-heading-title, .fj-brush { font-family: 'Permanent Marker', cursive !important; text-transform: uppercase; line-height: .94 !important; letter-spacing: -.025em; }
.fj-hero-title .elementor-heading-title { color: #fff !important; font-size: clamp(54px, 8vw, 102px); max-width: 650px; text-shadow: 0 8px 30px #000; }
.fj-hero-title em { color: var(--fj-red); font-style: normal; }
.fj-hero-copy { max-width: 480px; font-size: 27px; line-height: 1.15; color: #f0ece7; }
.fj-buttons .elementor-button { border-radius: 0; background: var(--fj-red) !important; color: #fff !important; text-transform: uppercase; font-size: 17px; font-weight: 800; letter-spacing: .06em; padding: 15px 30px; border: 1px solid var(--fj-red); }
.fj-buttons.fj-outline .elementor-button { background: transparent !important; }

.fj-section { padding: 84px 0; position: relative; }
.fj-section::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 10% 10%, rgba(229,9,20,.08), transparent 28%); }
.fj-section-title .elementor-heading-title { color: #fff !important; font-size: clamp(38px, 5vw, 58px); }
.fj-section-title em { color: var(--fj-red); font-style: normal; }
.fj-subtitle { color: var(--fj-muted); text-transform: uppercase; letter-spacing: .12em; font-size: 16px; }
.fj-panel { background: linear-gradient(145deg,rgba(25,25,25,.98),rgba(8,8,8,.98)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 22px 65px rgba(0,0,0,.45); }
.fj-spotify { padding: 24px; border-color: rgba(229,9,20,.45); }
.fj-spotify iframe { border-radius: 0 !important; display: block; }
.fj-spotify-overlap { z-index: 3; margin-top: -105px; padding-top: 0; }
.fj-spotify-overlap .fj-shell { padding: 30px; background: linear-gradient(135deg,rgba(24,10,8,.98),rgba(5,5,5,.98)); border: 1px solid rgba(229,9,20,.55); box-shadow: 0 34px 90px #000; }
.fj-commerce-stage { padding-top: 46px; background: linear-gradient(130deg,#070707 0 48%,#160b08 48% 100%); }
.fj-commerce-stage::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.12; background: repeating-linear-gradient(-12deg,transparent 0 16px,#e50914 17px 18px); }
.fj-commerce-columns { position:relative; z-index:1; gap:20px; align-items:stretch; }
.fj-catalog-panel { width:50%; padding:36px 28px; background:rgba(10,10,10,.94); border-top:5px solid var(--fj-red); box-shadow:0 24px 60px rgba(0,0,0,.55); }
.fj-catalog-panel-alt { background:linear-gradient(145deg,rgba(31,16,10,.96),rgba(8,8,8,.96)); transform:translateY(28px); }
.fj-catalog-panel .fj-grid > .e-con-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fj-catalog-panel .fj-grid > .e-con-inner > .fj-card:last-child { grid-column:1/-1; }
.fj-catalog-panel .fj-card { padding:11px; }

.fj-grid > .e-con-inner { display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.fj-card { min-width: 0; padding: 16px; background: #111; border: 1px solid rgba(255,255,255,.09); transition: transform .2s ease, border-color .2s ease; }
.fj-card:hover { transform: translateY(-4px); border-color: var(--fj-red); }
.fj-card .elementor-heading-title { color:#fff !important; font-size: 20px; }
.fj-card .elementor-widget-text-editor { color: var(--fj-red); font-weight: 700; font-size: 17px; }
.fj-cover { aspect-ratio: 1; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle,rgba(229,9,20,.35),transparent 62%),#090909; border: 1px solid rgba(229,9,20,.35); }
.fj-cover img { width: 72% !important; max-height: 85%; object-fit: contain; }
.fj-merch .fj-cover { aspect-ratio: .9; background: linear-gradient(145deg,#1a1a1a,#080808); }
.fj-merch .fj-cover img { width: 64% !important; filter: drop-shadow(0 15px 22px rgba(0,0,0,.65)); }

.fj-split { gap: 0 !important; align-items: stretch; }
.fj-split > .e-con-inner > .e-con { min-height: 520px !important; }
.fj-photo { background: var(--fj-photo) var(--fj-photo-focus, center)/cover no-repeat; }
.fj-photo-1 { --fj-photo: url('/wp-content/uploads/firejaws-source/asset-01.jpg'); --fj-photo-focus:47% 34%; }
.fj-photo-2 { --fj-photo: url('/wp-content/uploads/firejaws-source/asset-03.jpg'); --fj-photo-focus:53% 24%; }
.fj-photo-3 { --fj-photo: url('/wp-content/uploads/firejaws-source/asset-05.jpg'); --fj-photo-focus:72% 26%; }
.fj-photo-4 { --fj-photo: url('/wp-content/uploads/firejaws-source/asset-07.jpg'); --fj-photo-focus:58% 21%; }
.fj-photo-5 { --fj-photo: url('/wp-content/uploads/firejaws-source/asset-08.jpg'); --fj-photo-focus:52% 22%; }
.fj-copy { padding: clamp(38px,6vw,82px); background: linear-gradient(135deg,#16100e,#080808 72%); }
.fj-copy .elementor-widget-text-editor { color: #d5d0ca; font-size: 19px; line-height: 1.65; }
.fj-quote { border-left: 4px solid var(--fj-red); padding-left: 24px; font-size: 27px; color: #fff; }

.fj-page-hero { min-height: 440px !important; background: linear-gradient(90deg,#050505 0%,rgba(5,5,5,.72) 48%,rgba(5,5,5,.04)), var(--fj-hero) var(--fj-focus,center)/cover no-repeat; position:relative; overflow:hidden; }
.fj-page-hero::after { content:''; position:absolute; inset:auto 0 0; height:72px; background:linear-gradient(177deg,transparent 0 47%,var(--fj-red) 48% 52%,#050505 53%); opacity:.72; }
.fj-source-note { color:#827b74; font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.fj-page-title .elementor-heading-title { color: #fff !important; font-size: clamp(60px,9vw,110px); }
.fj-stat { padding: 26px 18px; text-align: center; border: 1px solid rgba(255,255,255,.08); background:#0d0d0d; }
.fj-stat .elementor-heading-title { color: var(--fj-red); font-size: 38px; }
.fj-video { min-height: 250px; display:flex; align-items:flex-end; padding: 24px; background: linear-gradient(0deg,rgba(0,0,0,.88),transparent 65%), var(--fj-video) center/cover; border:1px solid rgba(255,255,255,.1); }
.fj-video-1 { --fj-video: url('/wp-content/uploads/firejaws-source/asset-01.jpg'); }
.fj-video-2 { --fj-video: url('/wp-content/uploads/firejaws-source/asset-03.jpg'); }
.fj-video-3 { --fj-video: url('/wp-content/uploads/firejaws-source/asset-05.jpg'); }
.fj-video-4 { --fj-video: url('/wp-content/uploads/firejaws-source/asset-07.jpg'); }
.fj-event { padding: 26px; border-left: 4px solid var(--fj-red); background:#111; }
.fj-contact-card { padding: 36px; }
.fj-contact-card a { color: var(--fj-red); }
.fj-form label { display:block; margin:0 0 4px; color:#fff; font-weight:700; }
.fj-form input, .fj-form textarea, .fj-form select { width:100%; background:#0a0a0a; border:1px solid #333; border-radius:0; color:#fff; padding:14px; margin:0 0 14px; }
.fj-form button { background:var(--fj-red); color:#fff; border:0; padding:15px 28px; text-transform:uppercase; font-weight:800; }
.fj-form-note { margin-top:16px; color:#8f8881; font-size:13px; }

.fj-footer { padding: 48px 0 28px; border-top: 1px solid rgba(255,255,255,.08); background:#080808; }
.fj-footer .elementor-widget-text-editor { color:#aaa; }
.fj-staging-badge { position:fixed; right:12px; bottom:12px; z-index:40; background:#e50914; color:#fff; padding:6px 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 4px 18px #000; }
.fj-catalog-only { display:block; color:#8f8881; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }

@media (max-width: 1024px) {
  .fj-shell { width:min(100% - 48px,1320px) !important; }
  .fj-header .e-con-inner { flex-wrap: wrap; padding-block: 12px; }
  .fj-nav { order:3; width:100%; margin:0; text-align:center; padding-bottom:10px; }
  .fj-nav a { margin:0 8px; }
  .fj-grid > .e-con-inner { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fj-hero { min-height: 600px; }
  .fj-commerce-columns { flex-direction:column !important; }
  .fj-catalog-panel { width:100%; }
  .fj-catalog-panel-alt { transform:none; }
}

@media (max-width: 767px) {
  .fj-shell { width:min(100% - 24px,1320px) !important; }
  .fj-header { min-height:72px; }
  .fj-logo img { width:78px !important; }
  .fj-social { display:none; }
  .fj-nav { text-align:left; overflow-x:auto; white-space:nowrap; }
  .fj-nav a { font-size:13px; margin:0 12px 0 0; }
  .fj-hero { min-height:660px; background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.78) 60%,rgba(5,5,5,.08)),var(--fj-hero) var(--fj-mobile-focus,var(--fj-focus,center))/cover no-repeat; align-items:flex-end; }
  .fj-hero .e-con-inner { padding-bottom:46px; }
  .fj-hero-title .elementor-heading-title { font-size:53px; }
  .fj-hero-copy { font-size:21px; }
  .fj-actions { flex-wrap:wrap !important; gap:12px; }
  .fj-actions .elementor-widget-button { width:100%; }
  .fj-actions .elementor-button { width:100%; text-align:center; }
  .fj-section { padding:58px 0; }
  .fj-grid > .e-con-inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fj-grid > .e-con-inner > .fj-card:last-child { grid-column:1/-1; }
  .fj-split { display:block !important; }
  .fj-split > .e-con-inner > .e-con { min-height:360px !important; }
  .fj-copy { padding:38px 24px; }
  .fj-page-hero { min-height:390px !important; background-position:center,var(--fj-mobile-focus,var(--fj-focus,center)); }
  .fj-page-hero > .e-con-inner { justify-content:flex-end !important; padding-bottom:46px; }
  .fj-page-title .elementor-heading-title { font-size:58px; }
  .fj-spotify-overlap { margin-top:-45px; }
  .fj-spotify-overlap .fj-shell { padding:18px 12px; }
  .fj-catalog-panel { padding:28px 16px; }
}
