/* ==========================================================================
   CrimsonFrame (cf-) — Full stylesheet
   Layout: single wide column
   Nav: centered pills with bg-fade, wraps on small widths (no overflow)
   Type: sans system stack
   Container width uses px (not ch) to avoid menu-induced "shrink"
   ========================================================================== */

/* --- 0) Root tokens ------------------------------------------------------ */
:root{
  /* Color tokens (vivid red with a hint of blue/purple) */
  --cf-primary: #d3164f;
  --cf-primary-600: #c01449;
  --cf-primary-700: #a41240;
  --cf-primary-800: #8c1037;

  --cf-bg-deep: #101319;          /* slate-night base */
  --cf-bg-surface: #151a22;       /* surface card */
  --cf-ink: #f5f7fb;              /* main text */
  --cf-ink-muted: #cfd6e3;        /* secondary */
  --cf-ink-soft: #aab3c2;         /* tertiary */

  /* Layout + rhythm */
  --cf-container: 1100px;         /* unified max width across header/main/footer */
  --cf-gx: 20px;                  /* side padding */
  --cf-ry: 18px;                  /* rhythm unit */

  /* Radius & shadows */
  --cf-r-1: 6px;
  --cf-r-2: 10px;
  --cf-shadow-rim: 0 0 0 1px rgba(211,22,79,.35);
  --cf-shadow-soft: 0 10px 30px rgba(0,0,0,.28);

  /* Borders / lines */
  --cf-hair: 1px dotted rgba(255,255,255,.18);

  /* Nav pills */
  --cf-pill-bg: rgba(255,255,255,.06);
  --cf-pill-bg-hover: rgba(211,22,79,.18);

  /* Links */
  --cf-link-underline: rgba(255,255,255,.35);
}

/* --- 1) Reset + base ----------------------------------------------------- */
html{ box-sizing: border-box; }
*,*::before,*::after{ box-sizing: inherit; }

html, body{
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 500px at 100% -50%, rgba(211,22,79,.18), transparent 60%),
              radial-gradient(900px 500px at -20% 0%, rgba(104,16,160,.12), transparent 55%),
              var(--cf-bg-deep);
  color: var(--cf-ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }

/* --- Paragraph justification (MANDATORY, high specificity + !important) -- */
article p,
section p,
main p,
p{
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;
}

/* --- 2) Global containers (unified width) -------------------------------- */
.cf-header,
.cf-main,
.cf-footer{
  max-width: var(--cf-container);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--cf-gx);
}

/* --- 3) Header + Brand + Nav -------------------------------------------- */
.cf-header{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: calc(var(--cf-ry) * 1.25);
  flex-wrap: wrap; /* key: menu can wrap instead of overflowing/shrinking */
}

.cf-brand{ flex: 0 0 auto; }
.cf-brand img{
  display: block;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Nav: center pills, wrap allowed, no overflow */
.cf-nav{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center; /* center overall */
  flex-wrap: wrap;         /* allows wrapping on narrow widths */
  margin-left: auto;       /* on wide screens, brand left / nav to the right side */
  min-width: 0;
  max-width: 100%;
}

.cf-nav a{
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--cf-ink);
  background: var(--cf-pill-bg);
  backdrop-filter: saturate(120%) blur(0.4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  white-space: normal;         /* IMPORTANT: allow wrapping, prevents overflow */
}

.cf-nav a:hover{
  background: var(--cf-pill-bg-hover);
  box-shadow: inset 0 0 0 1px rgba(211,22,79,.45), 0 6px 18px rgba(211,22,79,.15);
  transform: translateY(-1px);
}

.cf-nav a:active{ transform: translateY(0); }

/* --- 4) Main content ----------------------------------------------------- */
.cf-main{
  padding-bottom: calc(var(--cf-ry) * 3);
}

h1{
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  letter-spacing: .2px;
  margin: 0 0 calc(var(--cf-ry) * 1);
}

.cf-dek{
  color: var(--cf-ink-muted);
  font-size: clamp(16px, 2.2vw, 18px);
  margin: 0 0 calc(var(--cf-ry) * 1.2);
}

/* --- Hero image: exactly one content image per page, framed ---------------- */
.cf-media.cf-hero{
  margin: 0 0 calc(var(--cf-ry) * 1.5);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-radius: var(--cf-r-2);
  box-shadow: var(--cf-shadow-rim), var(--cf-shadow-soft);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
}

.cf-hero img{
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  border-radius: calc(var(--cf-r-2) - 4px);
  outline: 1px solid rgba(211,22,79,.45); /* thin crimson frame */
  outline-offset: -1px;
}

.cf-hero figcaption{
  color: var(--cf-ink-soft);
  font-size: 13px;
  padding: 8px 4px 2px;
}

/* --- Article + sections -------------------------------------------------- */
.cf-article{
  display: block;
  background: transparent;
}

.cf-section{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-radius: var(--cf-r-1);
  padding: calc(var(--cf-ry) * 1.1) calc(var(--cf-gx));
  margin: 0 0 calc(var(--cf-ry) * 1.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

.cf-section + .cf-section{
  border-top: var(--cf-hair); /* dotted separators language */
  padding-top: calc(var(--cf-ry) * 1.25);
}

.cf-section h2{
  margin: 0 0 6px;
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.3;
}

.cf-section h3{
  margin: 0 0 12px;
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--cf-ink-muted);
}

.cf-section p{
  margin: 0 0 14px;
}

/* --- Links + buttons ----------------------------------------------------- */
a{
  color: var(--cf-ink);
  text-decoration-color: var(--cf-link-underline);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover{
  color: #fff;
  text-decoration-color: rgba(211,22,79,.8);
}

/* Utility pill button (if used in content) */
.cf-btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--cf-primary);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(211,22,79,.25);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.cf-btn:hover{
  background: var(--cf-primary-600);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(211,22,79,.3);
}
.cf-btn:active{ transform: translateY(0); }

/* --- Footer -------------------------------------------------------------- */
.cf-footer{
  border-top: var(--cf-hair);
  color: var(--cf-ink-soft);
  font-size: 14px;
  padding-block: calc(var(--cf-ry) * 2);
  text-align: center;
}

/* --- Back to top (namespaced) ------------------------------------------- */
.cf-to-top{
  position: fixed;
  right: 18px; bottom: 18px;
  width: 42px; height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: var(--cf-primary);
  color: #111;
  font: 600 18px/42px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  z-index: 60;
}
.cf-to-top:hover{ background: #fff; }
.cf-to-top.cf-show{ opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce){ .cf-to-top{ transition: none; } }

/* --- 5) Responsive tweaks ------------------------------------------------ */
@media (max-width: 1180px){
  :root{ --cf-container: 1000px; }
}
@media (max-width: 1040px){
  :root{ --cf-container: 900px; }
}
@media (max-width: 940px){
  :root{ --cf-container: 820px; }
  .cf-nav{ gap: 8px; }
  .cf-nav a{ padding: 9px 12px; }
  .cf-section{ padding-inline: 16px; }
}
@media (max-width: 840px){
  :root{ --cf-container: 94vw; }
  .cf-header{ justify-content: center; }
  .cf-nav{ margin-left: 0; } /* center under brand when stacked */
}
@media (max-width: 520px){
  .cf-nav a{ padding: 8px 10px; }
  .cf-hero img{ max-height: 50vh; }
}

/* --- 6) Defensive fixes (no shrink, no overflow) ------------------------ */
.cf-header, .cf-main, .cf-footer, .cf-article, .cf-nav{
  min-width: 0;
}
.cf-nav{ overflow: visible; }  /* explicitly visible; wrap handles width */
.cf-nav a{ max-width: 100%; }

/* --- 7) Selection look (softened) --------------------------------------- */
::selection{ background: rgba(211,22,79,.25); color: #fff; }

/* --- Final Footer Refinement (CrimsonFrame / PhotoSphere Harmonization) --- */

/* Override global justification for the footer */
.cf-footer,
.cf-footer * {
  text-align: center !important;
}

/* Footer layout: column alignment, balanced vertical rhythm */
.cf-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--cf-ry) * 2.2);
  padding-bottom: calc(var(--cf-ry) * 2.2);
  background: var(--cf-bg-surface);
  border-top: 1px solid rgba(211,22,79,0.35);
  color: var(--cf-ink-soft);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4) inset;
}

/* Metrolagu Network (CrimsonFrame / PhotoSphere palette) */
.metrolagu-network {
  background: none;
  color: var(--cf-ink);
  padding: var(--cf-ry) 0;
}

.network-container {
  max-width: var(--cf-container);
  margin: 0 auto;
  padding: 0 var(--cf-gx);
}

.metrolagu-network h3 {
  font-size: 1.15em;
  margin-bottom: var(--cf-ry);
  color: #E47186; /* luminous rose accent */
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 4px rgba(228,113,134,0.3);
}

.metrolagu-network p {
  color: var(--cf-ink-soft);
  margin-bottom: 10px;
  line-height: 1.7;
  text-align: center;
}

/* Network links */
.network-links {
  text-align: center;
}

.network-links a {
  color: var(--cf-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.network-links a:hover {
  color: #E47186;
  border-bottom-color: #E47186;
  opacity: 0.85;
}

/* Copyright pill refinement */
.cf-footer .copyright,
.site-footer .copyright {
  display: inline-block;
  margin: 18px auto 6px auto;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  color: var(--cf-ink);
  background: rgba(21,26,34,0.85);
  padding: 8px 22px;
  border: 1.5px solid rgba(211,22,79,0.45);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(211,22,79,0.25);
  transition: all 0.3s ease;
}

/* Hover tone: subtle crimson bloom */
.cf-footer .copyright:hover {
  background: rgba(211,22,79,0.15);
  color: var(--cf-ink);
  border-color: rgba(211,22,79,0.6);
  box-shadow: 0 3px 16px rgba(211,22,79,0.35);
  transform: translateY(-1px);
}

/* Embedded link inherits tone */
.cf-footer .copyright a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}