/*
 Theme Name:   Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/
/* Remove underline and blue color globally */
a {text-decoration: none !important;color: #333;}
a:hover {text-decoration: none;color: #000;}
.bg-yfs {background-color: rgba(15, 115, 65, 1) !important;}
#main-nav {height: 125px;}
@media only screen and (max-width: 640px) {
body:not(.home) #page-wrapper, #archive-wrapper{padding-top: 4.5rem!important;}
}
.wrapper {padding: 2.5rem 0!important;}
#wrapper-footer{--bs-bg-opacity: 1; background-color: rgba(15, 115, 65, var(--bs-bg-opacity));}
#post-3086 .wp-block-image img {
  aspect-ratio: 1 / 1;   /* force square ratio */
  width: 100%;           /* fill container width */
  object-fit: cover;     /* crop edges to fit */
}
.navbar-collapse {background: rgba(15, 115, 65);z-index: 9;}
.navbar-nav .nav-link,
.dropdown-menu .dropdown-item {
  white-space: normal;       /* allow multiple lines */
  word-break: break-word;    /* break long words if needed */
  overflow-wrap: anywhere;   /* modern browsers handle wrapping */
  line-height: 1.4;          /* improve readability */
}
.navbar-nav li.flip-left .dropdown-menu .dropdown-menu {left: auto;right: 100%;}

.dropdown-menu {min-width: 200px !important;}
.dropdown-menu .dropdown-menu {left: 100%;top: 0;margin-top: 0;}
.dropdown-menu > .dropdown:hover > .dropdown-menu {display: block;}

.custom-logo-link {z-index: 99; margin-left: 20px;margin-top: 20px;}
@media only screen and (max-width: 640px) {
.custom-logo-link {margin-top: -15px;}
}
.social-band-fixed {position: absolute;top: 0;right: 0;left: 0;z-index: 1050;font-size: 1.2rem;}
.social-band-fixed a {color: #333;transition: color 0.3s;}
.social-band-fixed a:hover {color: #007bff;}
@media only screen and (min-width: 1281px) {
  .navbar-expand-md .navbar-collapse {font-size: 16px;}
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
  .navbar-expand-md .navbar-collapse {font-size: 13px;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .navbar-expand-md .navbar-collapse {font-size: 9px;}
}


/* Ensure captions always appear below the image */
.wp-block-image {text-align: center; margin-bottom: 1rem;}
.wp-block-image figcaption { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: #555;}
.card-title a{color:#333;font-size:.85rem;}
.heading-line {position: relative; text-align: left; font-size: 24px; font-weight: bold; margin-bottom: 20px;color:white}
.heading-line::after {content:""; position: absolute; bottom:-2px; left:0; width:100%; height:1px; background:#0f7341;}
.heading-line span {background:#0f7341; padding:0 10px;}
.home .card {text-align: left;max-width:100%;}
.home .wrapper{padding:0px!important;}
.section-title{font-family: 'Rum Raisin', sans-serif;}
#tsbTeamMembers-1 .tsbTeamMembers .tsbMember .memberPhoto{ width: 100%!important;border-radius:0!important}
#tsbTeamMembers-1 .tsbTeamMembers .tsbMember {padding: 0px!important;}
#tsbTeamMembers-2 .tsbTeamMembers .tsbMember .memberPhoto{ width: 100%!important;border-radius:0!important}
#tsbTeamMembers-2 .tsbTeamMembers .tsbMember {padding: 0px!important;}
#tsbTeamMembers-3 .tsbTeamMembers .tsbMember .memberPhoto{ width: 100%!important;border-radius:0!important}
#tsbTeamMembers-3 .tsbTeamMembers .tsbMember {padding: 0px!important;}
#tsbTeamMembers-4 .tsbTeamMembers .tsbMember .memberPhoto{ width: 100%!important;border-radius:0!important}
#tsbTeamMembers-4 .tsbTeamMembers .tsbMember {padding: 0px!important;}
.wp-block-tsb-team .tsbTeamMembers .tsbMember {border-top-left-radius: 25px !important; background-color: #4baab4 !important;overflow: hidden;}

/* category, page design */
.entry-title{text-align:center;color: #000;padding-bottom: 20px;}
/*.card-grid {display:flex; gap:20px; margin-bottom:30px;}
.card {flex:0 0 30%; max-width:30%; text-align:center;}
.card img {width:100%; height:auto;}
.listing {display:flex; align-items:center; gap:15px; margin-bottom:20px;}
.listing img {width:120px; height:auto;} */

.card-grid {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 30px;}
.card {flex: 0 0 33.33%; text-align: center;}
.card img {width: 100%;height: auto;}
.listing {display: flex;align-items: center;gap: 15px;margin-bottom: 20px;}
.listing img {width: 120px;  height: auto;}

@media (max-width: 767px) {
  .card {
    flex: 0 0 100%;   /* 1 per row on sm/xs */
    max-width: 100%;
  }
  .listing {
    flex-direction: column; /* stack image + text */
    align-items: flex-start;
  }
  .listing img {
    width: 100%;     /* full width image on mobile */
    max-width: 100%;
  }
}
#archive-wrapper .card h3 {line-height: 23px;padding: 20px;}

.pagination {text-align:center; margin-top:30px; display: flex; justify-content: center;}
.pagination a {margin:5px; padding:6px 12px; border:1px solid green; text-decoration:none; color:#333;}
.pagination a:hover {background:#f0f0f0;}
.page-numbers {margin: 5px;padding: 6px 12px;border: 1px solid #ccc;text-decoration: none;color: #333;display: inline-flex;}
#single-post-wrapper, #single-wrapper, #page-wrapper, #archive-wrapper, #opinion-page-wrapper {background: #fff8f5;}
.home #page-wrapper {background: transparent;}
#page-wrapper h3, #archive-wrapper h3, #opinion-page-wrapper h3 {line-height: 23px;}
#page-wrapper h3 a, #archive-wrapper h3 a, #opinion-page-wrapper h3 a {color: #333;text-decoration: none;font-size: 21px;font-weight: 700;}
#page-wrapper h3 a:hover, #archive-wrapper h3 a:hover, #opinion-page-wrapper h3 a:hover {color: #000;text-decoration: none;}
.posted {color: #9c9c9c;font-size: 14px;}
@media only screen and (min-width: 768px) {
    #single-post-wrapper, #single-wrapper, #archive-wrapper, #opinion-page-wrapper {padding-top: calc(20px + 2vw);background: #FFF8F5;}
}

/*single post */
#single-post-wrapper .post-meta-layout {display: flex;gap: 20px;align-items: flex-start;margin-bottom: 30px;}
#single-post-wrapper .post-image img {max-width: 300px!important;border-radius: 4px;}
#single-post-wrapper .post-info {flex: 1;}
#single-post-wrapper .entry-title {text-align:left;color: #000;font-size: 28px;font-weight: 600;margin: 0 0 10px;}
#single-post-wrapper .byline, #single-post-wrapper .posted{color: #666;font-size: 14px;margin: 0 0 5px;}
#single-post-wrapper .post-content {font-size: 16px;line-height: 1.6;}


/* On small screens, stack vertically */
@media (max-width: 767.98px) {
  #single-post-wrapper .post-meta-layout {
    flex-direction: column;
    align-items: center; /* optional: center image + text */
    text-align: center;  /* optional: center text */
  }

  #single-post-wrapper .post-image {
    margin-bottom: 15px; /* spacing between image and text */
  }
}

.pagination1{display: flow !important;}

/* Speaker */
.speaker-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers cards horizontally */
  gap: 20px;
}

.speaker-card {
  background: #fff;
  border-radius: 8px;
  text-align: center;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.speaker-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.speaker-card h3 {
  margin: 10px 0 5px;
  font-size: 1.2em;
}

.speaker-card p {
  color: #666;
  font-size: 0.95em;
}

/* Responsive tweaks */
@media (min-width: 992px) {
  .speaker-card {
    flex: 0 1 calc(25% - 20px); /* 4 per row on large screens */
  }
  #past-speakers .carousel-item .col-lg-2 {
    flex: 0 0 20%;   /* 100 / 5 = 20% */
    max-width: 20%;
  }  
}

@media (max-width: 991px) and (min-width: 768px) {
  .speaker-card {
    flex: 0 1 calc(50% - 20px); /* 3 per row on tablets */
  }
}

.slick-slide {padding:10px;}

/* Hero Banner */
.hero-banner {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('/wp-content/themes/fox-child-theme/images/solar-hero.jpg') center/cover no-repeat;
  padding: 100px 20px;
  color: #fff;
  text-align: center;
}
.hero-banner h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}
.hero-banner .tagline {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.hero-banner .btn {
  margin-top: 20px;
}
.carousel {
    margin-right: -12px;
    margin-left: -12px;
}

.home .carousel-item {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 80vh;
  min-height: 400px!important;
  align-items: center;
  justify-content: center;
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.card:hover { transform: translateY(-5px); }
.sidebar-card {
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
}
        
.bg-intern { background-color: #2d4f3d; }
.bg-master { background-color: #b55d41; }
.bg-carbon { background-color: #c5d3c1; color: #333; }
.bg-awards { background-color: #1a331a; }
.bg-green {background-color: rgba(15, 115, 65, .45) !important;}
.bg-red {background-color: rgba(115, 15, 65, .45) !important;}
.bg-partner {background-color: steelblue;}
/* home resource */
.resource-btn {
    background: lightgoldenrodyellow;
    padding: 20px;
    border-radius: 20px;
    min-height: 200px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; 
}
.air-icon { color: #8B4513; }
.doordarshan-icon { color: #FF9933; }
.video-icon { color: #cc0000; }
.podcast-icon { color: #6f42c1; }
.good-practices-icon { color: #198754; }
.social-enterprise-icon { color: #0dcaf0; }
.newsletter-icon { color: #dc3545; } 
.gallery-icon { color: #6c757d; } 

.btn-yfs {
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #0f7341;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-yfs:hover,
.btn-yfs:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.btn-yfs:active {
  background: var(--color);
  color: #fff;
}

/* home intern */
.intern-box {background: #e3f2fd;padding: 20px;border-radius: 12px;height: 100%;display: flex;flex-direction: column;}
.intern-footer {display: flex;align-items: center;gap: 12px;margin-top: auto;}
.intern-img-wrap {flex-shrink: 0; width: 50px;height: 50px;}
.intern-img, .avatar {width: 50px;height: 50px;border-radius: 50% !important;object-fit: cover;display: block;border: 1px solid #ddd;}
.intern-meta {display: flex;flex-direction: column;line-height: 1.4;}
/*past speakers */
.slick-slide{margin:10px}
.slick-prev:before, .slick-next:before {font-family: 'slick';font-size: 20px;line-height: 1;opacity: .75;color: green;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.slick-track {display: flex !important;}
.slick-slide {height: auto !important;}
.slick-slide > div {height: 100%;}
.yfs-box {position: relative;  width: 100%;  display: block;  border-radius: 10px;  padding: 1rem;  margin-bottom: 1.5rem;  text-align:center;}
.yfs-box::after,.yfs-box::before {position: absolute;content: '';width: 15px;height: 150px;display: block;left: -10px;bottom: 10px;}
.yfs-box::before {width: 85%;height: 15px;left: 10px;bottom: -10px;}
.yfs-border{border: 5px solid #0f7341;}
.yfs-box.yfs-border::after,.yfs-box.yfs-border::before {background-color: #0f7341;}

#network{background-color: #6ec1e4;}
.flip-card {background-color: transparent;width: 200px;height: 140px;perspective: 1000px;margin: 0 auto;}
.flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.8s;transform-style: preserve-3d;}.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;border: 1px solid #ccc;border-radius: 10px;display: flex;align-items: center;justify-content: center;font-size: 14px;}
.flip-card-front {background-color: #fff;color: black;}
.flip-card-back {background-color: #4CAF50;color: white;transform: rotateY(180deg);}
img.img-fluid.half-image {width: 50%;height: 50%;}

/* ==========================================================================
   Media Grid & Card Styling (Adapted from Speaker/Advisory Board Grid)
   ========================================================================== */

.media-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers cards horizontally */
  gap: 20px;
}

.media-card {
  flex: 0 1 100%; /* Default 1 per row on Mobile */
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
  text-align: center;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.media-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.media-card-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top; /* Anchors clipping headlines from the top */
  border-radius: 8px;
  display: block;
}

.media-card h3 {
  margin: 15px 0 5px;
  font-size: 1.2em;
  color: #333;
}

.media-card p {
  color: #666;
  font-size: 0.95em;
  margin-bottom: 0;
}

.media-card .foobox {
  cursor: pointer;
}

.no-image-placeholder {
  height: 250px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

/* Hover Zoom Effect on Image */
.transition-zoom {
  transition: transform 0.3s ease;
}

.media-card:hover .transition-zoom {
  transform: scale(1.02);
}

.max-w-700 {
  max-width: 700px;
}

/* Responsive Grid Rules */

/* Desktop: 3 per row */
@media (min-width: 992px) {
  .media-card {
    flex: 0 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }
}

/* Tablet: 2 per row */
@media (max-width: 991px) and (min-width: 768px) {
  .media-card {
    flex: 0 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* Mobile: 1 per row */
@media (max-width: 767px) {
  .media-card {
    flex: 0 1 100%;
    max-width: 100%;
  }
}
div#taxonomy-wrapper{background-color: #4baab4 !important;}
/* Events Links */
.event-links { position:fixed; top:100px; right:20px; display:flex; flex-direction:column; gap:15px; }
.event-link { display:block; width:fit-content; }
.event-link svg { width:30px; height:30px; fill:#198754; cursor:pointer; transition:transform 0.2s ease; }
.event-link:hover svg { transform:scale(1.2); }
.event-link[title] { position:relative; }
.event-link[title]:hover::after { content:attr(title); position:absolute; right:110%; top:50%; transform:translateY(-50%); background:#198754; color:#fff; padding:4px 8px; border-radius:4px; white-space:nowrap; font-size:12px; }

.btn-outline-primary, .wpcf7 input[type=submit] {
--bs-btn-color: #0f7341!important;
--bs-btn-border-color: #0f7341!important;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0f7341!important;
--bs-btn-hover-border-color: #0f7341!important;
--bs-btn-focus-shadow-rgb: 85, 51, 255;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0f7341!important;
--bs-btn-active-border-color: #0f7341!important;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #0f7341!important;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #0f7341!important;
--bs-gradient: none;
}

/*green campus cpt */
.green-campus-archive .campus-listing { display:flex; align-items:flex-start; margin-bottom:25px; border-bottom:1px solid #ddd; padding-bottom:20px; }
.campus-thumb { flex:0 0 150px; margin-right:20px; }
.campus-thumb img { width:100%; height:auto; display:block; }
.campus-content { flex:1; }
.campus-header { display:flex; align-items:center; gap:10px; }
.campus-label { font-size:12px; font-weight:bold; padding:2px 6px; border-radius:4px; }
.campus-label.premium { background:gold; color:#000; }
.campus-label.standard { background:silver; color:#000; }
.campus-title { margin:0; font-size:20px; }
.campus-excerpt, .institution-excerpt {font-size: 17px; line-height: 1.5;font-weight: normal; margin:10px 0; color:#555; font-style: italic; }
.campus-type { font-size:12px; font-weight:bold; padding:2px 6px; border-radius:4px; margin-right:5px; }
.campus-type.university { background:#0073aa; color:#fff; } /* Blue */
.campus-type.school { background:#28a745; color:#fff; }     /* Green */
.campus-type.college { background:#dc3545; color:#fff; }    /* Red */
.listing {padding-bottom: 30px; position: relative;}
.listing:not(:last-child)::after {content: "";display: block;width: 75%;border-bottom: 0.5px solid #d3d3d3;margin: 0 auto;position: absolute;bottom: 0;left: 0;right: 0;}
.post-excerpt{font-size: 17px; line-height: 1.5;font-weight: normal;font-style: italic;}
.resource-btn {transition: all 0.3s ease;cursor: pointer;color: black;}
.resource-btn:hover {background: #e0f7fa;transform: translateY(-5px);box-shadow: 0 8px 15px rgba(0,0,0,0.2);}
.resource-btn:hover i.video-icon {color: #d32f2f;transform: scale(1.2) rotate(5deg);}
.resource-btn strong {display: block;margin-top: 10px;font-size: 1.2em;}
@media (min-width: 1200px) {
    .h2, h2 {font-size: 21px!important;}
    .h3, h3 {font-size: 20px!important;}
    .h5, h5 {font-size: 18px!important;}
}
.supported-by{color:#c0c0c0;}
.flipcard-new {background-color: transparent;width: 100%;min-height: 220px;perspective: 1000px;}
.flipcard-inner {position: relative;width: 100%;height: 100%;transition: transform 0.6s;transform-style: preserve-3d;}
.flipcard-new:hover .flipcard-inner {transform: rotateY(180deg);}
.flipcard-front, .flipcard-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;border: 1px solid #ddd;border-radius: 8px;display: flex;align-items: center;justify-content: center;padding: 10px;}
.flipcard-front {background: #fff;}
.flipcard-back {background: #f8f9fa;transform: rotateY(180deg);font-size: 11px;text-align: center;}
.grecaptcha-badge {visibility: hidden;}

/* Position arrows at the bottom center */
.slick-prev,
.slick-next {
  position: absolute;
  bottom: -40px;       /* adjust vertical spacing */
  top: auto;           /* reset top positioning */
  transform: translateX(-50%);
}

/* Center them together */
.slick-prev {
  left: 50%;
  margin-left: -30px;  /* shift left arrow slightly */
}

.slick-next {
  left: 50%;
  margin-left: 30px;   /* shift right arrow slightly */
}

.alignleft figcaption.wp-element-caption {text-align: left;}
.social-band-fixed a { color: white; }
.post-type-archive-tribe_events, .single-tribe_events {background-color: aliceblue;}

@media (min-width: 768px) {
  .institution-sidebar {
    border-right: 1px solid #ccc; /* vertical bar */
  }
}
span.copyright {color: limegreen;}
