/* =========================================================
   FILE: /css/fgh.layout.css
   SYSTEM: FGH v2
   PURPOSE: Layout Geometry Authority
   Phase 9 — Canonical Rail Ownership
========================================================= */

/* =========================================================
   FGH v2 — CANONICAL COLOR TOKENS
========================================================= */

:root {
  /* --- chromatic set --- */
  --fgh-red: #a32020;
  --fgh-ora: #c46210;
  --fgh-yel: #b59a00;
  --fgh-gre: #2f7a3e;
  --fgh-blu: #014886;
  --fgh-ind: #3f3c88;
  --fgh-vio: #6a3fa0;

  /* --- neutrals --- */
  --fgh-blk: #000000;
  --fgh-gra: #555555;
  --fgh-bro: #6b4a2c;
  --fgh-bro-strong: #4a2d17; /* heading brown */
}

/* =========================================================
   FGH v2 — EMPHASIS TOKENS (B / I / BI)
========================================================= */

.fgh-b {
  font-weight: 700;
}
.fgh-i {
  font-style: italic;
}
.fgh-bi {
  font-weight: 700;
  font-style: italic;
}

/* =========================================================
   FGH v2 — COLOR TOKENS (10 COLOR TAGS)
========================================================= */

/* chromatic */
.fgh-red {
  color: var(--fgh-red);
}
.fgh-ora {
  color: var(--fgh-ora);
}
.fgh-yel {
  color: var(--fgh-yel);
}
.fgh-gre {
  color: var(--fgh-gre);
}
.fgh-blu {
  color: var(--fgh-blu);
}
.fgh-ind {
  color: var(--fgh-ind);
}
.fgh-vio {
  color: var(--fgh-vio);
}

/* neutrals */
.fgh-blk {
  color: var(--fgh-blk);
}
.fgh-gra {
  color: var(--fgh-gra);
}
.fgh-bro {
  color: var(--fgh-bro);
}

/* =========================================================
   GLOBAL PAGE WORLD
========================================================= */

html,
body {
  margin: 0;
  padding: 0;
}

/* =========================================================
   MAIN LAYOUT CONTAINER
========================================================= */

.layout-main {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* =========================================================
   FRAME (MAX WIDTH GEOMETRY)
========================================================= */

.layout-frame {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

/* =========================================================
   ROW 1 — MOBILE DEFAULT (DOM ORDER)
========================================================= */

.layout-row-primary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;

  grid-template-areas:
    "sidebar"
    "post";
}

/* =========================================================
   PANEL PLACEMENT
========================================================= */

.panel-post {
  grid-area: post;
  min-width: 0;
  position: relative;
}

.panel-sidebar {
  grid-area: sidebar;
  min-width: 0;
}

/* =========================================================
   ROW 2 — COMMENTS FULL WIDTH
========================================================= */

.layout-row-secondary {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

/* =========================================================
   COMMENTS PANEL
========================================================= */

.panel-comments {
  width: 100%;
  min-width: 0;

  position: relative;
  display: block;
  height: auto;
}

/* =========================================================
   FLOW LAYER (READING PLANE SPACING)
========================================================= */

.fgh-content-rail {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

.panel-sidebar .fgh-content-rail {
  width: fit-content;
  margin-inline: auto;
}

/* =========================================================
   DESKTOP GRID
========================================================= */

@media (min-width: 768px) {
  .layout-row-primary {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas: "post sidebar";
  }
}

/* =========================================================
   SMALL MOBILE BREATHING ROOM
========================================================= */

@media (max-width: 767px) {
  .layout-frame {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .panel-sidebar .fgh-content-rail {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .panel-sidebar .max-w-xs {
    max-width: 100% !important;
  }
}

#fgh-site-footer {
  min-height: 00px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  font-style: italic;
  background: rgba(120, 120, 120, 0.3);
}