/* ═══════════════════════════════════════════════════════════════════════
   BREAST CANCER DAY (Pink October)
   ═══════════════════════════════════════════════════════════════════════
   The switch is in assets/breast-cancer-day.js. Every rule here is scoped
   under html.bcd-on (the one exception, the hero slide's own off rule, is
   marked), so with the switch off nothing in this sheet matches anything and
   the pages are exactly as they were.

   Separate from the Saudi National Day theme (national-day.css/.js), which
   stays saved and switched off for next year.

   Pinks taken from his ribbon and banners:
     #fbe3ef  the blush ground            #ec5a96  the ribbon's mid tone
     #d6337a  its bright shade            #b0124f / #8e0f49  the deep ends,
                                           for white type on them (4.5:1+)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. The header: the ribbon where the National Day greeting stood ────
   breast-cancer-day.js puts it inside the language box, ahead of the select,
   so it moves with the select through every header shape on the site. */
html.bcd-on .lang-wrap { display: flex; align-items: center; gap: 10px; }
html.bcd-on .bcd-ribbon {
  display: block;
  flex: 0 0 auto;             /* a shrinking flex image goes flat, not small */
  height: 46px;
  width: auto;
  filter: drop-shadow(0 2px 3px rgba(176, 18, 79, .22));
}
@media (max-width: 980px) {
  html.bcd-on .bcd-ribbon { height: 38px; }
}
@media (max-width: 640px) {
  html.bcd-on .bcd-ribbon { height: 32px; }
  html.bcd-on .lang-wrap { gap: 8px; }
}

/* A soft pink wash over the whole header. The two satin ribbons that drifted
   across it are gone (his word, 2026-10-18: "the header - remove the lines,
   keep the ribbon"). z-index:-1 inside the header's own stacking context
   (every header here is sticky with a z-index): above the header's white,
   under everything in the row. */
html.bcd-on .site-header { border-bottom-color: #f6b3cf; }
html.bcd-on .bcd-wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(90deg, rgba(252, 222, 236, .78), rgba(255, 241, 247, .5) 50%, rgba(252, 222, 236, .78));
}

/* The current page's button in pink instead of navy (his word: "the buttons
   on header now highlighted in pink instead of blue, same as what we did in
   National Day" - when the season went green, so did this pill). !important
   because offers.html paints its pill inline. White type: 4.6:1 on the bright
   end, 6:1+ on the deep one. */
html.bcd-on .site-nav a.active,
html.bcd-on .site-nav a[aria-current="page"] {
  background: linear-gradient(135deg, #d6337a, #b0124f) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(176, 18, 79, .3) !important;
}
html.bcd-on .site-nav a.active span,
html.bcd-on .site-nav a[aria-current="page"] span { color: #fff !important; }
html.bcd-on .site-nav a:not(.active):hover { background: rgba(214, 51, 122, .1) !important; color: #8e0f49 !important; }

/* Latest Offers on a phone: it has no menu button, so its nav row stays open
   inside the header, and the base sheet paints that row as a panel of its own
   under 640px (`.home .site-nav`, white) - a white box across the pink wash
   (his report, 2026-10-18). National Day clears it under nd-on only; the
   month clears it too, and with the switch off the page is as it was. */
@media (max-width: 640px) {
  /* the line keeps its pixel, transparent, so the header is the same height on or off */
  html.bcd-on.bcd-page-offers .site-nav { background: none !important; border-bottom-color: transparent !important; }
}

/* ── 2. The home page hero: his banner opens the slider ─────────────────
   His words: "make it part of the slider same as Saudi National Day in
   departments and main page". The banner is the hero's first slide while the
   month is on, the way the Kings frame was for National Day: shown whole on
   its own pink, held for nine seconds, the copy stepping aside while it is
   up (it is a .cin-poster, so the page's own poster rules do that), then the
   building and the plates as usual. The phone takes a square of the same
   banner (assets/hero/m/), chosen by the <picture> itself.

   departments.html carries the same banner as its own slide, with its rules
   inside its template (its stylesheet links arrive after its first paint), so
   these are the home page's only (html.bcd-page-home). */
/* OFF: the one rule not under html.bcd-on - the slide ships in the markup and
   must never be counted by the rotation without the month. The class is
   settled before the hero is parsed (this file's script is in <head>), so the
   negative form cannot flash. */
html:not(.bcd-on) .bcd-slide { display: none !important; }
html.bcd-on.bcd-page-home .cin-hero .bcd-slide {
  display: block;
  padding: 0;
  z-index: 3;
  animation: none;
  transform: none;
  /* the banner's own ground, so the margin it does not fill reads as the banner */
  background: radial-gradient(ellipse 75% 90% at 50% 50%, #fdf3f8 0%, #fbd9ea 100%);
}
html.bcd-on.bcd-page-home .cin-hero .bcd-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* the opening frame from the first paint: the copy waits, and stays aside
   while the banner is up (the rotation's own .on-poster takes over) */
html.bcd-on.bcd-page-home .cin-hero:not(.cin-ready) .cin-content { filter: opacity(0); visibility: hidden; }
/* the building waits its turn, as it does behind the Kings: hidden by this until the rotation's own inline
   opacity takes over (it never gets its fade-in class while the banner opens the hero) */
html.bcd-on.bcd-page-home .cin-hero .cin-hero-1 { opacity: 0; }

/* ── 3. The doctors page: every department bar in pink ──────────────────
   His words: "for doctors tabs all have this colour for now" (it was OB/GYN,
   Orthopedics and General Surgery only). The navy bar heading each department
   goes pink. Type on it is white or near white at 4.5:1 or better on the
   deeper end (#c2185b: white 5.9:1, #ffe3ef 4.9:1); the gold button stays, it
   carries its own ground. */
html.bcd-on .dept-divider {
  background: linear-gradient(120deg, #8e0f49, #c2185b);
  box-shadow: 0 16px 32px -16px rgba(142, 15, 73, .6);
}
html.bcd-on .dept-divider .dv-ico {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 214, 232, .75);
  color: #ffe3ef;
}
html.bcd-on .dept-divider .dv-tt .ar { color: #ffe3ef; }
html.bcd-on .dept-divider .dv-cnt { color: #fff; }

/* ── 4. Services and Latest Offers: his blush ribbon behind the page ────
   His words: "Pink ribbon profile on blush waves - for services and latest
   offers use this as a background", the way the National Day photograph sat
   behind the services page. One fixed layer behind the whole page, injected
   as the body's first child (.bcd-bg): position:fixed IS the viewport, so
   `cover` means cover the screen, and a phone needs no attachment trick.

   A phone gets its own tall crop (bcd-bg-m.webp, 1080x2400: the ribbon and
   her profile with the blush carried above and below). It is narrower than
   any phone screen in proportion, so `cover` scales it by the WIDTH - which
   does not move when the address bar comes and goes - and it sits from the
   top: no percentage, so the same frame on every load (the National Day
   lesson: a percentage re-crops every time the bar moves).

   The blush is light, so each page's own dark type reads on it as it is; the
   page's paper moves off <body> (and offers' <main>) so nothing paints over
   the layer, and <html> carries the blush in case the layer is late. */
html.bcd-on.bcd-page-services,
html.bcd-on.bcd-page-offers { background: #fbe3ef; }
html.bcd-on.bcd-page-services body,
html.bcd-on.bcd-page-offers body,
html.bcd-on.bcd-page-offers main { background: none; }
html.bcd-on .bcd-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #fbe3ef url("bcd-bg.webp") center / cover no-repeat;
}
@media (max-width: 760px) {
  html.bcd-on .bcd-bg { background-image: url("bcd-bg-m.webp"); background-position: center top; }
}
/* offers: the contact band was a solid white slab across the blush - a light
   veil instead, so its words keep their ground and the page keeps its picture.
   !important because offers.html paints this band white with !important (its
   own html:not(.nd-on).nd-page-offers #contact rule); this selector is the more
   specific one, so it wins while the month is on and that rule is back with it off */
html.bcd-on.bcd-page-offers #contact.section.alt { background: rgba(255, 255, 255, .72) !important; }

/* services: a tour open fills the screen and the page behind it is furniture -
   the ground goes back to the page's own paper, as it did for National Day, so
   no slice of the picture shows at the seam under the tab strip */
html.bcd-on.bcd-page-services body.tour-open .bcd-bg { display: none; }
html.bcd-on.bcd-page-services:has(body.tour-open) { background: var(--paper, #f8f6f0); }