/**
 * Hotel Aurelia — template stylesheet.
 *
 * Loaded after the shared front-end foundation and before the site's compiled
 * design tokens, so this file can restyle anything the foundation provides while
 * the site owner's colour and font choices still win over both.
 *
 * The rule this template follows throughout: **never hardcode a colour, radius,
 * or spacing value.** Everything reads a custom property, so the Live Design
 * Panel can recolour the whole site by redefining a handful of tokens rather
 * than editing markup.
 *
 * The recurring motif here is a "double hairline" — two 1px gold lines a few
 * pixels apart, standing in for the single accent bar or typographic glyph
 * every earlier template used as its heading/frame mark (College Aurum's
 * diamond, School Ivy's seal ring, School Nova's glow). It reads as engraved
 * stationery rather than a UI accent, which is the point for a template
 * pitched at a boutique hotel rather than a school or a college.
 */

/* ------------------------------------------------------------------ */
/* Section rhythm                                                     */
/* ------------------------------------------------------------------ */

[data-section-id]:nth-of-type(even) > div:not([class*="bg-"]) {
  background-color: var(--ui-surface-muted);
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

/* The utility bar above the main header has no background of its own in the
   markup — it inherits this class's fill, which must stay on the same dark
   ground as the header below it or the white/80 text above it disappears. */
.site-header-accent {
  background: var(--ui-brand-900);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

header[data-scrolled="true"] {
  box-shadow: var(--ui-shadow-md);
}

/* The seal badge standing in for an uploaded logo — a hairline ring with a
   conic sheen sweeping across it, closer to polished metal catching light
   than a flat printed mark. */
.aurelia-seal {
  position: relative;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklch, var(--ui-accent-400) 65%, transparent);
  background:
    conic-gradient(
      from 210deg,
      color-mix(in oklch, var(--ui-accent-400) 30%, transparent),
      transparent 38%,
      transparent 62%,
      color-mix(in oklch, var(--ui-accent-400) 18%, transparent) 100%
    );
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

/* The one button every visitor is meant to find: a solid gold bar with a
   glass-like top bevel, dark text for contrast against the light fill —
   every other button on this template is an outline, so this is the only
   filled shape on the page and reads as such. */
.aurelia-btn-gold {
  background: var(--ui-accent-500);
  color: var(--ui-brand-900);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  transition: background-color 200ms ease, transform 200ms ease;
}

.aurelia-btn-gold:hover,
.aurelia-btn-gold:focus-visible {
  background: var(--ui-accent-400);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------ */
/* Heading mark                                                       */
/* ------------------------------------------------------------------ */

.aurelia-rule {
  width: 3.5rem;
  height: 7px;
  background-image:
    linear-gradient(var(--ui-accent-400), var(--ui-accent-400)),
    linear-gradient(var(--ui-accent-400), var(--ui-accent-400));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  opacity: 0.9;
}

/* The same double hairline stands in for the underline every other template
   puts beneath a section heading. */
.site-heading {
  position: relative;
}

.site-heading::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 7px;
  margin-top: 0.875rem;
  background-image:
    linear-gradient(var(--ui-brand-600), var(--ui-brand-600)),
    linear-gradient(var(--ui-accent-500), var(--ui-accent-500));
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: top center, bottom center;
}

.text-center .site-heading::after {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.aurelia-hero-glow {
  background: radial-gradient(
    closest-side,
    color-mix(in oklch, var(--ui-accent-500) 55%, transparent),
    transparent 72%
  );
  filter: blur(48px);
  opacity: 0.55;
}

.aurelia-hero-scrim {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--ui-brand-900) 94%, transparent) 0%,
    color-mix(in oklch, var(--ui-brand-900) 72%, transparent) 45%,
    color-mix(in oklch, var(--ui-brand-900) 28%, transparent) 100%
  );
}

.aurelia-hero .site-section {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

/* ------------------------------------------------------------------ */
/* Cards — Rooms & Suites, Dining & Venues, and everything else that   */
/* reuses the shared card component                                   */
/* ------------------------------------------------------------------ */

.site-card {
  position: relative;
  overflow: hidden;
}

/* A slow photographic zoom on hover rather than a lift, a colour change, or a
   revealed bar — the treatment other templates in this catalogue already use
   for their own cards, kept free here for a design where the room or venue
   photograph is the whole pitch. */
.site-card img {
  transition: transform 700ms ease;
}

.site-card:hover img,
.site-card:focus-within img {
  transform: scale(1.06);
}

/* A thin gold corner tick at two opposite corners, appearing on hover — a
   museum-label frame rather than a full border. */
.site-card::before,
.site-card::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.site-card::before {
  top: 0.625rem;
  left: 0.625rem;
  border-top: 1.5px solid var(--ui-accent-400);
  border-left: 1.5px solid var(--ui-accent-400);
}

.site-card::after {
  bottom: 0.625rem;
  right: 0.625rem;
  border-bottom: 1.5px solid var(--ui-accent-400);
  border-right: 1.5px solid var(--ui-accent-400);
}

.site-card:hover::before,
.site-card:hover::after,
.site-card:focus-within::before,
.site-card:focus-within::after {
  opacity: 1;
}

/* A room or venue's nightly rate, when the field is used — set in gold, apart
   from the rest of the card's body text. */
.aurelia-price {
  font-family: var(--site-font-heading);
  color: var(--ui-accent-600);
}

/* ------------------------------------------------------------------ */
/* Testimonials                                                       */
/* ------------------------------------------------------------------ */

[data-section-type="testimonials"] blockquote {
  position: relative;
}

[data-section-type="testimonials"] blockquote::before {
  content: "\201C";
  position: absolute;
  top: -2.25rem;
  left: -0.25rem;
  font-family: var(--site-font-heading);
  font-size: 5rem;
  line-height: 1;
  color: var(--ui-accent-500);
  opacity: 0.3;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Counters                                                           */
/* ------------------------------------------------------------------ */

[data-counter] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* Print                                                              */
/* ------------------------------------------------------------------ */

@media print {
  header,
  footer,
  .site-btn,
  [data-nav-toggle] {
    display: none !important;
  }

  .site-section {
    padding-block: 1rem;
  }

  .site-prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}