/* ==========================================================================
   iEDGE 2026 - shared presentation layer
   Added 2026-09-22. Pure presentation: no page wording is changed here.

   Why this file exists:
   - The pages declared 'Poppins' and 'Roboto' but never loaded either, so
     every heading and paragraph silently fell back to the system sans.
   - Styling lived in 19 separate inline <style> blocks, so each page drifted.
   - Page-level <style> blocks are parsed AFTER this file, so overrides here
     are scoped with `body` to win on specificity rather than with !important.
   ========================================================================== */

:root {
   /* Brand navy kept from the original design, with a cooler neutral ramp
      biased toward it so greys read as chosen rather than default. */
   --ie-navy:        #1c1f4c;
   --ie-navy-2:      #32367a;
   --ie-ink:         #191e2e;
   --ie-muted:       #55607a;   /* 5.9:1 on white */
   --ie-accent:      #0b6e99;   /* 5.1:1 on white - safe for text  */
   --ie-accent-lift: #00a0e9;   /* original cyan - decorative only */
   --ie-signal:      #c0264f;   /* 5.4:1 on white - deadlines      */
   --ie-bg:          #f4f6fa;
   --ie-surface:     #ffffff;
   --ie-line:        #e3e8f0;
   --ie-shadow:      0 1px 2px rgba(25,30,46,.05), 0 8px 24px rgba(25,30,46,.06);
   --ie-shadow-lift: 0 2px 6px rgba(25,30,46,.07), 0 16px 40px rgba(25,30,46,.10);
   --ie-radius:      14px;
}

/* ---------- Typography ------------------------------------------------- */

body {
   font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
   background: var(--ie-bg);
   color: var(--ie-ink);
   font-size: 1.0625rem;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
   font-family: 'Poppins', system-ui, sans-serif;
   color: var(--ie-navy);
   font-weight: 650;
   line-height: 1.2;
   letter-spacing: -0.015em;
   text-wrap: balance;
}

body h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); }
body h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem); margin-top: .2em; }
body h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.45rem); }

/* Keep running text near a comfortable measure. Applies only to prose
   columns, never to tables, cards or grid children. */
body .card-body > p,
body main > .container > .row > .col-lg-8 p {
   max-width: 68ch;
}

body p { margin-bottom: 1.05rem; }
body strong, body b { font-weight: 600; color: inherit; }

/* Section eyebrows / small caps labels */
body .text-uppercase.small { letter-spacing: .08em; font-weight: 600; }

/* ---------- Links ------------------------------------------------------ */

body a { color: var(--ie-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
body a:hover { color: #08536f; }

/* Long URLs (Zoom links, DOIs) must not push the layout sideways */
body .card a, body td a, body li a { overflow-wrap: anywhere; }

/* ---------- Navbar ----------------------------------------------------- */

body .navbar {
   background: linear-gradient(120deg, var(--ie-navy) 0%, var(--ie-navy-2) 100%);
   box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(15,18,45,.18);
   padding-top: .6rem;
   padding-bottom: .6rem;
   backdrop-filter: saturate(140%);
}

body .navbar .navbar-brand {
   font-family: 'Poppins', system-ui, sans-serif;
   font-size: 1.45rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: #fff !important;
}

body .navbar .navbar-nav .nav-link {
   color: #dfe4f2 !important;
   font-weight: 500;
   font-size: .975rem;
   padding: .5rem .85rem;
   border-radius: 8px;
   position: relative;
   transition: color .18s ease, background-color .18s ease;
}

/* The original underlined on hover, which reads as a broken link.
   A soft pill plus an underline rule is steadier to the eye. */
body .navbar .navbar-nav .nav-link:hover,
body .navbar .navbar-nav .nav-link:focus-visible {
   color: #fff !important;
   background: rgba(255,255,255,.10);
   text-decoration: none;
}

body .navbar .navbar-nav .nav-link.is-current {
   color: #fff !important;
   background: rgba(255,255,255,.14);
}
body .navbar .navbar-nav .nav-link.is-current::after {
   content: '';
   position: absolute;
   left: .85rem; right: .85rem; bottom: .18rem;
   height: 2px; border-radius: 2px;
   background: var(--ie-accent-lift);
}

body .navbar .dropdown-menu {
   border: 1px solid var(--ie-line);
   border-radius: 12px;
   box-shadow: var(--ie-shadow-lift);
   padding: .4rem;
   margin-top: .4rem;
}
body .navbar .dropdown-item {
   border-radius: 8px;
   padding: .5rem .75rem;
   font-size: .95rem;
   color: var(--ie-ink);
}
body .navbar .dropdown-item:hover,
body .navbar .dropdown-item:focus {
   background: #eef2f9;
   color: var(--ie-navy);
}

body .navbar-toggler { border-color: rgba(255,255,255,.35); padding: .35rem .6rem; }
body .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(0,160,233,.4); }

/* ---------- Hero ------------------------------------------------------- */

/* The overlay already had a flat 35% black wash. A vertical gradient keeps
   the photograph visible at the edges while guaranteeing the text always has
   a dark ground underneath it, whichever carousel slide is showing. */
body .paris-wrapper .conference-overlay {
   background: linear-gradient(180deg,
               rgba(10,13,35,.30) 0%,
               rgba(10,13,35,.44) 55%,
               rgba(10,13,35,.56) 100%);
}

body .paris-wrapper .conference-title {
   font-family: 'Poppins', system-ui, sans-serif;
   font-size: clamp(1.4rem, .85rem + 2.1vw, 2.45rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.16;
   text-shadow: 0 2px 4px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.5);
}

body .paris-wrapper .conference-subtitle {
   font-family: 'Poppins', system-ui, sans-serif;
   font-size: clamp(.98rem, .85rem + .45vw, 1.2rem);
   font-weight: 500;
   opacity: 1;
   color: #e8eefc;
   letter-spacing: .01em;
   text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Deadline pill in the hero */
body .paris-wrapper .conference-overlay .rounded-pill {
   pointer-events: auto;
   box-shadow: 0 10px 30px rgba(0,0,0,.28);
   border-color: rgba(255,255,255,.7) !important;
}

/* "In conjunction with AGCS 2026" - was white on a light fill at 3.2:1 */
body .agcs-btn {
   background: rgba(10,13,35,.72);
   border: 1px solid rgba(255,255,255,.45);
   color: #fff;
   font-weight: 500;
   letter-spacing: .01em;
   backdrop-filter: blur(6px);
   transition: background-color .2s ease, transform .2s ease;
}
body .agcs-btn:hover { background: rgba(10,13,35,.88); transform: translateY(-1px); color: #fff; }

/* ---------- Cards & surfaces ------------------------------------------ */

body .card,
body aside.bg-white,
body .bg-white.rounded {
   border: 1px solid var(--ie-line);
   border-radius: var(--ie-radius);
   box-shadow: var(--ie-shadow);
   background: var(--ie-surface);
}

/* The original lifted every card on hover, including static text panels,
   which made the page feel jittery. Reserve the lift for linked cards. */
body .card { transition: box-shadow .25s ease, transform .25s ease; }
body .card:hover { transform: none; box-shadow: var(--ie-shadow); }
body a > .card:hover,
body .card.card-lift:hover {
   transform: translateY(-3px);
   box-shadow: var(--ie-shadow-lift) !important;
}

body .card-body { padding: 1.6rem; }
@media (min-width: 992px) { body .card-body { padding: 2rem; } }

body .shadow-sm { box-shadow: var(--ie-shadow) !important; }

/* ---------- Sidebar --------------------------------------------------- */

body aside .btn-info,
body .btn-info {
   background: var(--ie-accent);
   border-color: var(--ie-accent);
   color: #fff;
   font-weight: 600;
   letter-spacing: .01em;
   border-radius: 10px;
   padding: .8rem 1rem;
   box-shadow: 0 6px 18px rgba(11,110,153,.28);
   transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body aside .btn-info:hover,
body .btn-info:hover {
   background: #08536f;
   border-color: #08536f;
   color: #fff;
   transform: translateY(-1px);
   box-shadow: 0 10px 26px rgba(11,110,153,.34);
}

/* Important-dates table */
body aside .table { margin-bottom: 0; font-size: .94rem; }
body aside .table > :not(caption) > * > * { padding: .7rem .6rem; }
body aside .table thead.table-primary th {
   background: var(--ie-navy);
   color: #fff;
   font-family: 'Poppins', system-ui, sans-serif;
   font-weight: 600;
   font-size: .82rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   border-color: var(--ie-navy);
}
body aside .table tbody tr:hover > * { background: #eef2f9; }
body aside .table td { border-color: var(--ie-line); }

/* "TBA" placeholders sat in a flat grey .bg-light box that read as a broken
   or disabled panel. Present them as a deliberate pending state instead.
   The word itself is untouched. */
body .card-body .text-center.bg-light.rounded,
body aside .text-center.bg-light.rounded {
   background: #fafbfe !important;
   border: 1px dashed #c6d1e3;
   color: var(--ie-muted);
   padding: 1.4rem 1rem !important;
}
body .card-body .text-center.bg-light.rounded h1,
body .card-body .text-center.bg-light.rounded h2,
body .card-body .text-center.bg-light.rounded h3,
body .card-body .text-center.bg-light.rounded h4 {
   color: var(--ie-muted);
   font-weight: 500;
   letter-spacing: .06em;
   margin-bottom: 0;
}

/* ---------- Timeline (home page dates rail) --------------------------- */

body .timeline-item::before {
   background: var(--ie-accent);
   border: 3px solid #fff;
   box-shadow: 0 0 0 1px var(--ie-line);
   width: 16px; height: 16px;
   left: -1.42rem; top: .28rem;
}
body .timeline-item::after { background: var(--ie-line); left: -1.03rem; top: 1.25rem; }
body .timeline-content h4 {
   font-size: .95rem;
   font-weight: 600;
   color: var(--ie-muted);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-bottom: .15rem;
}
body .timeline-content p { font-size: 1.08rem; font-weight: 600; color: var(--ie-navy) !important; margin: 0; }

/* ---------- Contrast corrections -------------------------------------- */

/* Pure #f00 on white measures 4.0:1 and fails AA for body text. */
body [style*="color:red"], body [style*="color: red"],
body [style*="color:#ff0000"], body [style*="color:#f00"] {
   color: var(--ie-signal) !important;
}
body .text-danger { color: var(--ie-signal) !important; }
body .text-muted { color: var(--ie-muted) !important; }
body .text-secondary { color: var(--ie-muted) !important; }
body .text-primary { color: var(--ie-navy) !important; }

/* Amber badges: white-on-amber never passes; force dark ink. */
body .badge.bg-warning, body .bg-warning.text-dark { color: #3d2a00 !important; }

/* ---------- Tables in content ----------------------------------------- */

body main table { font-size: .97rem; }
/* Scoped away from Bootstrap's own dark/coloured heads: table-dark paints a
   near-black background and supplies its own white text, so tinting it navy
   made those headers effectively invisible (measured 1.01:1). */
body main .table > thead:not(.table-dark):not(.table-primary):not(.table-secondary) th {
   font-family: 'Poppins', system-ui, sans-serif;
   font-weight: 600;
   color: var(--ie-navy);
   border-bottom: 2px solid var(--ie-line);
}
body main .table > thead.table-dark th {
   font-family: 'Poppins', system-ui, sans-serif;
   font-weight: 600;
   color: #fff;
}
/* The dates table appears both in the sidebar and, on venue/workshops, inside
   <main>. Both contexts get the same navy head so the two rules cannot end up
   painting navy text onto a navy ground (they had equal specificity, and the
   later one won - measured 1.00:1). */
body main .table > thead.table-primary th,
body .table > thead.table-primary th {
   background: var(--ie-navy);
   color: #fff;
   font-family: 'Poppins', system-ui, sans-serif;
   font-weight: 600;
   font-size: .82rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   border-color: var(--ie-navy);
}
body main .table-responsive { border-radius: 12px; }

/* ---------- Footer ----------------------------------------------------- */

body .ie-footer {
   background: var(--ie-navy);
   color: #c3cbe2;
   margin-top: 4rem;
   padding: 3rem 0 1.75rem;
   font-size: .95rem;
}
body .ie-footer h2 {
   font-size: .82rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #8f9cc4;
   font-weight: 600;
   margin-bottom: .9rem;
}
body .ie-footer a { color: #dbe2f4; text-decoration: none; }
body .ie-footer a:hover { color: #fff; text-decoration: underline; }
body .ie-footer ul { list-style: none; padding: 0; margin: 0; }
body .ie-footer li + li { margin-top: .45rem; }
body .ie-footer .ie-footer-brand {
   font-family: 'Poppins', system-ui, sans-serif;
   font-size: 1.3rem;
   font-weight: 700;
   color: #fff;
   letter-spacing: -.02em;
}
body .ie-footer-bottom {
   border-top: 1px solid rgba(255,255,255,.12);
   margin-top: 2.25rem;
   padding-top: 1.25rem;
   color: #97a3c6;
   font-size: .875rem;
}

/* ---------- Back to top ------------------------------------------------ */

body .ie-top {
   position: fixed;
   right: 1.15rem;
   bottom: 1.15rem;
   width: 44px; height: 44px;
   display: grid; place-items: center;
   border: 1px solid var(--ie-line);
   border-radius: 50%;
   background: #fff;
   color: var(--ie-navy);
   box-shadow: var(--ie-shadow-lift);
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: opacity .22s ease, transform .22s ease, visibility .22s;
   z-index: 1040;
   cursor: pointer;
}
body .ie-top.is-on { opacity: 1; visibility: visible; transform: none; }
body .ie-top:hover { background: var(--ie-navy); color: #fff; border-color: var(--ie-navy); }

/* ---------- Focus, motion, mobile ------------------------------------- */

body a:focus-visible,
body button:focus-visible,
body .btn:focus-visible,
body .nav-link:focus-visible,
body .dropdown-item:focus-visible {
   outline: 3px solid var(--ie-accent-lift);
   outline-offset: 2px;
   border-radius: 6px;
}

img { max-width: 100%; height: auto; }

@media (max-width: 991.98px) {
   body .navbar .navbar-collapse {
      padding: .5rem 0 .25rem;
      margin-top: .5rem;
      border-top: 1px solid rgba(255,255,255,.14);
   }
   body .navbar .navbar-nav .nav-link { padding: .6rem .7rem; }
   body .navbar .dropdown-menu {
      background: rgba(255,255,255,.06);
      border: 0;
      box-shadow: none;
      margin-left: .7rem;
   }
   body .navbar .dropdown-item { color: #dfe4f2; }
   body .navbar .dropdown-item:hover { background: rgba(255,255,255,.12); color: #fff; }
}

@media (max-width: 575.98px) {
   body { font-size: 1rem; }
   body .card-body { padding: 1.25rem; }
   body .paris-wrapper,
   body #parisPics { height: 340px !important; }
   body .paris-wrapper .conference-overlay { padding: 12px; }
   /* Justified text opens rivers of whitespace at phone widths */
   body [style*="text-align: justify"], body [style*="text-align:justify"] { text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
   body *, body *::before, body *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
   }
}

@media print {
   body .navbar, body .ie-footer, body .ie-top, body .carousel-control-prev, body .carousel-control-next { display: none !important; }
   body { background: #fff; }
}

/* ---------- Fixes found while testing the rendered pages --------------- */

/* Feature cards pair a round icon with a heading in a flex row. The circle
   had no flex-shrink guard, so in a narrow column it squashed into an
   ellipse and pushed the heading past the card edge (measured 48px of
   overflow at tablet widths). */
body .card-body .d-flex.align-items-center > .rounded-circle,
body .card-body .d-flex.align-items-center > [class*="rounded-circle"] {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
}
body .card-body .d-flex.align-items-center { flex-wrap: wrap; row-gap: .35rem; }
body .card-body .d-flex.align-items-center > h1,
body .card-body .d-flex.align-items-center > h2,
body .card-body .d-flex.align-items-center > h3,
body .card-body .d-flex.align-items-center > h4,
body .card-body .d-flex.align-items-center > h5 {
   min-width: 0;          /* lets the heading wrap instead of overflowing */
   flex: 1 1 0;
   line-height: 1.3;
}

/* The uppercase treatment works in wide layouts but wrapped to three lines
   in the narrow date rail, which read as clutter. Keep it sentence case
   there and lean on weight and colour for the hierarchy instead. */
body .timeline-content h4 {
   text-transform: none;
   letter-spacing: 0;
   font-size: .9rem;
   font-weight: 500;
   color: var(--ie-muted);
}
body .timeline-content p { font-size: 1.02rem; }

/* Icon circles tinted with bg-primary follow the brand navy. */
body .bg-primary.bg-opacity-10 { background-color: rgba(28,31,76,.09) !important; }
body .card-body .fas.text-primary, body .card-body .fa-solid.text-primary { color: var(--ie-accent) !important; }

/* ---------- Sticky sidebar ---------------------------------------------
   Several pages pair a long content column with a much shorter sidebar, so
   the right-hand side went blank for thousands of pixels while the left
   column carried on (the home page had ~3200px of empty column).

   Two things are needed. Bootstrap rows are flex containers and columns
   stretch to full row height by default, which silently defeats position:
   sticky - that is why the wrapper the original author named "sticky-static"
   never actually stuck. align-self:flex-start fixes that. The .ie-sticky
   class is added by iedge.js only when the sidebar is short enough to fit
   the viewport, so a tall sidebar can never have its foot cut off. */
@media (min-width: 992px) {
   /* The COLUMN must keep Bootstrap's default stretch to full row height:
      a sticky element can only travel inside its own parent, so shrinking the
      column to fit the sidebar (align-self:flex-start) leaves zero room and
      the sidebar never actually pins. It is the inner wrapper that sticks.
      `top` is set inline by iedge.js from the measured height, so a sidebar
      taller than the viewport pins by its foot rather than having its bottom
      stranded off-screen. */
   body .ie-sticky { position: sticky; }
}


/* ---------- Intro card fills its column ------------------------------- */

/* The sidebar is taller than the welcome card, so the left side of the intro
   row ended in a block of empty space. Letting the card take the full column
   height closes that gap, and the photo (already object-fit: cover) simply
   shows a taller crop. */
@media (min-width: 992px) {
   body .row.g-4 > .col-lg-8 > article.card.overflow-hidden { height: 100%; }
   body .row.g-4 > .col-lg-8 > article.card.overflow-hidden > .row { height: 100%; }
   body .row.g-4 > .col-lg-8 > article.card.overflow-hidden .card-body {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
   /* The Eiffel Tower sits about 73% across this square photo, but the narrow
      portrait column crops to the middle ~40% of the width, which cut the
      tower off at the edge. Shifting the focal point right centres it. */
   body .row.g-4 > .col-lg-8 > article.card.overflow-hidden img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: 85% center;
   }
}