/*
Theme Name: Catch Flames Pro Child
Theme URI: https://www.hvmcc.org
Description: Child theme for Catch Flames Pro
Author: Dalton Phan
Author URI: https://www.hvmcc.org
Template: catch-flames-pro
Version: 1.0.0
Text Domain: catch-flames-pro-child
*/

/* Add your custom styles below this line */
/* =========================================================
   HVMCC Mass Times Modal — scoped styles
   Add to the child theme's style.css (or enqueue as its own
   file — see functions-snippet.php).

   Everything is scoped under #massTimesModal / .masstimes-fab
   so it won't leak into or fight with Catch Flames Pro's
   existing site-wide styles.
   ========================================================= */

/* --- Floating action button (bottom-right, all pages) --- */
.masstimes-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040; /* below Bootstrap's modal (1055) and backdrop (1050) */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: #3f9142; /* swap for your parish's brand green */
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.masstimes-fab:hover,
.masstimes-fab:focus {
  background: #327636;
  color: #fff;
  transform: translateY(-1px);
}

.masstimes-fab svg { flex: none; }

/* Keep clear of a mobile "scroll to top" widget if the theme has one */
@media (max-width: 575.98px) {
  .masstimes-fab {
    right: 14px;
    bottom: 14px;
    padding: .65rem 1rem;
    font-size: .85rem;
  }
}

/* --- Modal shell --- */
#massTimesModal .modal-dialog {
  max-width: 1300px !important;
}

#massTimesModal .modal-content {
  border-radius: 12px;
  overflow: hidden;
  border: none;
}

#massTimesModal .modal-header {
  position: relative;
  justify-content: center;
  border-bottom: 1px solid #eee;
  padding: 1rem 1rem .75rem;
}

#massTimesModal .modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

#massTimesModal .btn-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/* --- Tabs: full-width underline style --- */
#massTimesModal .masstimes-tabs {
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  margin: 0 1rem;
}

#massTimesModal .masstimes-tabs .nav-link {
  flex: 1 1 0;
  text-align: center;
  padding: .85rem .25rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: #8a8a8a;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

#massTimesModal .masstimes-tabs .nav-link:hover:not(.active) {
  color: #3f9142;
  background: #f4faf4;
}

#massTimesModal .masstimes-tabs .nav-link.active {
  color: #3f9142;
  font-weight: 700;
  border-bottom-color: #3f9142;
  background: #f4faf4;
}

/* --- Body layout: schedule (left) + map (right) --- */
#massTimesModal .modal-body {
  padding: 1.5rem 2rem 2rem;
}

#massTimesModal .masstimes-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

#massTimesModal .masstimes-schedule {
  flex: 1 1 340px;
  min-width: 280px;
}

#massTimesModal .masstimes-map-col {
  flex: 1 1 320px;
  min-width: 260px;
}

/* --- Simple schedule list (no cards, just rows) --- */
#massTimesModal .schedule-heading {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #444;
  margin: 1rem 0 .35rem;
}

#massTimesModal .schedule-heading:first-child {
  margin-top: 0;
}

#massTimesModal .schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#massTimesModal .schedule-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid #f1f1f1;
  font-size: .92rem;
}

#massTimesModal .schedule-list li:last-child {
  border-bottom: none;
}

#massTimesModal .schedule-list .day-label {
  font-weight: 700;
  color: #3f9142;
  flex: 1 1 auto;
}

#massTimesModal .schedule-list .time-label {
  font-weight: 600;
  color: #222;
  white-space: nowrap;
}

#massTimesModal .schedule-list .lang-label {
  color: #888;
  font-size: .82rem;
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

#massTimesModal .schedule-note {
  margin-top: .6rem;
  font-size: .82rem;
  color: #888;
  font-style: italic;
}

#massTimesModal .schedule-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: .88rem;
  text-decoration: underline;
}

/* --- Map column (shared across all 3 tabs) --- */
#massTimesModal .masstimes-map-col .ratio {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .75rem;
}

#massTimesModal .masstimes-map-col .btn {
  width: 100%;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: .5rem;
}

#massTimesModal .btn-directions {
  background: #3f9142;
  border-color: #3f9142;
  color: #fff;
}

#massTimesModal .btn-directions:hover {
  background: #327636;
  border-color: #327636;
  color: #fff;
}

#massTimesModal .btn-call {
  background: #3f9142;
  border-color: #3f9142;
  color: #fff;
}

#massTimesModal .btn-call:hover {
  background: #327636;
  border-color: #327636;
  color: #fff;
}

#massTimesModal .masstimes-more {
  font-size: .82rem;
  text-align: center;
  color: #666;
}

/* --- Small screens: map stacks below schedule --- */
@media (max-width: 575.98px) {
  #massTimesModal .modal-body { padding: 1rem; }
  #massTimesModal .masstimes-tabs { margin: 0; }
}



/* =========================================================
   HVMCC Mass Times Modal — Bootstrap mechanics stand-in
   The theme loads Bootstrap's JS bundle but not its CSS file,
   so .modal / .tab-pane / .btn-close / .ratio have no built-in
   behavior. This replaces just the pieces we need, scoped so
   it can't affect anything else on the site.
   ========================================================= */

#massTimesModal.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

#massTimesModal .modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1300px !important;
  margin: 1.75rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

#massTimesModal .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: #fff;
  background-clip: padding-box;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
}

.modal-backdrop.fade {
  opacity: 0;
  transition: opacity .15s linear;
}

.modal-backdrop.show {
  opacity: 1;
}

body.modal-open {
  overflow: hidden;
}

#massTimesModal .tab-pane {
  display: none;
}

#massTimesModal .tab-pane.active {
  display: block;
}

#massTimesModal .btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: .6;
  cursor: pointer;
}

#massTimesModal .btn-close:hover {
  opacity: 1;
}

#massTimesModal .btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .375rem;
}

#massTimesModal .ratio {
  position: relative;
  width: 100%;
}

#massTimesModal .ratio::before {
  display: block;
  padding-top: 75%;
  content: "";
}

#massTimesModal .ratio > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}