/* assets/css/pages/update.css
   Styles for pages/update.php
   Includes safe offset for fixed header and responsive layout.
*/

/* ---------- variables ---------- */
:root{
  --content-max-width: 1000px;
  --content-gap: 22px;
  --text-color: #111827;
  --muted: #6b7280;
  --accent: #0b5ed7;
  --header-height: 84px; /* adjust if your header is taller/shorter */
}

/* ---------- page layout ---------- */
.update-article,
article.update-article {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + 20px) 18px 60px; /* top padding to avoid header overlap */
  box-sizing: border-box;
  color: var(--text-color);
  background: transparent;
}

/* provides smooth scroll offset if anchors used */
html { scroll-padding-top: var(--header-height); }

/* heading and meta */
.update-article h1,
article.update-article h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px;
  font-weight: 700;
}

.update-article .meta,
article.update-article .meta {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 14px;
}

/* hero image */
.update-article .hero,
article.update-article .hero,
.update-article img,
article.update-article img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.12);
  margin-bottom: 18px;
}

/* content area */
.update-article .content,
article.update-article .content {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-color);
}

/* keep images and embedded iframes responsive inside content */
.update-article .content img,
article.update-article .content img,
.update-article .content iframe,
article.update-article .content iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px 0;
}

/* small paragraph and link styles inside content */
.update-article .content p { margin: 0 0 16px; }
.update-article .content a { color: var(--accent); text-decoration: underline; }

/* narrow screens */
@media (max-width: 880px) {
  :root { --header-height: 72px; }
  .update-article,
  article.update-article { padding: calc(var(--header-height) + 12px) 14px 40px; }
  .update-article h1 { font-size: 22px; }
  .update-article .content { font-size: 16px; }
}

/* small phones */
@media (max-width: 420px) {
  :root { --header-height: 64px; }
  .update-article { padding-left: 12px; padding-right: 12px; }
  .update-article h1 { font-size: 20px; }
}

/* ----- Utility: align hero under transparent header ----- */
/* If your header is fixed and semi-transparent, add a subtle top gradient
   so image doesn't visually sit *behind* the header */
.update-article .hero-gradient {
  position: relative;
}
.update-article .hero-gradient::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: calc(var(--header-height));
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

/* small helper: center block quotes or embeds */
.update-article blockquote {
  margin: 18px 0;
  padding-left: 16px;
  border-left: 4px solid rgba(11,94,215,0.12);
  color: var(--muted);
}

/* print-friendly */
@media print {
  .update-article { padding-top: 20px; }
  .update-article .hero, .update-article img { box-shadow: none; max-height: none; }
}