/**
 * TipCMS Template Styles
 * Template-specific CSS extracted from individual .tpl.php files.
 * Add styles here as templates are modernized.
 */

/* ===== Template 8: Embed content (Data, Data2) - Google Maps road map + street view ===== */
.tpl8 {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 8px 8px rgb(0 0 0 / 0.4);
  background: #fff;
}
.tpl8-maps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
  overflow: auto;
}
.tpl8-map-item {
  flex: 1 1 45%;
  min-width: 280px;
}
.tpl8-map-item .tpl8-block {
  margin: 0;
  padding: 15px;
  border: 1px solid #e0e0e0;
  background: #fff;
  height: 100%;
}
.tpl8-map-item .embed-container {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .tpl8-map-item {
    flex: 1 1 100%;
  }
}
/* Legacy single-block layout if used elsewhere */
.tpl8-content { overflow: auto; }
.tpl8-block { margin: 20px; padding: 20px; border: 1px solid #e0e0e0; background: #fff; }

/* ===== Template 9: Video with caption ===== */
.tpl9 {
  margin: 0;
  padding: 0;
  background: #fff;
}
.tpl9-video { max-width: 100%; height: auto; }
.tpl9-block { margin: 20px; padding: 10px; border: 1px solid #e0e0e0; }

/* ===== Template 101: Image background with overlay (ArticleImage) ===== */
.tpl101-article-image {
  position: relative;
  width: 100%;
  margin-bottom: 1em;
  margin-top: 0;
  /* Set border to 'none' to remove orange line, or e.g. 'solid 5px #ff9600' to show */
  border-bottom: var(--tpl101-border, none);
}
.tpl101-article-image img {
  width: 100%;
  display: block;
  vertical-align: bottom;
}
.tpl101-article-image .tpl101-content {
  position: absolute;
  top: 0;
  left: 2%;
  width: 97%;
  font-size: 90%;
  text-align: center;
}
@media (max-width: 480px) {
  .tpl101-article-image { overflow: hidden; }
}
@media (min-width: 481px) and (max-width: 1000px) {
  .tpl101-article-image .tpl101-content { font-size: 50%; line-height: 3em; }
}

/* ===== Template 102: Popup modal (Data2: delay@animation@duration@width@border@repeat) ===== */
.tpl102-modal {
  display: none;
  position: fixed;
  z-index: 2147483647;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 100px;
  background-color: rgba(0,0,0,0.4);
}
.tpl102-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
@media (max-width: 450px) {
  .tpl102-modal-content { width: 90% !important; }
}
.tpl102-modal .tpl102-close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 10px;
}
.tpl102-modal .tpl102-close:hover,
.tpl102-modal .tpl102-close:focus {
  text-decoration: none;
}
.tpl102-modal-header { padding: 15px; color: #333; }
.tpl102-modal-body { padding: 15px; }
@keyframes tpl102-animatetop {
  from { top: -300px; opacity: 0; }
  to { top: 0; opacity: 1; }
}
@keyframes tpl102-animatebottom {
  from { bottom: -300px; opacity: 0; }
  to { bottom: 0; opacity: 1; }
}
@keyframes tpl102-animateleft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes tpl102-animateright {
  from { right: -300px; opacity: 0; }
  to { right: 0; opacity: 1; }
}
@keyframes tpl102-animatezoom {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes tpl102-animatespin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Template 13: Base layout ===== */
.tpl13 { margin: 15px 10px; }

/* ===== Template 14: Multi-data blocks ===== */
.tpl14 { margin: clamp(1em, 1vw, 1em); }

/* ===== Template 16: Tooltip (Cachet-Bold font) ===== */
.tpl16 { font-family: 'Cachet-Bold'; }

/* ===== Template 10: Image gallery (Highslide) ===== */
.tpl10-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    overflow: auto;
    padding-top: 10px;
}
/* Fewer than 10 images: center and enlarge to fit available space */
.tpl10-image-grid.tpl10-few {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.tpl10-image-grid.tpl10-few .tpl10-image-item {
    width: 220px;
    flex: 0 0 220px;
}
.tpl10-image-item { vertical-align: top; }
.tpl10-image-item img { width: 100%; height: auto; display: block; }
.tpl10-data { width: 100%; padding: 20px; }

/* ===== Template 5 + Gallery system (5.tpl.php, displaygall, dtr_galleries) ===== */
/* List Galleries page: Edit --gallery-list-bg and --gallery-list-color to customize */
.gallery-list-wrap {
  --gallery-list-bg: #161616;
  --gallery-list-color: #cccccc;
  background-color: var(--gallery-list-bg);
  color: var(--gallery-list-color);
  padding: 20px;
  overflow: auto;
}
.gallery-list-wrap .tplban,
.gallery-list-wrap .gallery-list-item,
.gallery-list-wrap .gallery-list-item a {
  color: inherit;
}
.radius10 { border-radius: 12px; }
.gallery-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
  gap: 30px;
  width: 100%;
  padding: 20px 0;
  align-items: start;
  justify-content: center;
}
.gallery-list-item {
  text-align: center;
  padding-top: 40px;
}
.gallery-list-item img {
  width: 75%;
  border: 0;
  display: block;
  margin: 0 auto;
}
.gallery-list-item a {
  text-decoration: none;
  color: inherit;
}
@media (max-width: 768px) {
  .gallery-list-item { padding-top: 0; }
  .gallery-list-item img { width: 80%; }
}
.galleries {
  background-color: #161616;
  color: #ccc;
  text-align: center;
}
.displaygal {
  background-color: #000;
}
.pagenumgaltop {
  padding-top: 16px;
  text-align: center;
  color: #333;
}
.pagenumgalbottom {
  padding: 6px;
  padding-bottom: 16px;
  text-align: center;
  color: #fff;
}
.imgbackgrnd {
  background-color: #161616;
  padding: 20px;
}
.galleryImgContainer {
  background-color: #333;
  vertical-align: top;
  padding: 5px;
}
span.paginator {
  background-color: #945029;
  margin: 3px;
  padding: 10px 15px;
  border-radius: 5px;
}
span.paginator span { list-style-type: none; display: inline; padding: 5px; margin: 0; }
span.paginator span.page a:link { text-decoration: none; background-color: #0c7ce1; color: #000; padding: 5px 8px; margin: 0; }
span.paginator span.page a:visited { text-decoration: none; background-color: #000; color: #fff; padding: 5px 8px; margin: 0; }
span.paginator span.page a:hover { color: #fff; background-color: #B98D33; }
span.paginator span.arrow { font-weight: bold; color: #fff; margin: 0; padding: 0 2px; }
span.paginator span.arrow a { font-weight: bold; color: #fff; text-decoration: none; }
span.paginator span.arrow a:hover,
span.paginator span.arrow a:visited { font-weight: bold; color: #fff; text-decoration: none; }
span.paginator span.selected { font-weight: bold; background-color: #f7f7ed; color: #333; padding: 5px 8px; margin: 3px; border: 1px solid; }
span.paginator span.break { color: #c59817; margin: 0 5px; }
span.paginator span.ellipsis { color: #cccccc; }

/* ===== Template 104: Picture1/Picture2 background, Data scrolls over with Artbkgrndcolor ===== */
/* Data6: height, height@paddingTop (e.g. 500@100), or height@top / height@bottom (no padding). px optional. */
.tpl104-bkg-wrap {
  padding-top: 80px;
}
.tpl104-bkg-wrap.tpl104-data-top {
  padding-top: 0;
}
.tpl104-bkg-wrap.tpl104-data-bottom {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tpl104-data-area {
  /* User can set padding-top via Data6 height@paddingTop, or @top/@bottom for no padding */
}

/* ===== Template 105: Picture1/Picture2 background, Data–Data5 horizontal tipgrid ===== */
/* Data6: height@shadow@border, height@paddingTop@shadow@border, or append @top/@bottom (no padding). px optional. */
.tpl105-bkg-wrap {
  padding-top: 180px;
}
.tpl105-bkg-wrap.tpl105-data-top {
  padding-top: 0;
}
.tpl105-bkg-wrap.tpl105-data-bottom {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tpl105-data-area {
  /* Data area wrapper for 105 */
}

/* ===== Template 105: Parallax background + tipgrid (Data6: height@paddingTop@shadow@border) ===== */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

/* ===== Template 108: Video grid (embed|caption per Data field) ===== */
.tipgrid .wrapper1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
}

/* ===== Tipgrid cells (templates 13, 15, 105, 117, etc.) ===== */
.tipgrid .tipcell {
  padding: 0;
  color: #333;
}
.tipgrid .tipcell-shadowborder {
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
  margin: 15px;
  position: relative;
  background: #fff;
}
.tipgrid .tipcell-blue {
  padding: 15px;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
  margin: 15px;
  position: relative;
  background: #fff;
}
.tipgrid .tipcell-noborder {
  padding: 20px;
}
.tipcell__button {
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: #fff;
  background: #009ADF;
  border-radius: 0 0 9px 9px;
  font-size: 0.8em;
  border-right: 1px solid #008fd5;
  border-left: 1px solid #008fd5;
  border-bottom: 1px solid #008fd5;
  border-top: 1px solid #333;
  position: absolute;
  bottom: 0;
  right: 0;
}
.tipcell__button:hover {
  background: #333333;
  transition: ease 1s;
}
.tipcell__link {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #333;
  text-decoration: none;
}
.tipcell__link:hover {
  color: #333;
  text-decoration: none;
}
.tipcell__link:visited {
  color: #fff;
  text-decoration: none;
}
.tipcell__button a:link {
  color: #fff;
  transition: ease 1s;
}
.tipcell__button a:hover {
  background: #333333;
  transition: ease 1s;
}
.tipcell__button2 {
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: #000;
  background: #009ADF;
  border-radius: 0 0 9px 9px;
  font-size: 0.8em;
  border-right: 1px solid #008fd5;
  border-left: 1px solid #008fd5;
  border-bottom: 1px solid #008fd5;
  border-top: 1px solid #333;
  bottom: 0;
  right: 0;
}
.tipcell__button2:hover {
  background: #333333;
  transition: ease 1s;
}
.tipcell__button2 a:link {
  color: #fff;
  transition: ease 1s;
}
.tipcell__button2 a:hover {
  background: #333333;
  transition: ease 1s;
}
.tipgrid .head {
  font-weight: bold;
  background: #fff;
}
.sub_div {
  position: absolute;
  bottom: 0;
}

/* ===== Video embed (templates 108, 202, 203, ShowVid forms) ===== */
.vidwrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 25px 15px;
}
.vidcontainer {
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}
.vidcontainer iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ===== Template 12: Simple content ===== */
.tpl12-header { width: 100%; }
.tpl12-content { width: 100%; padding: 10px 0; }

/* ===== Template 18: 4-column accordion with Read More ===== */
.tpl18-grid { }
.tpl18-column { padding: 25px; }

/* ===== Template 23: 4-column accordion (tipgrid) ===== */
.tpl23-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.tpl23-column { padding: 25px; margin: 15px; border: 1px solid #e0e0e0; flex: 1 1 200px; }
@media only screen and (max-width: 768px) {
    .tpl23-column { flex: 1 1 100%; }
}

/* =========================================
   TEMPLATE 26 - FAQ ACCORDION
   Scoped under .tpl26 to prevent leakage
========================================= */

/* =========================================
   TEMPLATE 26 MAIN SECTION
========================================= */
.tpl26 .tpl26-faq-section {
  padding: 60px 20px;
}

.tpl26 .tpl26-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================================
   TEMPLATE 26 HEADER
========================================= */
.tpl26 .tpl26-header {
  width: 100%;
}

/* =========================================
   FAQ INTRO
========================================= */
.tpl26 .tpl26-faq-intro {
  text-align: center;
  margin-bottom: 34px;
}

.tpl26 .tpl26-faq-intro .badge {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #f3f4f6;
  color: #374151;
  margin-bottom: 14px;
}

.tpl26 .tpl26-faq-intro .divider-accent {
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: #c7a45a;
  margin: 0 auto;
}

/* =========================================
   FAQ GRID
========================================= */
.tpl26 .tpl26-faq-grid,
.tpl26 .faq-grid.tpl26-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* =========================================
   FAQ CARD
========================================= */
.tpl26 .faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition:
    box-shadow 0.35s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* =========================================
   FAQ CARD HOVER
========================================= */
.tpl26 .faq-item:hover {
  border-color: #d6b36b;
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.12);
}

/* =========================================
   FAQ CARD OPEN STATE
========================================= */
.tpl26 .faq-item[open] {
  border-color: #d6b36b;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.10);
}

/* =========================================
   FAQ QUESTION ROW
========================================= */
.tpl26 .faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: #1f2937;
  background: #ffffff;
}

.tpl26 .faq-question::-webkit-details-marker {
  display: none;
}

.tpl26 .faq-question::marker {
  display: none;
}

/* =========================================
   FAQ ICON
========================================= */
.tpl26 .faq-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8f5ee;
  color: #8b6a2b;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.tpl26 .faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: #c7a45a;
  color: #ffffff;
}

/* =========================================
   FAQ DIVIDER
========================================= */
.tpl26 .faq-divider {
  height: 1px;
  background: #ececec;
  margin: 0 24px;
}

/* =========================================
   FAQ ANSWER
========================================= */
.tpl26 .faq-answer {
  padding: 18px 24px 22px;
  color: #4b5563;
  line-height: 1.75;
  font-size: 0.98rem;
}

.tpl26 .faq-answer p {
  margin: 0 0 14px;
}

.tpl26 .faq-answer p:last-child {
  margin-bottom: 0;
}

.tpl26 .faq-answer a {
  color: #8b6a2b;
  text-decoration: none;
  font-weight: 600;
}

.tpl26 .faq-answer a:hover {
  text-decoration: underline;
}

.tpl26 .faq-answer ul,
.tpl26 .faq-answer ol {
  margin: 12px 0 12px 20px;
  padding: 0;
}

.tpl26 .faq-answer li {
  margin-bottom: 8px;
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 767px) {
  .tpl26 .tpl26-faq-section {
    padding: 42px 16px;
  }

  .tpl26 .faq-question {
    padding: 18px 18px;
    font-size: 1rem;
  }

  .tpl26 .faq-divider {
    margin: 0 18px;
  }

  .tpl26 .faq-answer {
    padding: 16px 18px 18px;
    font-size: 0.95rem;
  }

  .tpl26 .faq-icon {
    width: 28px;
    height: 28px;
    font-size: 1.05rem;
  }
}

/* ===== Template 25: Events (showevents.php) ===== */
.event-container {
    padding: 40px;
    margin: 0 auto;
    overflow: auto;
    height: 700px;
    width: 90%;
    background-color: #ffffff;
}

/* ===== Template 20: Slideshow with Data (left/right) ===== */
.tpl20 {
  margin-top: -10px;
  padding: 0 15px;
}
.tpl20-header-wrap { }
.tpl20-layout { }
.tpl20-flex-container { }
.tpl20-slider { }
.tpl20-slider .slides > li:first-child { display: block !important; }
.tpl20-content { }

/* ===== Template 22: Fade-rotating content (Flexslider) ===== */
.tpl22-container { }
.tpl22-slider { }
.tpl22-slide { }

/* ===== Template 24: Search results ===== */
.tpl24-header-wrap { width: 99%; margin: 0 auto; }
.tpl24-content { width: 100%; padding: 10px 0; }

/* ===== Template 28: Smooth-scroll anchor links, groups layout ===== */
.tpl28-container { }
.tpl28-container a:link {
    color:#ffffff;
    font-size: 14px;
}
.tpl28-container #groups {
    display: flex;
    justify-content: center;
}
/* Smooth scroll for template 28 anchor-link navigation */
html { scroll-behavior: smooth; }

/* ===== Template 29: Print sermon ===== */
.tpl29-wrapper { width: 98%; margin: 10px 0 0 10px; }
.tpl29-content { padding: 10px 0; }
.tpl29-print { float: left; margin-left: 5px; padding-left: 15px; }
.tpl29-print + div { overflow: auto; }

/* ===== Read More / Less button - shared by templates 17, 18, 23 ===== */
.read-more-btn {
    color: #fff !important;
    text-transform: uppercase;
    cursor: pointer;
    background: #FF9800;
    font-weight: 800;
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.8s ease;
    text-align: center;
    text-decoration: none;
    margin: 15px 0;
    border: none;
}
.read-more-btn:hover {
    color: #fff !important;
    background: #000;
    transition: all 0.5s ease;
}

/* ===== Template 17: Accordion with "More" ===== */
.tpl17-accordion { padding: 25px; }
.tpl17-heading { margin-bottom: 0.5em; }
.tpl17-toggle { cursor: pointer; }
.tpl17-inner { padding: 10px 0; }

/* ===== Template 21: Rotating content (JS toggles .dyncontent display) ===== */
.tpl21-container { position: relative; min-height: 100px; }
.tpl21-container .dyncontent { display: none; }
.tpl21-container .dyncontent:first-child { display: block; }

/* ===== Template 35: Two-column, Data2 moves to bottom on small screens ===== */
.tpl35 {
  line-height: 1.4em;
  padding: 0 15px;
}
.tpl35-grid {
    display: grid;
    gap: 20px;
    padding: 10px;
    width: 100%;
}
.tpl35-item1 { padding: 10px; }
.tpl35-item2 { padding: 10px; }
@media only screen and (max-width: 800px) {
    .tpl35-grid { grid-template-columns: 100% !important; }
    .tpl35-item1 { order: 1; }
    .tpl35-item2 { order: 2; }
}

/* ===== Template 30: Content scroller (jScrollPane) - 300px ===== */
.tpl30-scroll-pane {
    width: 98%;
    height: 300px;
    overflow: auto;
}
.tpl30-header-wrap { }
.tpl30-content { }
.tpl30-spacer { height: 10px; }

/* ===== Template 32: Content scroller (jScrollPane) - 400px ===== */
.tpl32-scroll-pane {
    width: 100%;
    height: 400px;
    overflow: auto;
    margin-top: 10px;
}
.tpl32-header-wrap { }
.tpl32-content { }
.tpl32-spacer { height: 10px; }

/* ===== Template 34: 3-column with user-controlled widths (|number in Data/Data2) ===== */
.tpl34-grid {
    display: grid;
    gap: 20px;
    padding: 10px;
    width: 100%;
}
.tpl34-item1 { padding: 20px; }
.tpl34-item2 { padding: 20px; }
.tpl34-item3 { padding: 20px; }
.tpl34-header-wrap { width: 100%; }
.tpl34-error { padding: 15px; background: #fff3cd; border: 1px solid #ffc107; margin: 10px; }
@media only screen and (max-width: 800px) {
    .tpl34-grid { grid-template-columns: 100% !important; }
    .tpl34-item1 { order: 1; }
    .tpl34-item2 { order: 2; }
    .tpl34-item3 { order: 3; }
}

/* ===== Template 38: Blog layout — match site / Tip-Client typography (League Spartan + Open Sans) ===== */

/* Article title row: sans-serif, navy, subtle depth like home page headings (not Times italic) */
.tpl38-article-head {
  padding: 0 25px 10px 25px;
}
.tpl38-article-anchor {
  margin: 0;
}
.tpl38-article-title {
  font-family: var(--tc-font-heading, "League Spartan", sans-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  color: #013361;
  padding: 0 6px;
  text-shadow: 0 2px 10px rgba(1, 51, 97, 0.22);
}
.tpl38-article-meta {
  font-family: var(--tc-font-body, "Open Sans", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #444;
}

/* wrap1: use full width of content area - match I: site (no narrow constraint) */
.wrap1 {
  max-width: 100%;
}
/* Blog article images - allow full size within content area */
.wrap1 img,
.blog-body img,
.accordion-inner img,
.accordion-toggle img {
  max-width: 100%;
  height: auto;
}
/* Optional decorative style for inline article images - add class="image-style" on <img> in content */
.blog-body img.image-style,
.wrap1 img.image-style,
.accordion-inner img.image-style,
.accordion-toggle img.image-style {
  border: none !important;
  outline: none;
  box-shadow: none !important;
  /* Use margin (not padding) on <img>: padding + border-radius often clips only one corner in Chromium/WebKit */
  margin: 0 12px 12px 0;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  border-radius: 8px !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  -webkit-clip-path: inset(0 round 8px);
  clip-path: inset(0 round 8px);
}
/* Teaser and expanded copy match .blog-body */
/* Teaser and expanded copy match .blog-body */
.accordion-toggle p,
.accordion-inner p {
  font-family: var(--tc-font-body, "Open Sans", sans-serif);
  font-size: 1.05em;
  font-weight: 500;
  line-height: 1.55;
  color: #333;
  margin: 0 0 1em;
}
/*
 * Template 38 — Recent Posts (desktop vs narrow)
 * DESKTOP: JS aligns #showrecent 12px below first .tpl38-main until ~140px scroll, then top: 45%.
 * NARROW: #showrecent bottom bar.
 */
:root {
  --tpl38-showrecent-right-gutter: 2%;
}
/* Recent Posts sidebar — wrapper stays in flow for markup only; panel is NOT absolute-in-wrap (zero-height wrap broke % placement on 1st paint) */
.tpl38-recent-wrap {
  width: 100%;
  clear: both;
  box-sizing: border-box;
  min-height: 0;
}
#showrecent {
  float: none !important;
  box-sizing: border-box;
  background-color: #FDF9EE;
  border: 1px solid #e0d9cf;
  border-radius: 12px;
  padding: 15px 20px;
  margin-top: 0;
  margin-left: 0;
  color: #333;
}
/* Desktop: fixed — left edge at 75%, right gutter so ~col-md-3 band doesn’t touch viewport edge */
@media screen and (min-width: 993px) {
  #showrecent {
    position: fixed !important;
    left: 75% !important;
    right: var(--tpl38-showrecent-right-gutter) !important;
    /* top set by 38.tpl.php (below first .tpl38-main + 12px, then 45% after scroll) */
    top: 12px;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    z-index: 999;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    box-sizing: border-box;
  }
}
#showrecent h5 {
  font-weight: bold;
  color: #013361;
  font-size: 1.1em;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0d9cf;
}
#showrecent a,
#showrecent a:link {
  color: #074780 !important;
  text-decoration: none;
}
#showrecent a:visited {
  color: #074780 !important;
  text-decoration: none;
}
#showrecent a:hover {
  color: #000 !important;
  text-decoration: underline;
}
.showrecent {
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.showrecent a,
.showrecent a:link {
  color: #074780 !important;
  text-decoration: none;
}
.showrecent a:visited {
  color: #074780 !important;
  text-decoration: none;
}
.showrecent a:hover {
  color: #000 !important;
  text-decoration: underline;
}
#showrecentmobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 1000;
  background-color: #FDF9EE;
  border: 1px solid #e0d9cf;
  border-radius: 12px 12px 0 0;
  padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: none;
  width: 100%;
  line-height: 1.2em;
  font-size: 16px;
  color: #333;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  max-height: min(45vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#showrecentmobile a,
#showrecentmobile a:link {
  color: #074780 !important;
}
#showrecentmobile a:visited {
  color: #074780 !important;
}
#showrecentmobile a:hover {
  color: #000 !important;
}
#showrecentmobile h4 {
  color: #013361;
  font-weight: bold;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0d9cf;
}
/* Mobile PHP branch: bar is always fixed bottom; reserve scroll space even if viewport > 992 (e.g. landscape) */
body:has(#showrecentmobile) {
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}
/* Tablet / narrow: pin Recent Posts to bottom of viewport (designer: above footer feel, always reachable) */
@media screen and (max-width: 992px) {
  .tpl38-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .tpl38-main > div,
  .tpl38-main .wrap1,
  .tpl38-main .accordion-heading,
  .tpl38-main .accordion-toggle,
  .tpl38-main .blog-body {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* Wrapper collapses in flow; bar is fixed — keep spacing before next article */
  .tpl38-recent-wrap {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    border: none;
    background: transparent;
  }
  .tpl38-recent-wrap + .tpl38-main {
    margin-top: 28px !important;
  }
  #showrecent {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    max-height: min(45vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Reserve space for desktop #showrecent pinned to bottom (mobile uses body:has(#showrecentmobile) above) */
  body:has(#showrecent) {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
  }
}
/* Read More button for blog - maroon to match article titles */
button.SeeMore2 {
  background-color: #690116 !important;
  color: #fff !important;
  padding: 10px 25px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
button.SeeMore2:hover {
  background-color: #4a0110 !important;
  color: #fff !important;
}
/* Blog body — match home: Open Sans, charcoal, slightly heavier weight; links like tipcms accents */
.blog-body p {
  font-family: var(--tc-font-body, "Open Sans", sans-serif);
  font-size: 1.05em;
  font-weight: 500;
  line-height: 1.55;
  color: #333;
  margin: 0 0 1em;
}
.blog-body a:link,
.blog-body a:visited {
  color: #074780;
  text-decoration: underline;
}
.blog-body a:hover {
  color: #000;
}
.accordion-toggle a:link,
.accordion-toggle a:visited,
.accordion-inner a:link,
.accordion-inner a:visited {
  color: #074780;
  text-decoration: underline;
}
.accordion-toggle a:hover,
.accordion-inner a:hover {
  color: #000;
}
.tpl38-share-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  clear: both;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 12px;
  padding-top: 14px;
  border-top: 1px solid #e7e2d8;
  flex-wrap: wrap;
}
.tpl38-share-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.tpl38-share-icon:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}
.tpl38-share-icon svg {
  width: 17px;
  height: 17px;
  fill: #fff;
}
.tpl38-share-facebook { background: #1877f2; }
.tpl38-share-x { background: #111111; }
.tpl38-share-linkedin { background: #0a66c2; }
.tpl38-share-whatsapp { background: #25d366; }
.tpl38-share-email { background: #7a7a7a; }
/* Add breathing room before Read Less when share row is present */
.tpl38-share-row + button.SeeMore2 {
  display: block;
  margin-top: 10px;
  margin-left: 0;
  margin-right: auto;
}
.blogsub1, h3.blogsub1 {
  font-family: var(--tc-font-heading, "League Spartan", sans-serif);
  font-size: 1.65em;
  font-style: normal;
  font-weight: 700;
  color: #013361;
  padding: 0 6px;
  text-shadow: 0 1px 6px rgba(1, 51, 97, 0.18);
}
.blogsub2, h3.blogsub2 {
  font-family: var(--tc-font-heading, "League Spartan", sans-serif);
  font-size: 1.35em;
  font-style: normal;
  font-weight: 600;
  color: #074780;
  padding: 0 6px;
}

/* ===== Template 42: Image left, content right (staff/member listings) ===== */
.tpl42-grid {
    display: grid;
    padding: 10px;
}
.tpl42-image {
    text-align: center;
    padding: 10px 0;
}
.tpl42-img {
    width: 90%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}
.tpl42-content {
    padding: 15px;
    padding-left: 59px;
}
.tpl42-header-wrap { }
.tpl42-no-image .tpl42-content { padding-left: 15px; }
@media only screen and (max-width: 800px) {
    .tpl42-grid { grid-template-columns: 100% !important; }
    .tpl42-image { order: 1; }
    .tpl42-content { order: 2; padding-left: 15px; }
}

/* ===== Template 36: Two-column, Data2 moves to top on small screens ===== */
.tpl36-grid {
    display: grid;
    gap: 20px;
    padding: 10px;
    width: 100%;
}
.tpl36-item1 { padding: 10px; }
.tpl36-item2 { padding: 10px; }
@media only screen and (max-width: 800px) {
    .tpl36-grid { grid-template-columns: 100% !important; }
    .tpl36-item1 { order: 2; }
    .tpl36-item2 { order: 1; }
}

/* ===== Template 114: TOD (Time-of-Day) header ===== */
.tpl114-menu-detector {
    position: absolute;
    top: 50px;
    visibility: hidden;
}
.tpl114-article-image {
    position: relative;
    width: 100%;
    background-color: #424e01;
}
.tpl114-article-image > img,
.tpl114-ArticleImage > img {
    min-width: 100%;
    min-height: 20%;
    display: block;
}
@media all and (max-width: 480px) {
    .tpl114-article-image { overflow: hidden; }
}
.tpl114-content9 {
    position: fixed;
    top: 12vh;
    left: 3%;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    width: 100%;
    padding: 0;
    font-family: EB Garamond, sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 5px #000;
}
@media all and (max-width: 1500px) {
    .tpl114-content9 { top: 30vh; left: 2%; }
}
@media all and (max-width: 1023px) {
    .tpl114-content9 { top: 12vh; left: 2%; }
}
.tpl114-content8 {
    position: fixed;
    top: 8%;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    width: 100%;
    padding: 0;
    font-family: 'inter', sans-serif;
    font-size: 2.2em;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 5px #000;
}
@media all and (max-width: 480px) {
    .tpl114-content8 { font-size: 1.3em; line-height: 1.1em; }
}
.tpl114-content7 {
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.5em;
}
.tpl114-content1 { display: none; }
.tpl114-content6 {
    font-size: 1.8em;
    line-height: 1.2em;
}
@media all and (max-width: 480px) {
    .tpl114-content6 { font-size: 1.3em; line-height: 1.1em; }
}