/* Hotel Sirena — weather widget styles
 * Drop-in styles for the desktop top-bar chip + hover forecast card
 * and the mobile drawer bottom strip.
 */

:root {
  --sw-navy: #1a1a2e;
  --sw-gold: #e0b421;
  --sw-gold-light: #edc770;
  --sw-warm-white: #fdf9f5;
  --sw-sea-blue: #4a94d0;
  --sw-sea-blue-light: #b7d0e8;
  --sw-dark: #2d2d35;
  --sw-muted: #8a8a92;
  --sw-hairline: rgba(26, 26, 46, 0.1);
}

@keyframes sw-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── DESKTOP CHIP (goes in the navy top bar) ───────────────── */
.sw-chip-wrap { position: relative; display: inline-block; }

.sw-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sw-warm-white);
  cursor: default;
  padding: 4px 2px;
  outline: none;
  font-family: Inter, -apple-system, sans-serif;
  font-size: 13px;
}
.sw-chip svg { display: block; }
.sw-chip .sw-temp { font-weight: 500; font-variant-numeric: tabular-nums; }
.sw-chip .sw-loc  { opacity: 0.55; font-size: 12px; letter-spacing: 0.3px; }
.sw-chip:focus-visible { outline: 2px solid var(--sw-gold); outline-offset: 2px; border-radius: 2px; }

/* ─── FORECAST CARD ─────────────────────────────────────────── */
.sw-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(26,26,46,0.22), 0 2px 8px rgba(26,26,46,0.1);
  border: 1px solid var(--sw-hairline);
  font-family: Inter, -apple-system, sans-serif;
  color: var(--sw-navy);
  overflow: hidden;
  animation: sw-fade 180ms ease-out;
}
.sw-card-top { display: flex; position: relative; }

.sw-card-today {
  flex: 0 0 180px;
  padding: 18px 20px 16px;
  border-right: 1px solid var(--sw-hairline);
  position: relative;
  overflow: hidden;
}
.sw-watermark {
  position: absolute; top: -6px; right: -14px;
  opacity: 0.12;
  transform: scale(2.8);
  transform-origin: top right;
  pointer-events: none;
}
.sw-eyebrow {
  font-size: 9.5px; letter-spacing: 1.8px; color: var(--sw-muted);
  text-transform: uppercase; font-weight: 700;
}
.sw-big-temp {
  font-size: 52px; font-weight: 200; letter-spacing: -2px;
  line-height: 1; margin-top: 10px; color: var(--sw-navy);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.sw-big-temp sup {
  font-size: 22px; vertical-align: top; margin-left: 2px; font-weight: 300;
  top: 0;
}
.sw-cond-label {
  font-size: 12px; color: var(--sw-dark); margin-top: 6px; font-weight: 500;
  position: relative;
}
.sw-meta {
  display: flex; gap: 14px; margin-top: 16px;
  font-size: 11px; color: var(--sw-muted); font-weight: 500;
  position: relative;
}
.sw-meta b { color: var(--sw-navy); font-weight: 600; }

.sw-card-forecast { flex: 1; padding: 14px 16px 12px; }
.sw-card-forecast .sw-eyebrow { margin-bottom: 8px; }

.sw-day {
  display: grid;
  grid-template-columns: 28px 22px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 0;
}
.sw-day + .sw-day { border-top: 1px solid var(--sw-hairline); }
.sw-dow { font-size: 12px; font-weight: 600; color: var(--sw-navy); }
.sw-day-temps {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--sw-navy); font-weight: 500; min-width: 48px; text-align: right;
}
.sw-day-temps .min { color: var(--sw-muted); font-weight: 400; }
.sw-day-temps .sep { margin: 0 3px; color: var(--sw-hairline); }

.sw-tempbar {
  position: relative; height: 4px; border-radius: 3px;
  background: rgba(26,26,46,0.06);
}
.sw-tempbar > div {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--sw-sea-blue), var(--sw-gold));
}

.sw-card-sea {
  background: var(--sw-navy);
  color: var(--sw-warm-white);
  padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
}
.sw-card-sea .sw-sea-label {
  display: inline-flex; align-items: center; gap: 9px;
  letter-spacing: 1.2px; font-size: 10px; opacity: 0.65;
  font-weight: 600; text-transform: uppercase;
}
.sw-card-sea .sw-sea-label svg { flex-shrink: 0; }
.sw-card-sea .sw-sea-val {
  font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
}

/* ─── MOBILE STRIP (put at bottom of your mobile drawer) ─────── */
.sw-mobile {
  flex-shrink: 0;
  background: var(--sw-navy);
  color: var(--sw-warm-white);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  box-shadow: 0 -2px 12px rgba(26,26,46,0.15);
  font-family: Inter, -apple-system, sans-serif;
}
.sw-mobile-left {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.sw-mobile-left svg { flex-shrink: 0; }
.sw-mobile-loc {
  font-size: 9px; letter-spacing: 1.2px; opacity: 0.55;
  font-weight: 600; text-transform: uppercase;
}
.sw-mobile-cond {
  font-size: 12px; font-weight: 500; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 120px;
}
.sw-mobile-right {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
.sw-mobile-pair { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sw-mobile-pair .lbl {
  font-size: 8px; letter-spacing: 1px; opacity: 0.55; font-weight: 600;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px;
}
.sw-mobile-pair .val {
  font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
}
.sw-mobile-pair.sea .val { color: var(--sw-sea-blue-light); }
.sw-mobile-divider {
  width: 1px; height: 28px; background: rgba(253,249,245,0.18);
}

/* ─── Hotel Sirena site integration ──────────────────────────────
   The mobile drawer is .header-nav (display:flex, flex-direction:column,
   padding:80px 30px 30px). We pin #weather-mobile to the bottom and
   break it out of the 30px horizontal padding so it spans edge-to-edge.
   Only applies at mobile widths where .header-nav becomes the drawer. */
@media (max-width: 768px) {
  .header-nav #weather-mobile.sw-mobile {
    margin: auto -30px -30px;    /* pushes to bottom + cancels drawer padding */
    width: calc(100% + 60px);
  }
}
/* Hide the mobile slot on desktop — the drawer doesn't show there anyway. */
@media (min-width: 769px) {
  .header-nav #weather-mobile { display: none; }
}

/* Desktop top-bar chip: sits on the right side of .header-top, to the
   left of the Facebook icon. The wrapper must be position:relative so
   the absolute-positioned hover card anchors to it. .header-top must
   win the stacking order over .header-main (which is sticky z-index:1000)
   or the card gets hidden behind the nav bar below it. */
.header-top { position: relative; z-index: 1100; }
.header-top-right { position: relative; display: flex; align-items: center; gap: 14px; }
.header-top-right #weather-chip .sw-chip { line-height: 1; }

/* On narrow screens the 380px card would spill off-screen from a
   right-aligned chip. Switch to fixed positioning and center it under
   the top bar so it's always fully visible. Expanded from 480px to
   900px because on pages whose body content overflows horizontally
   (e.g. reservation.php's 2-column inline grid), .header-top itself
   ends up wider than the viewport — then right:0 of the chip lands
   off-screen and the absolutely-positioned card renders off-screen
   to the right. */
@media (max-width: 900px) {
  .header-top-right #weather-chip .sw-card {
    position: fixed;
    top: 52px;                  /* just below the ~40px navy top bar */
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}