/* LoomLight style system (slug: ll-) — Rev B: wider layout + tabbed nav */
:root{
  --ll-primary: #f5f5f0; /* Misty white */
  --ll-ink: #121417;
  --ll-muted-ink: #3a3f45;
  --ll-surface: #ffffff;
  --ll-surface-2: #f7f7f4;
  --ll-border: rgba(0,0,0,0.12);
  --ll-accent: #b8c0cc;
  --ll-accent-2: #9fb3c8;
  --ll-focus: #6a9bcf;

  --ll-space-1: 6px;
  --ll-space-2: 10px;
  --ll-space-3: 16px;
  --ll-space-4: 22px;
  --ll-space-5: 30px;
  --ll-space-6: 44px;
  --ll-space-7: 60px;

  --ll-radius-s: 10px;
  --ll-radius-m: 16px;
  --ll-radius-l: 22px;

  --ll-shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03);
  --ll-shadow-2: 0 8px 18px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  /* Wider, responsive max width (was 74ch) */
  --ll-maxw: clamp(72ch, 92vw, 1200px);
}

/* Paper-grain + loom glow background */
body{
  margin:0;
  color: var(--ll-ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1400px 1000px at 90% 10%, rgba(255,255,255,0.6), transparent 65%),
    linear-gradient(180deg, #f9f9f6, #f3f3ef);
  background-attachment: fixed;
  font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

/* Paragraph justification rule (do not change) */
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;
}

/* Container */
.ll-container{
  max-width: var(--ll-maxw);
  margin: 0 auto;
  padding: var(--ll-space-6) var(--ll-space-4);
}

/* Header and nav */
.ll-header{
  position: sticky;
  top: 0;
  backdrop-filter: saturate(1.2) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.64));
  border-bottom: 1px solid var(--ll-border);
  z-index: 50;
}
.ll-brand{
  display:flex; align-items:center; gap: var(--ll-space-3);
  padding: var(--ll-space-3) 0 var(--ll-space-2);
}
.ll-brand img{ height: 40px; width:auto; display:block; }
.ll-brand .ll-site-title{ font-weight: 700; letter-spacing: 0.2px; color: var(--ll-ink); }

/* NAV — switched from pills to tabs with underline */
.ll-nav{
  display:flex; justify-content:center;
  padding: var(--ll-space-2) 0 var(--ll-space-3);
}
.ll-nav ul{
  list-style:none;
  display:flex;
  flex-wrap: wrap;                  /* allow wrapping cleanly */
  gap: var(--ll-space-2) var(--ll-space-2);
  margin:0; padding: 6px;           /* soft track around tabs */
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ll-border);
  border-radius: 12px;
  box-shadow: var(--ll-shadow-1);
}
.ll-nav a{
  position: relative;
  display: inline-flex;             /* better multi-line behavior */
  align-items: center;
  justify-content: center;
  min-height: 38px;                 /* touch-friendly height */
  padding: 10px 16px;
  text-decoration:none;
  line-height: 1.2;
  color: var(--ll-muted-ink);
  background: transparent;
  border: none;
  border-radius: 10px;
  transition: color .2s ease, transform .2s ease, background .2s ease;
  /* remove old pill shadows/borders */
  box-shadow: none;
}
.ll-nav a::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.ll-nav a:hover,
.ll-nav a:focus{
  color: #111;
  background: rgba(255,255,255,0.5);
  transform: translateY(-1px);
  outline: none;
}
.ll-nav a:hover::after,
.ll-nav a:focus::after,
.ll-nav a.ll-active::after{
  transform: scaleX(1);
}
.ll-nav a.ll-active{
  color: #111;
  font-weight: 600;
}

/* Article */
.ll-article{
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.92));
  border:1px solid var(--ll-border);
  border-radius: var(--ll-radius-l);
  box-shadow: var(--ll-shadow-1);
}
.ll-article header{ padding: var(--ll-space-5) var(--ll-space-5) var(--ll-space-3); }
.ll-article h1{ margin:0 0 var(--ll-space-3); font-size: clamp(28px, 3vw, 40px); letter-spacing: 0.2px; }
.ll-dek{ margin:0 0 var(--ll-space-4); color: var(--ll-muted-ink); font-size: clamp(16px, 1.8vw, 18px); }

/* Hero image */
.ll-hero{
  margin: 0 var(--ll-space-5) var(--ll-space-5);
  border-radius: var(--ll-radius-l);
  overflow: clip;
  border: 1px solid rgba(0,0,0,0.08);
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7) inset, 0 20px 40px rgba(0,0,0,0.12);
}
.ll-hero img{ display:block; width:100%; height:auto; max-height: 54vh; object-fit: cover; }
.ll-hero figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding: 10px 14px;
  font-size: 14px; color: #111;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.85));
}

/* Sections */
.ll-content{ padding: 0 var(--ll-space-5) var(--ll-space-6); }
.ll-content section{ padding: var(--ll-space-5) 0; border-top: 1px solid var(--ll-border); }
.ll-content section:first-of-type{ border-top: 0; }
.ll-content h2{ margin:0 0 var(--ll-space-3); font-size: clamp(21px, 2.5vw, 26px); }
.ll-content h3{ margin: var(--ll-space-3) 0 var(--ll-space-2); font-size: clamp(18px, 2vw, 22px); }

/* Footer */
.ll-footer{ margin-top: var(--ll-space-6); padding: var(--ll-space-5) var(--ll-space-4); text-align: center; color: var(--ll-muted-ink); }
.ll-footer .ll-foot-inner{ display:inline-block; padding: 8px 14px; background: rgba(255,255,255,0.6); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-s); }

/* Links */
a{ color: #1c4f8a; }
a:focus{ outline: 2px solid var(--ll-focus); outline-offset: 2px; border-radius: 6px; }

/* Back to top button */
.ll-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(--ll-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;
}
.ll-to-top:hover{ background: #fff; }
.ll-to-top.ll-show{ opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce){ .ll-to-top{ transition: none; } }

/* Responsive tweaks */
@media (max-width: 900px){
  .ll-nav ul{
    gap: 8px 10px;
    padding: 6px 8px;
  }
  .ll-nav a{
    padding: 10px 12px;
    min-height: 36px;
  }
}
@media (max-width: 780px){
  .ll-hero{ margin: 0 var(--ll-space-4) var(--ll-space-4); }
  .ll-content{ padding: 0 var(--ll-space-4) var(--ll-space-6); }
}

/* --- Footer Alignment & Styling Fix (LoomLight / MindMatrix adaptation) --- */

/* Ensure footer content is centered and not justified */
.ll-footer,
.ll-footer * {
  text-align: center !important;
}

/* Layout centering */
.ll-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ll-space-3);
  padding-top: var(--ll-space-5);
  padding-bottom: var(--ll-space-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  border-top: 1px solid var(--ll-border);
}

/* Metrolagu Network Section (LoomLight styling) */
.metrolagu-network {
  background: none;
  color: var(--ll-ink);
  padding: 24px 0;
}

.network-container {
  max-width: var(--ll-maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.metrolagu-network h3 {
  font-size: 1.15em;
  margin-bottom: 10px;
  color: var(--ll-muted-ink);
  font-weight: 600;
  text-align: center;
}

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

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

.network-links a {
  color: var(--ll-muted-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.network-links a:hover {
  color: #1c4f8a; /* subtle blue accent hover */
  border-bottom-color: #1c4f8a;
}

/* Copyright pill (centered, soft LoomLight theme) */
.site-footer .copyright,
.ll-footer .copyright {
  display: inline-block;
  margin: 16px auto 4px auto;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  color: var(--ll-ink);
  background: rgba(255,255,255,0.85);
  padding: 8px 22px;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

/* Hover tone and subtle lift */
.ll-footer .copyright:hover {
  background: #ffffff;
  color: #000;
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* Make link inside pill match hover tone */
.ll-footer .copyright a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}

/* --- Footer Alignment Fix (Override site-wide justification) --- */
.site-footer,
.site-footer * {
  text-align: center !important;
}

/* Ensure the copyright pill is centered */
.site-footer .copyright {
  display: inline-block;
  margin: 16px auto 4px auto; /* centers it horizontally */
}

/* Ensure footer container itself centers all its children */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}