/* =========================
   GLOBAL AND HOME BACKGROUND
   ========================= */
/* I removed the background CSS since the image wasn't going fullscreen. (JH) */

/* Remove background on the full-width UAGB container on Home */
.home .wp-block-uagb-container.uagb-block-344bf4c5.alignfull.uagb-is-root-container {
  background: none;
}

/* Top spacing for that UAGB container */
.wp-block-uagb-container.uagb-block-344bf4c5 {
  padding-top: 8%;
}

/* Separator spacing, typo fixed (margin-top) */
.uagb-separator-spacing-wrapper {
  margin-top: 50px;
  margin-bottom: 50px;
}

/* =========================
   THEME LAYOUT TWEAKS
   ========================= */
@media (min-width: 921px) {
  .home .ast-theme-transparent-header #masthead {
    position: relative !important;
  }
.ast-theme-transparent-header #masthead {
    position: relative !important;
  }
}

@media (min-width: 993px) {
  .ast-separate-container #primary,
  .ast-separate-container.ast-left-sidebar #primary,
  .ast-separate-container.ast-right-sidebar #primary {
    margin: 0 0;
  }
}

/* =========================
   RESPONSIVE VIDEO AND EMBEDS
   Works for YouTube blocks, generic Embed blocks, and Astra oEmbed
   ========================= */

/* Base rule for iframes inside WP embed wrappers and direct YouTube iframes */
.wp-block-embed__wrapper iframe,
iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"],
.ast-oembed-container iframe {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

/* Make Astra's oEmbed wrapper cooperate with aspect-ratio */
body .ast-oembed-container *,
.ast-oembed-container {
  position: relative;
}
.ast-oembed-container {
  height: auto !important;
  padding-top: 0 !important;
}

/* Ensure WP Video block (self-hosted files) matches the 16:9 look */
.wp-block-video video,
.video-16x9 video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* =========================
   OPTIONAL UTILITY WRAPPER
   Use a div with class "fix-my-video" around a raw iframe if needed
   ========================= */
.fix-my-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.fix-my-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
@media (max-width: 921px) {
	
	    .ast-theme-transparent-header .site-title a, .ast-theme-transparent-header .site-title a:focus, .ast-theme-transparent-header .site-title a:hover, .ast-theme-transparent-header .site-title a:visited, .ast-theme-transparent-header .ast-builder-layout-element .ast-site-identity .site-title a, .ast-theme-transparent-header .ast-builder-layout-element .ast-site-identity .site-title a:hover, .ast-theme-transparent-header .ast-builder-layout-element .ast-site-identity .site-title a:focus, .ast-theme-transparent-header .ast-builder-layout-element .ast-site-identity .site-title a:visited {
        color: var(--ast-global-color-0);
    }
	
	  body.ast-header-break-point #content {
    padding-top: 140px; /* tweak this to match your mobile header height */
  }

  /* Optional: make in-page jumps (like skip links) land below the header */
  html {
    scroll-padding-top: 140px;
  }
	.ast-desktop .ast-primary-header-bar.main-header-bar, .ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar {
    margin-top: 0px;
}
    .ast-separate-container.ast-right-sidebar #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container #primary, .ast-plain-container #primary, .ast-narrow-container #primary { margin-top: 0; }
}

/* =========================
   EVENTS MADE EASY — CALENDAR
   ========================= */
.eme-calendar-table {
    border-collapse: separate;
    border-spacing: 3px;
    background: transparent;
    width: 100%;
}

.eme-calendar-table th {
    background-color: #2a5454;
    color: #ffffff;
    font-weight: 600;
    padding: 10px 6px;
    border: none;
    text-align: center;
}

/* High-specificity rule to beat EME's own `table.fullcalendar td { padding: 0 !important; }` */
table.eme-calendar-table.fullcalendar td {
    background-color: #ffffff !important;
    border: 1px solid #2a5454 !important;
    color: #1a1a1a !important;
    padding: 10px 10px 10px 6px !important;
    vertical-align: top;
    height: auto !important;
    overflow: visible !important;
}

/* Day-number span — pad it directly so the number doesn't hug the edge */
table.eme-calendar-table .span-eme-calday {
    display: inline-block;
    padding: 2px 6px 4px 2px;
    font-weight: 600;
    color: #2a5454;
}

/* Today's cell — subtle highlight */
.eme-calendar-table td.eventless-today,
.eme-calendar-table td.eventful-today {
    background-color: #f4f9f9 !important;
    box-shadow: inset 0 0 0 2px #2a5454;
}

/* Event list inside a cell — kill default list styling */
.eme-calendar-table td ul,
.eme-calendar-table td ol {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
}

.eme-calendar-table td li {
    margin: 4px 0;
    padding: 0;
    line-height: 1.3;
}

/* Calendar links — dark teal instead of default orange */
.eme-calendar-table td a,
.eme-calendar-table td a:link,
.eme-calendar-table td a:visited {
    color: #2a5454 !important;
    text-decoration: underline;
    font-weight: 500;
}

.eme-calendar-table td a:hover,
.eme-calendar-table td a:focus {
    color: #1a3a3a !important;
    text-decoration: underline;
}

/* =========================
   EVENTS MADE EASY — SINGLE EVENT PAGE
   ========================= */

/* Wrap the whole event content area in a white card for contrast.
   Only on pages that contain an EME RSVP form. */
.entry-content:has(.eme-rsvp-form) {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 28px 36px;
    border-radius: 6px;
    margin: 24px 0;
}

/* Restore paragraph spacing inside that card (Astra zeroes it out by default) */
.entry-content:has(.eme-rsvp-form) p {
    margin-bottom: 1em !important;
    line-height: 1.65;
}

/* First paragraph (usually the date/time line) — make it stand out */
.entry-content:has(.eme-rsvp-form) > p:first-of-type {
    font-weight: 600;
    color: #2a5454;
    font-size: 1.05em;
    margin-bottom: 1.2em !important;
}

/* The booking form table */
table.eme-rsvp-form {
    background-color: #ffffff;
    border: 2px solid #2a5454;
    border-radius: 6px;
    margin: 24px 0;
    border-collapse: separate;
    overflow: hidden;
    width: 100%;
}

table.eme-rsvp-form th {
    background-color: #2a5454;
    color: #ffffff;
    text-align: right;
    padding: 12px 16px;
    vertical-align: middle;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}

table.eme-rsvp-form td {
    background-color: #ffffff;
    padding: 12px 16px;
    vertical-align: middle;
    border: none;
}

/* Inputs inside the booking form */
table.eme-rsvp-form input[type="text"],
table.eme-rsvp-form input[type="email"],
table.eme-rsvp-form input[type="number"],
table.eme-rsvp-form textarea,
table.eme-rsvp-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #2a5454;
    border-radius: 4px;
    background-color: #ffffff;
    color: #1a1a1a;
    font-size: 1em;
}

table.eme-rsvp-form textarea {
    min-height: 80px;
    resize: vertical;
}

table.eme-rsvp-form input:focus,
table.eme-rsvp-form textarea:focus,
table.eme-rsvp-form select:focus {
    outline: 2px solid #2a5454;
    outline-offset: 1px;
}

/* The submit button */
.eme-rsvp-form-submit,
input.eme-submit,
input[type="submit"].eme-submit,
.eme-rsvp-form + input[type="submit"],
form input[type="submit"] {
    background-color: #2a5454;
    color: #ffffff;
    border: 2px solid #2a5454;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 12px;
}

.eme-rsvp-form-submit:hover,
input.eme-submit:hover,
input[type="submit"].eme-submit:hover,
form input[type="submit"]:hover {
    background-color: #1a3a3a;
    border-color: #1a3a3a;
}

.fullcalendar a.prev-month,
.fullcalendar a.next-month,
.fullcalendar a.prev-month:hover,
.fullcalendar a.next-month:hover {
  color: #ffffff !important;
}