/* =========================================================
   style.css — consolidated, polished, consistent (single source)
   Rethinking Africa (Dr. Isaac Yaw Asiedu)

   GOALS
   - One header/nav system (no conflicting duplicates)
   - Full-width FIXED header (more reliable than sticky)
   - Content framed via .container
   - Mobile-friendly nav (wrap on medium; scroll row on small)
   - Dropdown menu support (click-to-open)
   - Supports BOTH .site-nav and .nav across existing pages
   - Prevent awkward sentence breaks / hyphenation
   - LOGO: supports <img class="brand-logo" src="images/ra-icon.png">

   UPDATE (Deep Header)
   - Deep academic blue header (selected)
   - Stronger logo backing so it pops on the header
   - Brand logo link hover/focus styling (accessibility + clarity)
   ========================================================= */


/* -------------------- Theme + layout variables -------------------- */
:root{
  --bg: #fafafa;
  --text: #222;
  --muted: #666;

  --container: 1200px;
  --gutter: 20px;

  --radius: 16px;
  --card: #ffffff;
  --shadow: 0 10px 22px rgba(0,0,0,0.06);

  --link: #1a4fd8;
  --link-hover: #163fae;

  /* Header theme */
  --header-text: #ffffff;
  --header-border: rgba(255,255,255,0.18);

  /* Full-width header background (DEEP academic blue) */
  --header-bg: linear-gradient(90deg, #1d4a67, #256a92, #1d4a67);
  --header-bg-glass: rgba(29,74,103,0.92);

  /* Header height reserve (keeps content from being hidden under fixed header) */
  --header-h: 108px;
  --header-h-mobile: 132px;
}


/* -------------------- Base reset -------------------- */
*{ box-sizing: border-box; margin: 0; padding: 0; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Anchor offset so in-page links don't hide under fixed header */
  scroll-padding-top: var(--header-h);

  /* stop auto-hyphenation */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

body{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  max-width: 100%;

  /* IMPORTANT: reserve space for the fixed header */
  padding-top: var(--header-h);

  overflow-x: hidden;
}

/* Mobile reserve */
@media (max-width: 720px){
  body{ padding-top: var(--header-h-mobile); }
  html{ scroll-padding-top: var(--header-h-mobile); }
}

/* Avoid clipped content anywhere */
main, .container, .section, .content-card{ overflow: visible; }


/* =========================================================
   TEXT WRAPPING / LINE BREAK CONTROL
   ========================================================= */
p, li, .lead, .tagline, h1, h2, h3, h4{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;

  /* Safer wrapping on small screens (prevents odd gaps/overflow) */
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

/* Ensure grid/flex text areas don’t force breaks */
.content-card,
.section,
.hero-content{ min-width: 0; }

/* Only allow breaking for long URLs if needed */
a, .pub-meta{
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* -------------------- Skip link (accessibility) -------------------- */
.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  background: #111;
  color: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  z-index: 999999;
}
.skip-link:focus{ left: 10px; }


/* -------------------- Container (main framing) -------------------- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem var(--gutter);
}


/* =========================================================
   HEADER + NAV (fixed, reliable)
   ========================================================= */
.site-header{
  width: 100%;
  position: fixed;   /* reliable everywhere; sticky breaks with overflow/transform parents */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  color: var(--header-text);
}

/* Optional glass effect */
@supports (backdrop-filter: blur(8px)){
  .site-header{
    background: var(--header-bg-glass);
    backdrop-filter: blur(8px);
  }
}

/* Framed inner header content */
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Brand */
.brand{
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Optional old pages mark */
.brand-mark{
  width: 16px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
}

/* Logo link (clickable logo wrapper) */
.brand-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 14px; /* matches .brand-logo rounding */
}

/* Keyboard focus ring (accessibility) */
.brand-link:focus-visible{
  outline: 3px solid rgba(255,255,255,0.55);
  outline-offset: 4px;
}

/* Logo image (strong backing so logo stands out on deep header too) */
.brand-logo{
  display: block;
  width: 78px;
  height: 78px;
  object-fit: contain;
  flex: 0 0 auto;

  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);

  border-radius: 14px;
  padding: 6px;
}

/* Subtle hover effect so the logo feels clickable */
.brand-link:hover .brand-logo{
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.45);
}

/* Brand text */
.brand-text{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.brand-name{
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
  color: var(--header-text);
}

.brand-sub{
  font-size: 0.9rem;
  color: rgba(255,255,255,0.92);
}

.brand-tag{
  color: rgba(255,255,255,0.88);
  font-weight: 650;
  margin-left: 0.35rem;
  white-space: nowrap;
}


/* Navigation (supports BOTH .site-nav and .nav) */
.site-nav,
.nav{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Nav links */
.site-nav a,
.nav a{
  color: var(--header-text);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1.1;
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.site-nav a:hover,
.nav a:hover,
.site-nav a:focus,
.nav a:focus{
  outline: none;
  background: rgba(255,255,255,0.16);
}

/* Active page */
.site-nav a.active,
.nav a.active,
.site-nav a[aria-current="page"],
.nav a[aria-current="page"]{
  background: rgba(255,255,255,0.24);
}


/* =========================
   Dropdown Menu (click-to-open)
   ========================= */
.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Toggle is an <a> */
.site-nav .dropdown-toggle,
.nav .dropdown-toggle{
  color: var(--header-text);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1.1;
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.site-nav .dropdown-toggle:hover,
.nav .dropdown-toggle:hover,
.site-nav .dropdown-toggle:focus,
.nav .dropdown-toggle:focus{
  outline: none;
  background: rgba(255,255,255,0.16);
}

.dropdown-menu{
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 0.85rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 0.4rem;
  display: none;
  z-index: 99999;
}

.dropdown-menu a{
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  text-decoration: none;
  color: #123b5d;
  font-size: 0.95rem;
  line-height: 1.2;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus{
  background: #f2f5f8;
  outline: none;
}

/* Open state */
.nav-dropdown.open .dropdown-menu{ display: block; }


/* -------------------- Responsive header behaviour -------------------- */

/* Medium screens: header stacks neatly */
@media (max-width: 900px){
  .header-inner{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .site-nav,
  .nav{
    width: 100%;
    justify-content: center;
  }

  .brand-tag{
    display: block;
    margin-left: 0;
    margin-top: 0.2rem;
    white-space: normal;
  }

  /* Slightly taller header reserve on tablets */
  :root{ --header-h: 124px; }
}

/* Small screens: nav becomes single-line scroll row */
@media (max-width: 600px){
  .brand-tag{ display: none; }

  .brand-logo{
    width: 56px;
    height: 56px;
    padding: 5px;
    border-radius: 12px;

    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.35);
  }

  .site-nav,
  .nav{
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 8px;
    justify-content: flex-start;
  }

  .site-nav a,
  .nav a,
  .site-nav .dropdown-toggle,
  .nav .dropdown-toggle{
    padding: 10px 12px;
  }

  .site-nav::-webkit-scrollbar,
  .nav::-webkit-scrollbar{ height: 6px; }

  .site-nav::-webkit-scrollbar-thumb,
  .nav::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.30);
    border-radius: 999px;
  }

  :root{ --header-h-mobile: 148px; }
}

/* Mobile: dropdown becomes full-width under nav */
@media (max-width: 720px){
  .dropdown-menu{
    position: static;
    min-width: 100%;
    width: 100%;
    margin-top: 0.4rem;
    box-shadow: none;
  }
}


/* -------------------- Headings / common helpers -------------------- */
h1{
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
h2{
  font-size: 1.35rem;
  line-height: 1.3;
  margin-top: 1.4rem;
}
h3{
  font-size: 1.05rem;
  line-height: 1.35;
  margin-top: 1rem;
}

.section{ margin-top: 2.5rem; }
.tagline{ color: var(--muted); margin-bottom: 1.25rem; }
.muted{ color: var(--muted); }


/* -------------------- Links -------------------- */
a{
  color: var(--link);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

.text-link{
  color: var(--link);
  font-weight: 750;
  text-decoration: none;
}
.text-link:hover{ text-decoration: underline; }


/* -------------------- Cards / surfaces -------------------- */
.content-card{
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.content-card p{ margin-top: 0.9rem; color: #333; }
.content-card p:first-of-type{ margin-top: 0.6rem; }


/* -------------------- Bullets -------------------- */
.bullets{ margin-top: 0.9rem; padding-left: 1.1rem; }
.bullets li{ margin: 0.45rem 0; }


/* -------------------- HERO (Home / About) -------------------- */
.hero{
  padding: 2rem 0;
  background: linear-gradient(to bottom, #ffffff, #f7f7f7);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.07);
}


/* -------------------- Titles -------------------- */
.page-title{
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  letter-spacing: 0.2px;
}

.lead{
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  max-width: 68ch;
}


/* -------------------- Buttons -------------------- */
.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.15rem 0 0.85rem;
}

.btn{
  display: inline-block;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform 0.15s ease;
  background: #111;
  color: #fff;
}

.btn:hover{
  text-decoration: none;
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

/* Ghost */
.btn-ghost{
  background: transparent;
  color: #222;
  border: 1px solid #ccc;
}
.btn-ghost:hover{
  background: #f0f0f0;
  text-decoration: none;
}


/* -------------------- Footer -------------------- */
.footer,
.site-footer{
  margin-top: 3rem;
  padding: 1.25rem var(--gutter);
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid rgba(0,0,0,0.10);
  background: #fff;
}


/* -------------------- Print-safe -------------------- */
@media print{
  body{ background: #fff; padding-top: 0 !important; }

  .site-header,
  .nav,
  .site-nav{ display: none !important; }

  .hero{
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }

  .content-card{
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }

  a{ text-decoration: underline; }

  .btn,
  .cta-row{ display: none !important; }
}


/* =========================================================
   ABOUT PAGE HERO (photo + biography)
   ========================================================= */
.hero-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

.hero-media{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.avatar{
  width: 100%;
  max-width: 320px;
}

.author-photo{
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  background: #fff;
}

.hero-content{ min-width: 0; }
.hero-content .tagline{ margin-top: 0.4rem; }


/* Pills / meta tags */
.meta-line{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  font-size: 0.85rem;
  color: #333;
  font-weight: 650;
}

/* Two-column section at bottom (Key Areas + Contact) */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Responsive: stack photo over bio */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .avatar{ max-width: 420px; margin: 0 auto; }
  .author-photo{ max-height: 520px; }
  .two-col{ grid-template-columns: 1fr; }
}


/* =========================================================
   Resource link styling
   ========================================================= */
.resource-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  text-decoration: none;
  font-weight: 750;
  color: #123b5d;
}

.resource-link:hover{
  background: rgba(0,0,0,0.06);
  text-decoration: none;
}

.resource-note{
  display:block;
  margin-top: 6px;
  color: #666;
  font-size: 0.92rem;
}


/* =========================================================
   book cover helper
   ========================================================= */
.book-cover-img{
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}