/* ============================================
   IT FORGE — Neon styl (jasnější verze)
   - větší logo (72px), zarovnané s menu
   - světlejší hero, slabší overlaye
   - sticky header 80px
   - neon glow hover
   ============================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
:root{
  /* Základní barvy */
  --bg:#0e0e15;
  --bg2:#171729;
  --surface:#17172a;
  --card:#1d1d33;
  
  /* Text a okraje */
  --ink:#f3f4fb;
  --muted:#c4c6da;
  --border:#343454;
  
  /* Brandové barvy */
  --brand:#F4ED9B;
  --brand-start:#A07B42;
  --brand-end:#A07B42;
  --brand-ink:var(--brand);
  
  /* Efekty */
  --brand-glow:rgba(160,123,66,0.3);
  --brand-hover:rgba(244,237,155,0.8);
  
  /* Layout */
  --header-height: 92px;
  --container-width: 1100px;
  --card-radius: 16px;
  --button-radius: 8px;
}

/* ========== ZÁKLAD ========== */
body{
  font-family:'Poppins','Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:radial-gradient(circle at 20% -10%, #1c1c33 0%, #0e0e15 60%);
  letter-spacing:0.2px;
  line-height:1.6;
}
.container{width:min(1100px,100%);margin-inline:auto;padding:0 20px}
a{color:inherit;text-decoration:none}

/* Components section */
.components-section {
  grid-column: 1 / -1;
  margin-top: 1rem;
}

.components {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.component-item {
  display: grid;
  grid-template-columns: 180px 1fr 1fr 80px auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background: var(--surface);
  border-radius: var(--button-radius);
}

.component-item button {
  padding: 0.25rem 0.5rem;
  background: #442222;
  border: 1px solid #662222;
  color: #ffcccc;
  border-radius: 4px;
  cursor: pointer;
}

.component-item button:hover {
  background: #662222;
}
img{max-width:100%;display:block}

/* ========== HLAVIČKA / NAV ========== */
header.site{
  position:sticky;top:0;z-index:40;height:92px; /* zmenšeno, aby hlavička nebyla tak protáhlá */
  background:rgba(10,10,15,0.75); /* světlejší */
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
header.site .nav{
  min-height:92px; /* sladěno s header.site výškou */
  display:flex;align-items:center;justify-content:space-between;
  position:relative;
}
/* === Logo/header styles (moved from partials/header.php) === */
header.site .nav{ padding-left:110px; }
header.site .nav a.brand{
  display:flex;align-items:center;gap:.5rem;
  position:absolute;left:20px;bottom:8px; /* logo aligned to header bottom */
  z-index:2;line-height:0;
}
header.site .nav a.brand img{
  height:61px;width:auto;display:block;
  filter:drop-shadow(0 0 8px rgba(255,215,0,.6));
  transition:filter .25s ease, transform .25s ease;
}
@keyframes neonPulse {
  0%   { filter: drop-shadow(0 0 7px rgba(160,123,66,0.55)) drop-shadow(0 0 14px rgba(160,123,66,0.3)); }
  50%  { filter: drop-shadow(0 0 14px rgba(244,237,155,0.85)) drop-shadow(0 0 26px rgba(160,123,66,0.45)); }
  100% { filter: drop-shadow(0 0 7px rgba(160,123,66,0.55)) drop-shadow(0 0 14px rgba(160,123,66,0.3)); }
}
header.site .nav a.brand:hover img,
header.site .nav a.brand:focus-visible img{ animation: neonPulse 1.4s ease-in-out infinite; transform:translateY(-1px) }

@media (max-width: 860px){
  header.site .nav a.brand img{height:38px}
}

.links{margin-left:auto;display:flex;align-items:center;gap:1.2rem} /* reduced gap between items */
.links a{
  text-transform:uppercase;font-weight:700;letter-spacing:.55px;
  transition:all .12s ease;
  position:relative;
  padding:6px 8px; /* tighter buttons */
  border-radius:6px;
  overflow:visible;
  background: linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* subtle neon outline behind the animated stroke */
.links a::before{
  content: "";
  position:absolute;inset:0;pointer-events:none;border-radius:6px;
  box-shadow:0 0 12px rgba(160,123,66,0.06);border:1px solid rgba(160,123,66,0.06);
  opacity:0;transform:scale(0.98);transition:opacity .16s ease,transform .16s ease;
}

/* SVG-based stroke animation: smooth, continuous tracer using inline SVG rects */
.links a svg.link-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.links a svg{shape-rendering:geometricPrecision}
.links a .link-inner{display:inline-block}
.links a svg .base-rect{stroke:rgba(244,237,155,0.2);stroke-width:2;fill:none;stroke-linejoin:round}
.links a svg .anim-rect{
  stroke:url(#headerGradient);stroke-width:2;fill:none;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(160,123,66,0.4)) blur(0.2px);
  /* use CSS variable so JS can set exact perimeter before animation starts */
  stroke-dasharray: var(--dash-start,480);
  stroke-dashoffset: var(--dash-start,480);
  opacity:0;transition:opacity .12s ease;}

/* erase rect uses header-ish background color and slightly larger width so it covers the neon stroke cleanly */
.links a svg .erase-rect{stroke:rgba(10,10,15,0.75);stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round;filter:none;
  stroke-dasharray: var(--dash-start,480);stroke-dashoffset: var(--dash-start,480);opacity:0;transition:opacity .12s ease}

@keyframes dash{to{stroke-dashoffset:0}}

/* looping dash: draw (start->end), then erase (end->start) and repeat */
@keyframes dashLoop{
  0% { stroke-dashoffset: var(--dash-start,480); opacity:1 }
  45% { stroke-dashoffset: 0; opacity:1 }
  55% { stroke-dashoffset: 0; opacity:1 }
  100% { stroke-dashoffset: var(--dash-start,480); opacity:1 }
}

/* draw-first animation (anim-rect): draws 0->100% between 0-45% then stays visible */
@keyframes drawHead{
  0% { stroke-dashoffset: var(--dash-start,480); }
  45% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* erase animation (erase-rect): remains idle until 45%, then moves from start->end covering the stroke */
@keyframes eraseMove{
  0% { stroke-dashoffset: var(--dash-start,480); }
  45% { stroke-dashoffset: var(--dash-start,480); }
  100% { stroke-dashoffset: 0; }
}

/* Only enable the stroke animation on devices with a precise pointing device */
@media (hover: hover) and (pointer: fine) {
  /* animation runs while hovered (or when .play class is present) and loops draw->erase->repeat */
  /* only animate while hovered or focused (or when .play is explicitly added) */
  .links a:hover,
  .links a:focus-visible {
    background: linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: brightness(1.2);
  }

  .links a:hover svg .anim-rect,
  .links a:focus-visible svg .anim-rect,
  .links a svg .anim-rect.play{
  animation:drawHead 2.4s linear infinite;
    animation-play-state:running;
    opacity:1;
  }
  .links a:hover svg .erase-rect,
  .links a:focus-visible svg .erase-rect,
  .links a svg .erase-rect.play{
  animation:eraseMove 2.4s linear infinite;
    animation-play-state:running;
    opacity:1;
  }
  .links a:hover::before,.links a:focus-visible::before{opacity:1;transform:scale(1)}
  .links a:hover,.links a:focus-visible{color:var(--brand)}
}

.burger{
  appearance:none;background:none;border:none;color:var(--ink);
  font-size:1.4rem;display:grid;place-items:center;width:44px;height:44px;border-radius:10px
}
.burger:focus-visible{outline:2px solid var(--brand)}
@media (min-width:860px){.burger{display:none}}
.mobile-menu{display:none;grid-template-columns:1fr;gap:.5rem;padding:10px 0}
.mobile-menu a{
  padding:.7rem;border-radius:.7rem;background:#1a1a2e;border:1px solid var(--border);
  color:#f6f6ff;transition:all .2s ease;
}
.mobile-menu a:hover{background:rgba(255,19,138,.1);border-color:rgba(255,19,138,.3)}

@media (max-width: 860px){
  header.site{height:auto}
  header.site .nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;padding-left:20px;padding-right:20px}
  /* hide SVG stroke animations on small/touch devices */
  .links a svg.link-outline{display:none}
  /* Mobile layout: hide desktop links, make brand flow inline */
  .links{display:none !important}
  header.site .nav a.brand{position:static;left:auto;bottom:auto;transform:none;z-index:2;display:flex;align-items:center}
  /* ensure burger is visible and reachable on mobile */
  .burger{display:grid;margin-left:auto;z-index:60;position:relative}
}

/* ========== HERO (světlejší, jasnější barvy) ========== */
.hero{
  position:relative;
  padding: clamp(90px, 11vh, 150px) 0 clamp(40px, 8vh, 80px);
  min-height: 68vh;
  background-image:
    linear-gradient(180deg, rgba(10,10,20,.40) 0%, rgba(10,10,20,.38) 28%, rgba(10,10,20,.55) 100%),
    url("/assets/bg_futuristic.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
/* Jemný zlatý efekt + vignetting */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 30% -18%, rgba(160,123,66,.15), transparent 60%),
    linear-gradient(90deg, rgba(10,10,20,0.40) 0%, rgba(10,10,20,0.12) 45%, rgba(10,10,20,0.50) 100%);
}
@media (min-width: 992px){
  .hero{ background-attachment: fixed; }
}
.hero h1{
  font-size:clamp(2.2rem,4vw,3rem);
  background:linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:10px;
}
.hero p{color:#e0e3f3;max-width:70ch}
.hero-cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.hero-cta .btn{
  background: linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  color: var(--bg);
  font-weight: 700;
  border: none;
  transition: all .2s ease;
}
.hero-cta .btn:hover{
  background: linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  filter: brightness(1.15) contrast(1.1) drop-shadow(0 0 12px rgba(160,123,66,0.4));
}

/* ========== OBSAH / KARTY / GRID ========== */
section{padding:42px 0}

/* Nadpisy se zlatým gradientem */
h1, h2.section, .card-header h2{
  font-size:clamp(2.2rem,4vw,3rem);
  background:linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 8px rgba(160,123,66,0.3));
  margin-bottom:1.5rem;
}
h2.section{font-size:1.6rem;margin:0 0 8px}
.card-header h2{
  font-size:1.4rem;
  margin:0;
  padding:0.5rem 0;
  filter:drop-shadow(0 0 6px rgba(160,123,66,0.2));
}

/* Nadpisy karet */
.card h3 {
  background:linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:6px 0;
}

p.sub{color:var(--muted);margin:0 0 16px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:760px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:rgba(32,32,56,.92);
  border:1px solid var(--brand-start);
  border-radius:16px;
  box-shadow:0 0 12px var(--brand-glow);
  transition:all .3s ease;
  padding:18px;
  position: relative;
  overflow: visible;
}
.card > * {
  position: relative;
  z-index: 1;
}
.card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background: linear-gradient(145deg, transparent, rgba(160,123,66,0.05));
  pointer-events: none;
  z-index: 0;
}
.card:hover{
  transform:translateY(-3px);
  border-color: var(--brand);
  box-shadow:0 0 22px var(--brand-glow);
}

.card-header {
  border-bottom: 1px solid var(--brand-start);
  margin: -18px -18px 18px -18px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(160,123,66,0.1), transparent);
}

.muted{color:#c9cbe0}

/* ========== PROCES ========== */
.process-grid {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}

.process-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem;
}

.process-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--brand-start), var(--brand) 50%, var(--brand-end));
  border-radius: 50%;
  font-weight: bold;
  color: var(--bg);
  font-size: 1.2rem;
  margin-top: 0.25rem;
}

.process-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}

.process-content p {
  margin: 0;
  color: var(--muted);
}

.payment-methods {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(160,123,66,0.1);
  border-radius: var(--button-radius);
  font-size: 0.9rem;
}

.payment-method svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

/* ========== KONTAKT ========== */
.contact-card {
  padding: 2rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-style: normal;
  margin-top: 1rem;
}

.contact-wrapper {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 0.75rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(160,123,66,0.1), transparent);
  position: relative;
}

.contact-wrapper:hover {
  background: linear-gradient(135deg, rgba(160,123,66,0.2), rgba(160,123,66,0.05));
}

.contact-text {
  user-select: all;
  cursor: text;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.contact-text:hover {
  background: rgba(160,123,66,0.1);
}

.contact-link {
  text-decoration: none;
  color: var(--brand);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.contact-link:hover {
  transform: scale(1.1);
}

.contact-item {
  user-select: text;
  cursor: text;
  display: flex;
  align-items: center;
}

.contact-link svg, .contact-item svg {
  color: var(--brand);
  flex-shrink: 0;
}

/* Speciální styly pro mobilní zařízení */
@media (max-width: 768px) {
  .contact-link[href^="tel:"] {
    background: linear-gradient(135deg, rgba(160,123,66,0.15), rgba(160,123,66,0.05));
    padding: 1rem;
    font-size: 1.2rem;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .contact-link[href^="tel:"]:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(160,123,66,0.25), rgba(160,123,66,0.1));
  }
  
  .contact-link[href^="tel:"] svg {
    width: 28px;
    height: 28px;
  }
}

/* ========== TABULKY & PATIČKA ========== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--brand-start);
  background:rgba(32,32,56,.92);
  box-shadow:0 0 12px var(--brand-glow);
}
.table th,.table td{
  padding:14px;
  border-bottom:1px solid rgba(160,123,66,.15);
  text-align:left
}
.table thead th{
  background:linear-gradient(145deg, rgba(32,32,56,.98), rgba(160,123,66,0.05));
  color:var(--brand);
  border-bottom:1px solid var(--brand-start);
}
footer{background:#131322;border-top:1px solid var(--border);color:#bdbfe0;padding:28px 0;text-align:center}
footer small{color:#a6a8c7}