/* ==========================================================================
   PAC 2026 theme overrides
   Brand palette for this year: a vibrant, clear set of colors representing
   Senegal — crisp white backgrounds, green (growth/freshness), carrot
   orange (warmth/enthusiasm), blue (trust/stability) and red (energy/
   passion).
   ========================================================================== */
:root {
  --primary: #D00000;         /* Red — energy and passion */
  --primary-dark: #A80000;
  --primary-light: #FDEAEA;
  --secondary: #052443;       /* Blue — trust and stability */
  --pac-orange: #F79206;      /* Carrot Orange — warmth and enthusiasm */
  --pac-green: #00853F;       /* Green — growth and freshness */
  --pac-green-light: #E6F4ED; /* pale tint of --pac-green for soft section backgrounds */
}

/* ==========================================================================
   News and Updates section (#blog, page--front.html.twig): replaces the
   base template's stock tan/khaki world-map bg-2.jpg, which doesn't match
   the PAC 2026 Senegal palette, with a flat pale-green tint instead.
   ========================================================================== */
.pac-green-light {
  background-color: var(--pac-green-light);
}

/* ==========================================================================
   Decorative corner accents (breadcrumb hero + footer): causes-shape-1/2
   now point at the full-colour PAC mandala pattern (images/brand/pac-
   pattern-1.png, -2.png) rather than the template's plain white line-art
   shapes. style.css sizes them at a bold `width: 40%` for a subtle white
   accent — far too loud at that size/opacity once it's a saturated
   multi-colour graphic, so faded and capped to a small corner watermark
   here instead.
   ========================================================================== */
.causes-shape-1,
.causes-shape-2 {
  width: 100%;
  max-width: 220px;
  opacity: .35;
}

/* ==========================================================================
   Inner-page breadcrumb hero (page.html.twig / page--node--63.html.twig):
   page.page_title and page.breadcrumb render Drupal's plain default
   markup (bare <h1>, <nav><ol class="breadcrumb"><li class="breadcrumb-item">)
   with no theme-specific classes, so it needs its own styling here to read
   correctly against the section's dark background — matching the visual
   weight of the template's own .breadcrumb-sec-title / .breadcrumb-list.
   ========================================================================== */
section.breadcrumb h1 {
  color: var(--white);
  font-size: 46px;
  margin-bottom: 14px;
  position: relative;
}
section.breadcrumb h1 .field {
  display: inline;
}
section.breadcrumb nav[aria-label="breadcrumb"] {
  position: relative;
}
section.breadcrumb nav[aria-label="breadcrumb"] ol.breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-weight: 600;
}
section.breadcrumb nav[aria-label="breadcrumb"] .breadcrumb-item {
  color: var(--gray-300);
}
section.breadcrumb nav[aria-label="breadcrumb"] .breadcrumb-item a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
}
section.breadcrumb nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
  color: var(--primary);
}
section.breadcrumb nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: rgba(255, 255, 255, .35);
}

/* ==========================================================================
   Header: skin the bootstrap5 base theme's own menu--main.html.twig output
   (.navbar-nav / .nav-item / .nav-link / .dropdown-menu) to match the
   template's nav look, since neither pac nor pac2026 override that template.
   ========================================================================== */
.atf-nav .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap !important;
}
.atf-nav .nav-item {
  position: relative;
}
.atf-site-header {
  padding: 20px 0;
}
.atf-site-header.atf-sticky-active {
  padding: 7px 0;
}

.atf-nav .nav-link,
.atf-nav .nav-link.dropdown-toggle {
  font-weight: 600;
  text-transform: capitalize;
  color: var(--secondary);
  padding: 10px 0;
  cursor: pointer;
}
.atf-nav .nav-link.active {
  color: var(--primary);
}
.atf-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  border-radius: 8px;
  padding: 10px 0;
  list-style: none;
  margin: 0;
  border: none;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s ease;
  z-index: 50;
}
.atf-nav .nav-item.dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.atf-nav .dropdown-menu .dropdown-item {
  display: block;
  padding: 8px 20px;
  color: var(--secondary);
  font-weight: 500;
  background: none;
}
.atf-nav .dropdown-menu .dropdown-item:hover {
  color: var(--primary);
}
.atf-hamburger-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.atf-hamburger-menu nav li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.atf-hamburger-menu nav .nav-link {
  display: block;
  padding: 14px 0;
  font-weight: 600;
  color: #fff;
}
.atf-hamburger-menu nav .dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  background: transparent;
  padding-left: 16px;
}
.atf-hamburger-menu nav .dropdown-item {
  padding: 10px 0;
  font-weight: 400;
  color: rgba(255, 255, 255, .85);
  background: none;
}

.cause-pattern-img {
  object-fit: contain !important;
  padding: 30px;
  box-sizing: border-box;
}

#translate {
  display: inline-block;
}
#translate select,
#translate .form-select {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  font-size: 13px;
  padding: 2px 8px;
}

/* ==========================================================================
   Hero: pattern-graphic panel (right) + countdown widget (left, sits in
   the dark .hopeful-left-box alongside the title/buttons — light-on-dark
   treatment to match that panel, not the template's white-glass overlay
   the countdown used to inherit from .achived-area).
   ========================================================================== */
.hopeful-img-pattern img {
  border-radius: 24px;
  background: var(--secondary);
  padding: 30px;
}

/* ==========================================================================
   Hero: full-bleed looping background video, replacing the old two-column
   hopeful-left-box (dark panel) / hopeful-right-box (image slider) split.
   The video covers the whole section; a left-to-right dark gradient keeps
   the .hopeful-content text readable on the left while the video stays
   visible across the rest of the hero (a top-heavy vertical fade takes
   over on narrow screens, where the content stacks full-width on top).
   ========================================================================== */
.hero-video-section {
  /* min-height: 792px; */
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .hero-video-section {
    /* min-height: 700px; */
  }
}
@media (max-width: 767px) {
  .hero-video-section {
    min-height: auto;
    padding: 90px 0;
  }
}

.hero-video-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 32, 64, .93) 0%, rgba(8, 32, 64, .8) 34%, rgba(8, 32, 64, .4) 62%, rgba(8, 32, 64, .12) 100%);
}
@media (max-width: 767px) {
  .hero-video-overlay {
    background: linear-gradient(180deg, rgba(8, 32, 64, .55) 0%, rgba(8, 32, 64, .85) 45%, rgba(8, 32, 64, .93) 100%);
  }
}

.hero-video-content-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-video-content-wrap {
    padding: 60px 50px;
  }
}
@media (max-width: 767px) {
  .hero-video-content-wrap {
    padding: 0 24px;
  }
}

.hero-video-content {
  max-width: 635px;
  width: 100%;
  margin-inline-start: 0;
}
@media (max-width: 767px) {
  .hero-video-content {
    max-width: 100%;
  }
}

.hero-countdown {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.hero-countdown-label {
  display: block;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
}
.pac-countdown {
  display: flex;
  gap: 26px;
}
.pac-countdown .cd-item {
  position: relative;
  min-width: 52px;
}
.pac-countdown .cd-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -13px;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, .18);
}
.pac-countdown .cd-num {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.pac-countdown .cd-label {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   Views: speakers (rendered by the vvjb module — same markup pattern the
   pac theme's own CSS targets: .views-row / .vvjb-item with an image and
   an h3/span for name + position), skinned as .volunteer-card style tiles.
   ========================================================================== */
/* The vvjb module leaves .vvjb-item unsized in horizontal orientation
   (flex: 0 0 auto with no width), so each slide's width is driven purely
   by its content — a long speaker name makes that card wider than the
   others, breaking the "N up" layout and making speakers look mismatched
   in size. Force equal-width slides matching the view's carousel config
   (items_big: 4, gap: 16px — Views UI: Speakers > Block > Format) so
   every card is identical regardless of name length. */
.view-id-speakers .vvjb-items .vvjb-item,
.view-speakers .vvjb-items .vvjb-item {
  flex: 0 0 calc((100% - 48px) / 4);
  width: calc((100% - 48px) / 4);
}
@media (max-width: 991.98px) {
  .view-id-speakers .vvjb-items .vvjb-item,
  .view-speakers .vvjb-items .vvjb-item {
    flex: 0 0 100%;
    width: 100%;
  }
}

.view-id-speakers .view-content .views-row,
.view-id-speakers .view-content .vvjb-item,
.view-id-speakers .vvjb-items .views-row,
.view-id-speakers .vvjb-items .vvjb-item,
.view-speakers .view-content .views-row,
.view-speakers .view-content .vvjb-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
  transition: transform .25s ease;
}
.view-id-speakers .view-content .views-row:hover,
.view-id-speakers .view-content .vvjb-item:hover {
  transform: translateY(-6px);
}
.view-id-speakers img,
.view-speakers img {
  width: 100%;
  max-width: 310px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
/* !important on color: the view's "Global: Custom text" field hardcodes
   Bootstrap's .text-white (color: #fff !important) on the name/position
   markup, expecting a dark overlay behind it that only exists in the old
   pac theme's CSS, not pac2026's — without a stronger rule here the name
   renders white-on-white and disappears against the card background. */
.view-id-speakers h3,
.view-id-speakers .name,
.view-speakers h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--secondary) !important;
  margin: 0 16px 4px;
}
.view-id-speakers span,
.view-speakers span {
  display: block;
  font-size: .85rem;
  color: var(--primary) !important;
  font-weight: 500;
}

/* Standardised speaker photo size (same 300–310px cap used everywhere a
   speaker image appears: front-page carousel above, teaser grid and
   individual speaker page below) so photos of different source
   dimensions/aspect ratios still read as one consistent set. */
.speaker-teaser .image,
.speaker-teaser .image img{
  width: 100%;
  min-width: 300px;
  max-width: 310px;
  aspect-ratio: 1 / 1;
  object-fit: cover;

}

/* ==========================================================================
   Views: co_conveners (rendered as "Partners" on the front page) — skinned
   as a simple logo strip (.sponsor-item style)
   ========================================================================== */
.view-id-co-conveners .view-content,
.view-co-conveners .view-content,
.view-id-funders .view-content,
.view-funders .view-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.view-id-co-conveners .views-row,
.view-co-conveners .views-row,
.view-id-funders .views-row,
.view-funders .views-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-id-co-conveners img,
.view-co-conveners img,
.view-id-funders img,
.view-funders img {
  max-height: 70px;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: all .2s ease;
}
.view-id-co-conveners img:hover,
.view-co-conveners img:hover,
.view-id-funders img:hover,
.view-funders img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ==========================================================================
   Views: event_news — skinned as .blog-card style tiles
   ========================================================================== */

.view-event-news .views-row,
.view-id-event-news .views-row,
.view-id-event_news .views-row {
  flex: 1 1 300px;
  max-width: 360px;
  border-radius: 16px;
  overflow: hidden;
}
.view-event-news img,
.view-id-event-news img,
.view-id-event_news img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}
.view-event-news .views-row h2,
.view-event-news .views-row h3,
.view-id-event-news .views-row h2,
.view-id-event-news .views-row h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 16px 16px 0;
  color: var(--secondary);
}
.view-event-news .views-row .field--name-body,
.view-id-event-news .views-row .field--name-body {
  padding: 0 16px 20px;
  font-size: .9rem;
  color: #555;
}

/* ==========================================================================
   Views: programmes (agenda/day tabs) — card-style rows
   ========================================================================== */
.view-programmes .views-row {
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(8, 32, 64, .08);
}
.view-programmes .views-row .time-detail {
  color: #fff;
  background-color: var(--primary);
  text-align: center;
  padding: 10px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   Programme page day tabs
   ========================================================================== */
#pills-tab .nav-link {
  border: none;
  background: #fff;
  border-radius: 12px;
  padding: 14px 24px;
  margin: 0 6px 12px;
  box-shadow: 0 6px 20px rgba(8, 32, 64, .08);
  text-align: center;
}
#pills-tab .nav-link .day {
  font-weight: 600;
  color: var(--secondary);
}
#pills-tab .nav-link .date {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
}
#pills-tab .nav-link.active {
  background: var(--primary);
}
#pills-tab .nav-link.active .day,
#pills-tab .nav-link.active .date {
  color: #fff;
}

/* ==========================================================================
   Site footer background: replaces the stock template's flat photo
   (bg-3.jpg) + black scrim with a brand blend instead — a diagonal
   secondary-navy base warmed by a primary-red glow in the bottom corner,
   with the bg-4.png dot texture screened on top for subtle depth. The
   texture lives on ::before (rather than as a background-image layer)
   because `opacity` has no per-layer equivalent in the background
   shorthand — a pseudo-element is the only way to dim just the texture
   without also fading the gradients under it. z-index: -1 keeps it behind
   the footer's real content (.container) but above the gradient, in the
   same stacking tier as .client-shape-2.
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: var(--secondary);
  background-image:
    radial-gradient(ellipse 85% 75% at 100% 100%, var(--primary) 0%, rgba(208, 0, 0, .32) 32%, transparent 62%),
    linear-gradient(155deg, var(--secondary) 0%, #0a2c52 55%, var(--secondary) 100%);
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('/themes/custom/pac2026/images/bg/bg-4.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  mix-blend-mode: screen;
  opacity: 0.12;
}

.no-transform,
.no-transform * {
  transform: none !important;
}