/*
 * theme.css — additions layered on top of gitweb.css
 *
 * gitweb.css handles the chrome (page_header, page_nav, page_footer, title
 * bars, colours, dark/light toggle). This stylesheet adds the content-side
 * styling a working-group site needs: readable prose, tables of contents,
 * tagline, nav "current page" state, lists, and the process timeline.
 *
 * All rules reference the CSS custom properties defined in gitweb.css so
 * the light/dark toggle works without any extra work.
 */

/* ============================================================ */
/* Content layout                                                */
/* ============================================================ */

/* gitweb's default body uses 10px margin + a 1px border. That's fine on
   a git viewer where the whole page scrolls as one column. For a reading
   site we want comfortable line length. */
body {
	font-size: 15px;
	line-height: 1.55;
}

div.page_prose {
	padding: 16px;
	max-width: 80ch;
}

/* On wider screens let spec pages (which have denser content) use more
   room without feeling cramped. */
@media (min-width: 900px) {
	div.page_prose {
		padding: 20px 28px;
	}
}

/* ============================================================ */
/* Header extras                                                 */
/* ============================================================ */

.page_header_tagline {
	font-weight: normal;
	font-size: 72%;
	color: var(--fg-dim);
	font-style: italic;
	margin-left: 6px;
}

/* ============================================================ */
/* Navigation                                                    */
/* ============================================================ */

/* Current page in the nav — gitweb renders this as plain bold text,
   not a link. */
.page_nav_current {
	color: var(--fg);
	font-weight: bold;
}

/* ============================================================ */
/* Subtitle under page title                                     */
/* ============================================================ */

.page_subtitle {
	padding: 8px 16px;
	border-bottom: 1px solid var(--border);
	color: var(--fg-dark);
	font-style: italic;
	background-color: var(--bg);
}

/* ============================================================ */
/* Prose — headings, paragraphs, lists, code                     */
/* ============================================================ */

div.page_prose h1,
div.page_prose h2,
div.page_prose h3,
div.page_prose h4,
div.page_prose h5,
div.page_prose h6 {
	color: var(--fg);
	border-bottom: 1px solid var(--border);
	padding-bottom: 4px;
	margin-top: 1.8em;
	margin-bottom: 0.6em;
	font-weight: bold;
}

div.page_prose h1 { font-size: 150%; }
div.page_prose h2 { font-size: 130%; color: var(--green1); }
div.page_prose h3 { font-size: 115%; color: var(--cyan); border-bottom-style: dashed; }
div.page_prose h4 { font-size: 105%; color: var(--orange); border-bottom: none; }
div.page_prose h5 { font-size: 100%; color: var(--purple); border-bottom: none; }
div.page_prose h6 { font-size: 95%;  color: var(--magenta); border-bottom: none; }

/* Give the first heading more breathing room above the page */
div.page_prose > h1:first-child,
div.page_prose > h2:first-child,
div.page_prose > h3:first-child {
	margin-top: 0.6em;
}

/* ---- Self-linking headings (via render-heading.html hook) -----------
 *
 * The hook turns every in-content heading into:
 *
 *   <h2 id="foo" class="hx">
 *     <a class="heading-self"    href="#foo">Foo</a>
 *     <a class="heading-anchor"  href="#foo">¶</a>
 *   </h2>
 *
 * Goals:
 *   - The heading visually looks identical to a plain heading (same
 *     colour, no underline) — the entire heading text is clickable.
 *   - A "¶" mark appears in the left gutter on hover, giving a clear,
 *     copyable affordance. On touch devices, where there's no hover,
 *     it stays faintly visible so it's still discoverable.
 *   - Scrolling to a #fragment lands a few lines below the top so the
 *     heading isn't jammed against the page_nav bar above it.
 */

/* Smooth anchor jumps; offset target so it sits below the sticky-feeling
   page_header/page_nav region. */
html { scroll-behavior: smooth; }
div.page_prose h1.hx,
div.page_prose h2.hx,
div.page_prose h3.hx,
div.page_prose h4.hx,
div.page_prose h5.hx,
div.page_prose h6.hx {
	scroll-margin-top: 12px;
	position: relative;
}

/* The heading text link — invisible as a link, inherits the heading's
   own colour from the h1/h2/h3 rules above. */
div.page_prose .heading-self {
	color: inherit;
	text-decoration: none;
	border-bottom: none;
}

div.page_prose .heading-self:hover {
	text-decoration: none;
	/* subtle hint that the text is interactive */
	border-bottom: 1px dotted currentColor;
}

/* The ¶ sibling. Positioned in the left gutter so it doesn't shift
   the heading text. Faintly visible at rest on touch devices, fully
   visible on hover/focus on pointer devices. */
div.page_prose .heading-anchor {
	position: absolute;
	left: -1.1em;
	top: 0;
	width: 1em;
	color: var(--fg-dim);
	text-decoration: none;
	border-bottom: none;
	opacity: 0;
	transition: opacity 120ms ease-in;
	font-weight: normal;
	user-select: none;
}

/* Reveal the ¶ when hovering the whole heading line or focusing
   either link inside it (keyboard accessibility). */
div.page_prose h1.hx:hover .heading-anchor,
div.page_prose h2.hx:hover .heading-anchor,
div.page_prose h3.hx:hover .heading-anchor,
div.page_prose h4.hx:hover .heading-anchor,
div.page_prose h5.hx:hover .heading-anchor,
div.page_prose h6.hx:hover .heading-anchor,
div.page_prose .heading-anchor:focus,
div.page_prose .heading-self:focus + .heading-anchor {
	opacity: 1;
}

div.page_prose .heading-anchor:hover {
	color: var(--link-hover);
}

/* Highlight the heading briefly when it's the current #fragment target,
   so a fresh page-load on a deep link visibly "points at" the section. */
div.page_prose h1.hx:target,
div.page_prose h2.hx:target,
div.page_prose h3.hx:target,
div.page_prose h4.hx:target,
div.page_prose h5.hx:target,
div.page_prose h6.hx:target {
	background: var(--ref-bg);
	box-shadow: -8px 0 0 var(--ref-bg), 8px 0 0 var(--ref-bg);
}

div.page_prose h1.hx:target .heading-anchor,
div.page_prose h2.hx:target .heading-anchor,
div.page_prose h3.hx:target .heading-anchor,
div.page_prose h4.hx:target .heading-anchor,
div.page_prose h5.hx:target .heading-anchor,
div.page_prose h6.hx:target .heading-anchor {
	opacity: 1;
	color: var(--link);
}

/* On narrow screens there's no gutter — show ¶ inline after the
   heading text instead of left of it, slightly dimmed at rest. */
@media (max-width: 700px) {
	div.page_prose .heading-anchor {
		position: static;
		opacity: 0.35;
		margin-left: 0.4em;
	}
	div.page_prose h1.hx:hover .heading-anchor,
	div.page_prose h2.hx:hover .heading-anchor,
	div.page_prose h3.hx:hover .heading-anchor,
	div.page_prose h4.hx:hover .heading-anchor,
	div.page_prose h5.hx:hover .heading-anchor,
	div.page_prose h6.hx:hover .heading-anchor {
		opacity: 1;
	}
}

div.page_prose p {
	margin: 0.8em 0;
}

div.page_prose ul,
div.page_prose ol {
	padding-left: 1.6em;
	margin: 0.6em 0;
}

div.page_prose li {
	margin: 0.2em 0;
}

div.page_prose hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2em 0;
}

div.page_prose blockquote {
	border-left: 3px solid var(--magenta);
	background: var(--bg-hi);
	padding: 8px 14px;
	margin: 1em 0;
	color: var(--fg-dark);
}

/* Inline code + fenced blocks — echo gitweb's monospace-for-code feel
   using the cyan "sha1/code hints" accent. */
div.page_prose code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: 92%;
	color: var(--cyan);
	background: var(--bg-dark);
	padding: 1px 5px;
	border-radius: 3px;
	border: 1px solid var(--border);
}

div.page_prose pre {
	background: var(--bg-dark);
	border: 1px solid var(--border);
	border-left: 3px solid var(--green1);
	padding: 10px 12px;
	overflow-x: auto;
	font-size: 90%;
	line-height: 1.45;
}

div.page_prose pre code {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--fg);
	font-size: 100%;
}

/* Prose tables — used in the spec pages for packet field layouts etc. */
div.page_prose table {
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 93%;
	width: auto;
	padding: 0;
}

div.page_prose th,
div.page_prose td {
	border: 1px solid var(--border);
	padding: 5px 10px;
	text-align: left;
	vertical-align: top;
}

div.page_prose th {
	background: var(--bg-hi);
	color: var(--fg);
	font-weight: bold;
}

div.page_prose tr:nth-child(even) td {
	background: var(--bg-dark);
}

div.page_prose a {
	text-decoration: none;
	border-bottom: 1px dotted var(--link);
}

div.page_prose a:hover {
	border-bottom-style: solid;
	border-bottom-color: var(--link-hover);
}

div.page_prose a:visited {
	border-bottom-color: var(--link-visited);
}

/* ============================================================ */
/* Table of contents box                                         */
/* ============================================================ */

/* Styled like a gitweb "ref badge" area — bordered, slightly tinted,
   sits above the prose. */
div.page_toc {
	margin: 10px 16px 0;
	padding: 10px 14px 12px;
	background: var(--ref-bg);
	border: 1px solid var(--ref-bl);
	border-left: 3px solid var(--ref-bd);
	font-size: 93%;
	max-width: 80ch;
}

div.page_toc_head {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ref-fg);
	font-size: 80%;
	margin-bottom: 6px;
}

div.page_toc ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

div.page_toc ul ul {
	padding-left: 1.3em;
	margin: 2px 0;
}

div.page_toc li {
	margin: 2px 0;
	line-height: 1.45;
}

div.page_toc a {
	color: var(--link);
	text-decoration: none;
}

div.page_toc a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

/* ============================================================ */
/* Section cards on the homepage                                 */
/* ============================================================ */

/* A reusable "card" built out of gitweb's existing title-bar pattern.
   Use in content like:
     <section class="wg_card">
       <div class="wg_card_head">Goals</div>
       <div class="wg_card_body"> ... </div>
     </section>
*/
section.wg_card {
	margin: 16px 16px 22px;
	border: 1px solid var(--border);
	max-width: 80ch;
	background: var(--bg);
}

div.wg_card_head {
	padding: 6px 12px;
	font-weight: bold;
	background-color: var(--bg-hi);
	color: var(--green1);
	border-bottom: 1px solid var(--border);
	font-size: 95%;
	letter-spacing: 0.02em;
}

div.wg_card_body {
	padding: 10px 14px 12px;
}

div.wg_card_body > :first-child { margin-top: 0; }
div.wg_card_body > :last-child  { margin-bottom: 0; }

/* ============================================================ */
/* Stage / process list                                          */
/* ============================================================ */

/* Used on the process page to render the lifecycle of a proposal.
   Each stage looks like a gitweb "ref badge": small, bordered,
   colour-coded. */
ol.process_stages {
	list-style: none;
	padding: 0;
	margin: 1em 0;
}

ol.process_stages li {
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-left: 4px solid var(--head-bd);
	background: var(--bg-hi);
	margin: 8px 0;
}

ol.process_stages li .stage_name {
	display: inline-block;
	font-weight: bold;
	color: var(--head-fg);
	margin-right: 8px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 85%;
}

ol.process_stages li .stage_desc {
	color: var(--fg-dark);
	font-style: italic;
}

/* Alternate the accent colour per stage so the list has a bit of visual
   rhythm — still using the existing palette. */
ol.process_stages li:nth-child(2) { border-left-color: var(--cyan);   }
ol.process_stages li:nth-child(2) .stage_name { color: var(--cyan);   }
ol.process_stages li:nth-child(3) { border-left-color: var(--orange); }
ol.process_stages li:nth-child(3) .stage_name { color: var(--orange); }
ol.process_stages li:nth-child(4) { border-left-color: var(--purple); }
ol.process_stages li:nth-child(4) .stage_name { color: var(--purple); }
ol.process_stages li:nth-child(5) { border-left-color: var(--green);  }
ol.process_stages li:nth-child(5) .stage_name { color: var(--green);  }

/* ============================================================ */
/* Fallback list template                                        */
/* ============================================================ */

ul.page_list {
	list-style: none;
	padding-left: 0;
}

ul.page_list li {
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
}

.page_list_sub {
	color: var(--fg-dim);
	font-style: italic;
	font-size: 92%;
}

/* ============================================================ */
/* Mobile tweaks on top of gitweb's own mobile block             */
/* ============================================================ */

@media (max-width: 600px) {
	div.page_prose   { padding: 12px; max-width: none; }
	div.page_toc     { margin: 8px 8px 0; }
	section.wg_card  { margin: 10px 8px 14px; }
	.page_header_tagline {
		display: block;
		margin-left: 0;
		margin-top: 4px;
	}
}