/*
Theme Name: S4O Theme
Author: Hinnerk Weiler
Version: 1.0.0
Text Domain: s4otheme
Description: Minimal Bootstrap landing theme for the sailing4oxygen project page.
*/

@font-face {
  font-family: "Amulya";
  src: url("fonts/Amulya/Amulya-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amulya";
  src: url("fonts/Amulya/Amulya-VariableItalic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Core palette */
  --neon-full:    rgb(0, 222, 1); /*#00DE01;  /* neon full */
  --neon-soft:    rgb(153, 241, 153); /* #99F199;  /* neon soft */
  --deep:         rgb(8, 45, 48); /* #020C10;  /* deep */
  --dark-type:    rgb(13, 73, 94); /*#0D495E;  /* dark type */
  --surface:      rgb(22, 122, 157); /* #167A9D;  /* surface */
  --spindrift:    rgb(244, 252, 255); /* #F4FCFF;  /* spindrift */
  --box-bg:       #F6FAFE; /* box background */
  --box-graphics: #C7DEE5; /* box graphics */
  --mist:         rgba(244,252,255,.12);

  /* Bootstrap tokens */
  --bs-body-bg: #0C121A; /* vom PDF */
  --bs-body-color: var(--spindrift);
  --bs-border-color: rgba(244,252,255,.10);
  --bs-link-color: var(--surface);
  --bs-link-hover-color: var(--neon-soft);

  /* Typography */
  --bs-body-font-family: "Amulya", sans-serif;
  --bs-body-line-height: 1.55;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

html, body {
  background:
    radial-gradient(900px 600px at 15% 10%, rgb(from var(--neon-soft) r g b / 0.17), transparent 60%),
    radial-gradient(800px 500px at 85% 0%, rgb(from var(--deep) r g b / 0.08), transparent 55%),
    linear-gradient(180deg, #0C121A, var(--deep) 70%, var(--deep) 90%);
  min-height: 100%;
}

body{
  letter-spacing: .2px;
}

/* Subtle “research UI” feel */
.container {
  max-width: 1100px;
}

/* Navbar */
.navbar{
  background: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244,252,255,.08);
}

.navbar-brand{
  letter-spacing: .3px;
}

.nav-link{
  opacity: .88;
}
.nav-link:hover{
  opacity: 1;
}

/* Hero-ish headings */
h1, .display-4, .display-5{
  text-wrap: balance;
  letter-spacing: -0.6px;
}
.lead{
  color: rgba(255,255,255,.72) !important;
}

/* Cards / panels */
.card, .bg-body-tertiary, .border, .list-group-item{
  background-color: rgba(13,73,94,.20) !important;
  border-color: rgba(244,252,255,.10) !important;
}

.rounded-4{
  border-radius: 1.1rem !important;
}

.shadow-soft{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 20px 60px rgba(0,0,0,.45);
}

/* Buttons: sea-glass accent */
.btn-primary{
  --bs-btn-bg: var(--neon-soft);
  --bs-btn-border-color: var(--neon-soft);
  --bs-btn-hover-bg: var(--neon-full);
  --bs-btn-hover-border-color: var(--neon-soft);
  --bs-btn-color: var(--deep);
  font-weight: 600;
}

.btn-outline-secondary{
  --bs-btn-color: rgba(255,255,255,.82);
  --bs-btn-border-color: rgba(255,255,255,.18);
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: rgba(255,255,255,.22);
}

blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding: 1.8rem 2rem 1.8rem 2.5rem;
  background: linear-gradient(
      180deg,
      rgba(0,222,1,.05),
      rgba(22,122,157,.04)
    );
  border-left: 4px solid var(--surface);
  border-radius: 1rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(255,255,255,.92);
}

/* Big decorative quote mark */
blockquote::before {
  content: "“";
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 4rem;
  line-height: 1;
  font-weight: 600;
  color: var(--neon-soft);
  pointer-events: none;
}

/* Citation / footer */
blockquote cite,
blockquote footer {
  display: block;
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  letter-spacing: .3px;
}

/* Links in content */
.content a{
  text-decoration: none;
  border-bottom: 1px solid rgba(22,122,157,.35);
}
.content a:hover{
  border-bottom-color: rgba(22,122,157,.65);
}

/* Footers feel like “institutional” rather than “bloggy” */
footer{
  background: rgba(0,0,0,.45);
  border-top: 1px solid rgba(244,252,255,.08) !important;
}

/* Optional: nicer text selection */
::selection{
  background: rgba(0,222,1,.22);
}

/* Stats – mono figures & labels */
.stats-strip .display-6 {
  font-family: var(--font-mono);
  letter-spacing: -0.5px;
}
.stats-strip .small {
  font-family: var(--font-mono);
}

/* Post meta (date, author, categories) */
article header .text-secondary {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .2px;
}

/* Post title */
.wp-block-post-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.6px;
  text-wrap: balance;
  color: var(--spindrift);
  background: linear-gradient(
    135deg,
    var(--spindrift) 40%,
    var(--neon-soft) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Featured post card */
.featured-card {
  position: relative;
  background: var(--box-bg);
  border: 1px solid var(--surface);
  border-top-left-radius: 0 !important;
}

.featured-card__logo {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(244,252,255,.10);
  border-top-left-radius: 1.1rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: .6rem;
  display: grid;
  place-items: center;
  padding: 10px;
}

.featured-card__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--surface);
  margin-bottom: .75rem;
}

.featured-card__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-wrap: balance;
  color: var(--surface);
  margin-bottom: 1rem;
}

.featured-card__excerpt p {
  color: var(--surface);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* Logos strip */

.logos-strip__container {
  background-color: var(--box-bg);
  border: var(--neon-full);
  border-radius: 1.1rem;
  padding: 1.5rem;
  margin:2rem;
}

.logos-strip__img {
  background-color: var(--box-bg);
  max-height: 200px;
  min-height: 100px;
  width: auto;
  max-width: 100%;
}

.logos-strip__img:hover {
  opacity: 1;
}

.mapbutton a {
  color: var(--dark-type);
  text-decoration: none;;
}
.mapbutton a:hover {
  color: var(--spindrift);
  text-decoration: underline;
}

/* ── Post list hero (index.php) ────────────────────────────────────────── */

.post-list-hero__label {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--surface);
  margin-bottom: .5rem;
}

.post-list-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.5px;
  text-wrap: balance;
  color: var(--spindrift);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .4em;
}

.post-list-hero__title img {
  height: 1em;
  width: auto;
  flex-shrink: 0;
  /* Convert black SVG strokes → --neon-soft (#99F199) */
  filter: invert(85%) sepia(23%) saturate(797%) hue-rotate(65deg) brightness(101%) contrast(103%);
}

.post-list-hero__sub {
  color: rgba(244, 252, 255, .55);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 0;
}

/* ── Post list cards (index.php) ───────────────────────────────────────── */

.post-list {
  max-width: 780px;
}

.post-card {
  padding: 1.75rem 2rem;
  background: rgba(13, 73, 94, .18);
  border: 1px solid rgba(244, 252, 255, .09);
  transition: background .2s ease, border-color .2s ease;
}

.post-card:hover {
  background: rgba(13, 73, 94, .30);
  border-color: rgba(22, 122, 157, .50);
}

.post-card__meta {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .25px;
  color: var(--surface);
  margin-bottom: .65rem;
}

.post-card__sep {
  margin: 0 .45em;
  opacity: .4;
}

.post-card__cat {
  color: var(--neon-soft);
}

.post-card__title {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: .55rem;
  line-height: 1.3;
}

.post-card__title a {
  color: var(--spindrift);
  text-decoration: none;
  transition: color .15s;
}

.post-card__title a:hover {
  color: var(--neon-soft);
}

.post-card__excerpt {
  color: rgba(244, 252, 255, .62);
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 1.1rem;
}

.post-card__excerpt p {
  margin-bottom: 0;
}

.post-card__more {
  font-family: var(--font-mono);
  font-size: .80rem;
  letter-spacing: .3px;
  color: var(--surface);
  text-decoration: none;
  transition: color .15s;
}

.post-card__more:hover {
  color: var(--neon-soft);
}

/* Thumbnail layout */
.post-card--has-thumb {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  overflow: hidden;
}

.post-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: 1.1rem 0 0 1.1rem;
}

.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.post-card:hover .post-card__img {
  transform: scale(1.04);
}

.post-card__body {
  padding: 1.75rem 2rem;

}

.hwwpfaq__question {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.25px;
  color: var(--spindrift);
  text-decoration: dotted underline;
}

.hwwpfaq__item {
margin-bottom: 2.5rem;

}

.hwwpfaq__category-title {
  color: var(--neon-soft);
  border-top: 1px solid;
}

/* Cards without a thumbnail keep their original padding */
.post-card:not(.post-card--has-thumb) .post-card__body {
  padding: 0;
}

@media (max-width: 600px) {
  .post-card--has-thumb {
    grid-template-columns: 1fr;
  }
  .post-card__thumb {
    height: 180px;
    border-radius: 1.1rem 1.1rem 0 0;
  }
}