/*
Theme Name: Astra Child
Template: astra
Description: Collingwood For Palestine — consolidated styles (header/menu, hero, buttons, sections, links, footer stripe).
Author: You
Version: 1.0.0
*/

/* ----------------------------------------------------
   GLOBAL + LAYOUT
---------------------------------------------------- */
:root{
  --black:#000;
  --white:#fff;
  --red:#d32f2f;
  --green:#2e7d32;
  --maxw:1100px;
}

/* Core layout helpers used in your page HTML */
.section{padding:64px 20px;}
.wrap{max-width:var(--maxw);margin:0 auto;}
.center{text-align:center;}
.lead{font-size:1.15rem;line-height:1.6}

/* Ensure page content is not hidden under fixed header */
#content, .site-content, .ast-container{padding-top:56px;}
@media (max-width:768px){
  #content, .site-content, .ast-container{padding-top:52px;}
}

/* Anchor offsets so fixed header doesn’t cover section titles */
#hero,#take-action,#genocide-facts,#myths,#boycott,#stories,#updates,#contact{
  scroll-margin-top:72px;
}
@media (max-width:768px){
  #hero,#take-action,#genocide-facts,#myths,#boycott,#stories,#updates,#contact{
    scroll-margin-top:64px;
  }
}

/* ----------------------------------------------------
   HEADER / MENU (SOLID + CENTERED)
---------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:2000;
  background:#fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
}
.main-header-bar{
  padding:6px 0 !important;
  min-height:44px !important;
}
.main-header-bar .ast-container{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important; /* center the menu */
  min-height:44px !important;
}
.main-header-bar .main-header-bar-navigation{ margin:0 !important; }

/* Hide tiny header logo on the homepage so the menu can center */
.home .site-header .site-branding,
.home .site-header .custom-logo-link,
.home .site-header .site-logo{
  display:none !important;
}

/* Dark, readable menu links */
.site-header a{
  color:#111 !important;
  font-weight:600;
  letter-spacing:.5px;
}

/* Keep header logo small on non-home pages (if shown) */
.site-header .custom-logo-link img,
.site-header .site-logo img{
  max-height:36px !important;
  width:auto;height:auto;
}
/* ======================
   Custom Site Styling
   ====================== */
:root{
  --black:#000; --white:#fff; --red:#d32f2f; --green:#2e7d32; --maxw:1100px;
}
html{scroll-behavior:smooth;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.section{padding:64px 20px}
.wrap{max-width:var(--maxw);margin:0 auto}
.center{text-align:center}
.lead{font-size:1.15rem;line-height:1.6}

/* HERO */
.hero{background:#fdfdfd;color:#111;padding:56px 20px 60px;position:relative}
.hero:before{content:"";position:absolute;left:0;top:0;width:100%;height:14px;
  background:linear-gradient(90deg,#000 0 25%,#fff 25% 50%,#2e7d32 50% 75%,#d32f2f 75% 100%);
  border-bottom:1px solid rgba(0,0,0,.15);}
.hero img{max-width:240px;height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.25))}
h1,h2{margin:18px 0 12px;line-height:1.2}
h1{font-size:clamp(32px,4.5vw,52px);font-weight:800}
h2{font-size:clamp(24px,3vw,34px);font-weight:800}

/* Buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:6px;text-decoration:none;font-weight:700;
  border:1.5px solid rgba(0,0,0,.18);background-clip:padding-box;transition:border-color .2s ease, transform .2s ease;}
.btn-red{background:var(--red);color:var(--white)}
.btn-green{background:var(--green);color:var(--white)}
.btn-black{background:var(--black);color:var(--white)}
.btn-white{background:var(--white);color:#111;border-color:rgba(0,0,0,.22)}
.btn:hover{border-color:rgba(0,0,0,.35);transform:translateY(-1px)}

.btns{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:768px){.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin:16px auto 0}
  .btns .btn{width:100%;text-align:center;padding:12px 14px}}
@media(max-width:380px){.btns .btn{padding:10px 12px;font-size:.95rem}}

/* Cards */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:14px}
.card{background:#fff;border:1px solid #e6e6e6;border-radius:10px;padding:18px}
.card h3{margin:0 0 8px;font-size:1.1rem}

/* Footer flag */
.footer{font-size:.9rem;color:#666;background:#f2f2f2;position:relative}
.footer:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:14px;
  background:linear-gradient(90deg,#000 0 25%,#fff 25% 50%,#2e7d32 50% 75%,#d32f2f 75% 100%);
  border-top:1px solid rgba(0,0,0,.15);}

/* ----------------------------------------------------
   BRAND LINK COLOR (NOT buttons)
---------------------------------------------------- */
a:not(.btn),
.card a:not(.btn),
.wrap a:not(.btn){
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:.15em;
  text-decoration-color:rgba(46,125,50,.35);
}
a:not(.btn):hover,
.card a:not(.btn):hover,
.wrap a:not(.btn):hover{
  color:#1f5a24;
  text-decoration-color:currentColor;
}
a:not(.btn):visited{ color:#2a6e2f; }
a:not(.btn):focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:2px;
}

/* ----------------------------------------------------
   HERO (top flag stripe + spacing)
---------------------------------------------------- */
.hero{
  background:#fdfdfd;
  color:#111;
  padding:56px 20px 60px;
  position:relative;
}
.hero:before{
  content:"";
  position:absolute;left:0;top:0;width:100%;height:14px;
  background:linear-gradient(90deg,#000 0 25%,#fff 25% 50%,#2e7d32 50% 75%,#d32f2f 75% 100%);
  border-bottom:1px solid rgba(0,0,0,.15);
}
.hero img{
  max-width:240px;height:auto;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.25));
}
h1,h2{margin:18px 0 12px;line-height:1.2}
h1{font-size:clamp(32px,4.5vw,52px);font-weight:800}
h2{font-size:clamp(24px,3vw,34px);font-weight:800}

/* Mobile hero tweaks */
@media (max-width:768px){
  .section{padding:52px 16px;}
  #hero.section{padding-top:28px;padding-bottom:44px;}
  #hero img{max-width:180px;}
  #hero h1{
    font-size:clamp(24px,7vw,32px);
    line-height:1.15;
    word-break:keep-all;overflow-wrap:normal;hyphens:manual;
    text-wrap:balance;letter-spacing:.2px;
    margin-top:12px;margin-bottom:8px;
  }
  #hero .lead{font-size:1rem;line-height:1.5;}
}
@media (max-width:380px){
  #hero img{max-width:160px;}
  #hero h1{font-size:22px;}
  #hero .lead{font-size:.95rem;}
}

/* ----------------------------------------------------
   BUTTONS (flag palette + persistent outline)
---------------------------------------------------- */
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  border:1.5px solid rgba(0,0,0,.18); /* always visible neutral outline */
  background-clip:padding-box;
  box-shadow:none !important;
  transition:border-color .2s ease, transform .2s ease;
}

/* Color variants */
.btn-red   { background:var(--red);   color:#fff; }
.btn-green { background:var(--green); color:#fff; }
.btn-black { background:#000;         color:#fff; }
.btn-white { background:#fff;         color:#111; }

/* Override white so it doesn’t look “invisible” */
.btn-white { border-color:rgba(0,0,0,.22); }

/* Hover: stronger outline + tiny lift */
.btn:hover{
  border-color:rgba(0,0,0,.35);
  transform:translateY(-1px);
}

/* Button container */
.btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:720px;
  margin:20px auto 0;
}
@media (min-width:769px){
  .btns{ flex-wrap:nowrap; }
  .btns .btn{ flex:1 1 auto; min-width:150px; text-align:center; }
}
/* Mobile 2×2 grid */
@media (max-width:768px){
  .btns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:520px;
    margin:16px auto 0;
  }
  .btns .btn{ width:100%; text-align:center; padding:12px 14px; }
}
@media (max-width:380px){
  .btns .btn{ padding:10px 12px; font-size:.95rem; }
}

/* ----------------------------------------------------
   CARDS / GRIDS (used in sections)
---------------------------------------------------- */
.bg-light{background:#f7f7f7;}
.bg-white{background:#fff;}

.cards{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:14px;
}
.card{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:18px;
}
.card h3{margin:0 0 8px;font-size:1.1rem;}
.meta{font-size:.95rem;opacity:.9;}
.more{display:inline-block;margin-top:10px;font-weight:700;text-decoration:none;}
.more:after{content:" →";}

/* ----------------------------------------------------
   FOOTER (single custom footer + flag bookend)
---------------------------------------------------- */
.section.footer{
  font-size:.9rem;
  color:#666;
  background:#f2f2f2;
  position:relative;
  padding:28px 20px;
}
.section.footer:after{
  content:"";
  position:absolute;left:0;bottom:0;width:100%;height:14px;
  background:linear-gradient(90deg,#000 0 25%,#fff 25% 50%,#2e7d32 50% 75%,#d32f2f 75% 100%);
  border-top:1px solid rgba(0,0,0,.15);
}

/* If the Astra footer bar ever shows up again, hide it firmly */
.site-footer, .ast-footer-adv, .ast-footer-overlay{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}
/* ===== CFP Stabilize Pack v2 (safe overrides) ===== */
:root{
  --black:#000;
  --white:#fff;
  --red:#d32f2f;
  --green:#2e7d32;
  --maxw:1100px;
}

/* Base type + spacing (kept light, won’t fight your theme) */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
.section{ padding:64px 20px; }
.wrap{ max-width: var(--maxw); margin: 0 auto; }
.center{ text-align: center; }
.lead{ font-size:1.15rem; line-height:1.6; }

/* Link color = theme green (non-buttons only) */
a:not(.btn), .card a:not(.btn), .wrap a:not(.btn){
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(46,125,50,.35);
}
a:not(.btn):hover, .card a:not(.btn):hover, .wrap a:not(.btn):hover{
  color:#1f5a24;
  text-decoration-color: currentColor;
}
a:not(.btn):visited{ color:#2a6e2f; }
a:not(.btn):focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:2px; }

/* Cards grid used across sections */
.cards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:14px; }
.card{ background:#fff; border:1px solid #e6e6e6; border-radius:10px; padding:18px; }
.card h3{ margin:0 0 8px; font-size:1.1rem; }
.meta{ font-size:.95rem; opacity:.9; }
.more{ display:inline-block; margin-top:10px; font-weight:700; text-decoration:none; }
.more:after{ content:" →"; }

/* HERO look (kept minimal so it won’t conflict) */
.hero{ background:#fdfdfd; color:#111; padding:56px 20px 60px; position:relative; }
.hero:before{
  content:""; position:absolute; left:0; top:0; width:100%; height:14px;
  background: linear-gradient(90deg,#000 0 25%,#fff 25% 50%,#2e7d32 50% 75%,#d32f2f 75% 100%);
  border-bottom:1px solid rgba(0,0,0,.15);
}
.hero img{ max-width:240px; height:auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.25)); }
h1,h2{ margin:18px 0 12px; line-height:1.2; }
h1{ font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; }
h2{ font-size: clamp(24px, 3vw, 34px); font-weight: 800; }

/* Buttons: persistent outline in neutral state (desktop + mobile) */
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  border:1.5px solid rgba(0,0,0,.18); /* always visible outline */
  background-clip:padding-box;
  box-shadow:none !important;
  transition:border-color .2s ease, transform .2s ease;
}
.btn-black { background: var(--black); color:#fff; }
.btn-white { background: var(--white); color:#111; border-color: rgba(0,0,0,.22); }
.btn-green { background: var(--green); color:#fff; }
.btn-red   { background: var(--red);   color:#fff; }

.btn:hover{ border-color: rgba(0,0,0,.35); transform: translateY(-1px); }

/* Button row layout */
.btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:720px; margin:20px auto 0; }
@media (min-width:769px){
  .btns{ flex-wrap:nowrap; }
  .btns .btn{ flex:1 1 auto; min-width:150px; text-align:center; }
}
/* Mobile: 2×2 grid so all four fit nicely */
@media (max-width:768px){
  .btns{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px; margin:16px auto 0;
  }
  .btns .btn{ width:100%; text-align:center; padding:12px 14px; }
}
@media (max-width:380px){
  .btns .btn{ padding:10px 12px; font-size:.95rem; }
}

/* Anchor offset so fixed header doesn’t cover section titles */
#hero,#take-action,#genocide-facts,#myths,#boycott,#stories,#updates,#contact{ scroll-margin-top:72px; }
@media (max-width:768px){
  #hero,#take-action,#genocide-facts,#myths,#boycott,#stories,#updates,#contact{ scroll-margin-top:64px; }
}
/* === Gutenberg buttons: match site buttons (outline + flag palette) === */

/* Base look for block button */
.wp-block-button .wp-block-button__link{
  border:1.5px solid rgba(0,0,0,.18);
  background-clip: padding-box;
  box-shadow:none !important;
  border-radius:6px;
  font-weight:700;
  padding:12px 20px;
  transition: border-color .2s ease, transform .2s ease;
  text-decoration:none;
}
.wp-block-button .wp-block-button__link:hover{
  border-color:rgba(0,0,0,.35);
  transform:translateY(-1px);
}

/* Default/outline style (white background) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline{
  background:#fff;
  color:#111;
  border-color:rgba(0,0,0,.22);
}

/* Flag colors (use block color pickers or custom classes) */
.wp-block-button .wp-block-button__link.has-black-background-color,
.wp-block-button .wp-block-button__link.btn-black{
  background:#000; color:#fff;
}
.wp-block-button .wp-block-button__link.has-white-background-color,
.wp-block-button .wp-block-button__link.btn-white{
  background:#fff; color:#111; border-color:rgba(0,0,0,.22);
}
.wp-block-button .wp-block-button__link.has-green-background-color,
.wp-block-button .wp-block-button__link.btn-green{
  background:#2e7d32; color:#fff;
}
.wp-block-button .wp-block-button__link.has-red-background-color,
.wp-block-button .wp-block-button__link.btn-red{
  background:#d32f2f; color:#fff;
}
/* ===== Force compact white header across all pages (override Astra inline) ===== */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header,
.ast-below-header,
.ast-mobile-header-wrap,
.ast-header-break-point .ast-mobile-header-wrap,
.ast-header-break-point .ast-mobile-header-content,
.ast-header-break-point .ast-mobile-header-content .ast-builder-grid-row {
  background:#fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
}

/* Keep it fixed & compact */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:2000;
}
.main-header-bar{ padding:6px 0 !important; min-height:44px !important; }
.main-header-bar .ast-container{
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* Menu link colors (desktop + mobile + popup) */
.ast-desktop .main-header-menu > .menu-item > a,
.ast-desktop .main-header-menu .menu-link,
.ast-header-break-point .main-navigation ul .menu-link,
.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu .menu-link,
.ast-header-break-point .ast-mobile-header-wrap .menu-link,
.ast-header-break-point .ast-mobile-header-content .main-header-menu .menu-link {
  color:#111 !important;
  font-weight:600;
  letter-spacing:.5px;
  text-decoration:none;
}

/* Hover/focus stays dark (no theme blue) */
.main-header-menu .menu-link:hover,
.main-header-menu .menu-link:focus,
.ast-header-break-point .main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-link:focus {
  color:#111 !important;
}

/* Mobile menu toggler icon color */
.ast-button-wrap .menu-toggle .ast-mobile-svg,
.ast-button-wrap .menu-toggle .ast-inline-flex svg {
  fill:#111 !important;
  color:#111 !important;
}

/* Offset page content so the fixed header never covers it (desktop + mobile) */
#content, .site-content, .ast-container{ padding-top:56px !important; }
@media (max-width:768px){
  #content, .site-content, .ast-container{ padding-top:52px !important; }
}


/* Make the “Outline” variation readable for any color choice */
.wp-block-button.is-style-outline .wp-block-button__link.has-black-color{ color:#000; }
.wp-block-button.is-style-outline .wp-block-button__link.has-green-color{ color:#2e7d32; }
.wp-block-button.is-style-outline .wp-block-button__link.has-red-color{   color:#d32f2f; }

/* ... your header override code ... */

/* Optional: global heading scale (outside hero too) */
h1{ 
  font-size: clamp(32px, 4.5vw, 52px); 
  line-height:1.2; 
  font-weight:800; 
}
h2{ 
  font-size: clamp(24px, 3vw, 34px); 
  line-height:1.2; 
  font-weight:800; 
}
/* === Normalize Astra/Gutenberg page wrapper to match landing === */

/* 1) Constrain the content width like your .wrap, add side padding */
.ast-separate-container .entry-content,
.ast-plain-container .entry-content,
.ast-page-builder-template .entry-content {
  padding-left: 20px;
  padding-right: 20px;
}
.ast-separate-container .entry-content > *,
.ast-plain-container .entry-content > *,
.ast-page-builder-template .entry-content > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

/* 2) Unify heading style site-wide (outside hero too) */
.entry-content h1,
.entry-content h2 {
  font-weight: 800;
  line-height: 1.2;
}
.entry-content h1 { font-size: clamp(32px, 4.5vw, 52px); }
.entry-content h2 { font-size: clamp(24px, 3vw, 34px); }

/* 3) Match link color on regular content (non-buttons) */
.entry-content a:not(.btn):not(.wp-block-button__link) {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(46,125,50,.35);
}
.entry-content a:not(.btn):not(.wp-block-button__link):hover {
  color: #1f5a24;
  text-decoration-color: currentColor;
}

/* 4) Gutenberg buttons: keep the persistent outline + flag palette */
.entry-content .wp-block-button .wp-block-button__link{
  border:1.5px solid rgba(0,0,0,.18);
  background-clip: padding-box;
  border-radius:6px;
  font-weight:700;
  padding:12px 20px;
  box-shadow:none !important;
  transition:border-color .2s ease, transform .2s ease;
  text-decoration:none;
}
.entry-content .wp-block-button .wp-block-button__link:hover{
  border-color:rgba(0,0,0,.35);
  transform:translateY(-1px);
}
/* outline style readable on white */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link{
  background:#fff; color:#111; border-color:rgba(0,0,0,.22);
}
/* flag colors */
.entry-content .wp-block-button .wp-block-button__link.has-black-background-color{ background:#000; color:#fff; }
.entry-content .wp-block-button .wp-block-button__link.has-white-background-color{ background:#fff; color:#111; border-color:rgba(0,0,0,.22); }
.entry-content .wp-block-button .wp-block-button__link.has-green-background-color{ background:#2e7d32; color:#fff; }
.entry-content .wp-block-button .wp-block-button__link.has-red-background-color{   background:#d32f2f; color:#fff; }

/* 5) Cards inside normal pages */
.entry-content .card{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:18px;
}
/* === Vertical Timeline component (CFP) === */
.timeline{ position:relative; max-width:var(--maxw); margin:0 auto; }
.timeline:before{
  content:""; position:absolute; left:32px; top:0; bottom:0; width:2px;
  background:#e6e6e6;
}
.timeline-item{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px;
  margin:22px 0;
}
.timeline-pin{ position:relative; }
.timeline-dot{
  position:absolute; left:25px; top:6px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid #111; box-shadow:0 0 0 4px #fff;
}
.timeline-year{
  display:inline-block; margin-top:26px;
  font-weight:800; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px; line-height:1;
  background:#000; color:#fff;
}
/* Flag palette year-chips */
.timeline-year.is-white{ background:#fff; color:#111; border:1px solid rgba(0,0,0,.22); }
.timeline-year.is-green{ background:var(--green); color:#fff; }
.timeline-year.is-red{   background:var(--red);   color:#fff; }

/* Content card */
.timeline-card{
  background:#fff; border:1px solid #e6e6e6; border-radius:10px; padding:16px 18px;
}
.timeline-card h3{ margin:0 0 .25rem; }
.timeline-card .meta{ font-size:.95rem; opacity:.9; }

/* Mobile tidy */
@media (max-width:600px){
  .timeline:before{ left:24px; }
  .timeline-item{ grid-template-columns:56px 1fr; gap:12px; }
  .timeline-dot{ left:17px; }
  .timeline-year{ margin-top:22px; font-size:.95rem; }
}
/* Timeline Styling */
.timeline {
  position: relative;
  margin: 40px 0;
  padding: 0 20px;
}
.timeline:before {
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:3px;
  background:#e5e5e5;
  transform:translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 30px;
  box-sizing: border-box;
}
.timeline-item.left { left:0; text-align:right; }
.timeline-item.right { left:50%; text-align:left; }

.timeline-dot {
  position:absolute;
  top:24px;
  left:50%;
  width:16px; height:16px;
  background:#111;
  border-radius:50%;
  transform:translateX(-50%);
  border:3px solid #fff;
  box-shadow:0 0 0 3px #1112;
}
.timeline-content {
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:16px 20px;
  display:inline-block;
  max-width:320px;
}
.timeline-content h3 {
  margin-top:0;
  font-size:1.25rem;
  font-weight:700;
}
.timeline-content a {
  font-weight:600;
  color:var(--green);
  text-decoration:none;
}
.timeline-content a:hover {
  text-decoration:underline;
}

/* Mobile: stack items */
@media (max-width:768px){
  .timeline:before { left:8px; }
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    left:0; width:100%; text-align:left; padding-left:40px;
  }
  .timeline-dot { left:8px; transform:none; }
}