/*
Theme Name: Bravo Story
Theme URI: https://example.com/bravo-story
Author: You
Description: Modernes, minimalistisches Comic-Outline-Theme in Schwarz–Weiß–Gelb.
Version: 1.0.0
Text Domain: bravo-story
*/

:root{
  --color-black:#000000;
  --color-charcoal:#1E1E1E;
  --color-white:#FFFFFF;
  --color-offwhite:#F5F5F5;
  --color-yellow:#F9A800;
  --color-yellow-soft:#FFD24A;

  --font-display: 'Bangers', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-text: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1100px;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Reset/Grundlayout */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: var(--font-text);
  color: var(--color-charcoal);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.container{ max-width:var(--maxw); margin:0 auto; padding:24px; }

/* Header */
.site-header{
  background: var(--color-white);
  border-bottom: 4px solid var(--color-yellow);
}
.brand{
  display:flex; align-items:center; gap:18px; padding:18px 0;
}
.brand-logo{
  width:52px; height:52px; border-radius:50%;
  background: var(--color-yellow);
  display:grid; place-items:center; color:var(--color-black);
  font-weight:700;
}
.custom-logo{ max-width: 6em;}
.site-title{
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 62px);
  letter-spacing: .5px;
  color: var(--color-white);                       /* Füllung weiß */
  -webkit-text-stroke: 3px var(--color-black);     /* Outline */
  text-shadow:
     1px 1px 0 var(--color-black),
    -1px 1px 0 var(--color-black),
     1px -1px 0 var(--color-black),
    -1px -1px 0 var(--color-black);                /* Fallback Outline */
  line-height:1;
  margin:0;
}
.site-description{
  margin:6px 0 0 0;
  color: var(--color-black);
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.08em;
}

/* Navigation */
.main-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; }
.main-nav a{
  display:inline-block; padding:10px 14px; border-radius:999px;
  text-decoration:none; color:var(--color-black); font-weight:600;
  border:2px solid var(--color-black); background: var(--color-white);
}
.main-nav a:hover, .main-nav .current-menu-item a{
  background: var(--color-yellow); border-color: var(--color-black);
}

/* Content Cards */
.card{
  background: var(--color-offwhite);
  border:2px solid var(--color-black);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px; margin:22px 0;
}
.card h2 a{ color:var(--color-black); text-decoration:none; }
.card h2 a:hover{ color:var(--color-yellow); }

/* Buttons & Links */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:3px solid var(--color-black); background: var(--color-yellow);
  color:var(--color-black); font-weight:800; text-decoration:none;
}
.btn:hover{ background: var(--color-yellow-soft); }

/* Footer */
.site-footer{
  background: var(--color-charcoal); color: var(--color-white);
  border-top:4px solid var(--color-yellow);
  padding:24px 0; margin-top:40px;
}
.site-footer a{ color: var(--color-yellow-soft); text-decoration:none; }
.site-footer a:hover{ color: var(--color-yellow); }

/* Images */
img{ max-width:100%; height:auto; border-radius:10px; }

/* Accessibility: Fokus sichtbar */
a:focus, button:focus{ outline:3px dashed var(--color-yellow); outline-offset:2px; }