/**
 * 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 #000000;
  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 ===== */
.tpl26-container { padding: 20px; }
.tpl26-header { width: 100%; }

/* ===== 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 (K: drive structure) - 75% content, 25% Recent Posts ===== */
/* 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;
}
/* accordion-toggle, accordion-inner - match blog-body styling, I: site font */
.accordion-toggle p,
.accordion-inner p {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.1em;
  line-height: 1.5;
  color: #000;
  margin: 0 0 1em;
}
/* Recent Posts sidebar - rounded corners, positioned lower to match I: site */
#showrecent {
  background-color: #f0ebe3;
  border: 1px solid #e0d9cf;
  border-radius: 12px;
  padding: 15px 20px;
  margin-top: 80px;
  min-width: 180px;
}
#showrecent h5 {
  font-weight: bold;
  color: #333;
  font-size: 1.1em;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0d9cf;
}
.showrecent {
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.showrecent a,
.showrecent a:link {
  color: #690116 !important;
  text-decoration: none;
}
.showrecent a:visited {
  color: #4a0110 !important;
  text-decoration: none;
}
.showrecent a:hover {
  color: #333 !important;
  text-decoration: underline;
}
#showrecentmobile {
  background-color: #f0ebe3;
  border: 1px solid #e0d9cf;
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
}
#showrecentmobile a,
#showrecentmobile a:link {
  color: #690116 !important;
}
#showrecentmobile a:visited {
  color: #4a0110 !important;
}
#showrecentmobile a:hover {
  color: #333 !important;
}
/* Blog page wrapper: light fallback when article has no background set */
#onecolcontent:has(#showrecent),
#centercontent:has(#showrecent) {
  background-color: #f5f3ef;
}
/* 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 text - match I: site (Times New Roman, full-width content) */
.blog-body p {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.1em;
  line-height: 1.5;
  color: #000;
  margin: 0 0 1em;
}
.blogsub1, h3.blogsub1 { font-size: 1.8em; font-style: italic; color: #690116; padding: 0 6px; }
.blogsub2, h3.blogsub2 { font-size: 1.6em; font-style: italic; color: #690116; 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; }
}