/* The --ast-global-color-* tokens used throughout this file (and by
   pwa-style.css/hunt-style.css/rsvp.php in the wedding app) now live in
   theme.css's :root block instead of here — theme.css loads before this
   file either way, and keeping them there means the wedding-app pages can
   pick up the same color tokens by loading theme.css alone, without also
   pulling in the homepage-specific rules below. */

body {
	color: var(--ast-global-color-3);
}

input[type="radio"] {
  accent-color:  var(--ast-global-color-9);
}

.table .thead-dark th {
  background-color:  var(--ast-global-color-1);
  /* Bootstrap 5 dropped .thead-dark/.thead-light entirely — in Bootstrap 4
     they came bundled with white text and matching borders for free.
     Reapplying the white text here so the heading row isn't dark-on-dark
     now that only the background half of the old class still does anything. */
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.table .thead-light th {
  background-color: #f8f9fa;
  color: #212529;
}

.navbar {
	background-color: var(--ast-global-color-1) !important;
}

.white-logo {
    height: 190px !important;
    width: auto;
    display: block;
    margin: 0 auto;
    /* logo.svg's shapes are filled with currentColor rather than a fixed
       color, specifically so it can be recolored per-context like this —
       without this the browser's initial color (black) is used instead,
       which is invisible against the dark carousel overlay. */
    color: #ffffff;
}

/* The whole hero content group — headline (text or logo), the
   "Save the Date"/"Edinburgh 2027" pill, and the countdown — stacked and
   centered as one block, with equal gaps above and below the pill. Each
   carousel slide gets its own copy of this group (see index.php), so the
   gap stays identical whether the headline above it is the "Katie & Keith"
   text or the taller logo image — the earlier approach centered the pill
   alone and bottom-anchored the countdown separately against the hero's
   edge, which is what made the countdown drift "too low" independently of
   the headline/pill.

   position:absolute + inset:0 rather than position:relative + height:100%
   — height:100% depends on the browser resolving a percentage against
   .carousel-caption's computed height, which comes from an absolutely
   positioned box with only top/bottom set (no explicit height) and was
   resolving inconsistently in practice (the children centered correctly
   *inside* .hero-content via justify-content, but .hero-content's own box
   wasn't actually filling the hero, so the whole group sat high on the
   page). inset:0 pins all four edges straight to .carousel-caption's box
   directly, with no percentage math involved. */
.hero-content {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    /* Three rows: headline | pill | countdown. The outer rows are equal
       (1fr) so the pill is always exactly at the hero's vertical centre,
       whatever the headline above (text or logo) and countdown below
       measure, and so on both slides. The prev/next arrows are centred on
       the same line. */
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    row-gap: 3rem;
    text-align: center;
}
.hero-content > :first-child { align-self: end; }
.hero-content > :last-child { align-self: start; }

/* Hero prev/next arrows: same shape as the event carousel's, but in the
   theme orange (--ast-global-color-9) with a white chevron. */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--ast-global-color-9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.hero-nav:hover { color: #fff; background: #B5560F; }
.hero-nav--prev { left: 32px; }
.hero-nav--next { right: 32px; }
@media (max-width: 767.98px) {
    .hero-nav { width: 40px; height: 40px; }
    .hero-nav--prev { left: 12px; }
    .hero-nav--next { right: 12px; }
}

#contact {
    background-color: var(--ast-global-color-4) !important;
    color: var(--ast-global-color-2) !important;
    padding-bottom: 0 !important;
}
#contact .py-5,
#contact .pb-5 {
  	padding-bottom: 0.5em !important;
}

.countdown-container {
    /* Just a normal flex child of .hero-content now, not separately
       positioned — it's the third item in the centered group (headline,
       pill, countdown), so it automatically gets the same gap above it
       as the pill gets above the headline. */
    text-align: center;
    width: 100%;
}
.countdown-timer {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    padding: 20px;
    font-variant-numeric: tabular-nums;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.countdown-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
}
.countdown-value {
    font-size: 1.8rem;
    line-height: 1;
}
.countdown-unit {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-top: 4px;
}
.countdown-label {
    color: #ffffff;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px #000;
}
.map {
  	height: 383px;
  	overflow: hidden;
  	box-shadow: 0px 16px 120px -24px rgba(199, 134, 101, 0.4);
    margin-top: 2em;
}
.icon-circle {
  width: 70px;
  height: 70px;
  background-color: var(--ast-global-color-10);
  color: var(--ast-global-color-11);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: var(--ast-global-color-4);
  border-radius: 1rem;
}
.modal-backdrop.show {
  opacity: 0.9; 
}
.btn-outline-primary {
  border-color: var(--ast-global-color-11);
  color: var(--ast-global-color-11);
}
.btn-outline-primary:hover {
  background-color:var(--ast-global-color-9);
  color: #fff;
}
.btn-close-custom {

  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: #000;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
}
#info {
  position: relative;
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("../img/flower-bg.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-blend-mode: lighten; 
}

@media (min-width: 992px) {
  #adminNavbar {
    display: flex !important;
    opacity: 1 !important;
    transition: none !important; 
  }
  .navbar-collapse .btn {
        align-self: center;  
        height: auto; 
    }
}
@media (max-width: 991.98px) {
  #adminNavbar {
    opacity: 1 !important;
    transition: none !important;
  }
  .navbar-collapse .btn {
        align-self: flex-start;   
        width: 80px;              
        margin-bottom: 0.5rem;    
      	margin-left: 0 !important;
   }  
}
@media (max-width: 991.98px) {
  #adminNavbarCollapse {
    display: none;     
    flex-direction: column;  
    width: 100%;
  }
  #adminNavbarCollapse .navbar-nav.ml-auto {
    margin-left: 0 !important;
  }
  #adminNavbarCollapse .navbar-nav {
    align-items: flex-start !important;
    width: 100%;
  }
  #adminNavbarCollapse.show {
    display: flex;      /* show links when toggled */
  }
  #adminNavbarCollapse .nav-link {
    text-align: left !important;
  }    
}


/* Edinburgh weather tile (footer.php's #footer-weather-tile, filled in by
   js/footer-weather.js). Every bit of its look — city/flag, icon, temps,
   feels-like, the hours strip, and the weather_bg_tier background colour
   — is wedding-app-backend/weather/weather.css's own existing styling for
   that exact markup (.accordion-header.weather/.city/.now/.hours-preview/
   .weather-card-wrapper.weather-tier-*), loaded as-is in header.php and
   reused here with none of its content trimmed — same card weather.html
   shows, in full.
   Two things that CSS doesn't already provide for this context:
   1. Base box sizing for .weather-card-wrapper (padding/rounding
      normally comes from the wedding app's pwa-style.css, which isn't
      loaded here), plus a definite width - without one, .hours-preview's
      own overflow-x:auto (weather.css) has nothing to actually scroll
      within, so an unconstrained inline-block just grew to fit all 4
      hours on one line and spilled past the column/footer instead.
   2. .weather-row.weather-preview (weather.css) lays .now and
      .hours-preview out SIDE BY SIDE, sized for the app's own full-width
      card - too wide for a footer column whatever width that column
      gets. Stacking them instead (hours-preview under now) needs roughly
      the width of the wider of the two rows, not their sum, which is
      what actually lets this fit a footer column without cutting
      anything out of the card.
   display:inline-block (not block+width:100%) so the card sizes to
   whichever of its rows is actually widest, up to max-width — a forced
   100%-wide block left empty space to the right of narrower rows inside
   the card. The column's own text-md-end handles right-aligning an
   inline-block the same way it would any other inline content, so no
   margin-left:auto is needed either. */
#footer-weather-link {
	display: inline-block;
}
#footer-weather-tile.weather-card-wrapper {
	display: inline-block;
	max-width: 320px;
	padding: 10px 18px;
	border-radius: 10px;
	box-sizing: border-box;
	margin-bottom: 15px;
}
#footer-weather-tile .weather-preview {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
/* City name/flag: this tile only ever shows "Edinburgh" (EDINBURGH_NAME
   is hardcoded in footer-weather.js, not a user-entered city that could
   be long), so unlike weather.css's general-purpose 24px it can just be
   sized to fill the card's own width rather than staying conservative
   for names that don't apply here. Flag width/height bumped to match the
   bigger text (weather.css's 22px is scaled for the 24px original) and
   given a wider margin - 8px (right for a 24px name) read as cramped at
   this larger size. */
#footer-weather-tile .city {
	font-size: 27px;
}
#footer-weather-tile .city .flag {
	width: 28px;
	height: 28px;
	margin-right: 15px;
}
/* This column is col-12 (full-width, so the tile's max-width is the
   limiting factor, not the column) below Bootstrap's md breakpoint - the
   27px desktop size was wide enough there to force max-width past 320px
   and widen the whole card, since .now-main (icon+temp) and the hours
   row don't need nearly that much width. Smaller size here instead of
   just letting it wrap, to keep the city name on one line. */
@media (max-width: 767.98px) {
	#footer-weather-tile .city {
		font-size: 24px;
	}
}
/* .now-feels-like sits far enough below .now-main's icon+temp row to read
   as a separate block rather than a detail of the reading right above it
   - weather.css's 2px gap is for its original side-by-side layout, where
   .hours-preview alongside .now (not below .now-feels-like) was the next
   thing drawn and the relevant proximity; pulling it up here instead. */
/* text-align:right (not a negative margin-right) - its box stretches to
   match .now-main's width above it (.now is a flex column, and
   .weather-preview's align-items:flex-start sizes .now to its widest
   child, .now-main), so this is what actually keeps it flush under the
   temperature. It doesn't depend on the column's own text-align (removed
   from footer.php - see that file) the way it did before. */
#footer-weather-tile .now-feels-like {
	margin-top: -10px;
	margin-bottom: 5px;
	text-align: right;
}

/* ----------------------------------------------------------
   EVENT SECTION (includes/event.php, js/event-carousel.js)
   One scroll-snap row of event cards, centred on the default
   event at load. Falls back to a plain centred row (no arrows,
   dots or fades) when everything fits on screen.
---------------------------------------------------------- */
.event-carousel {
  --event-card-w: min(400px, 78vw);
  --event-gap: 40px;
  position: relative;
}
.event-carousel__track {
  position: relative;
  display: flex;
  gap: var(--event-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 calc(50% - var(--event-card-w) / 2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.event-carousel__track::-webkit-scrollbar { display: none; }
.event-carousel::before,
.event-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.event-carousel::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.event-carousel::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.event-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--event-card-w);
  scroll-snap-align: center;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.35s;
}
.event-card.is-active { opacity: 1; transform: none; }
.event-card__photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  margin-bottom: 1.5rem;
}
.event-card__photo {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
}
.event-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-card__missing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f1ebe3;
  color: #a39889;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.event-card__foot { margin-top: auto; padding-top: 0.5rem; }
.event-card__date {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.5rem;
}
.event-carousel__nav {
  position: absolute;
  top: calc(var(--event-card-w) / 3);
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #e3d9cf;
  background: #fff;
  color: #212529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.event-carousel__nav--prev { left: 32px; }
.event-carousel__nav--next { right: 32px; }
.event-carousel__nav:disabled { opacity: 0.35; cursor: default; }
.event-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 0.5rem;
}
.event-carousel__dot {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-carousel__dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #cfc6bb;
  transition: width 0.3s, background 0.3s;
}
.event-carousel__dot.is-active span { width: 24px; background: var(--primary, #E47A2E); }
/* Everything fits: no scrolling needed, so just centre the cards. */
.event-carousel--static .event-carousel__track { justify-content: center; padding: 0; overflow: visible; }
.event-carousel--static .event-card { opacity: 1; transform: none; }
.event-carousel--static .event-carousel__nav,
.event-carousel--static .event-carousel__dots,
.event-carousel--static::before,
.event-carousel--static::after { display: none; }
@media (max-width: 767.98px) {
  .event-carousel { --event-gap: 16px; }
  .event-carousel__nav { display: none; }
  .event-carousel::before, .event-carousel::after { width: 40px; }
}

/* Event popup: venue + time panel. */
.event-modal__facts {
  display: flex;
  text-align: left;
  border: 1px solid #eee6dc;
  border-radius: 8px;
  background: #fbf7f3;
  margin-bottom: 1.25rem;
}
.event-modal__fact {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  align-items: flex-start;
  color: #B5560F;
}
.event-modal__fact--time { flex: 0 0 150px; border-left: 1px solid #eee6dc; }
.event-modal__fact svg { flex: none; margin-top: 2px; }
.event-modal__label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #6c757d; margin-bottom: 4px; }
.event-modal__value { font-size: 15px; font-weight: 600; line-height: 1.35; color: #212529; }
.event-modal__sub { font-size: 13px; color: #6c757d; line-height: 1.35; }
.event-modal__rule { border-color: #eee6dc; opacity: 1; margin: 0 0 1rem; }
.event-modal__map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B5560F;
  font-size: 14px;
  text-decoration: none;
}
@media (max-width: 575.98px) {
  .event-modal__facts { flex-direction: column; }
  .event-modal__fact--time { flex-basis: auto; border-left: 0; border-top: 1px solid #eee6dc; }
}

/* Event cards: actions row + map link */
.event-card__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.event-card__actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 140px; line-height: 1.5; }
.event-card__time {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  margin: 0 0 0.9rem; padding: 4px 14px;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.5px; color: #B5560F;
  background: #fbefe4; border-radius: 999px;
}

/* Event map (Google Maps JS) */
.event-map { position: relative; }
#event-map-canvas { width: 100%; height: 100%; }
.event-map__reset {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  background: #fff; border: 0; border-radius: 4px; padding: 7px 12px;
  font-size: 13px; color: #B5560F; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
.event-map__reset[hidden] { display: none; }

/* Map pop-up (js/event-map.js) */
.event-map .gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.event-map .gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; }
.kk-iw { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 34px 12px 12px; font-family: 'Montserrat', sans-serif; }
.kk-iw__photo { flex: 0 0 68px; width: 68px; height: 68px; object-fit: cover; border-radius: 8px; }
.kk-iw__body { min-width: 0; text-align: left; }
.kk-iw__title { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ast-global-color-1, #2a2a2a); margin-bottom: 5px; }
.kk-iw__time { display: inline-block; font-size: 12px; font-weight: 600; color: #B5560F; background: #fbefe4; border-radius: 999px; padding: 2px 10px; margin-bottom: 5px; }
.kk-iw__loc { font-size: 12.5px; line-height: 1.35; color: #6c757d; }
.kk-iw__close { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 0; background: none; font-size: 22px; line-height: 1; color: #9a9a9a; cursor: pointer; }
.kk-iw__close:hover { color: #212529; }

/* Info cards: expandable item list (includes/info.php) */
.info-card__toggle .info-card__toggle-close { display: none; }
.info-card__toggle[aria-expanded="true"] .info-card__toggle-open { display: none; }
.info-card__toggle[aria-expanded="true"] .info-card__toggle-close { display: inline; }
.info-card__item { padding: 10px 0; border-top: 1px solid #eee6dc; }
.info-card__item:first-child { border-top: 0; }

/* Info popup (website): one popup per category, items under group headings. */
.info-modal__head { display: flex; align-items: center; gap: 14px; }
.info-modal__badge { width: 48px; height: 48px; border-radius: 50%; background: #E47A2E; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.info-modal .modal-title { font-weight: 700; font-size: 1.35rem; }
.info-modal__group { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #B5560F; padding: 18px 0 4px; }
.info-modal__item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #eee6dc; }
.info-modal__logo { width: 52px; height: 52px; border-radius: 12px; flex: none; object-fit: cover; }
.info-modal__logo--icon { display: inline-flex; align-items: center; justify-content: center; background: #f8f0ec; color: #B5560F; font-size: 1.3rem; }
.info-modal__text { flex: 1 1 0; min-width: 0; }
.info-modal__links { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 575.98px) {
  .info-modal__item { flex-wrap: wrap; }
  .info-modal__links { flex-basis: 100%; justify-content: flex-start; padding-left: 68px; }
}

/* Website info card: if no summary is set, show only the first few lines of the text. */
.info-card__clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.info-card__clamp p { display: inline; }
.info-card__clamp p + p::before { content: " "; }
.info-modal__links .btn { width: 150px; text-align: center; white-space: nowrap; }

/* Bootstrap 5 has no .text-justify; the Info cards use it. */
.text-justify { text-align: justify !important; }

/* Footer: keep the cat clear of the floating "back to top" button (fixed,
   30px from the right edge, 50px wide) on desktop. */
@media (min-width: 768px) {
  .footer-cat-col { padding-right: 3.5rem; }
}

/* ── Navbar (main site and admin) ───────────────────────────────────────
   Phone: a little side padding so the menu isn't hard against the screen
   edge. Sub-menus (admin): dark to match the bar, not Bootstrap's white. */
@media (max-width: 991.98px) {
  .navbar { padding-left: 1rem; padding-right: 1rem; }
}
.navbar .dropdown-menu {
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
}
.navbar .dropdown-item {
  color: #fff;
  font-weight: 500;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
  background: rgba(228, 122, 46, .18);
  color: #E47A2E;
}
@media (max-width: 991.98px) {
  /* inside the opened phone menu: no box, just indented links */
  .navbar .dropdown-menu {
    background: transparent;
    border: 0;
    padding: 0 0 .25rem .75rem;
  }
  .navbar .dropdown-item { padding: .45rem .5rem; }
}

/* Navbar links (main site and admin): no underline. Bootstrap 5.3 underlines
   plain links by default, which showed up after the upgrade. */
.navbar a,
.navbar a:hover,
.navbar a:focus,
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-item,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  text-decoration: none;
}

/* Footer weather tile is display-only (not a link or an accordion here), so
   no hand cursor — weather.css gives its header cursor:pointer for the app's
   expandable card. */
#footer-weather-link,
#footer-weather-tile,
#footer-weather-tile * {
  cursor: default;
}