/* ==========================================================================
   kevmiles.net — site styles
   Loaded after Bootstrap 4.6. Colours and fonts are defined once below;
   change them here and every page follows.
   ========================================================================== */

:root {
  --bg: #000;
  --panel: #222;
  --panel-light: #333;
  --text: #fff;
  --muted: #999;
  --accent: orange;
  --font-body: 'Quicksand', sans-serif;
  --font-heading: 'Carter One', cursive;
  --font-display: 'Amatic SC', cursive;
}

/* --- Base ----------------------------------------------------------------- */
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg) url("/Assets/backgroundImgXL.webp") no-repeat center center fixed;
}

p { color: var(--text); padding: 10px; }
a { color: var(--accent); }
a:hover { color: #ffb84d; }
label { color: var(--text); }

h1, h2, h3, .page-title { font-family: var(--font-heading); color: var(--text); }
.page-title { font-size: 1.5rem; text-align: center; margin: .5rem 0; }
.page-subtitle { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; padding: 0; margin: 0 0 .75rem; color: var(--muted); }
h5, .display-heading { font-family: var(--font-display); color: var(--text); font-size: 25px; }

.top-space { margin-top: 1%; }
.presentation { font-family: var(--font-display); font-size: 30px; text-align: center; }
.presentation a { text-decoration: none; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #000; padding: .5rem 1rem; z-index: 2000; }
.skip-link:focus { left: 1rem; }

/* --- Header / nav ----------------------------------------------------------- */
.site-nav { background-color: var(--panel); }
.site-nav .navbar-brand { color: var(--text); }
.site-nav .navbar-brand .description { display: block; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.dropdown-item.active, .dropdown-item:active { color: var(--accent); background-color: #007bff; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--accent); background-color: #f8f9fa; }

/* --- Content panel ---------------------------------------------------------- */
.content-panel {
  padding: .5rem 1rem;
  margin: 1% 0 .5rem;
  border-radius: .3rem;
  box-shadow: 0 4px 8px -1px rgba(0,0,0,.2), 0 8px 10px 0 rgba(0,0,0,.14), 0 2px 20px 0 rgba(0,0,0,.12);
}
.jumbotron-secondary { padding: .5rem 1rem; margin-bottom: .5rem; border-radius: .3rem; }

/* --- Home: carousel --------------------------------------------------------- */
.hero-frame { background-color: var(--panel-light); padding: .5%; border-radius: .3rem; margin-bottom: 2rem; }
.hero-frame img { width: 100%; height: auto; border-radius: .2rem; }

/* --- Home: intro + pillars -------------------------------------------------- */
.intro .photo { width: 80%; height: auto; max-width: 180px; border-radius: 15px; }
.pillar img { width: 50%; }
.pillar .btn { margin: .5rem 0; }
.cta-row { text-align: center; margin: .5rem 0 1rem; }

/* --- About ------------------------------------------------------------------ */
.about-photo { width: 100%; height: auto; max-width: 230px; border: 1px solid var(--text); padding: .5%; margin: 10px auto; display: block; }

/* --- Experience page -------------------------------------------------------- */
.cv { max-width: 760px; margin: 0 auto 1rem; }
.cv-entry { padding: .5rem 0 .75rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.cv-entry:last-child { border-bottom: 0; }
.cv-entry h5 { margin: 0; padding: 0 10px; }
.cv-entry .cv-meta { color: var(--muted); padding: 0 10px; margin: 0 0 .25rem; font-size: .95rem; }
.cv-entry p { padding: 0 10px; margin: 0 0 .25rem; }
.cv-entry .cv-topics { margin: .25rem 0 0; }
.cv-role { margin: .5rem 0 .5rem 10px; padding-left: .9rem; border-left: 2px solid rgba(255,255,255,.25); }   /* several roles at one company */
.cv-role .cv-role-title { font-weight: 700; margin: 0; }
.cv-role .cv-role-title .cv-meta { display: inline; font-weight: 400; margin-left: .4rem; padding: 0; }
.cv-linkedin { margin-top: 1rem; }

/* --- Prose (project write-ups) ---------------------------------------------- */
.prose p { padding: .25rem; margin-bottom: .75rem; text-align: left; }
@media (min-width: 768px) {
  .prose { column-count: 2; column-gap: 2rem; }
  .prose p { break-inside: avoid; text-align: justify; }
  .prose-single { column-count: 1; }   /* add to a .prose block to keep it in one column */
}

/* --- Video / hero image ----------------------------------------------------- */
.video-tabs { margin: .5rem 0 0; gap: .35rem; }
.video-tabs .nav-link { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; padding: .4rem .9rem .3rem; color: var(--text); border: 1px solid var(--muted); border-radius: .3rem; }
.video-tabs .nav-link:hover { border-color: var(--accent); color: var(--accent); }
.video-tabs .nav-link.active { background: none; border-color: var(--accent); color: var(--accent); }
.video-wrap {
  width: 100%;
  max-width: 660px;
  margin: 10px auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--text);
  padding: .5%;
  background: #000;
}
.video-wrap iframe, .video-wrap img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* --- Fact box + highlights -------------------------------------------------- */
.section-heading { font-family: var(--font-heading); font-size: 1.25rem; text-align: center; margin: 0 0 .75rem; }

.fact-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  max-width: 900px;
  margin: 1.75rem auto 2.5rem;
  padding: .6rem 1rem .4rem;
  border: 1px solid var(--text);
  border-radius: .3rem;
}
.fact-box > div { text-align: center; min-width: 100px; }
.fact-box dt { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--accent); }
.fact-box dd { margin: .15rem 0 0; font-size: .95rem; }

.highlights { list-style: none; max-width: 900px; margin: 0 auto 2.5rem; padding: 0 .5rem; }
.highlights li { padding: .2rem .5rem .2rem 1.5rem; position: relative; }
.highlights li::before { content: "▸"; color: var(--accent); position: absolute; left: .4rem; }
.highlights ul { list-style: none; padding: .25rem 0 0 1.25rem; margin: 0; }
.highlights ul li::before { content: "–"; }

/* --- Tiles (store links, game listings) ------------------------------------- */
.prose-row + .row { margin-top: 2.5rem; }   /* same gap as between the overview bullets and the text */
.tile {
  display: flex;               /* column layout so the button lines up across tiles */
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--text);
  border-radius: .25rem;
  padding: .5%;
  margin: 10px;
}
.tile .store-icon { width: 75%; height: auto; background: var(--muted); padding: 1%; border-radius: .3rem; margin-bottom: 2rem; }
.tile p { width: 100%; }
.tile .btn { margin-top: auto; margin-bottom: .5rem; }

/* --- Contact ---------------------------------------------------------------- */
.form-error { color: #ff5c5c; }
.form-success { color: #5cd65c; }
.form-failure { color: #ff5c5c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.social img { width: 56px; height: 56px; margin: 0 .35rem; }
.social p { margin: 0; padding: 10px 10px 4px; }

/* --- Footer ----------------------------------------------------------------- */
.site-footer { color: var(--muted); text-align: center; padding: 1rem 0 1.5rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }