/* ==========================================================================
   LAU Impact — Custom CSS (organized)
   --------------------------------------------------------------------------
   Contents
   1) Header / Branding
   2) Typography tweaks
   3) Grid + multi-column lists
   4) Buttons / CTAs
   5) Homepage: Hero banner / slideshow
   6) Page-specific styles
      6.1) Team
      6.2) Impact Now (Make a Gift)
      6.3) Leadership & Volunteering
      6.4) Giving Societies
      6.5) Impact Stories (News)
   7) Slideshow arrows
   8) Colorbox (lightbox) overrides
   9) Sharing buttons
  10) H2 blocks + collapsible
  11) Responsive rules
   ========================================================================== */


/* ==========================================================================
   1) Header / Branding
   ========================================================================== */

/* Container that holds: logo + site subtitle + nav toggle + nav group */
header .out_wrap {
  display: flex;
  align-items: flex-start; /* aligns subtitle nicely with logo block */
  flex-wrap: wrap;         /* allows subtitle to drop below on small screens */
}

/* Logo should keep its natural width and never shrink */
.lau_logo {
  flex: 0 0 auto;
}

/* Subtitle sits to the right on large screens, wraps below on small screens */
.site-subtitle {
  position: relative;
  flex: 1 1 auto;      /* lets it use remaining space */
  margin-left: 4rem;   /* spacing after logo */
  margin-top: calc(87px - 2.5rem);  /* 87px is height of the logo; gives room for the green bar */
  font-size: 1.5rem;
  line-height: 1.3;
}

.homepage div.canvas{
width:100%;
height:500px;
}
@media only screen and (max-width: 1080px) {
	/* logo becomes smaller, 74px high, so we need to adjust */
	.site-subtitle { margin-top: calc(74px - 2.5rem); }
}


/* Link styling */
.site-subtitle a {
  display: inline-block;        /* ensures consistent box behavior */
  color: var(--primarygreen);
  text-decoration: none;
}
.site-subtitle a:hover {
  color: var(--anthracite) !important;
}

/* Draw one continuous line (text area + the right extension area) */
.site-subtitle::after {
  content: "";
  position: absolute;
  left: -1rem; /* starts exactly after the logo (at subtitle start) */
  bottom: 0;
  height: 0.8rem;
  width: calc(100% + (50vw - 50% - 6.2rem)); /* extend to viewport edge */
  background: var(--anthracitelightgrey);
  pointer-events: none;
  z-index: -1;
}

/* Keep nav toggle and nav group aligned to the right */
#navToggle,
.top_nav_group {
  margin-left: auto;
}


/* ==========================================================================
   2) Typography tweaks
   ========================================================================== */

main h2 {
  border-bottom: 0;
  padding-top: 1em;
  color: var(--anthracite);
}

@media (max-width:480px) {
	main h1 { font-size:2rem; font-weight: 800; }
}


/* ==========================================================================
   3) Grid + multi-column lists
   ========================================================================== */

.grid,
.full_width .grid {
  grid-gap: 1.5rem;
}

/* Full width grid list (with marker + 3 columns) */
.full_width ul.grid {
  display: block !important;        /* kill grid/flex layouts */
  grid-template-columns: unset !important;
  grid-gap: unset !important;

  padding: 1rem;
  margin: 0;
  line-height: 1.8;

  list-style-type: "❧ ";
  columns: 3;
  column-gap: 3rem;
}

/* Default ul.grid (3 columns, marker via ::marker) */
ul.grid {
  display: block !important;        /* kill grid/flex layouts */
  grid-template-columns: unset !important;
  grid-gap: unset !important;

  padding: 1rem;
  margin: 0;

  columns: 3;
  column-gap: 3rem;
  list-style: none;
}

ul.grid li::marker {
  content: "❧ ";
  color: var(--anthracite40percent);
}


/* ==========================================================================
   4) Buttons / Links
   ========================================================================== */

/* Callout button (adds >>) */
.callout_button:link,
.callout_button:visited {
  font-weight: 700;
  text-decoration: none;
}
.callout_button::after {
  content: " >>";
  margin-left: 0.15rem;
}

/* CTA Button */
a.cta_button {
  display: inline-flex;
  align-items: center;

  color: var(--secondarygreen9) !important;
  background-color: var(--primarygreen);
  text-decoration: none;

  margin-top: 0.2em;
  margin-bottom: 0.2em;

  border-radius: 2rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;

  text-shadow: none;
  position: relative;
}

/* CTA icon bubble */
a.cta_button:after {
  content: "";
  width: 2rem;
  height: 2rem;
  margin-left: 20px;

  display: grid;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background-color: var(--secondarygreen9);

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' stroke='white' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* CTA when used on top of images */
figcaption a.cta_button {
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.9),
    0 6px 16px rgba(0, 0, 0, 0.8);
}

/* CTA Hover */
a.cta_button:hover:after {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23ADB65D' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.page_team main > p img:first-child {
    margin: 0px 15px 20px 0px;
    width: 200px;
    height: auto;
    float: left;
}
/* ==========================================================================
   7) Slideshow arrows
   ========================================================================== */

.arrow_prev,
.arrow_next {
  position: absolute;
  top: 50%;
  width: 1.95rem;
  height: 1.95rem;

  background-size: 50%;
  background-color: var(--anthracitelightgrey);
  border-radius: 50%;
}

.arrow_prev,
.arrow_next,
.arrow_top {
  display: inline-block;
  z-index: 20;

  background-image: url(https://impact.lau.edu.lb/images/arrow-both-impact.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;

  text-indent: -1000vw;
  border: none;
}

.arrow_prev { left: 1.5rem; }
.arrow_next { right: 1.5rem; }

@media (max-width: 480px) {
	.hp_hero_banner { width:100vw; margin-left:-4%; }
	.page_hp_impact .hp_hero_banner .banner_caption { top:77%; }
	.page_hp_impact .hp_hero_banner .banner_caption h1 { font-size:2.7rem !important; }
	.page_hp_impact .hp_hero_banner .banner_caption p { padding:0; }
	.arrow_prev { left:1rem; }
	.arrow_next { right:1rem; }
	.hp_hero_banner .arrow_prev, .hp_hero_banner .arrow_next { top:75%; }
}


.numbers_list .arrow_prev,
.numbers_list .arrow_next,
.numbers_list .arrow_top {
  background-color: transparent;
}

.numbers_list .arrow_next { right: 0; }
.numbers_list .arrow_prev { left: 0; }


/* ==========================================================================
   8) Colorbox (lightbox) overrides
   ========================================================================== */

/* Core layout adjustments inside Colorbox */
#cboxContent main:not(.full_width) {
  float: none;
  width: 92%;
  padding: 3% 4%;
}

#cboxContent main h1 {
  line-height: 1;
  margin-bottom: 0;
  margin-top: 3rem;
}

#cboxContent main p {
  margin: 0.7rem 0;
}

/* Wrapper & overlay */
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

#cboxOverlay {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#colorbox {
  outline: 0;
  margin-right: 0;
  float: none;
  /* height: 150vh; overflow-y: scroll!important; ... */
}

#cboxContent {
  margin-top: 32px;
  overflow: visible;
  background: transparent;
}

.cboxIframe {
  background: #fff;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxLoadedContent {
  background: #fff;
  padding: 0;
  border-radius: 20px;
}

#cboxLoadingGraphic {
  background: url(/_images/loading.gif) no-repeat center center;
}

#cboxLoadingOverlay {
  background: #fff;
  border-radius: 20px;
}

#cboxTitle {
  position: absolute;
  top: -22px;
  left: 0;
  color: #000;
}

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px;
}

/* Controls (buttons) */
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
  position: absolute;
  top: -20px;

  width: 20px;
  height: 20px;

  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;

  text-indent: -9999px;
  /* background:url(images/controls.png) no-repeat 0 0; */
}

/* Avoid outlines on :active (mouse click), keep :focus outlines */
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
  outline: 0;
}

#cboxPrevious { right: 44px; background-position: 0 0; }
#cboxPrevious:hover { background-position: 0 -25px; }

#cboxNext { right: 22px; background-position: -25px 0; }
#cboxNext:hover { background-position: -25px -25px; }

#cboxClose {
  right: 22px;
  top: 50px;
  width: 22px;
  height: 22px;

  background: url(/images/close.png?v=2) no-repeat 0 0;
}
#cboxClose:hover { opacity: 0.8; }

.cboxSlideshow_on #cboxPrevious,
.cboxSlideshow_off #cboxPrevious {
  right: 66px;
}

.cboxSlideshow_on #cboxSlideshow {
  right: 44px;
  background-position: -75px -25px;
}
.cboxSlideshow_on #cboxSlideshow:hover {
  background-position: -100px -25px;
}

.cboxSlideshow_off #cboxSlideshow {
  right: 44px;
  background-position: -100px 0;
}
.cboxSlideshow_off #cboxSlideshow:hover {
  background-position: -75px -25px;
}


/* ==========================================================================
   9) Sharing buttons
   ========================================================================== */

.sharing_buttons a {
  float: left;
  display: flex;

  width: 2.1rem;
  height: 2.1rem;

  margin-right: 0.2rem;
  padding: 7px;

  box-sizing: border-box;
  border-radius: 50%;

  text-align: center;
}

#cboxLoadedContent .sharing_buttons a {
  float: left;
  display: flex;

  width: 2rem;
  height: 2rem;

  margin-right: 0.2rem;
  padding: 7px;

  box-sizing: border-box;
  border-radius: 50%;

  background-color: #c4c4c4;
  text-align: center;
}

#cboxLoadedContent .sharing_facebook:hover,
.sharing_facebook:focus {
  background-color: #3c5a99;
}

#cboxLoadedContent .sharing_linkedin:hover,
.sharing_linkedin:focus {
  background-color: #2d64bc;
}

#cboxLoadedContent .sharing_twitter:hover,
.sharing_twitter:focus {
  background-color: #1da1f2;
}

#cboxLoadedContent .sharing_copy:hover,
.sharing_copy:focus,
#cboxLoadedContent .sharing_whatsapp:hover,
.sharing_whatsapp:focus {
  background-color: #00614b;
}


/* ==========================================================================
  10) H2 blocks + collapsible
   ========================================================================== */

.h2_block h2 {
  text-align: center;
}

.h2_block h2 img {
  max-width: 70%;
}

.page_giving-societies .collapsible {
  max-height: 20rem;
  overflow-y: scroll;
  overflow-x: hidden;

  scrollbar-width: thin;
  scrollbar-color: #999 #f1f1f1;
}

.h2_block .collapsible {
  position: relative;
  font-size: 0.8rem;
}

.h2_block .collapsible::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;

  width: 6px;
  height: 40px;

  background: var(--anthracite60percent);
  border-radius: 5px;

  pointer-events: none;
  display: block;
}

.h2_block .collapsible ul li {
  margin-bottom: 0.5rem;
}


/* Desktop-only enhancements */
@media only screen and (min-width: 981px) {
  .main_nav > ul > li > ul {
        top: 1.84em;
        min-width: 8rem;
        max-width: 18em;
  }
  .arrow_prev:hover,
  .arrow_next:hover,
  .arrow_top:hover {
    box-shadow: none;
    background-color: var(--primarygreen);
    background-image: url(https://toolbox.lau.edu.lb/_ui/arrow-both.svg);
  }

  .top_nav_group {
    width: calc(74% + 1rem);
    container-type: inline-size;
  }

  .nav_toggle {
    display: none !important;
  }

  .main_nav > ul > li > a {
    font-size: 2.04cqw;
    padding: 0.2em;
  }
  .main_nav > ul > li > ul {
    font-size: 0.8rem;
  }

  .tabs.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0.5rem;
    padding: 1rem 0;
  }
}

/* Mobile header adjustments */
@media only screen and (max-width: 980px) {
  .arrow_prev,
  .arrow_next {
    top: 50%;
    width: 2rem;
    height: 2rem;
  }

  /* Subtitle goes below logo */
  .site-subtitle {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
  }

  /* Make bar span full width on mobile */
  .site-subtitle::after {
    left: 0;
    width: calc(100% + (50vw - 50%));
  }

  .nav_toggle {
    display: inline-block !important;
  }
  .page_hp_impact .back_gray_1 p {
    max-width: 100%;
    margin-left: 0;
    }
    .page_hp_impact .testimonial {

    padding: 1rem;
    }
}

/* ==========================================================================
  11) Responsive rules
   ========================================================================== */

@media (max-width: 980px) {
  .page_team .full_width .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .page_giving-societies .with_caption figcaption {
    max-width: 75%;
    padding: 1.5rem;
  }

  .page_team .full_width .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .numbers_list_slider{ padding-inline: 2.5rem; }

  /* allow wrap into multiple rows */
  .numbers_list_slider .numbers_list{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .numbers_list_slider .numbers_list > p{
    width: 96%;
  }
  .numbers_list_slider .numbers_list > p:nth-child(2n)::after {
  display: none;
 }
  .numbers_list strong{ font-size: 2em; } /* optional */
}

@media (max-width: 640px) {

.page_hp_impact .hp_hero_banner .banner_caption h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 2rem;
}

.page_hp_impact .hp_hero_banner .banner_caption p {
 
}

  .page_team .full_width .grid {
    grid-template-columns: 1fr 1fr;
  }

  .h2_block .collapsible {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .page_team .full_width .grid {
    grid-template-columns: 1fr;
  }

  .arrow_prev,
  .arrow_next {
    width: 2rem;
    height: 2rem;
  }

  .numbers_list_slider{ padding-inline: 2.25rem; }

  .numbers_list_slider .numbers_list{
    grid-template-columns: 1fr;
  }
  .numbers_list_slider .numbers_list > p:not(:last-child)::after {
    display: none;
  }
}