/*
Theme Name: Delta-Ops
Theme URI: https://example.com/starscit-terminal
Author: ChatGPT
Author URI: https://chat.openai.com/
Description: Tmavá, terminálová WordPress šablona se sci-fi vzhledem, vhodná pro organizace a komunity.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: delta-ops
Tags: dark, sci-fi, responsive, bootstrap, elementor, terminal
*/

/* Root variables for terminal theme */
:root{
  --bg: #090c11;
  --bg-soft: #0b1118;
  --panel: #0f1622;
  --glow: #00e5ff;
  --glow-2: #6cf3ff;
  --accent: #2affd5;
  --text: #d7e7ff;
  --muted: #8aa4c6;
  --danger: #ff3b6b;
  --warning: #ffc857;
  --ok: #25f38a;
  --grid: rgba(255,255,255,0.04);
  --border: rgba(108, 243, 255, 0.25);
  --radius: 16px;
  --shadow: 0 0 30px rgba(0, 229, 255, 0.12), inset 0 0 40px rgba(0, 229, 255, 0.04);
}

/* Global reset & base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(circle at 25% 10%, rgba(0,229,255,0.08), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(42,255,213,0.06), transparent 40%),
              var(--bg);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.6;
}

/* Subtle grid overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.9) 80%);
  pointer-events:none;
  z-index:0;
}

/* Links */
a{ color: var(--glow); text-decoration: none; }
a:hover{ text-shadow: 0 0 12px var(--glow-2); }

/* Layout wrappers */
.wrapper{
  width:min(1100px, 92vw);
  margin: 0 auto;
  padding: 24px;
  position:relative;
  z-index:1;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(180deg, rgba(9,12,17,0.9), rgba(9,12,17,0.6));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:14px;
  padding: 18px 0;
}
.brand__logo{
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  display:grid; place-items:center;
}
.brand__title{ font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.brand__subtitle{ color:var(--muted); font-size:0.9rem }

/* Nav */
.nav{
  display:flex; gap:12px; flex-wrap:wrap;
  padding: 10px 0 18px 0;
}
.nav a{
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius: 12px;
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:12px;
  box-shadow: 0 0 12px rgba(0,229,255,0.25), inset 0 0 12px rgba(0,229,255,0.15);
  opacity:0; transition:opacity .2s ease;
}
.nav a:hover::after{ opacity:1; }

/* Terminal panels */
.panel{
  background:linear-gradient(180deg, var(--panel), rgba(15,22,34,0.8));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 18px 0;
}
.panel__title{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 12px 0; padding-bottom:10px;
  border-bottom:1px solid var(--border);
  text-transform:uppercase; letter-spacing: .08em;
  font-size: .95rem; color: var(--glow-2);
}
.panel__title .pulse{
  width:8px;height:8px;border-radius:999px;background:var(--ok);
  box-shadow:0 0 8px var(--ok);
  animation: pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow: 0 0 8px var(--ok)}
  50%{box-shadow: 0 0 22px var(--ok)}
  100%{box-shadow: 0 0 8px var(--ok)}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02));
  text-transform:uppercase; letter-spacing:.08em; font-size:.85rem;
}
.btn:hover{ box-shadow: var(--shadow); }

/* Content */
h1,h2,h3,h4{ letter-spacing:.04em }
h1{ font-size: clamp(1.8rem, 1.1rem + 2.5vw, 3rem); }
h2{ font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); }
h3{ font-size: 1.2rem; }
p{ color: #c9defa; }

/* Cards */
.card-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  border:1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(108,243,255,0.05), rgba(108,243,255,0.02));
  padding:16px;
  box-shadow: var(--shadow);
}
.card .meta{ color: var(--muted); font-size:.85rem; }

/* Forms */
input, textarea, select{
  width:100%; padding:12px 14px; color:var(--text);
  background: #0c1320; border: 1px solid var(--border); border-radius: 12px;
}
input:focus, textarea:focus, select:focus{ outline:none; box-shadow: var(--shadow); }

/* Footer */
.site-footer{
  margin-top:30px; padding: 26px 0 40px;
  border-top:1px solid var(--border);
  color: var(--muted);
}

/* WP alignment */
.alignwide{max-width:1200px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.wp-block-image img{border-radius:12px;border:1px solid var(--border)}

/* --- Bootstrap integration & wider layout --- */
.container-xxl{ max-width: 1400px; }

/* Use Bootstrap grid helpers where helpful; keep terminal vibes */
.mt-3{ margin-top:1rem }
.mb-3{ margin-bottom:1rem }

/* Override navbar colors for dark terminal look */
.navbar-dark .navbar-nav .nav-link{ color: var(--text); opacity:.9 }
.navbar-dark .navbar-nav .nav-link:hover{ color: var(--glow-2) }

/* Buttons align with theme */
.btn-outline-terminal{
  color: var(--glow);
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02));
}
.btn-outline-terminal:hover{
  color: var(--text);
  border-color: var(--glow-2);
  box-shadow: var(--shadow);
}

/* Card enhancements to play nice with Bootstrap cards if used */
.card.terminal{
  background: linear-gradient(180deg, rgba(108,243,255,0.05), rgba(108,243,255,0.02));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
}