/*
Theme Name: Church Theme
Theme URI: https://blvr.com/church-theme
Author: BLVR
Author URI: https://blvr.com
Description: A custom WordPress theme for churches.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: churchtheme
*/

/* Custom utilities */
@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: var(--container-width, 80rem);
}

/* Source paths */
@source "./templates/**/*.php";
@source "./parts/**/*.php";
@source "./assets/js/**/*.js";

/* Custom styles below this line */ 
@layer base {
  

:root {
  /* Font Families */
  --font-body: var(--font-body-family, 'Inter, sans-serif');
  --font-heading: var(--font-heading-family, 'Poppins, sans-serif');

  /* Base Styles */
  --base-font-size: var(--base-font-size, 16px);
  --body-line-height: var(--body-line-height-value, 1.5);
  --body-font-weight: var(--body-font-weight-value, 400);
  --body-color: var(--body-color-value, #333333);

  /* Brand Colors */
  --color-primary: var(--color-primary, #2563eb);
  --color-secondary: var(--color-secondary, #4f46e5);
  --color-accent: var(--color-accent, #ec4899);
  --color-text-primary: var(--color-text-primary, #1f2937);
  --color-body-background: var(--color-body-background, #ffffff);
  --color-success: var(--color-success, #10b981);
  --color-warning: var(--color-warning, #f59e0b);
  --color-error: var(--color-error, #ef4444);
  --color-link: var(--color-link, #000);

  /* Line Heights */
  --leading-none: var(--leading-none-value, 1);
  --leading-tight: var(--leading-tight-value, 1.25);
  --leading-snug: var(--leading-snug-value, 1.375);
  --leading-normal: var(--leading-normal-value, 1.5);
  --leading-relaxed: var(--leading-relaxed-value, 1.625);
  --leading-loose: var(--leading-loose-value, 2);

  /* Font Weights */
  --weight-light: var(--weight-light-value, 300);
  --weight-normal: var(--weight-normal-value, 400);
  --weight-medium: var(--weight-medium-value, 500);
  --weight-semibold: var(--weight-semibold-value, 600);
  --weight-bold: var(--weight-bold-value, 700);
  --weight-extrabold: var(--weight-extrabold-value, 800);

  /* Heading Styles */
  --h1-font-size: var(--h1-font-size-value, var(--text-5xl));
  --h2-font-size: var(--h2-font-size-value, var(--text-4xl));
  --h3-font-size: var(--h3-font-size-value, var(--text-3xl));
  --h4-font-size: var(--h4-font-size-value, var(--text-2xl));
  --h5-font-size: var(--h5-font-size-value, var(--text-xl));
  --h6-font-size: var(--h6-font-size-value, var(--text-lg));

  --h1-line-height: var(--h1-line-height-value, var(--leading-tight));
  --h2-line-height: var(--h2-line-height-value, var(--leading-tight));
  --h3-line-height: var(--h3-line-height-value, var(--leading-snug));
  --h4-line-height: var(--h4-line-height-value, var(--leading-snug));
  --h5-line-height: var(--h5-line-height-value, var(--leading-normal));
  --h6-line-height: var(--h6-line-height-value, var(--leading-normal));

  /* Heading Line Heights - Mobile (default, applied on mobile devices) */
  --h1-line-height-mobile: var(--h1-line-height-mobile-value, var(--h1-line-height-value, var(--leading-tight)));
  --h2-line-height-mobile: var(--h2-line-height-mobile-value, var(--h2-line-height-value, var(--leading-tight)));
  --h3-line-height-mobile: var(--h3-line-height-mobile-value, var(--h3-line-height-value, var(--leading-snug)));
  --h4-line-height-mobile: var(--h4-line-height-mobile-value, var(--h4-line-height-value, var(--leading-snug)));
  --h5-line-height-mobile: var(--h5-line-height-mobile-value, var(--h5-line-height-value, var(--leading-normal)));
  --h6-line-height-mobile: var(--h6-line-height-mobile-value, var(--h6-line-height-value, var(--leading-normal)));

  --h1-font-weight: var(--h1-font-weight-value, var(--weight-bold));
  --h2-font-weight: var(--h2-font-weight-value, var(--weight-bold));
  --h3-font-weight: var(--h3-font-weight-value, var(--weight-semibold));
  --h4-font-weight: var(--h4-font-weight-value, var(--weight-semibold));
  --h5-font-weight: var(--h5-font-weight-value, var(--weight-semibold));
  --h6-font-weight: var(--h6-font-weight-value, var(--weight-semibold));

  /* Paragraph Styles */
  --paragraph-font-size: var(--paragraph-font-size-value, var(--text-base));
  --paragraph-line-height: var(--paragraph-line-height-value, var(--leading-relaxed));
  --paragraph-font-weight: var(--paragraph-font-weight-value, var(--weight-normal));
  --paragraph-letter-spacing: var(--paragraph-letter-spacing-value, 0px);

  /* Global Layout Variables */
  --container-max-width: var(--container-max-width, 1280px);
  --container-padding: var(--container-padding, 16px);
  --container-padding-tablet: var(--container-padding-tablet, 12px);
  --container-padding-mobile: var(--container-padding-mobile, 8px);

  --header-config-height: var(--header-config-height, 64px);
  --header-config-opacity: var(--header-config-opacity, 1);
  --header-config-position: var(--header-config-sticky, relative);
  --header-config-background: var(--header-config-header-background, transparent);
  --header-config-height-tablet: var(--header-config-height-tablet, 48px);
  --header-config-height-mobile: var(--header-config-height-mobile, 40px);

  --spacing-section-margin: var(--spacing-section-margin, 32px);
  --spacing-section-padding: var(--spacing-section-padding, 64px);
  --spacing-element-gap: var(--spacing-element-gap, 16px);
  --spacing-section-margin-tablet: var(--spacing-section-margin-tablet, 24px);
  --spacing-section-padding-tablet: var(--spacing-section-padding-tablet, 48px);
  --spacing-element-gap-tablet: var(--spacing-element-gap-tablet, 12px);
  --spacing-section-margin-mobile: var(--spacing-section-margin-mobile, 16px);
  --spacing-section-padding-mobile: var(--spacing-section-padding-mobile, 32px);
  --spacing-element-gap-mobile: var(--spacing-element-gap-mobile, 8px);

  /* Navigation Settings */
  --navigation-menu-type: var(--navigation-menu-type, 'standard');
  --navigation-dropdown-style: var(--navigation-dropdown-style, 'fade');
  --navigation-menu-colors-background: var(--navigation-menu-colors-background, transparent);
  --navigation-menu-colors-text: var(--navigation-menu-colors-text, currentColor);
  --navigation-menu-colors-hover: var(--navigation-menu-colors-hover, currentColor);

  --image-border-radius: var(--image-border-radius, 0px);
}



}


/* Base Styles */
body {
  font-family: var(--font-body);
  font-size: var(--paragraph-font-size);
  line-height: var(--paragraph-line-height);
  font-weight: var(--paragraph-font-weight);
  letter-spacing: var(--paragraph-letter-spacing);
  color: var(--color-text-primary);
  background-color: var(--color-body-background);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

/* Individual Heading Styles */
/* Mobile-first: Use mobile line height by default */
h1 {
  font-size: var(--h1-font-size) ;
  line-height: var(--h1-line-height-mobile);
  font-weight: var(--h1-font-weight);
}

h2 {
  font-size: var(--h2-font-size) ;
  line-height: var(--h2-line-height-mobile);
  font-weight: var(--h2-font-weight);
}

h3 {
  font-size: var(--h3-font-size) !important;
  line-height: var(--h3-line-height-mobile);
  font-weight: var(--h3-font-weight);
}

h4 {
  font-size: var(--h4-font-size) !important;
  line-height: var(--h4-line-height-mobile);
  font-weight: var(--h4-font-weight);
}

h5 {
  font-size: var(--h5-font-size) !important;
  line-height: var(--h5-line-height-mobile);
  font-weight: var(--h5-font-weight);
}

h6 {
  font-size: var(--h6-font-size) !important;
  line-height: var(--h6-line-height-mobile);
  font-weight: var(--h6-font-weight);
}

/* Desktop: Use desktop line height at larger breakpoints (768px and up) */
@media (min-width: 768px) {
  h1 {
    line-height: var(--h1-line-height);
  }

  h2 {
    line-height: var(--h2-line-height);
  }

  h3 {
    line-height: var(--h3-line-height);
  }

  h4 {
    line-height: var(--h4-line-height);
  }

  h5 {
    line-height: var(--h5-line-height);
  }

  h6 {
    line-height: var(--h6-line-height);
  }
}

/* Paragraphs */
p {
  font-size: var(--paragraph-font-size) !important;
  line-height: var(--paragraph-line-height);
  font-weight: var(--paragraph-font-weight);
  letter-spacing: var(--paragraph-letter-spacing);
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

a {
  color: var(--color-link);
}

  b, strong {
    font-weight: bolder;
  }
  
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
  list-style: none;
  }
  img, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video, picture {
    width: 100%;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  section ul{
    list-style: initial;
    margin-bottom: 1rem;
    margin-left: 1.25rem;
  }
  section ol{
    list-style: decimal;
    margin-bottom: 1rem;
    margin-left: 1.25rem;
  }
  section .submenu-section ul{
    list-style: none;
    padding-left: 0;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }


/* Typography Utility Classes */
.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

/* Font Weight Utilities */
.font-light {
  font-weight: var(--weight-light);
}

.font-normal {
  font-weight: var(--weight-normal);
}

.font-medium {
  font-weight: var(--weight-medium);
}

.font-semibold {
  font-weight: var(--weight-semibold);
}

.font-bold {
  font-weight: var(--weight-bold);
}

.font-extrabold {
  font-weight: var(--weight-extrabold);
}

/* Line Height Utilities */
.leading-none {
  line-height: var(--leading-none);
}

.leading-tight {
  line-height: var(--leading-tight);
}

.leading-snug {
  line-height: var(--leading-snug);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.leading-loose {
  line-height: var(--leading-loose);
}

/* Color Utility Classes */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }

/* Layout Utility Classes */
.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
   
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: var(--container-width, 96rem);
  }
  @media (width <= 1280px) {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
}

.container {
  margin-inline: auto;
  max-width: var(--container-width, 80rem);
}


/* Section Styles */
.section {
  margin-top: var(--spacing-section-margin);
  margin-bottom: var(--spacing-section-margin);
  padding-top: var(--spacing-section-padding);
  padding-bottom: var(--spacing-section-padding);
}

/* Navigation Styles */
.site-nav {
  background-color: var(--navigation-menu-colors-background);
  color: var(--navigation-menu-colors-text);
}

.site-nav a:hover {
  color: var(--navigation-menu-colors-hover);
}

/* Gap Utility */
.gap {
  gap: var(--spacing-element-gap);
}

/* Responsive Styles */
@media (max-width: 991px) {
  .container,
  .container-fluid {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
  }


  .site-header {
      /* height: var(--header-config-height-tablet); */
      position:relative;
  }

  .section {
      margin-top: var(--spacing-section-margin-tablet);
      margin-bottom: var(--spacing-section-margin-tablet);
      padding-top: var(--spacing-section-padding-tablet);
      padding-bottom: var(--spacing-section-padding-tablet);
  }

  .gap {
      gap: var(--spacing-element-gap-tablet);
  }
}

@media (max-width: 767px) {

  .site-header {
      /* height: var(--header-config-height-mobile); */
  }

  .section {
      margin-top: var(--spacing-section-margin-mobile);
      margin-bottom: var(--spacing-section-margin-mobile);
      padding-top: var(--spacing-section-padding-mobile);
      padding-bottom: var(--spacing-section-padding-mobile);
  }

  .gap {
      gap: var(--spacing-element-gap-mobile);
  }
}


img {
  border-radius: var(--image-border-radius);
}

/* Image Container Border Radius */
.image-container,
.image-wrapper,
.app-image-wrapper,
.samples-panel__image-wrapper,
.cta-block-image,
.multi-column-panel__image,
.two-column-panel__image {
  border-radius: var(--image-border-radius);
  overflow: hidden;
}

/* Dropdown Animation Styles based on navigation-dropdown-style */
.dropdown-fade {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.dropdown-slide {
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.dropdown-zoom {
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

/* Active States */
.dropdown.active .dropdown-fade {
  opacity: 1;
}

.dropdown.active .dropdown-slide {
  transform: translateY(0);
  opacity: 1;
}

.dropdown.active .dropdown-zoom {
  transform: scale(1);
  opacity: 1;
}

/* ACF Google Maps */
.acf-map {
  width: 100%;
  height: 400px;
  border: 0;
  margin: 0;
}

/* Fixes potential theme css conflict */
.acf-map img {
  max-width: inherit !important;
}

/* Aspect ratio utility classes */
.aspect-w-16 {
  position: relative;
  padding-bottom: calc(9 / 16 * 100%);
}

.aspect-w-16 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Location cards */
.location-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.location-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}



.embedded-content {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.embedded-content iframe,
.embedded-content .wp-embed,
.embedded-content .wp-block-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/*
 * Custom Fancybox Sizing for a Consistent Video Player
 *
 * This uses a custom class to override Fancybox's default inline styles.
 */
.churchtheme-fancybox-video .fancybox__slide {
  /* Use Flexbox to structure the content (player + CTA) */
  display: flex;
  flex-direction: column;
}

.churchtheme-fancybox-video .fancybox__content {
  /* Main content area settings */
  width: 900px !important;
  max-width: 90vw !important;
  height: auto !important; /* Allow height to be flexible */
  background: transparent;
  padding: 0 !important;
  overflow: hidden;

  /* Tell this element to grow to fill available space */

  
  /* Ensure children (like iframes) fill this container */
  display: flex;
  flex-direction: column;
}
.f-button.is-close-btn{
  display: none !important;
}

/* Target all player types to fill the content area */
.churchtheme-fancybox-video .fancybox-video-container,
.churchtheme-fancybox-video .fancybox__content > div {
  flex-grow: 1;
  border: none;
}
.churchtheme-fancybox-video .fancybox__content iframe {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  border: none;
}

/* Ensure the custom HTML5 video also fills its container */
.churchtheme-fancybox-video .fancybox-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Style the CTA block that is now a direct child of the slide */
.churchtheme-fancybox-video .churchtheme-fancybox-cta {
  width: 900px !important;
  max-width: 90vw !important;
  margin: 0 auto; /* Center the CTA block */
  flex-shrink: 0; /* Prevent the CTA from shrinking */
}

/* Sticky Header Logo Shrink Effect */
/* Smooth transitions for header and logo */
.site-header {
  transition: height 0.3s ease-in-out, box-shadow 0.3s ease-in-out, all 0.3s ease-in-out;
}

.site-logo-img {
  transition: max-height 0.3s ease-in-out, transform 0.3s ease-in-out;
  border-radius: 0 !important;
}

/* When header is scrolled, reduce height and shrink the logo */
.site-header.header-scrolled {
  height: var(--sticky-header-height, 60px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.site-header.header-scrolled .site-logo-img {
  max-height: calc(var(--sticky-header-height, 60px) * 0.58) !important; /* 58% of sticky header height */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .site-header.header-scrolled {
    height: calc(var(--sticky-header-height, 60px) * 0.83) !important; /* 83% of desktop sticky height */
  }
  
  .site-header.header-scrolled .site-logo-img {
    max-height: calc(var(--sticky-header-height, 60px) * 0.5) !important; /* 50% of sticky header height */
  }
}

/* Add a subtle backdrop blur when scrolled (optional enhancement) */
@supports (backdrop-filter: blur(10px)) {
  .site-header.header-scrolled {
    backdrop-filter: blur(10px);
  }
}

.otgs-development-site-front-end{display: none !important;}
.wpml-ls-statics-footer{display: none !important;}
.site-header .site-logo{
  border-radius: 0 !important;
}

.fancybox__backdrop{
  background-color: rgba(0, 0, 0, 0.9) !important;
}

.gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large {
  inline-size: 100%;
  border: none;
  border-bottom: #adadad solid 1px;
  box-shadow: none;
  border-radius: 0px;
  background: none !important;
}
.gform_button.button{
  background-color: #ffc56d !important;
  border-radius: 40px !important;
  font-size: 16px !important;
  color: #626262 !important;
  border: none !important;
}

.gform-theme--foundation .gfield textarea{
  border:none;
  border-bottom: #adadad solid 1px !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  background: none !important;
}

span.gfield_required.gfield_required_text{
  font-size: 0px !important;
}
span.gfield_required.gfield_required_text::before{
  content: "*" !important;
  font-size: 16px !important;
  color: #000000 !important;
  margin-right: 4px !important;
}