/* ============================================================
   Altitude — Dark Theme Overrides
   Applied after main.css and rareair-custom.css on all pages
   Background: #161616  |  Headings: #f0ede8  |  Body: #9e9a95
   ============================================================ */

/* ----------------------------------------------------------
   1. GLOBAL DARK BACKGROUND
   ---------------------------------------------------------- */
html,
body {
  background-color: #161616 !important;
  color: #9e9a95 !important;
}

/* Page wrapper — override the bg-white class set by the Rhye template */
#page-wrapper,
.js-smooth-scroll {
  background-color: #161616 !important;
}

/* All sections and containers inherit dark bg */
.section,
.container,
.container-fluid,
.row,
main,
.page-wrapper__content {
  background-color: transparent !important;
}

/* ----------------------------------------------------------
   2. TYPOGRAPHY — headings warm off-white, body muted
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #f0ede8 !important;
}

p, li, span, small, .small {
  color: #9e9a95 !important;
}

/* Section content headings */
.section-content__heading,
.section-content__text {
  color: #f0ede8 !important;
}

.section-content__text p {
  color: #9e9a95 !important;
}

/* ----------------------------------------------------------
   3. HEADER — always dark, burger lines white
   ---------------------------------------------------------- */
.header {
  background-color: transparent !important;
}

.header__burger-line {
  background-color: #ffffff !important;
}

/* Sticky header dark background */
.header.bg-dark-2,
.js-header-sticky.bg-dark-2 {
  background-color: #161616 !important;
}

/* ----------------------------------------------------------
   4. OVERLAY MENU — dark background, white text
   ---------------------------------------------------------- */
.header__wrapper-overlay-menu {
  background-color: #000000 !important;
}

.menu-overlay .menu-overlay__item-wrapper,
.menu-overlay a,
.menu-overlay a.h2 {
  color: #f0ede8 !important;
}

.menu-overlay a:hover .menu-overlay__item-wrapper {
  opacity: 0.7;
}

/* ----------------------------------------------------------
   5. FOOTER — dark background, light text
   ---------------------------------------------------------- */
.footer {
  background-color: #161616 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.footer .footer__area-border-top {
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* Footer headings */
.footer .widgettitle,
.footer .h2,
.footer h2 {
  color: #f0ede8 !important;
}

/* Footer links */
.footer a,
.footer .menu a,
.footer .widget_text p,
.footer small {
  color: #9e9a95 !important;
}

.footer a:hover,
.footer .menu a:hover {
  color: #f0ede8 !important;
}

/* Footer CTA button — white outline on dark */
.footer .button_white {
  border-color: rgba(255,255,255,0.4) !important;
  color: #f0ede8 !important;
}

.footer .button_white:hover {
  background-color: #f0ede8 !important;
  color: #161616 !important;
}

/* Footer "Our Services" CTA heading */
.widget_rhye_cta .h2 {
  color: #f0ede8 !important;
}

/* ----------------------------------------------------------
   6. PRELOADER — already dark via bg-dark-2, just ensure logo
   ---------------------------------------------------------- */
.preloader {
  background-color: #161616 !important;
}

/* ----------------------------------------------------------
   7. SECTION CONTENT — body text on dark pages
   ---------------------------------------------------------- */
.section-content__text p,
.section-content__text {
  color: #9e9a95 !important;
}

/* Drop cap */
.has-drop-cap::first-letter {
  color: #f0ede8 !important;
}

/* ----------------------------------------------------------
   8. COUNTERS — numbers and labels
   ---------------------------------------------------------- */
.counter__number {
  color: #f0ede8 !important;
}

.counter__label {
  color: #9e9a95 !important;
}

/* ----------------------------------------------------------
   9. CIRCLE BUTTON (scroll down) — white on dark
   ---------------------------------------------------------- */
.circle-button__label {
  color: #ffffff !important;
}

.circle-button .circle {
  stroke: #ffffff !important;
}

.circle-button__icon path,
.circle-button__icon .svg-mouse__border,
.circle-button__icon .svg-mouse__wheel {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ----------------------------------------------------------
   10. ARROWS — white
   ---------------------------------------------------------- */
.arrow__pointer,
.arrow__triangle {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.svg-circle .circle {
  stroke: #ffffff !important;
}

/* ----------------------------------------------------------
   11. CURTAINS — dark fill for page transitions
   ---------------------------------------------------------- */
.curtain-svg__normal,
.curtain-svg__curve {
  fill: #161616 !important;
}

/* ----------------------------------------------------------
   12. SERVICE TILES — text on dark
   ---------------------------------------------------------- */
.ra-service-heading {
  color: #f0ede8 !important;
}

.section.pt-medium.pb-medium p {
  color: #9e9a95 !important;
}

/* ----------------------------------------------------------
   13. ABOUT PAGE — editorial content
   ---------------------------------------------------------- */
.section-content__heading h2 {
  color: #f0ede8 !important;
}

/* ----------------------------------------------------------
   14. ENQUIRIES PAGE — email link styling
   ---------------------------------------------------------- */
.section-masthead h5 a,
.section-masthead h5 {
  color: #f0ede8 !important;
}

.section-masthead h5 a:hover {
  opacity: 0.75;
}

/* ----------------------------------------------------------
   15. FORM ELEMENTS — dark inputs
   ---------------------------------------------------------- */
.input-float__field,
.form-control,
textarea {
  background-color: #1e1e1e !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f0ede8 !important;
}

.input-float__field:focus,
.form-control:focus,
textarea:focus {
  border-color: rgba(255,255,255,0.4) !important;
  outline: none !important;
}

.input-float__label {
  color: #9e9a95 !important;
}

/* ----------------------------------------------------------
   16. BUTTONS — solid black becomes solid dark with white text
   ---------------------------------------------------------- */
.button_black {
  background-color: #f0ede8 !important;
  color: #161616 !important;
  border-color: #f0ede8 !important;
}

.button_black:hover {
  background-color: transparent !important;
  color: #f0ede8 !important;
  border-color: #f0ede8 !important;
}

/* ----------------------------------------------------------
   17. TERMS / PRIVACY — body text legibility
   ---------------------------------------------------------- */
.page-wrapper__content h1,
.page-wrapper__content h2,
.page-wrapper__content h3,
.page-wrapper__content h4 {
  color: #f0ede8 !important;
}

.page-wrapper__content p,
.page-wrapper__content li,
.page-wrapper__content a {
  color: #9e9a95 !important;
}

.page-wrapper__content a:hover {
  color: #f0ede8 !important;
}

/* ----------------------------------------------------------
   18. MISC — hide hr divider images on dark bg
   ---------------------------------------------------------- */
img[src="img/hr.jpg"],
img[src="img/hr2.jpg"] {
  opacity: 0.12 !important;
  filter: invert(1) !important;
}