/* ============================================================================
   THE REZIDENT | BOOKING APPLICATION VISUAL OVERRIDES
   Version: 1.1 | 19 October 2026
   Applies to:
     /Students/newApplication
     /Buildings/RezidentLayout
     /Buildings/SearchResults/...

   NORMAL CSS FILE (not a Stylus export). When testing in Stylus, choose
   the whole therezidentbookings.co.za domain for the style's target URL.

   LOAD LAST, after the application's existing stylesheets.
   No markup, text, validation or booking-flow changes are required.

   IMPORTANT FOR INTEGRATOR
   ------------------------
   1. 'Hanson' is a separately licensed/custom font and is NOT distributed in
      this file. The font-face declaration first tries the installed local
      "Hanson Bold" (for Stylus testing), then the server OTF asset (for live
      visitors). Developer must upload Hanson-Bold.otf to
      /RoomAllocationsLayout/assets/ before deploying this stylesheet.
      Poppins is imported below from Google Fonts.
   2. Selectors for page-specific items use :has() to recognise real links /
      form fields without adding body classes. Supported by current Chrome,
      Edge, Safari and Firefox. Verify against the LIVE HTML before release.
   3. Existing classes may differ. Integration-level adjustments, if needed,
      should only change selectors, not booking logic or DOM structure.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* Local font for Stylus testing; hosted OTF for production visitors. */
@font-face {
  font-family: "Hanson";
  src: local("Hanson Bold"),
       url("/RoomAllocationsLayout/assets/Hanson-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --rez-navy: #001e61;
  --rez-navy-hover: #092d79;
  --rez-coral: #ff8189;
  --rez-pale-cyan: #c3f4fd;
  --rez-white: #ffffff;
  --rez-soft-background: #f8f8f8;
  --rez-border: #001e61;
  --rez-font-body: "Poppins", Arial, sans-serif;
  --rez-font-heading: "Hanson", "Poppins", "Arial Black", sans-serif;
}

/* 01. SHARED TYPE + COLOURS ----------------------------------------------- */

html,
body {
  font-family: var(--rez-font-body) !important;
  font-size: 16px;
  color: var(--rez-navy);
}

body :is(p, li, label, select, input, textarea, button, .btn, .form-control,
         .form-select, .form-label, .nav-link) {
  font-family: var(--rez-font-body) !important;
}

body :is(p, .form-control, .form-select, textarea, input, select, button, .btn) {
  font-size: 16px;
}

/* Page-level titles only; smaller section headings remain Poppins. */
body :is(h1, h2, .page-title h1, .page-heading h1, .breadcrumbs h1,
         #hero h1, .hero h1) {
  font-family: var(--rez-font-heading) !important;
  font-size: 40px !important;
  text-transform: uppercase;               
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rez-navy);
}

body :is(h2, h3, h4, h5, h6) {
  font-family: var(--rez-font-body);
}

body :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--rez-coral);
  outline-offset: 2px;
}

/* The reference navigation is solid navy with white links. */
body :is(#header, header.site-header, header.main-header,
         .site-header, .main-header, .navbar.navbar-expand-lg) {
  background-color: var(--rez-navy) !important;
}

body :is(#header, header.site-header, header.main-header,
         .site-header, .main-header) :is(a, .nav-link, .navbar-brand, .logo, i) {
  color: var(--rez-white) !important;
}

body :is(#header, header.site-header, header.main-header,
         .site-header, .main-header) :is(a:hover, a:focus-visible,
         .nav-link:hover, .nav-link:focus-visible) {
  color: var(--rez-coral) !important;
}

/* 01A. NAVIGATION: UPPERCASE MENU TEXT (NOT LOGO/BRAND TEXT). */
body :is(#header, header, .site-header, .main-header, .navbar,
         .main-nav, .nav-menu, #navmenu, .navmenu, .navigation) :is(
           nav a, .nav-link, .navbar-nav a, .nav-menu a,
           ul > li > a, .menu-item > a, .dropdown-menu a, .dropdown-item) {
  text-transform: uppercase !important;
}

.site-navigation {
  text-transform: uppercase;
}
.logo {
  max-width: 260px;
}
.shadow-box {
  background: #001e61;
  border-radius: 10px;
}

/* 01B. FOOTER: FULL NAVY BACKGROUND AND WHITE TEXT. */
body :is(footer, #footer, .site-footer, .main-footer) {
  background-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border-color: var(--rez-navy) !important;
}

/* Override light footer sub-sections without affecting page-wide containers. */
body :is(footer, #footer, .site-footer, .main-footer) :is(
         .footer-top, .footer-bottom, .footer-content, .copyright,
         .footer-copyright, .footer-inner, .credits) {
  background-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
}

body :is(footer, #footer, .site-footer, .main-footer) :is(
         h1, h2, h3, h4, h5, h6, p, small, span, li, a,
         address, strong, em, i, .text-muted, .text-body-secondary) {
  color: var(--rez-white) !important;
}

body :is(footer, #footer, .site-footer, .main-footer) :is(a:hover, a:focus-visible) {
  color: var(--rez-coral) !important;
}

/* 02. NEW APPLICATION: TITLE AND INTRODUCTORY INSTRUCTIONS --------------- */

/* Detect the application by a first-name field; explicit classes are also
   supported should the developer already have them in the HTML. */
:where(body:has(input[id*="FirstName" i]),
       body:has(input[name*="FirstName" i]),
       body.new-application,
       body.new-application-page) :is(h1, .page-title h1, .page-heading h1) {
  color: var(--rez-navy) !important;
  margin-bottom: 34px;
}

/* The existing five-point ordered list is the navy instruction panel.
   Styling the list itself avoids depending on an unverified wrapper class. */
:is(.application-instructions,
    .new-application-instructions,
    .application-notice,
    .application-guidance,
    body:has(input[id*="FirstName" i]) ol:has(> li:nth-child(5)),
    body:has(input[name*="FirstName" i]) ol:has(> li:nth-child(5))) {
  display: block;
  background-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border: 1px solid var(--rez-navy) !important;
  border-radius: 8px;
  padding: 36px 44px 36px 66px;
  margin-top: 28px;
  margin-bottom: 48px;
  line-height: 1.75;
  letter-spacing: 0.015em;
  max-width: 100%;
}

:is(.application-instructions,
    .new-application-instructions,
    .application-notice,
    .application-guidance,
    body:has(input[id*="FirstName" i]) ol:has(> li:nth-child(5)),
    body:has(input[name*="FirstName" i]) ol:has(> li:nth-child(5))) li {
  color: var(--rez-white) !important;
  margin: 0 0 14px;
  padding-left: 6px;
}

:is(.application-instructions,
    .new-application-instructions,
    .application-notice,
    .application-guidance,
    body:has(input[id*="FirstName" i]) ol:has(> li:nth-child(5)),
    body:has(input[name*="FirstName" i]) ol:has(> li:nth-child(5))) li:last-child {
  margin-bottom: 0;
}

/* Reference design uses coral for the two important suitability warnings. */
:is(.application-instructions,
    .new-application-instructions,
    .application-notice,
    .application-guidance,
    body:has(input[id*="FirstName" i]) ol:has(> li:nth-child(5)),
    body:has(input[name*="FirstName" i]) ol:has(> li:nth-child(5))) li:nth-child(n+4) {
  color: var(--rez-coral) !important;
}

/* 02A. The screenshot shows the ordered list already navy, but its
   OUTER bordered/shadowed container remains white. Colour that container too.
   A five-item ordered instruction list is the structural anchor. Exclude any
   wrapper with form controls or the page H1 to avoid colouring the entire page. */
body :is(.card, .panel, .alert, .notice, .info-box, .instructions-panel,
         .application-instructions-wrapper, .new-application-instructions-wrapper,
         .instruction-card, .instructions-card, .shadow, .shadow-sm, .shadow-lg,
         .box, .border, .container, .container-fluid,
         [style*="box-shadow"], [style*="border:"])
         :has(ol:has(> li:nth-child(5)))
         :not(:has(input, select, textarea, form))
         :not(:has(h1)) {
  background: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border-color: var(--rez-navy) !important;
}

/* Some builds use an unclassed inner div as the immediate list wrapper.
   This rule intentionally stops at that direct parent. */
body div:has(> ol:has(> li:nth-child(5)))
         :not(:has(input, select, textarea, form)) {
  background-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border-color: var(--rez-navy) !important;
}

/* 03. APPLICATION FORMS ---------------------------------------------------- */

/* White form surfaces; navy text and border on every standard input. */
body :is(form, .form-container, .application-form) :is(label, .form-label,
           .form-check-label, .field-label, legend, .control-label) {
  color: var(--rez-navy) !important;
  font-size: 16px;
}

body :is(form, .form-container, .application-form) :is(
       .form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
       select, textarea) {
  background-color: var(--rez-white);
  border: 1px solid var(--rez-border) !important;
  color: var(--rez-navy) !important;
  border-radius: 4px;
  font-family: var(--rez-font-body) !important;
  font-size: 16px;
}

body :is(form, .form-container, .application-form) :is(
       .form-control, .form-select, input, textarea)::placeholder {
  color: #526387;
  opacity: 1;
}

body :is(form, .form-container, .application-form) :is(
       .form-control, .form-select, input, select, textarea):focus {
  border-color: var(--rez-navy) !important;
  box-shadow: 0 0 0 3px rgb(0 30 97 / 13%);
}

body :is(form, .form-container, .application-form) :is(
       .form-control:disabled, .form-select:disabled, input:disabled,
       select:disabled, textarea:disabled) {
  background-color: #e8edf6 !important;
  color: #526387 !important;
  cursor: not-allowed;
}

/* Keep invalid/validation errors visually distinct from regular borders. */
body :is(form, .form-container, .application-form) :is(
       .is-invalid, .input-validation-error, [aria-invalid="true"]) {
  border-color: #c63751 !important;
}

body :is(form, .form-container, .application-form) :is(
       .form-check-input, input[type="checkbox"], input[type="radio"]) {
  border-color: var(--rez-navy) !important;
  accent-color: var(--rez-navy);
}

body :is(form, .form-container, .application-form) .form-check-input:checked {
  background-color: var(--rez-navy) !important;
  border-color: var(--rez-navy) !important;
}

/* Form group outlines: location selector panel, cards, accordions, fieldsets. */
body :is(form, .form-container, .application-form) :is(
       .card, .accordion-item, .panel, fieldset, .border, .border-secondary) {
  border-color: var(--rez-navy) !important;
}

/* Formerly grey application form section headings. */
body :is(form, .form-container, .application-form) :is(
       .card-header, .accordion-header, .accordion-button, .panel-heading,
       .section-header, .form-section-header, .form-card-header) {
  background-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border-color: var(--rez-navy) !important;
}

body :is(form, .form-container, .application-form) :is(
       .card-header, .accordion-header, .accordion-button, .panel-heading,
       .section-header, .form-section-header, .form-card-header)
       :is(a, button, label, span, h2, h3, h4, h5, h6, i, svg) {
  color: var(--rez-white) !important;
}

/* Bootstrap accordion arrows are SVG background images: invert them to white. */
body :is(form, .form-container, .application-form) .accordion-button::after {
  filter: brightness(0) invert(1);
}

body :is(form, .form-container, .application-form) .accordion-button:focus {
  box-shadow: 0 0 0 3px rgb(255 129 137 / 35%);
}

/* 'Select Location' and other previously grey inset/form panels. */
body :is(form, .form-container, .application-form) :is(
       .bg-light, .bg-secondary, .bg-body-tertiary,
       .bg-light-subtle, .location-panel, .location-selector,
       .form-section-heading) {
  background-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border-color: var(--rez-navy) !important;
}

body :is(form, .form-container, .application-form) :is(
       .bg-light, .bg-secondary, .bg-body-tertiary,
       .bg-light-subtle, .location-panel, .location-selector,
       .form-section-heading) :is(label, .form-label, .control-label,
       .field-label, h2, h3, h4, h5, h6) {
  color: var(--rez-white) !important;
}

/* Inputs inside navy panels stay white; application content stays white. */
body :is(form, .form-container, .application-form) :is(
       .card-body, .accordion-body, .panel-body) {
  color: var(--rez-navy);
}

body :is(form, .form-container, .application-form) :is(
       .required, .text-danger, .field-validation-error,
       .invalid-feedback) {
  color: #c63751 !important;
}

/* Keep a readable coral mandatory marker on navy section headers. */
body :is(form, .form-container, .application-form) :is(
       .card-header, .accordion-button, .panel-heading) .text-danger {
  color: var(--rez-coral) !important;
}

/* 04. BOOKING HERO AND FOUR ROOM-TYPE TILES ------------------------------- */

/* Booking pages are detected by their existing Buildings links.
   This deliberately excludes the New Application page. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results) :is(
       #hero, .hero, .booking-hero, .room-bookings-hero,
       .booking-banner, .page-banner, .breadcrumbs) {
  background-color: var(--rez-coral) !important;
}

:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results) :is(
       #hero, .hero, .booking-hero, .room-bookings-hero,
       .booking-banner, .page-banner, .breadcrumbs) :is(h1, h2, p) {
  color: var(--rez-white) !important;
}

/* The instruction strip above the room choices is pale cyan. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results) :is(
       .alert-info, .booking-instructions, .room-booking-info) {
  background-color: var(--rez-pale-cyan) !important;
  color: var(--rez-navy) !important;
  border: 0 !important;
  border-radius: 7px;
}

/* Select only room-type boxes containing an actual SearchResults link. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.icon-box, .service-item, .room-type-card,
           .room-type-option, .category-card, .feature-box, .card, .box)
       :has(a[href*="SearchResults" i]),
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       a[href*="SearchResults" i]:is(.room-type-card, .room-type-option,
                                     .icon-box, .service-item) {
  background: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  border: 1px solid var(--rez-navy) !important;
  border-radius: 8px;
  box-shadow: none;
}

:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.icon-box, .service-item, .room-type-card, .room-type-option,
           .category-card, .feature-box, .card, .box)
       :has(a[href*="SearchResults" i]) :is(a, h3, h4, h5, span, p) {
  color: var(--rez-white) !important;
  font-family: var(--rez-font-body) !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

/* Remove *icons only* within the four room-type tiles; keep the links. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.icon-box, .service-item, .room-type-card, .room-type-option,
           .category-card, .feature-box, .card, .box)
       :has(a[href*="SearchResults" i])
       :is(.icon, .icon-wrapper, .icon-holder, i, svg, img, .bi, .bx,
           .fas, .far, .fab, [class*="fa-"], [class*="icon-"]) {
  display: none !important;
}

/* Certain icon-box designs draw their icon with a ::before pseudo-element. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.icon-box, .service-item, .room-type-card, .room-type-option)
       :has(a[href*="SearchResults" i]) > .icon::before {
  content: none !important;
}

/* 05. ROOM SEARCH RESULTS / AVAILABLE ROOM CARDS -------------------------- */

:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results) :is(
       .room-card, .room-item, .room-box, .single-room, .room-result, .card) {
  border-color: var(--rez-navy) !important;
}

/* The 'Select 6 A' / 'Select 7 B' link or its card header: larger click
   area, bold uppercase text, and a calm navy-on-white appearance. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.room-card, .room-item, .room-box, .single-room, .room-result,
           .card:has(.card-footer), .card:has(.btn))
       > a:first-child:not(.btn),
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.room-card, .room-item, .room-box, .single-room, .room-result,
           .card:has(.card-footer), .card:has(.btn))
       > .card-header:first-child,
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.room-card, .room-item, .room-box, .single-room, .room-result,
           .card:has(.card-footer), .card:has(.btn))
       > .card-header:first-child a,
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.room-select, .select-room, a.select-room, .room-selection-link) {
  display: block;
  background-color: var(--rez-white) !important;
  color: var(--rez-navy) !important;
  font-family: var(--rez-font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-align: center;
  line-height: 1.5;
  padding: 12px 16px !important;
  text-decoration: none;
}

/* Keep the existing coral room-information region / white type. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.room-card, .room-item, .room-box, .single-room, .room-result)
       :is(.room-details, .room-info, .room-content, .room-body),
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       .card:has(.card-footer) > .card-body {
  background-color: var(--rez-coral) !important;
  color: var(--rez-white) !important;
}

:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.room-card, .room-item, .room-box, .single-room, .room-result)
       :is(.room-details, .room-info, .room-content, .room-body) :is(h3, h4, h5, p, span),
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       .card:has(.card-footer) > .card-body :is(h3, h4, h5, p, span) {
  color: var(--rez-white) !important;
}

/* Booking buttons: replace the unrelated bright blue with brand navy. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results) :is(
       .btn-primary, .btn-info, .room-booked, .room-booked-btn) {
  background-color: var(--rez-navy) !important;
  border-color: var(--rez-navy) !important;
  color: var(--rez-white) !important;
  font-family: var(--rez-font-body) !important;
  font-size: 16px;
  border-radius: 5px;
}

:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results)
       :is(.btn-primary, .btn-info, .room-booked, .room-booked-btn):not(:disabled):not(.disabled):hover {
  background-color: var(--rez-navy-hover) !important;
  border-color: var(--rez-navy-hover) !important;
  color: var(--rez-white) !important;
}

/* Retain visible keyboard focus and native disabled/booking status. */
:where(body:has(a[href*="SearchResults" i]),
       body.room-bookings-page,
       body.room-search-results) .btn:focus-visible {
  box-shadow: 0 0 0 3px rgb(255 129 137 / 35%);
}

/* 06. RESPONSIVE SAFETY ---------------------------------------------------- */

@media (max-width: 767px) {
  body :is(h1, .page-title h1, .page-heading h1, .breadcrumbs h1,
           #hero h1, .hero h1) {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.2;
  }

  :is(.application-instructions, .new-application-instructions,
      .application-notice, .application-guidance,
      body:has(input[id*="FirstName" i]) ol:has(> li:nth-child(5)),
      body:has(input[name*="FirstName" i]) ol:has(> li:nth-child(5))) {
    padding: 24px 22px 24px 40px;
    margin-bottom: 32px;
    line-height: 1.6;
  }

  :where(body:has(a[href*="SearchResults" i]),
         body.room-bookings-page,
       body.room-search-results)
         :is(.room-card, .room-item, .room-box, .single-room,
             .room-result, .card:has(.card-footer), .card:has(.btn))
         > a:first-child:not(.btn) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}