/*======================================================================
  Royal Home Decors — SERVICES + SINGLE SERVICE COLOUR THEME
  ----------------------------------------------------------------------
  Loaded by services.html and the six single-service pages (curtains,
  blinds, sofa, headboards, wallpaper, matress). Every rule is scoped to
  `.page-wrapper.services-premium`, so it cannot reach the homepage, the
  About page, Products or Contact.

  Scope is COLOUR ONLY. Backgrounds, text, buttons, icons, cards, CTA
  panels, borders and dividers move to the blue-and-white palette; no
  rule here changes a width, height, padding, margin, font-size or
  position, so every page renders at exactly its current dimensions.

  Two conventions carried over from the About page theme:
    * page banners keep the theme's flat neutral wash — they are not
      brand-tinted;
    * the service names under the icons stay black.

  Layout of this file
    01  Palette
    02  Type colour
    03  Header
    04  Page banner
    05  Section headings
    06  Buttons
    07  Icon services band
    08  Service cards (services.html)
    09  Photo tiles — fabric guide & curtain types
    10  Video blocks
    11  Consultation CTA
    12  Footer
    13  Floating actions
======================================================================*/

/*----------------------------------------------------------------------
  01 — PALETTE
  Same ramp as the homepage and About themes, so the whole site reads as
  one palette.
----------------------------------------------------------------------*/
.page-wrapper.services-premium {
  --rhd-navy-deep: #0a2a5e;
  --rhd-navy: #123f80;
  --rhd-blue: #1b56ad;
  --rhd-blue-soft: #4b7fd0;

  --rhd-tint-05: #f7fafe;
  --rhd-tint-10: #eef4fc;
  --rhd-tint-20: #e2ecf9;
  --rhd-line: #d8e5f6;

  --rhd-ink: #10233f;
  --rhd-ink-soft: #4d6280;

  background: #ffffff;
}

/*----------------------------------------------------------------------
  02 — TYPE COLOUR
  The theme fakes weight with `text-shadow: 2px 0 <colour>` on h1/h2,
  which doubles every glyph. Dropping it is a colour change in the same
  sense — nothing moves, the letterforms just stop smearing.
----------------------------------------------------------------------*/
.services-premium h1,
.services-premium .h1,
.services-premium h2,
.services-premium .h2 {
  text-shadow: none !important;
}

.services-premium h2,
.services-premium .h2,
.services-premium h3 {
  color: var(--rhd-navy);
}

.services-premium p {
  color: var(--rhd-ink-soft);
}

/*----------------------------------------------------------------------
  03 — HEADER
----------------------------------------------------------------------*/
.services-premium .main-header .header-upper {
  background: #ffffff !important;
  border-bottom-color: var(--rhd-line) !important;
}

.services-premium .main-menu .navbar-collapse > .navigation > li > a,
.services-premium .main-menu .navbar-collapse li li a {
  color: var(--rhd-ink) !important;
}

.services-premium .main-menu .navbar-collapse > .navigation > li > a:hover,
.services-premium .main-menu .navbar-collapse li li a:hover {
  color: var(--rhd-navy) !important;
}

.services-premium .main-menu .navbar-collapse li li {
  border-top-color: var(--rhd-line) !important;
}

@media only screen and (max-width: 991px) {
  .services-premium .main-menu .navbar-collapse li {
    border-top-color: var(--rhd-line) !important;
  }

  .services-premium .main-menu .navbar-collapse > ul > li:last-child {
    border-bottom-color: var(--rhd-line) !important;
  }

  .services-premium .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    border-left-color: var(--rhd-line) !important;
  }
}

/*----------------------------------------------------------------------
  04 — PAGE BANNER
  The wash stays as the markup sets it; only the type on top is pinned.
----------------------------------------------------------------------*/
.services-premium .banner-content h1,
.services-premium .banner-content .breadcrumb li,
.services-premium .banner-content .breadcrumb a {
  color: #ffffff !important;
}

.services-premium .banner-content .breadcrumb a:hover {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  05 — SECTION HEADINGS
----------------------------------------------------------------------*/
/* Eyebrow labels -> the same rounded navy badge the homepage uses, so
   every page's eyebrow reads identically. Kept in sync with
   home-premium.css section 02. */
.services-premium .sub-title,
.services-premium .section-title .sub-title,
.services-premium.page-wrapper .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 22px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(16, 47, 96, 0.07);
}

/* Small diamond ornament inside the badge. */
.services-premium .sub-title::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 767px) {
  .services-premium .sub-title,
  .services-premium .section-title .sub-title {
    font-size: 11px;
    padding: 6px 16px;
    letter-spacing: 0.12em;
  }
}

.services-premium .section-title h2 {
  color: var(--rhd-navy);
}

.services-premium .section-title p,
.services-premium .fabric-guide-intro {
  color: var(--rhd-ink-soft);
}

/*----------------------------------------------------------------------
  06 — BUTTONS
  The theme paints .theme-btn near-black; navy is the brand equivalent.
----------------------------------------------------------------------*/
.services-premium .theme-btn,
.services-premium a.theme-btn,
.services-premium .media-row .theme-btn {
  background: var(--rhd-navy) !important;
  color: #ffffff !important;
}

.services-premium .theme-btn:hover,
.services-premium a.theme-btn:hover,
.services-premium .media-row .theme-btn:hover {
  background: var(--rhd-blue) !important;
  color: #ffffff !important;
}

.services-premium .btn-white-bg {
  background: var(--rhd-navy) !important;
  border-color: var(--rhd-navy) !important;
  color: #ffffff !important;
}

.services-premium .btn-white-bg:hover {
  background: var(--rhd-blue) !important;
  border-color: var(--rhd-blue) !important;
  color: #ffffff !important;
}

/*----------------------------------------------------------------------
  07 — ICON SERVICES BAND
  Flat grey (--black-10) in the theme; a soft blue tint here. This band
  is `.service-area-2` on the single-service pages and `.ctype-section`
  shares the same `.black-90-bg` helper on the curtains page.
----------------------------------------------------------------------*/
.services-premium .service-area-2,
.services-premium .service-area-2.black-90-bg,
.services-premium .ctype-section.black-90-bg {
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  color: var(--rhd-ink-soft);
}

.services-premium .service-area-2 h2 {
  color: var(--rhd-navy);
}

/* Service names under each icon stay black, matching the About page. */
.services-premium .service-area-2 .service-item h5,
.services-premium .service-area-2 .service-item a h5 {
  color: #000000 !important;
}

.services-premium .service-area-2 p {
  color: var(--rhd-ink-soft);
}

.services-premium .service-area-2 .icon .fa,
.services-premium .service-area-2 .icon .fa:before {
  color: var(--rhd-blue) !important;
}

.services-premium .service-area-2 .right-arrow,
.services-premium .service-area-2 .right-arrow .fa {
  color: var(--rhd-navy) !important;
}

.services-premium .service-area-2 .service-item:hover .right-arrow,
.services-premium .service-area-2 .service-item:hover .right-arrow .fa {
  color: var(--rhd-blue) !important;
}

/*----------------------------------------------------------------------
  08 — SERVICE CARDS (services.html)
  White cards on white need a hairline to hold their edge; the markup
  already carries a 1px border, so only its colour changes.
----------------------------------------------------------------------*/
.services-premium .svc-card {
  background-color: var(--rhd-tint-05);
  border-color: var(--rhd-line);
}

.services-premium .svc-card:hover {
  border-color: var(--rhd-blue);
  box-shadow: 0 18px 40px rgba(16, 47, 96, 0.16);
}

.services-premium .svc-card-body h5,
.services-premium .svc-card-body a h5 {
  color: var(--rhd-navy) !important;
  /* Card titles are set in caps to match the eyebrow labels above them.
     Kept as a transform so the markup stays sentence case for screen
     readers and for the page copy that reuses these names. */
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.services-premium .svc-card-body p {
  color: var(--rhd-ink-soft);
}

/*----------------------------------------------------------------------
  09 — PHOTO TILES (fabric guide + curtain types, curtains.html)
  Both are photos under a dark scrim. The scrim stays exactly as the
  theme sets it — neutral black, not navy; only the borders and accents
  pick up brand blue.
----------------------------------------------------------------------*/
.services-premium .fabric-tile,
.services-premium .ctype-panel {
  border-color: rgba(18, 63, 128, 0.35);
}

.services-premium .fabric-tile:hover,
.services-premium .fabric-tile:focus-within,
.services-premium .ctype-panel:hover,
.services-premium .ctype-panel:focus-visible,
.services-premium .ctype-accordion:not(:hover) .ctype-panel.is-open {
  border-color: var(--rhd-blue-soft);
}

/* Numerals and the rule under each name. */
.services-premium .fabric-num {
  color: #ffffff;
}

.services-premium .ctype-num {
  color: var(--rhd-blue-soft) !important;
}

.services-premium .fabric-tile-body h5::after {
  background: var(--rhd-blue-soft);
}

/* Type sitting on the scrim stays light. The product names are set in
   caps to match the tile headings elsewhere on these pages; a transform
   keeps the markup in sentence case for screen readers. */
.services-premium .fabric-tile-body h5,
.services-premium .ctype-panel-inner h5 {
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.services-premium .fabric-tile-body p,
.services-premium .ctype-panel-inner p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/*----------------------------------------------------------------------
  10 — VIDEO BLOCKS
----------------------------------------------------------------------*/
.services-premium .svc-video-area .svc-video-text h2 {
  color: var(--rhd-navy);
}

.services-premium .svc-video-area .svc-video-text p {
  color: var(--rhd-ink-soft);
}

.services-premium .svc-video-player {
  border-color: var(--rhd-line);
  box-shadow: 0 24px 60px rgba(16, 47, 96, 0.18);
}

/*----------------------------------------------------------------------
  11 — CONSULTATION CTA
  A photo band rather than a flat colour, washed with the same neutral
  black used on the page banners so the white copy stays readable.
----------------------------------------------------------------------*/
.services-premium .consult-cta,
.services-premium .black-120-bg.consult-cta {
  background-image:
    linear-gradient(rgba(18, 18, 18, 0.55), rgba(18, 18, 18, 0.55)),
    url(../images/curtains/grey-blackout-curtains-modern-bedroom.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

.services-premium .consult-cta h2,
.services-premium .consult-cta .sub-title,
.services-premium .consult-cta p,
.services-premium .black-120-bg.consult-cta p {
  color: #ffffff !important;
}

.services-premium .consult-cta p,
.services-premium .black-120-bg.consult-cta p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* On navy, the navy button would disappear — invert it. */
.services-premium .consult-cta .theme-btn,
.services-premium .consult-cta a.theme-btn {
  background: #ffffff !important;
  color: var(--rhd-navy) !important;
}

.services-premium .consult-cta .theme-btn:hover,
.services-premium .consult-cta a.theme-btn:hover {
  background: var(--rhd-blue-soft) !important;
  color: #ffffff !important;
}

/*----------------------------------------------------------------------
  12 — FOOTER
  Navy, matching the homepage and About page footers.
----------------------------------------------------------------------*/
.services-premium .main-footer {
  background:
    radial-gradient(800px 360px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  border-top-color: transparent !important;
}

.services-premium .footer-top h2,
.services-premium.page-wrapper .footer-top h2 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none !important;
}

.services-premium .footer-top .white,
.services-premium .footer-top h2 .white,
.services-premium.page-wrapper .footer-top h2 .white {
  color: #ffffff !important;
  text-shadow: none !important;
}

.services-premium .footer-bottom,
.services-premium .footer-bottom .info p,
.services-premium .copyright-area,
.services-premium.page-wrapper .footer-bottom,
.services-premium.page-wrapper .footer-bottom .info p,
.services-premium.page-wrapper .copyright-area {
  color: rgba(255, 255, 255, 0.72) !important;
}

.services-premium .footer-bottom a,
.services-premium.page-wrapper .footer-bottom a {
  color: rgba(255, 255, 255, 0.86) !important;
}

.services-premium .footer-bottom a:hover,
.services-premium.page-wrapper .footer-bottom a:hover {
  color: #ffffff !important;
}

.services-premium .copyright-area a,
.services-premium .copyright-area a:hover,
.services-premium.page-wrapper .copyright-area a {
  color: #ffffff !important;
}

.services-premium .footer-bottom .h4-rotate,
.services-premium.page-wrapper .footer-bottom .h4-rotate {
  color: rgba(255, 255, 255, 0.28) !important;
  text-shadow: none !important;
}

.services-premium .footer-bottom-text:has(.to-top) {
  border-right-color: rgba(255, 255, 255, 0.22) !important;
}

.services-premium .to-top p,
.services-premium.page-wrapper .to-top p {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.services-premium .footer-social a {
  color: #ffffff !important;
}

.services-premium .footer-social a:hover {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  13 — FLOATING ACTIONS
----------------------------------------------------------------------*/
.services-premium .floating-cta .call-btn {
  background: var(--rhd-navy);
  color: #ffffff;
}

.services-premium .scroll-top {
  background: var(--rhd-navy);
  color: #ffffff;
}

.services-premium .preloader {
  background: var(--rhd-tint-05) !important;
}


/*----------------------------------------------------------------------
  RESPONSIVE — RADIAL WASH SCALING
  Same reasoning as home-premium.css: the radial highlights are sized in
  fixed pixels, so on a narrow viewport they cover the whole section and
  read as a full gradient. Shrink them in proportion so tablet and mobile
  match the desktop look. Desktop rules are untouched.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .services-premium .service-area-2,
  .services-premium .service-area-2.black-90-bg,
  .services-premium .ctype-section.black-90-bg {
    background-image:
      radial-gradient(465px 196px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  }

  .services-premium .main-footer {
    background-image:
      radial-gradient(490px 220px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }
}

@media only screen and (max-width: 767px) {
  .services-premium .service-area-2,
  .services-premium .service-area-2.black-90-bg,
  .services-premium .ctype-section.black-90-bg {
    background-image:
      radial-gradient(250px 107px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  }

  .services-premium .main-footer {
    background-image:
      radial-gradient(265px 120px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }
}


/*----------------------------------------------------------------------
  BUTTON HOVER
  Every filled button inverts on hover: white panel, navy label. On the
  consultation band the resting state is already white, so hovering just
  swaps its label from navy to the same navy — kept for consistency with
  the rest of the site.
----------------------------------------------------------------------*/
.services-premium .theme-btn:hover,
.services-premium a.theme-btn:hover,
.services-premium .media-row .theme-btn:hover,
.services-premium .btn-white-bg:hover,
.services-premium button.btn-white-bg:hover,
.services-premium .consult-cta .theme-btn:hover,
.services-premium .consult-cta a.theme-btn:hover {
  background: #ffffff !important;
  border-color: var(--rhd-navy) !important;
  color: var(--rhd-navy) !important;
}