/* European Interagency Security Forum. Stylesheet.

   This is the look the site had before it closed, not a generic one. The
   palette, the measurements and the component shapes are taken from the theme
   the site ran, and from renders of its pages:

     board      #e0dacd  beige surround, with the line pattern in bg.png
     sheet      #ffffff  a 936px white column, centred, raised by a shadow
     slate      #4c5365  headings, the active tab, buttons, the footer band
     yellow     #f2ea6a  the h1 band, and section bands on the homepage
     grey       #d1d1d1  the footer base and the sidebar widget body
     pale grey  #e6e6e6  navigation tabs, sidebar items, table cells

   Measured from the theme, and kept rather than approximated:

     #header    padding 50px, min-height 156px content-box, so a 256px box
     logo       212 x 155 at 50,50, out of the flow
     tabs       47px tall, 19px, weight 300, padding 0 22px, slate when active,
                64px down the nav column, so they cross the logo's middle
     #content   padding 0 50px, shadow 0 -2px 5px
     #navcol    float left, 208px wide, 110px above its first item
     #maincol   float right, 575px wide
     h1         yellow band, 28px, padding 12.5px 32px, margin-bottom 25px
     h2 24px, h3 20px, p 16px/1.4, li 16px/1.4 with 2.5em hanging indent
     blockquote 4px slate left border, 20px italic 500, the lead paragraph
     button     slate, 1px border with a 2px bottom, 15px, 6px 10px, white
     footer     the slate cta band closing the sheet, then the #d1d1d1 base
     fnav       titles 24px #292929, inline links 16px, credits 12px right

   Absolute values in px are used instead of the theme's ems so that nothing
   compounds through nesting; the em ratios above are the theme's own.

   The two webfonts are gone. omnes-pro and source-sans-pro were Typekit
   fonts loaded by an account that no longer exists, and no substitute is
   downloaded here: the stacks name them first, so the intent is on the
   record, and fall through to a humanist sans that is present on the machine.

   The two images are referenced by a path relative to this file, which is
   served from the site root, so they resolve whatever depth the page is at,
   the 404 handed to an arbitrary request included. */

:root {
  --paper: #ffffff;
  --board: #e0dacd;
  --slate: #4c5365;
  --slate-dark: #474e5f;
  --slate-darker: #434959;
  --yellow: #f2ea6a;
  --grey: #d1d1d1;
  --pale: #e6e6e6;
  --tint: #f5f7f8;
  --shade: #d8d8d8;
  --ink: #000000;
  --muted: #656768;
  --meta: #626b82;
  --rule: #d1d1d1;
  --widget: #515151;
  --head-font: "omnes-pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body-font: "source-sans-pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sheet: 936px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--board);
  background-image: url("wp-content/themes/eisf/assets/images/bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 13px;
  line-height: 1.3;
}

a { color: var(--ink); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { border: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--slate); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 0; }

/* ---------- header: logo left, tab bar right ---------- */

#header {
  background: var(--paper);
  box-shadow: 0 -4px 5px rgba(0, 0, 0, .4);
  margin: 0 auto; max-width: var(--sheet);
  /* The theme is content-box: `#header { min-height: 156px; padding: 50px;
     width: 836px }`, i.e. an 836-wide content box inside 50px of padding, 256px
     tall overall, and its left edge lines up with `#content`'s. This sheet is
     border-box throughout, so the same box is 256px with 50px padding. */
  min-height: 256px;
  padding: 50px;
  position: relative; z-index: 2;
}
#header::after { content: ""; display: table; clear: both; }

/* The logo is absolutely positioned in a fixed 212 x 155 box at 50, 50, which
   is what the theme did: `#logo_base { height: 155px; left: 50px; top: 50px;
   position: absolute; width: 212px }` with `.logo { height: auto; width: 100% }`.
   It is out of the flow, so the tab bar is not aligned to its foot. The bar
   starts 64px into the column instead (`.nav_base { padding-top: 64px }`),
   which puts it across the logo's middle. Both offsets are confirmed by the
   archived renders: logo x 222..433, y 50..204; tabs rows 114..160. */
.logo_base {
  display: block; height: 155px; left: 50px; position: absolute; top: 50px;
  width: 212px; z-index: 2;
}
.logo { display: block; height: auto; width: 100%; }

#nav { padding-top: 64px; }
.prinav {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  list-style: none; margin: 0; padding: 0;
}

.prinav_element {
  background: var(--pale);
  color: var(--ink);
  display: block;
  font-family: var(--head-font);
  font-size: 19px; font-weight: 300;
  height: 47px; line-height: 43px;
  padding: 0 22px;
  text-transform: lowercase;
  white-space: nowrap;
}
/* The active marker arrives as a class on the <li>: the {{NAV_*}} placeholder
   in the shell expands to a whole class attribute, so it cannot share an
   element with the base class without producing a second class attribute,
   which a browser silently drops. */
.prinav a.prinav_element:hover,
.prinav li.is-active > a.prinav_element {
  background: var(--slate); color: #fff; text-decoration: none;
}

/* ---------- the white column ---------- */

#content {
  background: var(--paper);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, .4);
  margin: 0 auto; max-width: var(--sheet);
  padding: 0 50px;   /* the bottom padding lives on .wrap, so the cta band the
                        shell puts last in here can close the sheet */
  position: relative;
}
/* the sidebar is a float, so on a page whose text is shorter than the sidebar
   the column has to be cleared or the footer's slate band rides up over it */
#core::after { content: ""; display: table; clear: both; }

/* ---------- sidebar ---------- */

/* The column is 208px wide with no side padding: measured off the renders,
   where the rows span the column edge to edge. The 110px above the first item
   is measured the same way, off the rule that closes the top of the first
   subnav item: it sits at row 366 on both archived pages, 110 below the top of
   the sheet. Reading it out of the theme instead gives 126 (a `margin-top:
   100px` that its own desktop breakpoint resets, plus `padding: 2em 0 3em`),
   which is why that number was wrong: the theme puts the h1 in the flow above
   the two floated columns, so the column starts below the h1 band, not at the
   top of the sheet. */
#navcol { float: left; padding: 110px 0 39px; width: 208px; }

.subnav { list-style: none; margin: 0; padding: 0; }
.subnav li { list-style: none; margin: 0; padding: 0; }

.subnav_element {
  border-bottom: 1px solid var(--rule);
  display: block;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  padding: 17px 33px;
}
.subnav li:first-child > .subnav_element { border-top: 1px solid var(--rule); }
.subnav_element:hover { background: var(--tint); color: var(--ink); text-decoration: underline; }
.subnav li.is-active > .subnav_element {
  background: #dbdce0; border-bottom: 2px solid var(--slate); text-decoration: none;
}

.quicklinks { background: var(--grey); margin-top: 26px; padding: 0 20px 20px; }
.quicklinks_title {
  background: var(--widget); color: #fff;
  font-family: var(--body-font); font-size: 15px; font-weight: 600;
  margin: 0 -20px 12px; padding: 15px 20px;
}
.quicklinks_list { list-style: none; margin: 0; padding: 0; }
.quicklinks_list li { margin: 0 0 12px; }
.quicklinks_list li:last-child { margin-bottom: 0; }
.quicklinks_list a { display: block; font-size: 14px; line-height: 1.25; }
.quicklinks_list a:hover { color: var(--slate); }

/* ---------- the main column ---------- */

#navcol + .wrap { margin-left: 261px; }
.wrap { padding: 25px 0 50px; }   /* the theme's `#maincol { padding-bottom: 50px }` */

.wrap h1 {
  background: var(--yellow);
  color: var(--slate);
  font-family: var(--head-font); font-size: 28px; font-weight: 400; line-height: 1.2;
  margin: 0 0 25px; padding: 13px 32px;
}
.wrap h2 {
  color: var(--slate);
  font-family: var(--head-font); font-size: 24px; font-weight: 400; line-height: 1.2;
  margin: 26px 0 10px;
}
.wrap h3 {
  color: var(--slate);
  font-family: var(--head-font); font-size: 20px; font-weight: 400; line-height: 1.2;
  margin: 20px 0 8px;
}
.wrap h1 + p, .wrap h1 + ul, .wrap h1 + ol, .wrap h1 + table, .wrap h1 + div { margin-top: 0; }
.wrap h2 + p, .wrap h2 + ul, .wrap h2 + ol, .wrap h2 + table { margin-top: 10px; }

.wrap p { font-size: 16px; line-height: 1.4; margin: 16px 0 0; }

.wrap ul, .wrap ol { margin: 16px 0 0; padding: 0; }
.wrap li { font-size: 16px; line-height: 1.4; margin: 4px 0 0 32px; }
.wrap ul li { list-style: disc; }
.wrap ol li { list-style: decimal; }
.wrap li li { margin-left: 16px; }
.wrap ul li li { list-style: circle; }
.wrap ul li p, .wrap ol li p { font-size: 16px; }

.wrap a { text-decoration: underline; }
.wrap a:hover { color: var(--slate); }
.wrap strong, .wrap b { font-weight: 600; }

/* The lead paragraph, in the theme's pull-quote shape. */
.lede { border-left: 4px solid var(--slate); margin: 16px 0 0; padding: .5em 1em; }
.wrap p.lede, .wrap .lede {
  font-size: 20px; font-style: italic; font-weight: 500; line-height: 1.3;
}

.crumbs { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--slate); }

.item-head { margin: 0; }
.item-head h1 { margin-bottom: 14px; }
.item-head .meta, .meta {
  color: var(--meta); font-size: 14px; line-height: 1.3; margin: 0 0 20px;
}

/* Documents: the theme's button, slate with a heavier bottom border. */
.doc-link {
  background: var(--slate);
  border: 1px solid var(--slate-dark); border-bottom-width: 2px;
  color: #fff; display: inline-block;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  margin: 20px 0 0; padding: 8px 16px;
  text-shadow: 0 1px 1px #404656;
}
.wrap a.doc-link { text-decoration: none; }
.wrap a.doc-link:hover {
  background: var(--slate-dark); border-color: var(--slate-darker);
  color: #fff; text-decoration: underline;
}

/* The panel the homepage opens with, as the theme's dark call-to-action. */
.hero { background: var(--slate); color: #fff; margin: 0; padding: 28px 32px 32px; }
.wrap .hero h1 { background: none; color: #fff; font-size: 24px; margin: 0; padding: 0; }
.wrap .hero .lede {
  border: 0; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.4;
  margin: 14px 0 0; padding: 0;
}

/* Boxes: a section band over a panel, which is how the theme grouped links. */
.cards {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  list-style: none; margin: 16px 0 0; padding: 0;
}
/* two classes deep, so the theme's own "every list item is a disc" rule for
   the main column does not win on specificity and mark each box */
.wrap ul.cards li { margin: 0; list-style: none; }

.card { background: var(--pale); display: block; }
.wrap a.card { text-decoration: none; }
.card .tag {
  background: var(--slate); color: #fff; display: block;
  font-family: var(--head-font); font-size: 17px; font-weight: 400;
  padding: 11px 16px;
}
.card h3 { font-size: 19px; line-height: 1.25; margin: 14px 16px 8px; }
.card p { font-size: 14px; line-height: 1.4; margin: 0 16px 18px; }
.wrap a.card:hover { background: var(--shade); }
.wrap a.card:hover .tag { background: var(--yellow); color: var(--slate); }
.wrap a.card:hover h3 { color: var(--slate); text-decoration: underline; }

.related { border-top: 1px solid var(--rule); margin-top: 30px; padding-top: 20px; }
.related h2 { font-size: 20px; margin: 0 0 8px; }

table.simple {
  border-collapse: collapse; margin: 20px 0 0;
  table-layout: fixed; width: 100%;
}
table.simple th, table.simple td {
  padding: 11px 16px; text-align: left; vertical-align: top;
  overflow-wrap: break-word;
}
table.simple th { background: var(--slate); color: #fff; font-size: 16px; font-weight: 600; }
table.simple td { background: var(--pale); font-size: 15px; line-height: 1.4; }
table.simple tr:nth-child(even) td { background: var(--shade); }

/* ---------- footer: the slate band, then the grey base ---------- */

#footer { margin: 0 auto; max-width: var(--sheet); }

/* The slate band is the last thing inside the white sheet, not a band above
   the footer. The theme reached it with `.cta-foot { margin-left: -50px;
   width: 936px }`, which only resolves against `#content`'s 50px padding, and
   the archived homepage renders agree: below the band there are no white rows
   left, only the board colour. The negative margins cancel that padding so the
   band is the full sheet width and flush with its bottom edge. */
.cta-foot { background: var(--slate); margin: 0 -50px; padding: 25px 50px; }
.cta-foot-copy { color: #fff; font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0; }

.footer_base {
  background: var(--grey);
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  padding: 25px 50px 25px;
}
.fnav_base { overflow: hidden; }
.fnav_base_block { float: left; margin-left: 80px; }
.fnav_base_block.first { margin-left: 0; width: 52%; }
.fnav_title {
  color: #292929;
  font-family: var(--body-font); font-size: 24px; font-weight: 400;
  margin: 0 0 24px;   /* the theme's `margin: 0 0 1em 0` at this size */
}
.fnav { list-style: none; margin: 0; padding: 0; width: 300px; }
.fnav li { display: inline; margin: 0; white-space: nowrap; }
.fnav_element { color: #292929; font-size: 16px; line-height: 1.5; }
.fnav_element:hover { color: var(--slate); text-decoration: underline; }
/* the separator is escaped rather than typed, so the file stays ASCII; the
   escape ends at the closing quote, so the spacing is a margin, not a space
   the escape would swallow as its terminator */
.fnav li + li::before { content: "\00b7"; color: #7c7c7c; margin: 0 6px 0 3px; }
.footer_legal {
  color: #4a4a4a; font-size: 12px; line-height: 1.4;
  margin: 22px 0 0; text-align: right;
}

/* The homepage carries no sidebar in the theme, and its section headings are
   bands rather than plain text. Both are properties of the page, not of the
   shell, so they hang off a body class the manifest sets. */
body.home #navcol { display: none; }
body.home #navcol + .wrap { margin-left: 0; }
body.home .wrap h2 {
  background: var(--yellow); color: var(--slate);
  padding: 12px 32px; margin: 30px 0 16px;
}

/* ---------- narrow screens ---------- */

/* Below the sheet width the logo goes back into the flow, over a tab bar that
   starts a normal distance under it, since there is no longer room beside it. */
@media (max-width: 1000px) {
  #header, #content, #footer { max-width: none; }
  #header { min-height: 0; padding: 28px 24px 0; }
  .logo_base { height: auto; left: auto; position: static; top: auto; width: 170px; }
  #nav { padding: 20px 0 0; }
  .prinav { justify-content: flex-start; }
  .prinav_element { font-size: 16px; height: 42px; line-height: 40px; padding: 0 14px; }
  #content { padding: 0 24px; }
  .wrap { padding: 22px 0 30px; }
  #navcol + .wrap { margin-left: 220px; }
  .cta-foot { margin: 0 -24px; padding: 18px 24px; }
  .footer_base { padding: 22px 24px; }
}

@media (max-width: 760px) {
  #navcol { display: none; }
  #navcol + .wrap { margin-left: 0; }
  #header { padding: 20px 18px 0; }
  #content { padding: 0 18px; }
  .wrap { padding: 18px 0 25px; }
  .wrap h1 { font-size: 22px; padding: 11px 18px; }
  .wrap h2 { font-size: 20px; }
  body.home .wrap h2 { padding: 10px 18px; }
  .wrap p.lede, .wrap .lede { font-size: 18px; }
  .hero { padding: 20px 18px 22px; }
  .cta-foot { margin: 0 -18px; padding: 16px 18px; }
  .cta-foot-copy { font-size: 17px; }
  .footer_base { padding: 20px 18px; }
  .fnav_base_block { float: none; margin: 0 0 18px; width: auto; }
  .fnav_title { font-size: 20px; }
  .fnav { width: auto; }
  .footer_legal { text-align: left; }
  .prinav { width: 100%; }
  .prinav_element { font-size: 15px; height: 38px; line-height: 36px; padding: 0 12px; }
}