/* ==========================================================================
   GAZA DEMOCRATIC FRONT - 02 BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--gdf-paper); color: var(--gdf-text);
  font: 400 var(--gdf-tb)/1.6 var(--gdf-body); overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Headings: Roboto bold (see the type system at the end of 05-subpage.css). Third-level
   headings are medium weight, so long pages are not all shouting. */
h1, h2 {
  font-family: var(--gdf-head); font-weight: 600; text-transform: uppercase;
  line-height: 1.04; letter-spacing: -.005em; margin: 0 0 var(--s4); color: var(--gdf-black);
}
h1 { font-size: var(--gdf-t1); }
h2 { font-size: var(--gdf-t2); }
h3 { font: 600 var(--gdf-t3)/1.3 var(--gdf-body); margin: 0 0 var(--s2); color: var(--gdf-black); }

:focus-visible { outline: 3px solid var(--gdf-gold); outline-offset: 2px; }

.gdf-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px;
  background: var(--gdf-gold); color: var(--gdf-black); font-family: var(--gdf-ui); font-weight: 600;
}
.gdf-skip:focus { top: 12px; }

.gdf-container { width: 100%; max-width: var(--gdf-max); margin: 0 auto; padding: 0 var(--gdf-gutter); }

/* Small label above a heading. Used only where it names something
   (the election, a document), not above every section. */
.gdf-label {
  font: 500 .8125rem/1.2 var(--gdf-head); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gdf-red); margin: 0 0 var(--s3);
}
.gdf-label--gold { color: var(--gdf-gold); }

/* Section titles carry one consistent brand mark: a short gold bar. */
.gdf-title { position: relative; padding-bottom: var(--s4); margin-bottom: var(--s5); }
.gdf-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--gdf-gold); }
.gdf-title--center { text-align: center; }
.gdf-title--center::after { left: 50%; transform: translateX(-50%); }
.gdf-lead { font-size: 1.1875rem; line-height: 1.55; }
.gdf-muted { color: var(--gdf-muted); }
.gdf-small { font-size: var(--gdf-ts); }

/* Actions: one primary (gold, join) or election (red) button per view;
   everything else is an outline button or a plain text link. */
.gdf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 28px; border: 2px solid transparent; border-radius: var(--gdf-radius);
  font: 500 1rem/1.1 var(--gdf-head); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.gdf-btn--gold { background: var(--gdf-gold); color: var(--gdf-black); }
.gdf-btn--gold:hover { background: #e2bf62; }
.gdf-btn--red { background: var(--gdf-red); color: #fff; }
.gdf-btn--red:hover { background: var(--gdf-red-dark); }
.gdf-btn--black { background: var(--gdf-black); color: #fff; }
.gdf-btn--black:hover { background: var(--gdf-coal); }
.gdf-btn--line { border-color: currentColor; color: var(--gdf-black); background: transparent; }
.gdf-btn--line:hover { background: var(--gdf-black); border-color: var(--gdf-black); color: #fff; }
.gdf-btn--line-light { border-color: rgba(255, 255, 255, .75); color: #fff; background: transparent; }
.gdf-btn--line-light:hover { background: #fff; color: var(--gdf-black); }
.gdf-btn--sm { min-height: 38px; padding: 7px 14px; font-size: .9rem; }

.gdf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }

/* Text links: underlined, so they read as links without colour alone. */
.gdf-link { color: var(--gdf-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gdf-link:hover { text-decoration-thickness: 2px; }
.gdf-link--light { color: #fff; }
.gdf-link--gold { color: var(--gdf-gold); }

/* Unconfirmed fact placeholder (build.py fact()) */
.gdf-tbc {
  display: inline-block; padding: 0 6px; border: 1.5px dashed #c46a00; color: #8f4c00; background: #fff6e8;
  font: 400 .9em/1.5 var(--gdf-ui); text-transform: none; letter-spacing: 0;
}

/* Flag line: the three party colours as a rule. Used at the foot of the
   page title and above the footer. */
.gdf-flagline { display: grid; grid-template-rows: 4px 4px 4px; }
.gdf-flagline span:nth-child(1) { background: var(--gdf-red); }
.gdf-flagline span:nth-child(2) { background: var(--gdf-gold); }
.gdf-flagline span:nth-child(3) { background: var(--gdf-green); }

.gdf-social { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; padding: 0; margin: 0; }
.gdf-social a { text-decoration: none; }
.gdf-social a:hover { text-decoration: underline; }

.gdf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }