/*
 * Filename: pmcc-utilities.css
 * Description: Utility classes, reusable styles, transitions, responsive adjustments
 * Organization: PMCC 4th Watch's
 */

/* =========================
   PMCC icon Material Symbols Rounded
   ========================= */
.pmcc-icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;

  /* enable font ligatures for Material Symbols */
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
}

.fonts-loaded .pmcc-icon {
  visibility: visible;
}

.pmcc-button .pmcc-icon,
.pmcc-pagination .pmcc-icon {
  font-size: inherit;
  line-height: inherit;
}

/* =========================
       PMCC Buttons
       ========================= */

.pmcc-button {
  border: 1px solid;
  border-radius: 6px;
  display: inline-block;
  /* font-size: 1.4rem; */
  font-weight: 600;
  padding: 0.75rem 1rem; /* 12px 16px */
  text-decoration: none !important;
  transition: border-color 0.6s ease-in-out, color 0.6s ease-in-out,
    background-color 0.6s ease-in-out;
}

.pmcc-button.pmcc-primary {
  background-color: rgb(246 246 246);
  color: rgb(26 26 26);
  border-color: rgb(246 246 246);
}

.pmcc-button.pmcc-secondary {
  background-color: rgb(60 60 60);
  color: rgb(246 246 246);
  border-color: rgb(60 60 60);
}

.pmcc-button.pmcc-tertiary {
  background-color: rgb(235, 194, 72);
  color: rgb(26 26 26);
  border-color: rgb(246 246 246);
}

.pmcc-button.pmcc-primary:hover,
.pmcc-button.pmcc-primary:focus {
  background-color: rgb(211, 211, 211);
  border-color: rgb(246 246 246);
  color: rgb(26 26 26);
  cursor: pointer;
}

.pmcc-button.pmcc-secondary:hover,
.pmcc-button.pmcc-secondary:focus {
  background-color: rgb(26 26 26);
  border-color: rgb(60 60 60);
  color: rgb(246 246 246);
  cursor: pointer;
}

.pmcc-button.pmcc-tertiary:hover,
.pmcc-button.pmcc-tertiary:focus {
  background-color: rgb(211, 211, 211);
  border-color: rgb(246 246 246);
  color: rgb(26 26 26);
  cursor: pointer;
}

/* =========================
     PMCC Text size Utilities
     ========================= */

.pmcc-text-xss {
  font-size: 0.6rem; /* ~9.6px */
  line-height: 0.75rem; /* 12px */
}

.pmcc-text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
}

.pmcc-text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
}

.pmcc-text-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
}

.pmcc-text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}

.pmcc-text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.pmcc-text-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
}

.pmcc-text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}

.pmcc-text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem; /* 40px */
}

.pmcc-text-5xl {
  font-size: 3rem; /* 48px */
  line-height: 1; /* tight */
}

.pmcc-text-6xl {
  font-size: 3.75rem; /* 60px */
  line-height: 1;
}

.pmcc-text-7xl {
  font-size: 4.5rem; /* 72px */
  line-height: 1;
}

.pmcc-text-8xl {
  font-size: 6rem; /* 96px */
  line-height: 1;
}

/* font weights */
.pmcc-font-thin {
  font-weight: 100;
}

.pmcc-font-medium {
  font-weight: 500;
}

.pmcc-font-semibold {
  font-weight: 600;
}

.pmcc-font-bold {
  font-weight: 700;
}

/* =========================
     PMCC Text Color Utilities
     ========================= */

/* Charcoal */
.pmcc-text-charcoal {
  color: #1a1a1a;
}
/* Storm */
.pmcc-text-storm {
  color: #3c3c3c;
}
/* Gray */
.pmcc-text-gray {
  color: #c2c2c2;
}
/* Silver */
.pmcc-text-silver {
  color: #e6e6e6;
}
/* Paper */
.pmcc-text-paper {
  color: #f6f6f6 !important;
}
/* Gold */
.pmcc-text-gold {
  color: #ebc248;
}

/* =========================
     PMCC Text Opacity Utilities
     ========================= */
.pmcc-text-charcoal-50 {
  color: rgba(26, 26, 26, 0.5);
}

/* =========================
     PMCC Background Color Utilities
     ========================= */

/* Charcoal */
.pmcc-bg-charcoal {
  background-color: #1a1a1a;
}
/* Storm */
.pmcc-bg-storm {
  background-color: #3c3c3c;
}
/* Gray */
.pmcc-bg-gray {
  background-color: #c2c2c2;
}
/* Silver */
.pmcc-bg-silver {
  background-color: #e6e6e6;
}
/* Paper */
.pmcc-bg-paper {
  background-color: #f6f6f6;
}
/* Gold */
.pmcc-bg-gold {
  background-color: #ebc248;
}

/* =========================
     PMCC Opacity Utilities
     ========================= */

/* Charcoal Opacity*/
.pmcc-bg-charcoal-90 {
  background-color: rgba(26, 26, 26, 0.9);
}
.pmcc-bg-charcoal-85 {
  background-color: rgba(26, 26, 26, 0.85);
}
.pmcc-bg-charcoal-65 {
  background-color: rgba(26, 26, 26, 0.65);
}
.pmcc-bg-charcoal-50 {
  background-color: rgba(26, 26, 26, 0.5);
}
.pmcc-bg-charcoal-25 {
  background-color: rgba(26, 26, 26, 0.25);
}
.pmcc-bg-charcoal-10 {
  background-color: rgba(26, 26, 26, 0.1);
}
.pmcc-bg-charcoal-05 {
  background-color: rgba(26, 26, 26, 0.05);
}

/* Storm*/
.pmcc-bg-storm-90 {
  background-color: rgba(60, 60, 60, 0.9);
}
.pmcc-bg-storm-85 {
  background-color: rgba(60, 60, 60, 0.85);
}
.pmcc-bg-storm-65 {
  background-color: rgba(60, 60, 60, 0.65);
}
.pmcc-bg-storm-50 {
  background-color: rgba(60, 60, 60, 0.5);
}
.pmcc-bg-storm-25 {
  background-color: rgba(60, 60, 60, 0.25);
}
.pmcc-bg-storm-10 {
  background-color: rgba(60, 60, 60, 0.1);
}
.pmcc-bg-storm-05 {
  background-color: rgba(60, 60, 60, 0.05);
}

/* Gray*/
.pmcc-bg-gray-90 {
  background-color: rgba(194, 194, 194, 0.9);
}
.pmcc-bg-gray-85 {
  background-color: rgba(194, 194, 194, 0.85);
}
.pmcc-bg-gray-65 {
  background-color: rgba(194, 194, 194, 0.65);
}
.pmcc-bg-gray-50 {
  background-color: rgba(194, 194, 194, 0.5);
}
.pmcc-bg-gray-25 {
  background-color: rgba(194, 194, 194, 0.25);
}
.pmcc-bg-gray-10 {
  background-color: rgba(194, 194, 194, 0.1);
}
.pmcc-bg-gray-05 {
  background-color: rgba(194, 194, 194, 0.05);
}

/* Silver*/
.pmcc-bg-silver-90 {
  background-color: rgba(230, 230, 230, 0.9);
}
.pmcc-bg-silver-85 {
  background-color: rgba(230, 230, 230, 0.85);
}
.pmcc-bg-silver-65 {
  background-color: rgba(230, 230, 230, 0.65);
}
.pmcc-bg-silver-50 {
  background-color: rgba(230, 230, 230, 0.5);
}
.pmcc-bg-silver-25 {
  background-color: rgba(230, 230, 230, 0.25);
}
.pmcc-bg-silver-10 {
  background-color: rgba(230, 230, 230, 0.1);
}
.pmcc-bg-silver-05 {
  background-color: rgba(230, 230, 230, 0.05);
}

/* Paper*/
.pmcc-bg-paper-90 {
  background-color: rgba(246, 246, 246, 0.9);
}
.pmcc-bg-paper-85 {
  background-color: rgba(246, 246, 246, 0.85);
}
.pmcc-bg-paper-65 {
  background-color: rgba(246, 246, 246, 0.65);
}
.pmcc-bg-paper-50 {
  background-color: rgba(246, 246, 246, 0.5);
}
.pmcc-bg-paper-25 {
  background-color: rgba(246, 246, 246, 0.25);
}
.pmcc-bg-paper-10 {
  background-color: rgba(246, 246, 246, 0.1);
}
.pmcc-bg-paper-05 {
  background-color: rgba(246, 246, 246, 0.05);
}

/* Gold*/
.pmcc-bg-gold-90 {
  background-color: rgba(235, 194, 72, 0.9);
}
.pmcc-bg-gold-85 {
  background-color: rgba(235, 194, 72, 0.85);
}
.pmcc-bg-gold-65 {
  background-color: rgba(235, 194, 72, 0.65);
}
.pmcc-bg-gold-50 {
  background-color: rgba(235, 194, 72, 0.5);
}
.pmcc-bg-gold-25 {
  background-color: rgba(235, 194, 72, 0.25);
}
.pmcc-bg-gold-10 {
  background-color: rgba(235, 194, 72, 0.1);
}
.pmcc-bg-gold-05 {
  background-color: rgba(235, 194, 72, 0.05);
}

/* =========================
     PMCC Shadow Utilities
     ========================= */
.pmcc-shadow-left-bottom {
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
}

/* =========================
     PMCC Link & Hover Transitions
     ========================= */
.pmcc-footer a,
.pmcc-hero-icons a,
.navbar-expand-md .navbar-nav .nav-link,
.pmcc-welcome a,
.pmcc-bg-charcoal,
.pmcc-close,
.pmcc-close-vimeo,
.pmcc-video-grid {
  transition: transform 0.6s ease, color 0.6s ease, background-color 0.6s ease;
}

.pmcc-footer a:hover,
.pmcc-hero-icons a:hover,
.navbar-expand-md .navbar-nav .nav-link:hover,
.pmcc-close:hover,
.pmcc-close-vimeo:hover {
  color: #c2c2c2 !important;
}

/* =========================
     PMCC - live badge Styles
     ========================= */
/* Logo styling */
.live .pmcc-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: contain; /* important for logos */
  border: 3px solid #e41e26;
  background: transparent; /* prevents white cover */
  display: block;
}

/* LIVE badge */
.pmcc-logo-wrapper .live-badge {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #e41e26;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid #fff; /* FB-style separation */
  line-height: 1;
  z-index: 2;
}

/* Optional subtle pulse like FB Live */
.pmcc-logo-wrapper.live::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(228, 30, 38, 0.6);
  animation: livePulse 1.5s infinite;
  pointer-events: none;
}

@keyframes livePulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* =========================
     PMCC Navbar & Logo Utilities
     ========================= */

/* Logo wrapper size */
.pmcc-logo-wrapper {
  width: 6rem;
  height: 6rem;
  position: relative;
  display: inline-block;
}

/* Fixed navbar */
.pmcc-navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform: translateY(0);
}

/* Hide navbar by sliding up */
.pmcc-navbar-fixed.nav-hidden {
  transform: translateY(-100%);
}

/* Padding adjustment for pages without hero banner */
.no-hero-page .pmcc-main-content {
  padding-top: 80px; /* adjust based on actual header height */
}

.pmcc-main-content {
  /* padding-bottom: 50px; */
}

/* Hide navbar by sliding up */
.pmcc-main-content h1,
.pmcc-main-content h2 {
  padding-bottom: 20px;
  padding-top: 20px;
  /* background: red; */
}

.pmcc-bg-gradient {
  background: linear-gradient(
    180deg,
    #1a1a1a,
    #1a1a1a 20%,
    rgba(26, 26, 26, 0) 100%
  );
}

/* =========================
     PMCC - Pagination Tweaks
     ========================= */
.pmcc-pagination .page-link:focus {
  box-shadow: none;
}

.pmcc-pagination .active > .page-link,
.pmcc-pagination .page-link.active {
  background-color: #2b6296;
  color: #fff;
}

.pmcc-pagination .page-link {
  color: #2b6296;
}

/* =========================
     PMCC - Horizontal Tabs Tweaks
     ========================= */
.pmcc-main-content .nav-link {
  color: #1a1a1a;
  border-radius: 0.375rem;
  border: 0;
}

.pmcc-main-content .nav-tabs {
  display: flex;
  justify-content: center;
  border-bottom: none;
}

.pmcc-main-content .nav-tabs .nav-link {
  text-align: center; /* optional, centers text inside each tab */
}

.pmcc-main-content .nav-tabs .nav-link:hover {
  background-color: #ebc2481a;
}

.pmcc-main-content .nav-tabs .nav-link.active {
  color: #1a1a1a;
  background-color: #ebc248;
}

/* =========================
     PMCC - Vertical Tabs Tweaks
     ========================= */
.nav-pills .nav-link.active {
  color: #fff;
  background-color: #2b6296;
}

.nav-pills li button {
  text-align: left;
}

/* =========================
     PMCC - Loader
     ========================= */
.pmcc-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #1a1a1a;
  z-index: 99999;
  display: none;
  overflow: hidden;
}
.pmcc-loader-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pmcc-loader {
  width: 300px; /* adjust as needed */
  height: auto;
}

/* =========================
     PMCC - blockquote
     ========================= */
blockquote {
  position: relative;
  font-style: italic;

  /* text-align: center; */
}

/* Opening quote */
blockquote p {
  position: relative;
  text-indent: 2em;
  z-index: 10;
}

blockquote p::before {
  content: "";
  display: inline-block;
  width: 2.4em;
  height: 2.4em;
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 5;
  vertical-align: top;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' width='24px' viewBox='0 -960 960 960' fill='%23EBC24880'%3E%3Cpath d='m259.17-284.17 65.31-111.61q-5 1-11 1.5t-11 .5q-67.13-3.39-112.72-51.81Q144.17-494 144.17-560q0-70.15 49.17-119.03 49.16-48.88 119.31-48.88 69.39 0 118.37 48.88Q480-630.15 480-560q0 21-5.36 41.28-5.36 20.29-15.51 38.72L325.04-245.39q-5.32 9.75-14.14 14.07-8.81 4.32-19.07 4.32-21.68 0-32.8-18.89-11.12-18.89.14-38.28Zm375.26.56 65.31-112.17q-5 1-11 1.5t-11 .5q-67.13-3.39-112.44-51.81Q520-494 520-560q0-70.15 48.88-119.03 48.88-48.88 119.03-48.88 69.39 0 118.66 48.88 49.26 48.88 49.26 119.03 0 21-5.36 41.28-5.36 20.29-15.51 38.72L700.3-245.39q-5.32 9.75-14.14 14.07-8.81 4.32-19.07 4.32-21.68 0-32.51-18.61-10.84-18.61-.15-38Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Closing quote */
/* blockquote p::after {
    content: "\201D"; 
    font-family: "EB Garamond", serif;
    font-size: 3.5em;
    line-height: 0;
    margin-left: 0.1em;
    vertical-align: bottom;
  } */

/* =========================
     PMCC - image ratio utilities
     ========================= */
/* from 658:370 */
.pmcc-thumb-329x185 {
  aspect-ratio: 329 / 185;
  overflow: hidden;
}

/* 16:9 for video grid */
.pmcc-thumb-16x9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.pmcc-thumb-2x1 {
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

/* Square Thumbnails */
.pmcc-thumb-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* from 1140:322 */
.pmcc-thumb-1140x322 {
  aspect-ratio: 1140 / 322;
  overflow: hidden;
}

/* from 1226∶561 */
.pmcc-thumb-1226x561 {
  aspect-ratio: 1226 / 561;
  overflow: hidden;
}

.pmcc-thumb-16x9 img,
.pmcc-thumb-2x1 img,
.pmcc-thumb-square img,
.pmcc-thumb-329x185 img,
.pmcc-thumb-1140x322 img,
.pmcc-thumb-1226x561 img {
  width: 100%;
  height: 100%;
  /*object-fit: cover;  crop to square */
  object-position: center;
}

.pmcc-object-fit-cover {
    object-fit: cover;
}


/* =========================
     PMCC - Vimeo Fullscreen Popup Styles
     ========================= */
#pmcc-vimeo-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pmcc-video-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.pmcc-video-content video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100vh;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  object-fit: cover; /* video covers full screen */
}

.pmcc-close-vimeo {
  position: fixed; /* FIXED to float above everything */
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  z-index: 1000000; /* higher than iframe */
  background: rgba(0, 0, 0, 0.5); /* optional semi-transparent bg */
  padding: 5px;
  border-radius: 35px;
}

/* =========================
     PMCC - Video Grid Styles
     ========================= */
.pmcc-video-grid {
  color: #f6f6f6;
}
.pmcc-video-grid:hover {
  background: #fff;
  color: #3c3c3c;
}

/* =========================
     PMCC - full-banner Styles
     ========================= */
.pmcc-full-banner {
  position: relative;
  width: 100%;
  height: 82vh; /* desktop height */
  min-height: 82vh;
  overflow: hidden;
}

/* =========================
     PMCC - pmcc-cpt-title Styles
     ========================= */
.pmcc-cpt-title a {
  font-weight: inherit;
  font-size: 1rem;
}
.testimonies-carousel .carousel-item {
  padding-left: 2px;
  padding-right: 2px;
}

/* =========================
     PMCC - ellipsis Styles
     ========================= */
.pmcc-ellipsis {
  position: relative;
}

.pmcc-ellipsis .more-text {
  display: none;
}

.pmcc-read-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

/* Responsive for small screens */
@media (max-width: 768px) {
  /* Update .pmcc-video-content to center content on mobile */
  .pmcc-video-content {
    display: flex; /* Makes alignment easier */
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%; /* Use full width on mobile */
    height: 100%; /* Use full height on mobile */
    /* You can remove the transform: translate here if you make it a flex container filling the overlay */
    transform: none;
    top: 0;
    left: 0;
  }

  /* Target the Vimeo iframe specifically */
  #pmcc-vimeo-frame {
    width: 90vw; /* Make iframe smaller on mobile */
    height: 50.625vw; /* Maintain 16:9 aspect ratio (90vw * 9 / 16) */
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
  }

  /* Existing self-hosted video logic for comparison/compatibility */
  .pmcc-video-content video {
    min-height: auto !important;
    min-width: auto !important;
    width: 90vw !important; /* make smaller */
    height: auto !important; /* maintain aspect ratio */
    object-fit: contain !important;
    border-radius: 10px;
    transform: none; /* Remove transform if using flex centering */
  }

  /* PMCC - Full Banner Responsive Adjustment */
  .pmcc-full-banner {
    height: 40vh;
    min-height: 40vh;
  }

  .pmcc-text-3xl {
    font-size: 1.25rem;
  }
}