/*
Theme Name: Emberfall Game Portal
Theme URI: https://example.com
Author: Twoje Studio
Author URI: https://example.com
Description: Gamingowy motyw WordPress dla portalu o grze Emberfall: Kroniki Zapomnianego Miasta. Zawiera stronę główną z hero, sekcją funkcji, opiniami, blog, formularz kontaktowy oraz strony regulaminowe. W pełni responsywny i edytowalny przez panel WordPress.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: emberfall
*/

/* =============================================
   DESIGN TOKENS
   Paleta: kuźnia / żar / stal
   ============================================= */
:root{
  --bg:            #14110F;
  --bg-raised:     #1E1A17;
  --bg-raised-2:   #262019;
  --ember:         #FF6B35;
  --ember-dim:     #B5451B;
  --steel:         #5C7A85;
  --steel-dim:     #3A4C52;
  --ink:           #F2EDE4;
  --ink-muted:     #9C9186;
  --ink-faint:     #6B6459;
  --border:        #322B24;

  --font-display: 'Teko', 'Arial Narrow', sans-serif;
  --font-body:    'Work Sans', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius: 3px;
  --container: 1180px;
}

/* =============================================
   RESET / BASE
   ============================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--ember); text-decoration:none; }
a:hover{ color:#ffb08a; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing:.02em;
  line-height:1.05;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
h1{ font-size: clamp(2.6rem, 6vw, 5rem); }
h2{ font-size: clamp(2rem, 4vw, 3.1rem); }
h3{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p{ margin:0 0 1em; color: var(--ink-muted); }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

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

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

/* =============================================
   UTILITIES
   ============================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color: var(--ember); margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--ember); display:inline-block; }

.btn{
  display:inline-block; font-family: var(--font-display); font-size:1.2rem;
  letter-spacing:.04em; text-transform:uppercase; padding: 14px 34px;
  border-radius: var(--radius); border:2px solid transparent; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-ember{
  background: linear-gradient(180deg, #FF7A45, var(--ember-dim));
  color:#1A0D06; box-shadow: 0 0 0 rgba(255,107,53,0);
}
.btn-ember:hover{ color:#1A0D06; transform: translateY(-2px); box-shadow: 0 8px 26px -8px rgba(255,107,53,.65); }
.btn-outline{
  background:transparent; border-color: var(--steel); color: var(--ink);
}
.btn-outline:hover{ border-color: var(--ink); color:#fff; }

.section{ padding: 96px 0; position:relative; }
.section-alt{ background: var(--bg-raised); }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head p{ font-size: 1.05rem; }

/* jagged "molten crack" divider — signature element */
.crack-divider{ width:100%; height:34px; display:block; }
.crack-divider path{ stroke: var(--ember-dim); stroke-width:2; fill:none; opacity:.55; }

/* card */
.card{
  background: var(--bg-raised); border:1px solid var(--border);
  border-radius: var(--radius); padding: 30px;
}

/* grid helpers */
.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .section{ padding: 64px 0; }
}