/*
 * Hospitality UI - front office base layer (DESIGN_SYSTEM §5.9, §7.2, §10, §11.1, §12)
 * Typography (fluid headings, 16px body, 17px Arabic), links, body text, icon alignment, focus,
 * selection, scrollbars, utilities, reduced motion, forced colours. Loaded after the theme and
 * every module stylesheet ({$HOOK_HEADER} follows $css_files).
 *
 * Rules are scoped under html.hsp-ui-fo; theme CSS is unscoped Bootstrap 3, so one extra class wins.
 * Logical properties only; colours only from tokens.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

/* ------------------------------------------------------------------ root and body */

html.hsp-ui-fo {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: var(--hsp-lh-body);
  scroll-padding-block-start: calc(var(--hsp-fo-header-h) + 1.6rem);
  accent-color: var(--hsp-color-action);
  color-scheme: light;
}

html.hsp-ui-fo body {
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
  background-color: var(--hsp-color-page);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.hsp-ui-fo :where(button, input, select, textarea, optgroup, .btn, .button, .form-control) {
  font-family: inherit;
}

/* theme and module rules hard-code Oxygen / Open Sans / Arial on these (§5.9.3) */
html.hsp-ui.hsp-ui-fo :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-heading, .page-subheading,
  .page-product-heading, .title_block, .btn, .button, .button-medium, .button-small, .exclusive, .exclusive-medium,
  .ajax_add_to_cart_button, .lnk_view, .header-rmsearch-input, .chosen-container, .nav-tabs > li > a, .alert, .box,
  .price, .product-price, .table, .label, .badge, label, legend, input, select, textarea, .form-control, .tooltip) {
  font-family: var(--hsp-font);
}

html.hsp-ui-fo :is(pre, code, kbd, samp) {
  font-family: var(--hsp-font-mono);
}

/* ------------------------------------------------------------------ headings (fluid, §5.9.5) */

/* heading size and weight at element specificity: theme and module rules with a class (hero
   titles on photos, room-card titles…) keep their own values; plain headings get the scale */
:where(html.hsp-ui-fo) h1, :where(html.hsp-ui-fo) h2, :where(html.hsp-ui-fo) h3, :where(html.hsp-ui-fo) h4, :where(html.hsp-ui-fo) h5, :where(html.hsp-ui-fo) h6,
:where(html.hsp-ui-fo) :is(.h1, .h2, .h3, .h4, .h5, .h6) {
  /* no colour here: headings inherit (white on photos, body text elsewhere) */
  font-weight: var(--hsp-fw-semibold);
  text-transform: none;
  letter-spacing: 0;
}

:where(html.hsp-ui-fo) h1, :where(html.hsp-ui-fo) .h1 {
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
  letter-spacing: var(--hsp-ls-heading);
}

:where(html.hsp-ui-fo) h2, :where(html.hsp-ui-fo) .h2 {
  font-size: var(--hsp-fs-h2);
  line-height: var(--hsp-lh-h2);
}

:where(html.hsp-ui-fo) h3, :where(html.hsp-ui-fo) .h3 {
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
}

:where(html.hsp-ui-fo) h4, :where(html.hsp-ui-fo) .h4 {
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
}

:where(html.hsp-ui-fo) h5, :where(html.hsp-ui-fo) h6, :where(html.hsp-ui-fo) :is(.h5, .h6) {
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
}

:where(html.hsp-ui-fo) :where(h1, h2, h3, h4, h5, h6) :where(small, .small) {
  font-size: 0.7em;
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

/* theme page headings: sentence case, no clipped rule (§5.9.6) */
html.hsp-ui.hsp-ui-fo :is(.page-heading, .page-subheading, .page-product-heading, .title_block) {
  font-size: var(--hsp-fs-h2);
  line-height: var(--hsp-lh-h2);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-transform: none;
  letter-spacing: 0;
  border-block-end-color: var(--hsp-color-border-subtle);
  overflow: visible;
}

html.hsp-ui.hsp-ui-fo .page-heading :is(.heading-counter, span.lighter) {
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

/* overline (hero line, login side panel): sentence case, brand colour (§5.9.6) */
html.hsp-ui-fo .hsp-ui-overline {
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-weight: var(--hsp-fw-semibold);
  letter-spacing: var(--hsp-ls-overline);
  color: var(--hsp-color-text-brand);
}

/* ------------------------------------------------------------------ body text */

:where(html.hsp-ui-fo) p {
  margin-block: 0 var(--hsp-space-3);
}

html.hsp-ui-fo :is(small, .small) {
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
}

html.hsp-ui-fo :is(strong, b) {
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui-fo .lead {
  font-size: var(--hsp-fs-body-lg);
  line-height: var(--hsp-lh-body-lg);
}

html.hsp-ui-fo hr {
  border: 0;
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  margin-block: var(--hsp-space-6);
}

html.hsp-ui-fo .rte,
html.hsp-ui-fo .hsp-ui-prose {
  max-inline-size: var(--hsp-measure);
}

html.hsp-ui.hsp-ui-fo .text-muted { color: var(--hsp-color-text-muted); }
html.hsp-ui.hsp-ui-fo .text-success { color: var(--hsp-tone-success-fg); }
html.hsp-ui.hsp-ui-fo .text-danger { color: var(--hsp-tone-danger-fg); }
html.hsp-ui.hsp-ui-fo .text-warning { color: var(--hsp-tone-warning-fg); }
html.hsp-ui.hsp-ui-fo .text-info { color: var(--hsp-tone-info-fg); }
html.hsp-ui.hsp-ui-fo .text-primary { color: var(--hsp-color-text-link); }
html.hsp-ui-fo :is(.text-start, .text-left) { text-align: start; }
html.hsp-ui-fo .text-end { text-align: end; }

/* prices: tabular, never broken (§5.10) */
html.hsp-ui.hsp-ui-fo :is(.price, .product-price, .hsp-ui-price, .hsp-ui-num) {
  font-family: var(--hsp-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ links */

/* link colour at element specificity: theme / module link styles (header, nav, footer) keep theirs */
:where(html.hsp-ui-fo) a {
  color: var(--hsp-color-text-link);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
  transition: color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

:where(html.hsp-ui-fo) a:hover {
  color: var(--hsp-color-text-link-hover);
  text-decoration: underline;
}

/* links in body copy are underlined (1.4.1) */
html.hsp-ui.hsp-ui-fo :is(.rte, p, dd, .help-block, .alert, .hsp-ui-prose) > a:not(.btn):not(.button):not([class*="label"]) {
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .nav a, .dropdown-menu a, .pagination a, #header a, .footer-container a):hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------ focus (§6 states) */

html.hsp-ui-fo :focus {
  outline: none;
}

html.hsp-ui.hsp-ui-fo :is(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"], .btn, .button, .chosen-single):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo :is(.hsp-ui-on-dark, .footer-container, #header) :is(a, button, input, [tabindex]):focus-visible {
  box-shadow: var(--hsp-focus-ring-inverse);
}

/* ------------------------------------------------------------------ selection, scrollbars */

html.hsp-ui-fo ::selection {
  background-color: var(--hsp-color-surface-selected);
  color: var(--hsp-color-text-selected);
}

html.hsp-ui-fo {
  scrollbar-color: var(--hsp-sandstone-300) transparent;
}

/* ------------------------------------------------------------------ icons */

html.hsp-ui-fo :is([class^="icon-"], [class*=" icon-"]) {
  vertical-align: -0.1em;
  line-height: 1;
}

/* not mirrored here: .icon-angle-*, .icon-angle-double-*, .icon-double-angle-*, .icon-chevron-left/right - the
   theme's css/rtl.css already swaps those glyphs on RTL pages, a scaleX(-1) on top pointed them the LTR way
   again (HOOK_REQUESTS ui-fo-booking item 3) */
html.hsp-ui-fo[dir="rtl"] :is(
  .icon-arrow-left, .icon-arrow-right, .icon-long-arrow-left, .icon-long-arrow-right, .icon-caret-left,
  .icon-caret-right, .icon-backward, .icon-forward, .icon-reply, .icon-share, .icon-sign-in, .icon-sign-out,
  .icon-external-link, .icon-undo, .icon-repeat, .icon-indent, .icon-outdent, .icon-list-ul, .hsp-ui-icon--dir)::before {
  display: inline-block;
  transform: scaleX(-1);
}

/* ------------------------------------------------------------------ typographic rules (§5.9.6) */

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .page-heading, .page-subheading, .nav-tabs a, .title_block, .page-product-heading, label, th) {
  text-transform: none;
}

/* letter-spacing: 0 in Arabic, always (allow-list item 1) */
html.hsp-ui[lang^="ar"] * {
  letter-spacing: 0 !important; /* allow-list item 1 */
}

html.hsp-ui-fo[lang^="ar"] :is(em, i, cite):not([class*="icon"]) {
  font-style: normal;
  font-weight: var(--hsp-fw-semibold);
}

/* no justified text (zero specificity: centred theme blocks keep their alignment) */
:where(html.hsp-ui-fo) :where(p, li, dd, .rte, .help-block, .alert) {
  text-align: start;
}

/* ------------------------------------------------------------------ utilities */

html.hsp-ui-fo .sr-only,
html.hsp-ui-fo .hsp-ui-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html.hsp-ui-fo .sr-only-focusable:is(:focus, :active) {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* LTR islands: the theme's rtl.css forces "* { direction: rtl !important }" (allow-list item 2) */
html.hsp-ui .hsp-ltr {
  direction: ltr !important; /* allow-list item 2 */
  unicode-bidi: isolate;
}

html.hsp-ui[dir="rtl"] :is(input, textarea).hsp-ltr {
  text-align: right;
}

html.hsp-ui .hsp-auto {
  unicode-bidi: plaintext;
}

html.hsp-ui bdi {
  unicode-bidi: isolate;
}

html.hsp-ui-fo .hsp-ui-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-xs);
  color: transparent;
}

html.hsp-ui-fo .hsp-ui-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--hsp-color-surface-sunken), transparent); /* hsp-lint: allow-physical (gradient direction) */
  transform: translateX(-100%);
  animation: hsp-ui-shimmer 1.4s linear infinite;
}

@keyframes hsp-ui-shimmer {
  to { transform: translateX(100%); }
}

/* images never overflow their column */
html.hsp-ui-fo img {
  max-inline-size: 100%;
}

/* ------------------------------------------------------------------ reduced motion, forced colours */

@media (prefers-reduced-motion: reduce) {
  html.hsp-ui-fo {
    scroll-behavior: auto;
  }

  html.hsp-ui-fo *,
  html.hsp-ui-fo *::before,
  html.hsp-ui-fo *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  html.hsp-ui-fo .hsp-ui-skeleton::after {
    display: none;
  }
}

@media (forced-colors: active) {
  html.hsp-ui-fo :is(.dropdown-menu, .modal-content, .popover, .tooltip-inner, .chosen-drop, .date-picker-wrapper, .fancybox-skin) {
    border: 1px solid CanvasText;
  }

  html.hsp-ui-fo :is(.label, .badge, .hsp-ui-status) {
    border: 1px solid transparent;
  }

  html.hsp-ui.hsp-ui-fo :is(a, button, input, select, textarea, [tabindex], .btn, .button):focus-visible {
    outline: 2px solid Highlight;
  }
}

/* links on the dark footer: never the action colour on basalt (contrast) */
html.hsp-ui.hsp-ui-fo :is(.footer-container, #footer) :is(p, .copyRight) > a:not(.btn):not(.button) {
  color: inherit;
  text-decoration: underline;
}