/**
 * Villa Footer widget styles.
 *
 * Self-contained: the v3 brand tokens are redefined on the widget root (.footer)
 * because the live site uses Elementor's --e-global-* variables, not these. The
 * layout, the "Right now in Anguilla" sky clock (.fnow*) and its keyframes are
 * bundled here so the widget renders identically wherever it is dropped in.
 *
 * @package Villa_Addon
 */

/* ---- Brand tokens, scoped to the footer so nothing leaks globally ---- */
.footer {
  --cream:     #e9ece9;
  --dark:      #123536;
  --body:      #5e5f5e;
  --teal:      #10bab5;
  --teal-ink:  #097370;
  --bg:        #f4f5f2;
  --line-dark: rgba(255, 255, 255, .18);
  --display:   "Cormorant", Georgia, serif;
  --sans:      "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad-x:     clamp(22px, 3.6vw, 100px);
  --sp-100:    clamp(64px, 6.94vw, 200px);
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

/* ---- Layout shell ---- */
.footer {
  position: relative;
  /* Sit above the home hero's position:fixed video layer (z-index:0) so the
     footer's dark ground always covers it — never lets the video show through. */
  z-index: 5;
  background: var(--dark);
  color: rgba(255, 255, 255, .72);
  overflow: hidden;
  padding-top: var(--sp-100);
}
/* Remove Elementor's default 20px widget margin under the footer. That trailing
   gap sat below the footer's dark ground, letting the fixed hero video (home)
   show as a turquoise sliver beneath the page. */
.elementor-widget-villa-footer { margin-bottom: 0 !important; }

.container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.footer__grid {
  display: grid;
  grid-template-columns: 270fr 900fr;
  gap: clamp(60px, 9vw, 170px);
  padding-bottom: 80px;
}

/* ---- Brand column ---- */
.footer__logo { width: 96px; height: auto; margin-bottom: 28px; }

.footer__tag {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.1;
  max-width: 12ch;
  margin: 0;
}

.footer__note {
  margin-top: 22px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

.footer__note em { font-style: italic; }
.footer__note p { margin: 0; }
.footer__note p + p { margin-top: 1rem; }

.footer__only { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .62); }

/* ---- Pill button (recoloured for the dark footer) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 15px 50px;
  border-radius: 100px;
  border: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: all .3s ease;
}

.footer__brand .btn { margin-top: 32px; }

.btn--teal { border-color: var(--teal); color: var(--teal); }
.btn--teal:hover { background: var(--teal); color: var(--dark); border-color: var(--teal); }

/* ---- Links column ---- */
.footer__links {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(32px, 3vw, 60px);
}

.footer h3,
.footer__h {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 34px;
}

.footer__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.footer__pages a {
  display: block;
  padding: 6px 0;
  color: var(--bg);
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
  transition: all .3s ease;
}

.footer__pages a:hover,
.footer__pages a.is-active { color: var(--teal); }

.footer__contact a {
  color: var(--bg);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 2px;
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
  transition: all .3s ease;
}

.footer__contact a:hover { color: var(--teal); border-color: var(--teal); }

.footer__contact address {
  font-style: normal;
  margin-top: 22px;
  line-height: 1.6;
  font-size: 18px;
  color: var(--bg);
}

.footer__contact address b { color: var(--teal); font-weight: 500; display: block; }

.footer__social a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  color: var(--bg);
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
  transition: all .3s ease;
}

.footer__social a:hover { color: var(--teal); }
.footer__social svg { width: 17px; height: 17px; }

/* =========================================================================
   "Right now in Anguilla" — live sky clock. Everything is transform/opacity;
   animation is paused unless .is-live is set (the JS toggles it on screen).
   ========================================================================= */
.fnow {
  grid-column: 1 / -1;
  align-self: stretch;
  margin-top: clamp(2rem, 3vw, 3rem);
  min-height: clamp(260px, 20vw, 400px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 1.8vw, 34px);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
}

.fnow:not(.is-live) * { animation-play-state: paused; }

.fnow__sky { position: absolute; inset: 0; z-index: 0; transition: background 1.5s ease; }
.fnow[data-phase="dawn"]  .fnow__sky { background: linear-gradient(180deg, #123a49 0%, #356f7c 46%, #c98f72 100%); }
.fnow[data-phase="day"]   .fnow__sky { background: linear-gradient(180deg, #0c5666 0%, #1591a2 55%, #7fcfd6 100%); }
.fnow[data-phase="dusk"]  .fnow__sky { background: linear-gradient(180deg, #0f2f3b 0%, #54465e 55%, #c66a4c 100%); }
.fnow[data-phase="night"] .fnow__sky { background: linear-gradient(180deg, #061c25 0%, #0a2b34 60%, #0f3e48 100%); }

.fnow__orb {
  position: absolute;
  z-index: 1;
  left: var(--orb-x, 50%);
  top: var(--orb-y, 30%);
  width: clamp(42px, 3.9vw, 68px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left 1.6s ease, top 1.6s ease, opacity 1.2s ease;
}

.fnow__orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff, #ffeec4 46%, #ffd489 70%);
  box-shadow: 0 0 34px 12px rgba(255, 214, 140, .34), 0 0 90px 36px rgba(255, 214, 140, .15);
  animation: voFnowOrbPulse 6s ease-in-out infinite;
}

.fnow[data-orb="moon"] .fnow__orb-core {
  background: radial-gradient(circle at 38% 36%, #fff, #e8f1f6 56%, #c9dae3 74%);
  box-shadow: 0 0 26px 9px rgba(220, 235, 245, .20), 0 0 64px 24px rgba(220, 235, 245, .09);
}

@keyframes voFnowOrbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }

.fnow__stars { position: absolute; inset: 0 0 40% 0; z-index: 1; opacity: 0; transition: opacity 1.5s ease; }
.fnow[data-phase="night"] .fnow__stars { opacity: 1; }
.fnow[data-phase="dusk"]  .fnow__stars { opacity: .4; }
.fnow__star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: voFnowTwinkle 3.6s ease-in-out infinite; }

@keyframes voFnowTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.fnow__clouds { position: absolute; left: 0; z-index: 2; display: flex; width: 200%; pointer-events: none; }
.fnow__clouds svg { width: 50%; flex: none; display: block; height: auto; }
.fnow__clouds--far  { top: 4%;  opacity: .26; filter: blur(5px);   animation: voFnowDrift 72s linear infinite; }
.fnow__clouds--near { top: 22%; opacity: .46; filter: blur(2.5px); animation: voFnowDrift 44s linear infinite; }
.fnow[data-phase="night"] .fnow__clouds--far  { opacity: .10; }
.fnow[data-phase="night"] .fnow__clouds--near { opacity: .16; }

@keyframes voFnowDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.fnow__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 3; overflow: hidden; }
.fnow__wave { position: absolute; bottom: 0; left: 0; width: 200%; display: flex; }
.fnow__wave svg { width: 50%; flex: none; display: block; height: 100%; }
.fnow__wave--back  { height: 78%; color: rgba(9, 58, 68, .55); animation: voFnowDrift 34s linear infinite reverse; }
.fnow__wave--front { height: 58%; color: rgba(6, 40, 48, .85); animation: voFnowDrift 22s linear infinite; }

.fnow__scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(6, 28, 34, .78) 0%, rgba(6, 28, 34, .42) 42%, rgba(6, 28, 34, 0) 72%),
    linear-gradient(0deg, rgba(6, 28, 34, .62) 0%, rgba(6, 28, 34, 0) 55%);
}

.fnow__text { position: relative; z-index: 5; }

.fnow__label {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
}

.fnow__time { display: flex; align-items: baseline; gap: .55rem; margin-top: .6rem; margin-bottom: 0; }

.fnow__time time {
  font-family: var(--display);
  font-size: clamp(2.4rem, 3.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.fnow__time span { font-size: .78rem; letter-spacing: .16em; color: rgba(255, 255, 255, .62); }
.fnow__line { margin-top: .55rem; margin-bottom: 0; font-size: 17px; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 16px rgba(0, 0, 0, .4); }

/* ---- Legal + wordmark ---- */
.footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-block: 26px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, .72);
}

/* Show the full wordmark. A top margin drops it clear of the legal line so
   there is breathing room between the copyright and the giant wordmark, and it
   fills the space below instead of being pulled up into the copyright. */
.footer__wordwrap { overflow: visible; margin-top: clamp(34px, 4vw, 68px); }

.footer__word {
  display: block;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--display);
  font-weight: 600;
  line-height: .9;
  font-size: 17.9vw;
  /* Kept as subtle as possible while still clearing WCAG 3:1 for large text
     (a giant wordmark this size is "large text", so 3:1 not 4.5:1). At .07 it
     read as a ghost but failed contrast; this is the minimum that passes. */
  color: rgba(255, 255, 255, .4);
  margin-bottom: 0;
  transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 1340px) {
  .footer__grid { grid-template-columns: 1fr; gap: 60px; }
  .footer__links { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  .footer__links { grid-template-columns: 1fr; gap: 40px; }
  .footer__pages { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .fnow { min-height: 230px; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .fnow * { animation: none !important; }
  .fnow__orb { transition: none; }
}