/* ============================================================
   Sentinel Combatives — Ghost theme styles
   Base look is inline in the .hbs templates so pages paint fast.
   This file holds what inline styles can't: resets, :hover states,
   the mobile breakpoint, and article ({{content}}) typography.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #1a1c1e;
  color: #e8e9ea;
  font-family: 'Barlow', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
a { color: inherit; }
.sc-content { flex: 1 0 auto; }
::selection { background: var(--accent); color: #131517; }

/* ---- hover states (touch devices ignore these) ---- */
.sc-nav-desktop .sc-nav-lnk {
  color: #a0a4a8; text-decoration: none; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; font-size: 13.5px; letter-spacing: .1em; font-weight: 500;
  transition: color .15s ease;
}
.sc-nav-desktop .sc-nav-lnk:first-child { color: #a0a4a8; }
.sc-nav-desktop .sc-nav-lnk.is-active { color: #f3f4f5; }
.sc-nav-desktop .sc-nav-lnk:hover { color: var(--accent); }
.sc-nav-mobile .sc-nav-lnk {
  color: #cdd0d3; text-decoration: none; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; font-size: 15px; letter-spacing: .1em; font-weight: 500;
  padding: 15px 22px; border-bottom: 1px solid #2c3033;
}
.sc-nav-mobile .sc-nav-lnk.is-active { color: #f3f4f5; }
.btn-amber { transition: filter .15s ease; }
.btn-amber:hover { filter: brightness(1.12); }
.btn-green { transition: background .15s ease; }
.btn-green:hover { background: #7cbb4d; }
.btn-ghost { transition: border-color .15s ease; }
.btn-ghost:hover { border-color: var(--accent); }
.card { transition: border-color .15s ease; }
.card:hover { border-color: #3c4955 !important; }
.soc { transition: background .15s ease, color .15s ease; }
.soc:hover { background: #262a2e !important; color: var(--accent) !important; }
.amber-hover { transition: color .15s ease; }
.amber-hover:hover { color: var(--accent); }

/* ---- mobile-only elements hidden on desktop/tablet ---- */
.sc-burger { display: none; }
.sc-nav-mobile { display: none; }
.sc-mobile-map { display: none; }

/* ---- article body typography (Ghost {{content}} output) ---- */
.post-content { font-size: 17px; line-height: 1.75; color: #c8cacd; font-weight: 300; }
.post-content > * + * { margin-top: 1.3em; }
.post-content p { margin: 0; }
.post-content h2 {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: 24px; color: #f3f4f5; font-weight: 600; margin-top: 1.6em;
}
.post-content h3 {
  font-family: 'Oswald', sans-serif; font-size: 20px; color: #eef0f1; font-weight: 500; margin-top: 1.4em;
}
.post-content h4 { font-family: 'Oswald', sans-serif; font-size: 17px; color: #eef0f1; font-weight: 600; margin-top: 1.3em; text-transform: uppercase; letter-spacing: .03em; }
.post-content a { color: var(--accent); text-decoration: underline; }
.post-content ul, .post-content ol { margin-left: 1.2em; }
.post-content li { margin: .3em 0; }
.post-content img { width: 100%; border: 1px solid #2c3033; }
/* Koenig editor width classes — let wide/full images & cards break out of the text column */
.post-content .kg-width-wide { position: relative; width: 100%; }
.post-content .kg-width-wide img { width: 100%; }
.post-content .kg-width-full { position: relative; width: 100%; }
.post-content .kg-width-full img { width: 100%; }
@media (min-width: 761px) {
  .post-content .kg-width-wide { width: calc(100% + 120px); margin-left: -60px; }
  .post-content .kg-width-full { width: calc(100% + 160px); margin-left: -80px; }
}
.post-content figure figcaption { font-size: 13px; color: #8c9094; text-align: center; margin-top: 8px; }
.post-content blockquote {
  border-left: 3px solid var(--accent); padding-left: 18px; color: #e8e9ea; font-style: italic;
}
.post-content strong { color: #e8e9ea; font-weight: 600; }
.post-content hr { border: 0; border-top: 1px solid #2c3033; }
.kg-bookmark-card, .kg-embed-card { margin-top: 1.3em; }

/* ---- Ghost editor (Koenig) cards, tuned for the dark theme ---- */
.post-content .kg-callout-card {
  padding: 16px 20px; border-radius: 0; border: 1px solid #2c3033; background: #212427;
}
.post-content .kg-callout-card-accent {
  background: transparent !important; border: 0; padding: 0;
}
.post-content .kg-callout-card-accent .kg-callout-emoji { display: none; }
.post-content .kg-callout-card-accent .kg-callout-text {
  color: var(--accent) !important; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; font-size: 14px; line-height: 1.5;
}
.post-content .kg-callout-text { color: #e8e9ea; }
.post-content .kg-bookmark-container { background: #212427; border: 1px solid #2c3033; }
.post-content .kg-bookmark-title { color: #eef0f1; }
.post-content .kg-bookmark-description { color: #a0a4a8; }
.post-content .kg-gallery-image img { border: 1px solid #2c3033; }

/* ============================================================
   PHONES, portrait (<= 760px)  —  tablet/desktop untouched
   ============================================================ */
@media (max-width: 760px) {
  .sc-header-inner { padding: 12px 18px !important; }
  .sc-logo-img { height: 42px !important; }
  .sc-logo-sub { display: none !important; }
  .sc-nav-desktop { display: none !important; }
  .sc-burger { display: inline-flex !important; }
  .sc-nav-mobile.open { display: flex !important; }

  .sc-hero { height: auto !important; }
  .sc-hero-map { display: none !important; }
  .sc-hero-photo { -webkit-mask-image: none !important; mask-image: none !important; background-position: center 22% !important; }
  .sc-hero-scrim { background: linear-gradient(180deg, rgba(20,22,24,0.45) 0%, rgba(20,22,24,0.88) 100%) !important; }
  .sc-hero-inner { padding: 52px 20px !important; }
  .sc-hero h1 { font-size: 31px !important; }
  .sc-hero p { font-size: 15.5px !important; }

  .sc-mobile-map { display: block !important; }

  .sc-body { grid-template-columns: 1fr !important; gap: 40px !important; padding: 38px 18px 54px !important; }
  .sc-grid { grid-template-columns: 1fr !important; }
  .sc-aside { position: static !important; top: auto !important; }
  .sc-foot-inner { padding: 26px 18px !important; }
  .sc-article h1 { font-size: 30px !important; }
  .sc-pagination { gap: 10px !important; }
  .sc-pagination .btn-ghost { padding: 10px 14px !important; font-size: 12px !important; }
}