/* Unique House - theme-only additions.
   Loaded after styles.css so that file stays byte-identical to the original
   static site. Keep this file small and gallery/empty-state focused. */

/* Map page: the dashed container holds ONLY the map iframe, which fills its
   inner width; the "View larger map" link sits centred below the box. Heights
   are driven by CSS variables set by the shortcode/Customizer (defaults 520/420/360). */
.uh-map{display:block;height:auto;margin-bottom:12px}
.uh-map iframe{width:100%;height:var(--uh-map-h-desktop,520px);display:block;border-radius:var(--radius)}
.uh-map-link{text-align:center;margin:0 0 24px;font-size:.9rem}

/* Real gallery photos fill their tile (the tile keeps the original 3/2
    aspect-ratio and border so the grid geometry is unchanged). */
.uh-photo.has-image{border-style:solid;border-color:transparent}
.uh-photo .ph{position:relative;overflow:hidden}
.uh-photo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Once the lightbox is filled with a photo, drop the dashed "placeholder"
   border (the JS sets an inline background-image on the frame). */
.uh-lightbox-frame[style*="background-image"]{border-style:solid;border-color:transparent}

/* Clean empty state when no gallery photos exist yet (no fake photos). */
.uh-gallery-empty{
  margin:4px auto 0;
  max-width:560px;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:56px 24px;
}
.uh-gallery-empty p{margin:0}

/* Extra Services: a stray top-level <li> is wrapped in this list so the markup
   is valid; the wrapper is neutralised so the appearance matches the original
   bare <li> exactly (no marker, no indent, no extra margin). */
.uh-service-content .uh-service-list{list-style:none;margin:0;padding:0}

/* Booking calendar: turnover diagonals + check-in / check-out range selection.

   Every fill is a solid-colour pseudo-element clipped with a `clip-path`
   polygon, so the diagonal edge is crisp and anti-aliased (hard-stop gradients
   rasterise with jagged edges and thin slivers). The fill covers the cell's
   padding box, so it meets the cell border with no gap, and sits behind the day
   number. Existing theme colours only (--accent brown for a selection, the `.bk`
   terracotta #c96f4a for a booking).

   Reading of the diagonal: the split runs from the top-right corner to the
   bottom-left corner. A "check-in" / start day fills the lower-right half (the
   guest is there from the afternoon); a "check-out" / end day fills the
   upper-left half (the guest leaves in the morning). The day number is tucked
   into the filled corner (the opposite padding is trimmed) so the digits always
   sit on solid colour. */
.uh-cal td[data-date]{cursor:pointer}

/* Diagonal fill shapes. `::before` draws a booked turnover and `::after` a
   selected one, so a selected booking can show both. */
.uh-cal td.bk-in::before,
.uh-cal td.bk-out::before,
.uh-cal td.sel-start::after,
.uh-cal td.sel-end::after{content:'';position:absolute;inset:0;z-index:-1}
.uh-cal td.bk-in,
.uh-cal td.bk-out,
.uh-cal td.sel-start,
.uh-cal td.sel-end{position:relative;z-index:0;background:transparent;color:var(--surface)}
.uh-cal td.bk-in::before,
.uh-cal td.bk-out::before{background:#c96f4a}
.uh-cal td.sel-start::after,
.uh-cal td.sel-end::after{background:var(--accent)}
.uh-cal td.bk-in::before,
.uh-cal td.sel-start::after{clip-path:polygon(100% 0,100% 100%,0 100%)}
.uh-cal td.bk-out::before,
.uh-cal td.sel-end::after{clip-path:polygon(0 0,100% 0,0 100%)}

/* Number tucked into the filled corner, with a little breathing room from the
   two outer edges (padding trimmed on the diagonal side only, so the digits
   still clear the fill). */
.uh-cal td.bk-in,
.uh-cal td.sel-start{text-align:right;vertical-align:bottom;padding-right:5px;padding-bottom:3px}
.uh-cal td.bk-out,
.uh-cal td.sel-end{text-align:left;vertical-align:top;padding-left:5px;padding-top:3px}

/* Selected middle nights: solid accent so the range reads as one continuous
   band (the start/end halves span their full outer edge and join it). */
.uh-cal td.sel-mid{background:var(--accent);color:var(--surface)}

/* Back-to-back day: one solid terracotta day split by an even cream diagonal
   seam. Both halves are clipped triangles (not a gradient), so the seam is a
   clean uniform band that meets the two corners without a ragged tail. The
   cell background is the cream seam; the day number sits on the solid
   lower-right half. */
.uh-cal td.bk-in.bk-out{
  background:var(--surface);color:var(--surface);
  text-align:right;vertical-align:bottom;padding-right:5px;padding-bottom:3px}
.uh-cal td.bk-in.bk-out::before,
.uh-cal td.bk-in.bk-out::after{content:'';position:absolute;inset:0;z-index:-1;background:#c96f4a}
.uh-cal td.bk-in.bk-out::before{clip-path:polygon(0 0,98% 0,0 98%)}
.uh-cal td.bk-in.bk-out::after{clip-path:polygon(100% 2%,100% 100%,2% 100%)}

/* Days before today: shown but not selectable. */
.uh-cal td.past{color:var(--border);cursor:default}

.uh-cal td[data-date]:focus{outline:none}
.uh-cal td[data-date]:focus-visible{outline:2px solid var(--accent-dark);outline-offset:-2px}

/* Touch: reserve horizontal gestures for the month-swipe handler
   (booking-swipe.js); vertical page scrolling is never hijacked. */
.uh-cals{touch-action:pan-y}

/* Phone: keep the prev/next arrows clear of the first/last day columns (option
   A — the arrows move up beside the month title). */
@media(max-width:820px){
  .uh-cal-nav{top:6px;transform:none;width:32px;height:32px;font-size:1rem}
  .uh-cal-prev{left:8px}
  .uh-cal-next{right:8px}
}

/* Reserved inline status line: keeps a fixed (integer) height so a later
   refusal message fills it without shifting the page, and so the whole-pixel
   layout phase is preserved (a fractional height here makes 1px borders below
   rasterise differently). */
.uh-cal-note{line-height:20px;min-height:20px;margin:8px 0 0;font-size:.9rem;color:var(--accent-dark)}

/* Screen-reader-only live region used to announce the visible month. */
.uh-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Availability loading / error states. While the endpoint is being fetched the
   month layout is dimmed (it is not yet authoritative); if the endpoint is
   missing (plugin inactive) or fails, the calendar is replaced by a short
   translated message and the month arrows are hidden — never a fake
   everything-available month. */
.uh-cals[data-state="loading"]{opacity:.55}
.uh-cals[data-state="unavailable"]{opacity:1}
.uh-cal-unavailable{margin:0;padding:32px 22px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);text-align:center;font-size:1rem;line-height:1.5}
.uh-cals-wrap.is-unavailable .uh-cal-nav{display:none}

/* Booking request form: honeypot + post-submit message line.
   The honeypot is absolutely positioned off-screen so a bot can still "read"
   and fill it, while it never affects the real layout (no shift, no pixel
   change to the form). */
.uh-form .uh-hp,.uh-review-form .uh-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.uh-form .uh-hp label,.uh-review-form .uh-hp label{font-weight:400;margin:0}
.uh-form .uh-hp input,.uh-review-form .uh-hp input{width:1px;height:1px}

/* Message line shown only after a submission; sits above the form and uses the
   existing theme colours. */
.uh-booking-msg{margin:0 0 18px;padding:12px 16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);font-size:.95rem;line-height:1.5;max-width:720px}
.uh-booking-msg--ok{border-color:var(--accent);color:var(--accent-dark)}
.uh-booking-msg--err{border-color:#c96f4a;color:#8a3d20}
.uh-booking-msg a{color:inherit;text-decoration:underline;font-weight:600}
.uh-booking-request .uh-booking-msg{margin:0 auto 16px;max-width:720px}

/* Admin bar: the sticky header must sit *below* the fixed WordPress admin bar
   while scrolling (otherwise the bar covers the header when an editor is
   logged in). WordPress pushes the page down by the bar's height and provides
   the height as `--wp-admin--admin-bar--height`; we offset the sticky top by
   the same value, with the same literal fallbacks WP uses. At <=600px the bar
   becomes `position:absolute` (it scrolls away), so the header returns to 0.
   The mobile menu overlay (.uh-nav) is absolutely positioned inside the header,
   so it follows automatically. */
body.admin-bar .uh-header{top:var(--wp-admin--admin-bar--height,32px)}
@media screen and (max-width:782px){body.admin-bar .uh-header{top:var(--wp-admin--admin-bar--height,46px)}}
@media screen and (max-width:600px){body.admin-bar .uh-header{top:0}}