/* JP Tech Bulletin — retro‑futuristic theme (see README for setup) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Rajdhani:wght@400;600;700&display=swap');
:root{--bg-deep:#0a0f1f;--bg-deeper:#070b17;--cyber-cyan:#00e5ff;--neon-magenta:#ff2bd6;--neon-purple:#7a5cff;--grid-cyan:rgba(0,229,255,0.18);--text-main:#072e6d;--text-dim:#9fb2d9;--accent-yellow:#f8ff6a;--card-bg:#ffffff;--border-glow:0 0 12px rgba(0,229,255,0.35), inset 0 0 12px rgba(0,229,255,0.08);--shadow-deep:0 30px 60px rgba(0,0,0,0.5)}
body.default{background-image:url/*('/images/bulletin-grid.svg')*/,radial-gradient(1000px 400px at 50% 0%, rgba(122,92,255,0.15), rgba(0,0,0,0) 60%);background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:center top,center top}
.ui.header,h1,h2,h3,h4{font-family:'Orbitron','Rajdhani',sans-serif !important;letter-spacing:.5px;color:var(--text-main);text-shadow:0 0 6px rgba(122,92,255,0.3)}
.bulletin-hero{text-align:center;padding:4rem 1rem 2rem;background:linear-gradient(180deg, rgba(0,229,255,0.08), rgba(0,0,0,0));border-top:1px solid var(--grid-cyan);border-bottom:1px solid rgba(122,92,255,0.25);box-shadow:inset 0 0 50px rgba(0,229,255,0.08)}
.bulletin-hero .title{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;background:linear-gradient(90deg,var(--cyber-cyan),var(--neon-purple),var(--neon-magenta));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(0,229,255,0.25)}
.bulletin-hero .subtitle{color:var(--text-dim);max-width:820px;margin:.5rem auto 0;font-size:1.15rem}
.bulletin-hero .rss-badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.5rem .75rem;border:1px solid var(--grid-cyan);border-radius:999px;text-decoration:none;color:var(--cyber-cyan);box-shadow:var(--border-glow)}
.bulletin-hero .rss-badge i{filter:drop-shadow(0 0 4px rgba(0,229,255,0.6))}
.ui.cards>.card,.ui.card{background:var(--card-bg)!important;border:1px solid rgb(255, 255, 255)!important;box-shadow:var(--shadow-deep),var(--border-glow)!important;backdrop-filter:blur(6px)}
.ui.cards>.card .header a,.ui.card .header a{color:var(--text-main)}
.neon-btn,.ui.button.neon{background:linear-gradient(90deg, rgba(0,229,255,0.15), rgba(255,43,214,0.15));color:var(--text-main)!important;border:1px solid var(--grid-cyan)!important;box-shadow:var(--border-glow)}
.neon-btn:hover,.ui.button.neon:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(0,229,255,0.5),0 0 22px rgba(255,43,214,0.4),inset 0 0 12px rgba(122,92,255,0.35)}
a:not(.item):not(.ui.button){color:var(--cyber-cyan)}
a:not(.item):not(.ui.button):hover{text-shadow:0 0 6px rgba(0,229,255,0.75)}
pre,code{background:rgba(10,16,34,0.8)!important;border:1px solid rgba(0,229,255,0.15)!important;color:#ccf6ff!important;text-shadow:0 0 4px rgba(0,229,255,0.2)}
.ui.divider.bulletin{height:4px;background:linear-gradient(90deg,var(--cyber-cyan),var(--neon-purple),var(--neon-magenta));opacity:.18;border:none}
footer.ui.segment{border-top:1px solid rgba(122,92,255,0.25)border-radius: 10px}
.centered{text-align:center}.max-w-800{max-width:800px;margin:0 auto}.px{padding-left:1rem;padding-right:1rem}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}


/* FORCE the container to be our flex row, not Semantic UI's defaults */
.ui.menu > .ui.container.nav-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .25rem !important;
  width: 100% !important;
  flex-wrap: nowrap !important;      /* prevent wrapping */
}
/* Left hugs left edge; right hugs right edge */
.bulletin-nav .nav-left  { display: flex !important; align-items: center !important; gap: .25rem !important; margin-right: auto !important; }
.bulletin-nav .nav-right { display: flex !important; align-items: center !important; gap: .25rem !important; margin-left:  auto !important; }

/* Logo is absolutely centered relative to the container */
.bulletin-nav .nav-center {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(50%) !important;
  top: 50% !important;
  transform-origin: center center;
  translate: -50% -50%;   /* centers vertically too */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto;
}

/* Sizing & anti-clipping */
.bulletin-logo img { height: 60px !important; width: auto !important; display: inline-block; }
.ui.menu .item > img:not(.ui) { max-height: none !important; }
.bulletin-nav .item { display: flex !important; align-items: center !important; padding-top: 1rem !important; padding-bottom: .55rem !important; }

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.content {
  padding: 20px;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
.footer {
  padding: 0px;
}

/* ---------- Readability boost (scoped to thank-you page) ---------- */
/* If you added class="thankyou-page" to the outer section */
.thankyou-page .ui.card,
.thankyou-page .ui.cards>.card {
  background: rgba(10, 16, 34, 0.96) !important; /* darker, more opaque */
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 16px rgba(0,229,255,0.15) !important;
  backdrop-filter: blur(4px);
}

/* Fallback: target the cards in the thank-you "Latest posts" section even without the class */
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card {
  background: rgba(10, 16, 34, 0.96) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 16px rgba(0,229,255,0.15) !important;
}

/* Card text & headings */
.thankyou-page .ui.card .content,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .content {
  color: #eaf3ff !important;
  line-height: 1.55;
}
.thankyou-page .ui.card .header,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .header {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0,229,255,0.25);
  font-weight: 700;
}

/* Make descriptions more legible */
.thankyou-page .ui.card .description,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .description {
  color: #c7d9ff !important;
  font-size: 1.02rem;
}

/* Ensure meta/date is readable */
.thankyou-page .ui.card .meta span,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .meta span {
  color: #9fb2d9 !important;
}

/* Image overlay for contrast (only if a featured image exists) */
.thankyou-page .ui.card .image,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .image {
  position: relative;
}
.thankyou-page .ui.card .image::after,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  pointer-events: none;
}

/* Buttons on cards: brighter outline + better hover */
.thankyou-page .ui.card .ui.button,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .ui.button {
  border: 1px solid rgba(0,229,255,0.45) !important;
  color: #01295e !important;
}
.thankyou-page .ui.card .ui.button:hover,
.ui.vertical.segment .ui.container h2.ui.header + .ui.cards .card .ui.button:hover {
  box-shadow: 0 0 18px rgba(0,229,255,0.6);
  transform: translateY(-1px);
}

/* Hero subtitle: brighter for readability */
.bulletin-hero .subtitle {
  color: #374c79 !important;
}

/* Optional: bump base font slightly on thank-you page */
.thankyou-page { font-size: 1.04rem; }

/* ---------- Readability boost for blog (list + single) ---------- */
.bulletin-blog .ui.card,
.bulletin-blog .ui.cards>.card {
  background: #6b6979 !important;
  border: 1px solid #f18f38 !important;
  box-shadow: 0 16px 40px rgb(15, 35, 37), 0 0 16px rgba(15, 35, 37, 0.15) !important;
  backdrop-filter: blur(4px);
}

/* Card text & headings */
.bulletin-blog .ui.card .content { color: #eaf3ff !important; line-height: 1.55; }
.bulletin-blog .ui.card .header { color: #000000 !important; text-shadow: 0 0 6px rgba(0,229,255,0.25); font-weight: 700; }
.bulletin-blog .ui.card .description { color: #000000 !important; font-size: 1.02rem; }
.bulletin-blog .ui.card .meta span { color: #9fb2d9 !important; }

/* Improve contrast on thumbnails */
.bulletin-blog .ui.card .image { position: relative; }
.bulletin-blog .ui.card .image::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0,0,0,0.55));
  pointer-events:none;
}

/* Buttons on cards */
.bulletin-blog .ui.card .ui.button {
  border: 1px solid rgba(0,229,255,0.45) !important;
  color: #06489e !important;
}
.bulletin-blog .ui.card .ui.button:hover {
  box-shadow: 0 0 18px rgba(0,229,255,0.6);
  transform: translateY(-1px);
}

/* Blog hero subtitle and post body readability */
.bulletin-blog .bulletin-hero .subtitle { color: #000000 !important; }
.bulletin-blog .content 
.bulletin-blog .ui.basic.segment.content { color: #ffffff !important; line-height: 1.65; }
.bulletin-blog .content p { color: #000000 !important; }

/* Optional: slightly larger base font on blog pages */
.bulletin-blog { font-size: 2rem; }

/* Blog list media sizing */
.bulletin-blog .ui.cards .card .image,
.bulletin-blog .ui.card .image {
  aspect-ratio: 16 / 9;       /* uniform shape */
  max-height: 220px;          /* keep cards compact */
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(0,229,255,.15);
}

@media (max-width: 900px) {
  .bulletin-blog .ui.cards .card .image,
  .bulletin-blog .ui.card .image { max-height: 180px; }
}

.bulletin-blog .ui.cards .card .image img,
.bulletin-blog .ui.card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* crops tall/wide images gracefully */
  display: block;
}

/* Play badge for video posters */
.card-play-badge {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.card-play-badge span {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  font-size: .85rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Responsive video wrapper on post pages */
.post-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.post-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Blog list media sizing */
.bulletin-blog .ui.cards .card .image,
.bulletin-blog .ui.card .image {
  aspect-ratio: 16 / 9;
  max-height: 220px;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(0,229,255,.15);
}
@media (max-width: 900px) {
  .bulletin-blog .ui.cards .card .image,
  .bulletin-blog .ui.card .image { max-height: 180px; }
}
.bulletin-blog .ui.cards .card .image img,
.bulletin-blog .ui.card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Play badge for video posters */
.card-play-badge {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.card-play-badge span {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  font-size: .85rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* --- Single post media rules --- */
/* Cap hero image height (keeps posts tidy) */
.bulletin-blog .post-hero-media img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
@media (max-width: 900px) {
  .bulletin-blog .post-hero-media img { max-height: 380px; }
}

/* Responsive video wrapper */
.post-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.post-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}