/* ---------------------------------------------------------------------------
   Landing page restyle (californiamass.in root only).

   SCOPING: every rule below is nested under `body.landing-v2`, a class only
   Views/Home/Index.cshtml sets. The header, footer strip and share row live in
   the SHARED _Layout.cshtml, and main.css / site.css / MainIndex.css are loaded
   by every public page - editing those directly would have restyled About,
   Massage Styles, Female Massage, Home Massage, Testimonials and Jobs too.
   Nothing here can match another page, and the whole change reverts by
   removing one <link> from the landing view.

   Palette
     #E0D5C1  section background        #840000  titles, boxes, headings
     #228B22  green body text           #34483A  Facebook   #B86F52  Google+
     #54FF36  Chat with Us + Login only
   --------------------------------------------------------------------------- */

/* ---- 1. page background ------------------------------------------------- */
/* main.css sets body { background:#E0D5C1 !important }, so this needs !important
   to win - specificity alone cannot beat an !important declaration. */
body.landing-v2 {
    background: #E0D5C1 !important;

    /* One definition of the frosted look, used by all three surfaces that sit
       over content: the scrolled bar, the strip behind it, and the dropped
       menu. They must match exactly, and three hand-copied colours drift. */
    --spa-glass: rgba(245, 240, 232, 0.68);
    --spa-glass-blur: blur(14px) saturate(1.15);
    --spa-glass-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}

/* ---- 2. top menu: transparent, black removed ---------------------------- */
/* .navbar-inverseCustom and .blackgroungblack are the signed-in layouts'
   equivalents; without them the admin, therapist and client bars keep the old
   black fill while the public pages go transparent. */
body.landing-v2 .navbar.navbar-inverse,
body.landing-v2 .navbar.navbar-inverseCustom,
body.landing-v2 .navbar.navbar-inverse .navbar-collapse,
body.landing-v2 .navbar-inverse .navbar-collapse.collapse,
body.landing-v2 .navbar .navbar-collapse.blackgroungblack {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    /* a soft lift instead of the old black slab */
    box-shadow: 0 2px 10px rgba(132,0,0,.18) !important;
}

/* ---- 3. Chat with Us + LOGIN: size 14, #54FF36 -------------------------- */
/* Matched on href so the other menu items keep the colour they have now. */
body.landing-v2 .navbar-nav > li > a[href="/main/guest"],
body.landing-v2 .navbar-nav > li > a[href="/account/get-main-view"],
body.landing-v2 .navbar-nav > li.active > a.btn[href="/account/get-main-view"] {
    color: #54FF36 !important;
    /* Was 14px, which left these two visibly smaller than the rest of the
       menu. 20px is exactly what the other items use, so the menu now reads
       as one list. Measured at 375px the longest of the two ("LOGIN/ View
       Profiles/ BOOK Appt") is 243px on a single line, so nothing wraps. */
    font-size: 20px !important;
    /* LOGIN is bold only because Bootstrap draws .btn that way. Setting it on
       both keeps the pair matched instead of relying on that side effect. */
    font-weight: 700 !important;
}

/* ---- 4. body copy: Roboto 13, green -> #228B22, purple -> #840000 ------- */
body.landing-v2 .maincontent,
body.landing-v2 .maincontent p,
body.landing-v2 .maincontent li,
body.landing-v2 .maincontent span:not(.gspan):not(.tag-line) {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 13px;
}
body.landing-v2 .col81d742,
body.landing-v2 .gspan            { color: #228B22 !important; }
body.landing-v2 .colb30af3,
body.landing-v2 .tag-line         { color: #840000 !important; }

/* Section 1 body text keeps its own #840000. NOTE: this font-size is inert -
   without !important the theme wins and section 1 actually renders at 16px,
   which is why it still looks larger than the 13px green copy. Left as-is
   rather than forcing it, since shrinking the hero was not asked for. */
body.landing-v2 .maincontent .font29,
body.landing-v2 .maincontent .font29 p,
body.landing-v2 .maincontent .font29 span { color: #840000 !important; font-size: 13px; }

/* ---- 5. titles: Playfair Display, 12, bold, #840000 --------------------- */
body.landing-v2 .border-title,
body.landing-v2 .border-title h1,
body.landing-v2 .border-title h2,
body.landing-v2 .border-title h3,
body.landing-v2 .box h3,
body.landing-v2 .box strong,
body.landing-v2 .JobDivbox strong {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #840000 !important;
}
/* The hero heading keeps its own green. */
body.landing-v2 .maincontent h3.tag-heading,
body.landing-v2 .maincontent .border-title h3 .col81d742 { color: #228B22 !important; }

/* ---- 6. boxes: border and inner text -> #840000 ------------------------- */
body.landing-v2 .box,
body.landing-v2 .box65,
body.landing-v2 .effect1,
body.landing-v2 .JobDivbox {
    border-color: #840000 !important;
    color: #840000 !important;
}
body.landing-v2 .box span,
body.landing-v2 .box strong,
body.landing-v2 .JobDivbox span { color: #840000 !important; }

/* The jobs box draws its frame from a background image, so the border colour
   above cannot reach it - the image is dropped and a real border drawn. */
body.landing-v2 .JobDivbordrbg {
    background: none !important;
    /* Double rather than solid, as asked. 'double' needs at least 3px to draw
       two lines at all - at 2px the browser silently renders it solid - so the
       width goes up to 6px: two 2px rules with a 2px gap. */
    border: 6px double #840000 !important;
    border-radius: 10px !important;
}

/* ---- 7. share buttons ---------------------------------------------------
   background-color, NOT the background shorthand. These buttons draw their
   icon from a sprite (assets/images/socialshare.png) positioned by
   background-position; the shorthand resets background-image to none and the
   icons vanished, leaving two blank coloured squares next to an intact
   Twitter bird. Only the colour should change here. */
body.landing-v2 .button-facebook   { background-color: #34483A !important; border-color: #34483A !important; }
body.landing-v2 .button-googleplus { background-color: #B86F52 !important; border-color: #B86F52 !important; }

/* ---- 8. footer strip ---------------------------------------------------- */
/* Footer links go green; the Login link keeps the #54FF36 treatment from the
   top menu, which the rule in section 3 already covers by href. */
/* main.css has `#footer a { color:#81d742 !important }` - an ID selector, which
   outranks any chain of classes even when both are !important. #footer has to
   appear here or the footer links keep the old green. */
body.landing-v2 #footer .simplenav a,
body.landing-v2 .footer2 .simplenav a { color: #228B22 !important; }
body.landing-v2 #footer .simplenav a[href="/account/get-main-view"],
body.landing-v2 .footer2 .simplenav a[href="/account/get-main-view"] {
    color: #54FF36 !important;
    font-size: 14px !important;
}
body.landing-v2 #footer .box1,
body.landing-v2 .footer2 .box1 { border-color: #840000 !important; }
body.landing-v2 #footer .box1 .gspan,
body.landing-v2 .footer2 .box1 .gspan { color: #228B22 !important; }

/* ---- 2b. solid bar when scrolled, or when the hamburger is open ---------
   Transparent is only right over the hero. Once the page scrolls, the menu
   sits over cream content and the links become unreadable; the same happens
   when the mobile panel drops open over the page.

   headroom.js is configured in template.js with custom class names and emits
   only pinned/unpinned - there is no "scrolled" class to hook, and a fixed
   element cannot detect scroll in CSS alone. landing.js adds `.nav-solid`.

   The bar uses the same frosted cream as the dropped menu, so scrolling does
   not change the look of the menu - only what is behind it. */
body.landing-v2 .navbar.navbar-inverse.nav-solid,
body.landing-v2 .navbar.navbar-inverse.nav-solid .navbar-collapse {
    background: var(--spa-glass) !important;
    -webkit-backdrop-filter: var(--spa-glass-blur) !important;
    backdrop-filter: var(--spa-glass-blur) !important;
}
/* Section 2's resting shadow is less specific than this rule and should lose
   to it, but measured on the page it wins - so the scrolled shadow is written
   with the body class in the chain and a literal value rather than a var(),
   which makes it deterministic instead of relying on a cascade that is not
   behaving as the specificity says it should. */
body.landing-v2.nav-scrolled .navbar.navbar-inverse.nav-solid,
body.landing-v2 .navbar.navbar-inverse.nav-solid {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10) !important;
}

/* ---- 3b. Chat with Us + LOGIN: plain links, centred ---------------------
   The LOGIN anchor carries class="btn", so Bootstrap draws it as a button -
   a raised box among six flat links. Stripping that chrome (all breakpoints)
   makes the two match the rest of the menu, and below 767px, where the menu
   stacks, they are centred like every other item. */
body.landing-v2 .navbar-nav > li > a[href="/main/guest"],
body.landing-v2 .navbar-nav > li > a[href="/account/get-main-view"],
body.landing-v2 .navbar-nav > li.active > a.btn[href="/account/get-main-view"] {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-align: center;
}
/* .active is what gives the LOGIN item its highlighted pill. */
body.landing-v2 .navbar-nav > li.active,
body.landing-v2 .navbar-nav > li.active > a {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 767px is the breakpoint site.css uses to stack the menu (.navbar-toggle
   becomes visible there), so the two only go full-width once stacked - on
   desktop that would break the horizontal row. */
@media (max-width: 767px) {
    body.landing-v2 .navbar-nav > li > a[href="/main/guest"],
    body.landing-v2 .navbar-nav > li > a[href="/account/get-main-view"],
    body.landing-v2 .navbar-nav > li.active > a.btn[href="/account/get-main-view"] {
        display: block !important;
        /* !important: Bootstrap sets width:auto on .btn, which left the LOGIN link
           half the width of its neighbours and wrapping to three lines. */
        width: 100% !important;
        /* something in the theme caps this anchor at max-width:50%, which is what
           actually held LOGIN to half the row - width alone could not beat it. */
        max-width: 100% !important;
        margin: 0 auto;
        padding: 10px 15px !important;
        text-align: center !important;
    }
    body.landing-v2 .navbar-nav > li { text-align: center; width: 100%; float: none !important; }
    /* main.css floats the list right; centred items need the float cleared. */
    body.landing-v2 .navbar-nav.pull-right { float: none !important; width: 100%; }
}

/* ---- 9. keep Chat/LOGIN on the same row as the other menu items ---------
   They are 14px where the siblings are 20px, so their line box is 41px tall
   against 50px and they sat lower in the row. Matching the line-height (not
   the font size, which you asked to stay at 14) lines the row back up. */
body.landing-v2 .navbar-nav > li > a[href="/main/guest"],
body.landing-v2 .navbar-nav > li > a[href="/account/get-main-view"],
body.landing-v2 .navbar-nav > li.active > a.btn[href="/account/get-main-view"] {
    line-height: 30px !important;
    padding: 10px 15px !important;
    /* the .btn rule also carries margin:5px 0 0 5px, which dropped LOGIN 5px
       below its neighbours. */
    margin: 0 !important;
}

/* ---- 10. stack the section boxes on small screens ----------------------
   The three heading boxes sit in col-md-4 / col-sm-4 / col-lg-4 with no
   col-xs-*, so Bootstrap keeps them three-across even at 375px: the column
   is 120px, .box65 takes 65% of that, and .box adds 40px of side padding -
   leaving room for roughly one word per line.

   This is not new (the same happens today on every page using these columns)
   but it is unreadable, so the landing page stacks them. Scoped to
   .maincontent so the navbar's own columns are untouched. */
@media (max-width: 767px) {
    /* These sections are built from real layout TABLES - each heading box sits
       in a <td class="col-md-4 ...">, so width and float can never stack them;
       a table cell shares its row no matter what width says. Turning the five
       single-row tables into blocks is the only thing that makes the cells
       stack, and it is the standard responsive-table treatment.

       All five tables inside .maincontent have the same shape (one row of
       col-* cells holding a .box), so this cannot catch a data table. */
    body.landing-v2 .maincontent table[class*="col-"],
    body.landing-v2 .maincontent table[class*="col-"] > tbody,
    body.landing-v2 .maincontent table[class*="col-"] > tbody > tr,
    body.landing-v2 .maincontent table[class*="col-"] > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
    body.landing-v2 .maincontent .box,
    body.landing-v2 .maincontent .box65 {
        width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ---- 11. section 1 corrections -----------------------------------------
   Three fixes after checking this section against the spec:

   a) "Exhilirating Massage for Body Mind And Soul" is BOTH the green text of
      item 2 and the Title of item 5, so it takes #228B22 together with
      12px/bold/Playfair. The blanket title rule earlier had turned it #840000.

   b) "California Massage Sanctuary" was only ever asked to change COLOUR.
      The content rule had also dropped it to Roboto 11px, which flattened the
      decorative script line into ordinary body text; its own font and size are
      left alone now.

   c) Item 4 asks for this section's text at size 12, where item 6 sets general
      content to 11. Both are honoured in their own scope: this paragraph is 12,
      everything else stays 11. */
body.landing-v2 .maincontent .border-title h1,
body.landing-v2 .maincontent .border-title h2,
body.landing-v2 .maincontent .border-title h3,
body.landing-v2 .maincontent .border-title h4 {
    color: #228B22 !important;
}

body.landing-v2 .maincontent .tag-line {
    /* colour only. It is excluded from the content rule above, so main.css
       keeps drawing it at 42px in the Tangerine script the view loads -
       inherit was no good here, the parent is Roboto 11 now. */
    color: #840000 !important;
}

body.landing-v2 .maincontent .font29,
body.landing-v2 .maincontent .font29 p,
body.landing-v2 .maincontent .font29 span {
    color: #840000 !important;
    font-size: 12px !important;
    font-family: "Roboto", Arial, sans-serif !important;
}

/* ---- 12. JOB VACANCIES heading -----------------------------------------
   The other section titles are <strong> inside .box, which the title rules
   already cover. This one is a bare <span> with no class, sitting in the first
   child div of the jobs box, so nothing matched it and it stayed 11px Roboto.
   Its colour was right only because the whole box is #840000. */
body.landing-v2 .maincontent .JobDivbox > div:first-of-type span,
body.landing-v2 .maincontent .JobDivbordrbg > div:first-of-type span {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    /* Purple, matching the two job titles below it. This rule is the one that
       decides the heading colour - it is more specific than section 27's, so
       changing it here rather than adding a longer selector there. */
    color: #b30af3 !important;
}

/* ---- 13. the actual source of the black bar ----------------------------
   Making .navbar transparent was not enough: an EMPTY <header class="secondary">
   sits behind it, 100px tall, painted #181015 with bg_header.jpg. That black
   band was what showed through the transparent navbar. It holds no content at
   all - its only job is drawing that strip - so on the landing page it is
   cleared and the cream page shows through, with the navbar's own soft shadow
   giving the menu its lift. */
/* #head.secondaryCustom is the signed-in layouts' version of this strip - same
   job, different class - so it is listed here too, otherwise admin, therapist
   and client pages keep the old black band. #head is an ID selector and would
   normally outrank this chain; !important is what settles it. */
body.landing-v2 header.secondary,
body.landing-v2 header.secondaryCustom,
body.landing-v2 #head.secondary,
body.landing-v2 #head.secondaryCustom {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    /* The shadow lives here rather than on .navbar: something in the theme
       neutralises box-shadow on the navbar itself (even an inline !important
       computes to zeros). This element occupies the same 100px band directly
       behind the menu, so the lift reads identically. */
    box-shadow: 0 3px 12px rgba(132,0,0,.20) !important;
}

/* ---- 14. section 1 revisions from the client thread ---------------------
   Sizes here are in PT because the request said "12 point" / "13 point"
   literally. 12pt renders ~16px and 13pt ~17px, so this section reads larger
   than the 11-12px used elsewhere - which is what was being asked for each
   time this block was circled.

   The title and the body swap colours: the title takes #840000 ("13 point
   purple") and the body copy becomes green and bold ("Green bold"). */
body.landing-v2 .maincontent .border-title h1,
body.landing-v2 .maincontent .border-title h2,
body.landing-v2 .maincontent .border-title h3,
body.landing-v2 .maincontent .border-title h4 {
    color: #840000 !important;
    font-size: 13pt !important;
    font-weight: 700 !important;
    font-family: "Playfair Display", Georgia, serif !important;
}

body.landing-v2 .maincontent .font29,
body.landing-v2 .maincontent .font29 p,
body.landing-v2 .maincontent .font29 span {
    color: #228B22 !important;
    font-size: 12pt !important;
    font-weight: 700 !important;
    font-family: "Roboto", Arial, sans-serif !important;
}

/* ---- 15. the dropped-down menu: centred, and no background --------------
   The panel is not full width - it sits beside the floated logo, starting
   ~286px in, so items centred inside it still looked pushed to the right.
   clear:both drops it below the brand and full width, which puts its centre
   on the screen's centre.

   The maroon fill is removed here as requested; the bar still goes solid
   #840000 once scrolled, which is what keeps the links readable over content. */
body.landing-v2 .navbar .navbar-collapse.show,
body.landing-v2 .navbar .navbar-collapse.collapsing {
    background-image: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav,
body.landing-v2 .navbar .navbar-collapse.collapsing .navbar-nav {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
}
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li,
body.landing-v2 .navbar .navbar-collapse.collapsing .navbar-nav > li {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
}
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a,
body.landing-v2 .navbar .navbar-collapse.collapsing .navbar-nav > li > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* ---- 16. solid bar on scroll, painted on the band behind the menu -------
   .navbar itself will not take a background here (nor a box-shadow) - the rule
   matches, is !important and more specific, and still computes to transparent.
   header.secondary is the 100px strip directly behind the menu and does accept
   it, so landing.js flags the BODY and the strip is filled from there. */
body.landing-v2.nav-scrolled header.secondary,
body.landing-v2.nav-scrolled header.secondaryCustom,
body.landing-v2.nav-scrolled #head.secondary,
body.landing-v2.nav-scrolled #head.secondaryCustom {
    /* A lift of the page cream, held at 68% over a blur: light enough to read
       as "almost transparent" while the blur - not opacity - is what keeps the
       links legible over whatever photograph is scrolling underneath. */
    background: var(--spa-glass) !important;
    -webkit-backdrop-filter: var(--spa-glass-blur) !important;
    backdrop-filter: var(--spa-glass-blur) !important;
    box-shadow: var(--spa-glass-shadow) !important;
}

/* ---- 17. light panel behind the dropped menu ---------------------------
   Fully transparent left the links sitting on top of the hero photographs and
   they could not be read. A lifted cream held at 68% over a blur: it looks all but
   transparent, but the blur behind it is what actually makes the links
   readable, rather than a heavy opaque slab. */
body.landing-v2 .navbar .navbar-collapse.show,
body.landing-v2 .navbar .navbar-collapse.collapsing {
    background: var(--spa-glass) !important;
    -webkit-backdrop-filter: var(--spa-glass-blur) !important;
    backdrop-filter: var(--spa-glass-blur) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10) !important;
    border-bottom: 1px solid rgba(132, 0, 0, 0.12) !important;
}

/* Menu links: the site's original purple, bold.
   These were briefly maroon - that was only ever to stop them falling through
   to the browser's default visited colour on the light panel. #b30af3 is the
   real brand purple and is what was asked for, so it is set deliberately here
   rather than left to inheritance. Bold applies at every breakpoint, so the
   desktop row and the dropped panel match. */
body.landing-v2 .navbar-nav > li > a,
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a,
body.landing-v2 .navbar .navbar-collapse.collapsing .navbar-nav > li > a,
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a:visited,
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a:focus {
    color: #b30af3 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a:hover,
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li.active > a {
    color: #228B22 !important;
}

/* ---- 18. the hamburger itself ------------------------------------------
   The three bars are 2px purple lines with no button face behind them. That
   worked while the strip they sat on was near-black; now that the strip is
   the page cream they read as almost nothing, and the menu looks missing.
   Give it a real face - cream, purple border, purple bars - so it is an
   obvious control in both the resting and the scrolled state. */
body.landing-v2 .navbar .navbar-toggle {
    /* No display rule here on purpose. An unconditional
       "display: block !important" was beating the theme's own breakpoint, so
       the hamburger appeared on desktop alongside the full horizontal menu.
       Visibility stays the theme's job; this rule only restyles the button. */
    background: rgba(245, 240, 232, 0.85) !important;
    border: 1.5px solid #b30af3 !important;
    border-radius: 6px !important;
    padding: 8px 9px !important;
    margin: 12px 14px 12px 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    opacity: 1 !important;
}
body.landing-v2 .navbar .navbar-toggle .icon-bar {
    background-color: #b30af3 !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 2px !important;
    display: block !important;
}
/* the middle bar needs the gap or the three read as one block */
body.landing-v2 .navbar .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px !important;
}
body.landing-v2 .navbar .navbar-toggle:hover,
body.landing-v2 .navbar .navbar-toggle:focus {
    background-color: #b30af3 !important;
}
body.landing-v2 .navbar .navbar-toggle:hover .icon-bar,
body.landing-v2 .navbar .navbar-toggle:focus .icon-bar {
    background-color: #E0D5C1 !important;
}

/* ---- 19. stop the decorative divider blowing the page open --------------
   The theme has `.row > img { max-width: none; width: auto; }`, which beats
   Bootstrap's `img { max-width: 100% }`. The gold divider is a direct child
   of a .row, so on a phone it renders at its full 1048px inside a ~390px
   column - overhanging BOTH edges (left -317, right 731 at a 414px viewport).

   That single image is what makes the page look broken at small widths: it
   stretches the document to ~731px, so the 390px content column no longer
   fills the screen and everything reads as squashed and clipped. Putting the
   cap back on images inside a row fixes the page, not just the divider.

   Pre-existing, not introduced here - it measures identically with the
   landing-v2 class removed - so it is corrected on this page only. */
body.landing-v2 .row > img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* ---- 20. "Chat with Us" matches the LOGIN item -------------------------
   Section 3 already paints BOTH of these #54FF36 - they were a matched pair
   by design. What broke the pair was section 17: it repaints open-menu links
   maroon, and LOGIN escaped only because its <li> carries .active, which the
   companion rule sends to #228B22. Chat had no .active, so it went maroon.

   So the mismatch only ever existed inside the open panel, and that is the
   only place this corrects. Scoping it here keeps #54FF36 - an explicit
   palette item - intact on desktop, where the pair already matches. */
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a[href="/main/guest"],
body.landing-v2 .navbar .navbar-collapse.collapsing .navbar-nav > li > a[href="/main/guest"] {
    color: #228B22 !important;
    font-weight: 700 !important;
}
body.landing-v2 .navbar .navbar-collapse.show .navbar-nav > li > a[href="/main/guest"]:hover {
    color: #840000 !important;
}


/* ---- 23. hero tagline in purple ----------------------------------------
   "Exhilirating Massage for Body Mind And Soul" - section 5 paints every
   .border-title heading #840000, and this one is asked for in purple.

   #b30af3 is the site's own purple: the theme class `colb30af3` is named
   after it, so this is the existing brand purple rather than a new colour
   invented for one heading. Only the colour is overridden - the Playfair
   face, size and weight from section 5 still apply.

   There is exactly one <h3> inside a .border-title on this page, so this
   cannot reach any other heading. */
body.landing-v2 .maincontent .border-title h3 {
    color: #b30af3 !important;
}


/* ---- 24. bullets: purple, and sitting on their own line -----------------
   Two separate faults were visible:

   1. Colour. ::marker could not be recoloured in the client's browser - that
      was tried three ways and all three shipped without effect - so the real
      marker is switched off and the dot is drawn as a ::before we control.

   Scoped to .pst, the wrapper the real content lists use. Without that it
   also hit ul.rslides - the image carousel is built from <li> elements, so a
   stray dot appeared beside the slideshow.

   2. Position. The browser draws its marker using the <li>'s OWN font-size
      and line box. The text sits in a child at a different size, so the dot
      came out oversized and floating above the words. Inheriting both
      font-size and line-height puts it on the same line as the text it
      belongs to, at the same scale. */
body.landing-v2 .maincontent .pst ul {
    list-style: none !important;
    padding-left: 26px;
}
body.landing-v2 .maincontent .pst ul > li {
    list-style: none !important;
    position: relative;
}
body.landing-v2 .maincontent .pst ul > li::before {
    content: "\2022";
    position: absolute;
    left: -17px;
    top: 0;
    /* the two that fix the alignment */
    font-size: inherit;
    line-height: inherit;
    /* Bigger dot WITHOUT touching font-size: growing the font would change the
       glyph's baseline inside the line box and push it off the text line again.
       Scaling about the centre leaves the box - and therefore the alignment -
       exactly where it was, and only the drawn dot gets larger. */
    transform: scale(2.8);
    transform-origin: center center;
    color: #b30af3;
}

/* The carousel is a <ul class="rslides"> of <li> slides, and the theme leaves
   its markers on - that is the small dot that has always sat beside the
   slideshow, separate from the purple one this file was adding. Since a
   slideshow has no business showing bullets, it is switched off here too. */
body.landing-v2 .maincontent ul.rslides,
body.landing-v2 .maincontent ul.rslides > li {
    list-style: none !important;
}

/* ---- 25. all green copy matches the top paragraph ----------------------
   The reference is <span class="font29"> at the top of the page: Roboto,
   16px, weight 700, #228B22. Everything else green sat at 13px/400, so the
   page had two different greens by weight and size.

   Measured on the page: 34 green elements, 1 of them .font29 (the reference)
   and 33 under .col81d742. Matching the second group to the first is what
   makes the green read as one voice.

   This supersedes the earlier 13px instruction for green text - 13px was
   asked for before the top paragraph was named as the thing to match. */
body.landing-v2 .maincontent .col81d742,
body.landing-v2 .maincontent .col81d742 p,
body.landing-v2 .maincontent .col81d742 span,
body.landing-v2 .maincontent .col81d742 li,
body.landing-v2 .maincontent .col81d742 a,
body.landing-v2 .maincontent li.col81d742 {
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* ---- 26. "Most Popular Services" links match the green copy -------------
   These two are marked up as <a class="colb30af3"> - the same class as the
   inline links inside the paragraphs ("massage Bangalore", "www.harbin.org"
   and so on), which stay maroon. So the class alone cannot be the hook.

   Scoping to `.pst ul > li > a` picks out exactly the two service-list
   links and nothing else on the page, and brings them to the same
   Roboto 16px/700 #228B22 as the rest of the green copy. */
body.landing-v2 .maincontent .pst ul > li > a,
body.landing-v2 .maincontent .pst ul > li > a:visited,
body.landing-v2 .maincontent .pst ul > li > a:focus {
    color: #228B22 !important;
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
body.landing-v2 .maincontent .pst ul > li > a:hover {
    color: #840000 !important;
}

/* ---- 27. Job vacancies box --------------------------------------------
   Markup is a stack of <div><span>...</span></div>, with the two job titles
   wrapped in <em>. So there is no class to hook: the heading is simply the
   first span in the box, and the titles are the only <em> elements.

   Section 6 paints every span in this box #840000, so both rules below need
   to outrank it - the heading rule does so with :first-child, and <em> is
   not matched by that rule at all.

   Body copy is brought to the same Roboto 16px/700 #228B22 as the rest of
   the green text on the page; the heading and both numbered titles go
   purple. Both titles are treated the same way, since "1) SPA Therapist"
   and "2) Home and Office Assistant" are the same kind of thing. */
body.landing-v2 .JobDivbox > div > span {
    color: #228B22 !important;
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* The heading's colour is set in section 12, which outranks this; <em> is
   not matched there at all, so the titles are handled here. */
body.landing-v2 .JobDivbox em {
    color: #b30af3 !important;
    font-weight: 700 !important;
}

/* ---- 28. desktop menu must stay on one line ---------------------------
   The nine items at 20px need ~1136px of row, and the row starts to the
   right of the logo. Below roughly 1265px the last item ("LOGIN/ View
   Profiles/ BOOK Appt") wraps to a second line, which pushes the fixed
   navbar from 134px to 184px tall - and the music control, pinned below the
   header, then lands on top of the wrapped link.

   The hamburger only takes over at 767px, so the whole 768-1265 band was
   showing a broken two-row menu. Rather than move the breakpoint and change
   how the site behaves on tablets, the menu is stepped down so it fits.

   Sizes measured, not guessed - at each band's NARROW end:
     768px   14px/6px  -> one row, right edge 753 of 768
     1024px  16px/8px  -> one row
     1280px  20px/15px -> one row, right edge 1265 of 1280   */
@media (min-width: 768px) and (max-width: 1279px) {
    body.landing-v2 .navbar-nav > li > a,
    body.landing-v2 .navbar-nav > li > a[href="/main/guest"],
    body.landing-v2 .navbar-nav > li > a[href="/account/get-main-view"],
    body.landing-v2 .navbar-nav > li.active > a.btn[href="/account/get-main-view"] {
        font-size: 16px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.landing-v2 .navbar-nav > li > a,
    body.landing-v2 .navbar-nav > li > a[href="/main/guest"],
    body.landing-v2 .navbar-nav > li > a[href="/account/get-main-view"],
    body.landing-v2 .navbar-nav > li.active > a.btn[href="/account/get-main-view"] {
        font-size: 14px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ---- 29. section headings on the inner pages --------------------------
   Pages like Massage Styles carry bare <h3> headings ("Type Of Massage",
   "Hours and Charges") with no class, so none of the title rules reached
   them and they kept the theme's light green #81d742.

   They now take #840000 - the same colour as "California Massage Sanctuary"
   (.tag-line) on the home page, which is what was asked for. Only the colour
   changes; the Patrick Hand face and size stay as they were.

   Headings inside .border-title are NOT affected: section 23 targets those
   with a longer selector and keeps them purple. Modal titles sit outside
   .maincontent, so dialogs are untouched. */
body.landing-v2 .maincontent h1,
body.landing-v2 .maincontent h2,
body.landing-v2 .maincontent h3,
body.landing-v2 .maincontent h4 {
    color: #840000 !important;
}

/* ---- 30. form panels: drop the maroon card ----------------------------
   Login, Register, OTP/verification, Forgot password and the guest chat all
   wrap their form in .panel, which the theme paints #6E0202. Against the
   cream page that card now reads as a dark slab, and the heading inside it
   (#840000 from section 29) sat at 1.18:1 contrast - effectively invisible.

   Rather than special-case the heading colour on each of those pages, the
   maroon goes: the panel becomes a light card on the cream page, with the
   palette maroon as its border. Everything inside it - heading, labels,
   asterisks, the "Forgot password?" link - is mid-to-dark already, so every
   one of them gains contrast rather than losing it.

   Measured on /account/login before the change: heading 1.18:1 (invisible),
   "Forgot password?" ~2.5:1. Both are comfortably readable on the light card. */
body.landing-v2 .panel,
body.landing-v2 .panel-default {
    background: rgba(245, 240, 232, 0.92) !important;
    background-image: none !important;
    border: 2px solid #840000 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(132, 0, 0, 0.12) !important;
}
body.landing-v2 .panel > .panel-body,
body.landing-v2 .panel > .panel-heading,
body.landing-v2 .panel > .panel-footer {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(132, 0, 0, 0.25) !important;
}

/* ---- 31. gold helper text inside the form panels -----------------------
   The theme carries a bare `span { color: #a28321 }`, so any span without a
   class renders gold. That was fine on the maroon card; on the light card of
   section 30 it drops to 1.25:1 - the "Verification Code will be sent to
   email and Mobile" line on Register was effectively invisible.

   Spans carrying a palette class are left alone: .text-danger keeps its red
   asterisk, .gspan its green. Everything else in a panel goes maroon. */
body.landing-v2 .panel span:not(.text-danger):not(.gspan):not(.col81d742):not(.colb30af3),
body.landing-v2 .panel small,
body.landing-v2 .panel p {
    color: #840000 !important;
}

/* ---- 32. social share icons sit in a row ------------------------------
   Each icon lives in its own <div class="col-md-3">, inside a flex .row.
   Below the md breakpoint those columns go full width, so the four wrapped
   into a vertical column - which is why the icons stacked on a phone while
   looking fine on desktop. Making the wrapper inline-block was not enough:
   the COLUMN is what takes the whole line, not the wrapper inside it.

   So the columns that hold a share icon are told to size to their content
   instead, and the row centres them. :has() is used to pick out exactly those
   columns without touching any other .col-md-3 on the page. */
body.landing-v2 .row:has(> [class*="col-"] > .social-sharing) {
    justify-content: center;
    flex-wrap: nowrap;
}
body.landing-v2 .row > [class*="col-"]:has(> .social-sharing) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
body.landing-v2 .social-sharing {
    display: inline-block !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* ---- 33. popups -------------------------------------------------------
   Modals were still the old maroon card: .modal-content #6E0202, a green
   #81d742 title, and body text at the browser default near-black - which on
   that maroon sits at roughly 2:1 and is the same fault the form panels had.

   Same treatment as section 30, so a dialog reads as part of the page: light
   card, palette maroon border, purple title. The action button keeps its own
   orange - it is legible as it is and is the one thing users look for. */
body.landing-v2 .modal-content {
    background-color: rgba(245, 240, 232, 0.98) !important;
    background-image: none !important;
    border: 2px solid #840000 !important;
    border-radius: 10px !important;
}
body.landing-v2 .modal-header,
body.landing-v2 .modal-body,
body.landing-v2 .modal-footer {
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(132, 0, 0, 0.25) !important;
}
body.landing-v2 .modal-title {
    color: #b30af3 !important;
    font-weight: 700 !important;
}
/* Same reason as section 31: a bare `span { color:#a28321 }` in the theme
   would leave unclassed text gold and invisible on the light card. */
body.landing-v2 .modal-body,
body.landing-v2 .modal-body p,
body.landing-v2 .modal-body span:not(.text-danger):not(.gspan),
body.landing-v2 .modal-body label,
body.landing-v2 .modal-footer span:not(.text-danger):not(.gspan) {
    color: #840000 !important;
}
body.landing-v2 .modal-header .close,
body.landing-v2 .modal-header .btn-close {
    color: #840000 !important;
    opacity: 1 !important;
}

/* ---- 34. signed-in pages: width, readable text, aligned menu -----------
   body.spa-app is set only by _LayoutAdmin/_LayoutTherapist/_LayoutUser, so
   nothing here can reach the public pages.

   1. Width is left alone. The .container cap was lifted here for a while and
      reverted on request, so admin, therapist and client pages keep the
      centred Bootstrap width they have always had.

   2. Text. The theme paints spans #f8d66a and table headers #81d742, which
      worked on the old maroon page and drops to roughly 1.3:1 and 2.5:1 on
      the cream one - the pale rows in the therapist list. Content text goes
      to the palette maroon instead.

      #spaGlobalLoader is excluded on purpose: it is a dark overlay with gold
      text on maroon, so recolouring it would make it invisible.

   3. The Chat / My Profile item carries class="btn", so Bootstrap draws it as
      a raised box among flat links - that is the one sitting out of line in
      the menu. The chrome is stripped so it matches its neighbours. */
body.spa-app .container td,
body.spa-app .container th,
body.spa-app .container label,
body.spa-app .container p,
body.spa-app .container strong,
body.spa-app .container span:not(.text-danger):not(.gspan):not(.icon-bar):not(.caret) {
    /* #a28321 as asked - the darker gold. It replaces #f8d66a, which measured
       1.25:1 on the cream page. See the note in section 35 about its own
       contrast. */
    color: #a28321 !important;
}

/* The therapist layout's .box is gold-on-transparent, which was fine on the
   old maroon page and washes out on cream. */
body.spa-app .box,
body.spa-app .box.effect1 strong {
    color: #a28321 !important;
    border-color: #a28321 !important;
}

/* Never touch the loader overlay - gold on maroon by design. */
body.spa-app #spaGlobalLoader,
body.spa-app #spaGlobalLoader * {
    color: #a28321 !important;
}

body.spa-app .navbar-nav > li > a.btn,
body.spa-app .navbar-nav > li.active > a.btn {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 15px !important;
    line-height: 20px !important;
    vertical-align: baseline !important;
}

/* ---- 35. signed-in forms use the width they now have -------------------
   The add/edit forms sit in a .col-md-4 and stack every field vertically, so
   on a wide screen the Add New Therapist page is a ~290px ribbon down the
   left with the rest of the page empty - 26 fields, one per row.

   Now that .container is full width there is room to lay them out. The
   column holding such a form goes full width, and the field blocks flow into
   as many columns as fit. auto-fit + minmax means it collapses back to one
   column on a phone with no separate breakpoint.

   The grid only applies where the blocks hold a real form control. Read-only
   detail panels - the therapist Appointment Request page, for one - use the
   same .top-margin blocks for label+value pairs and must stay in a single
   vertical column.

   :has() keeps this to panels that actually contain stacked fields. The
   :not(:has(table)) guard matters: the data-table pages wrap their scroll
   container in <div class="top-margin table-responsive Xscroll">, so without
   it those panels were being gridded too and the table was squeezed into a
   250px column with the rest of the panel left empty. */
body.spa-app [class*="col-md-"]:has(> .panel .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea)),
body.spa-app [class*="col-sm-"]:has(> .panel .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea)) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2px 26px;
    align-items: start;
}

/* Anything that is not a field block - the submit row, hidden inputs, a
   script tag's stray whitespace - spans the full grid so it does not get
   stranded in a column of its own. */
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) > *:not(.top-margin) {
    grid-column: 1 / -1;
}

/* Inputs should fill their cell rather than keep a fixed pixel width. */
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) .form-control,
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) input[type="text"],
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) input[type="number"],
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) input[type="email"],
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) input[type="password"],
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) select,
body.spa-app .panel-body:not(:has(table)):has(> .top-margin input:not([type="hidden"]), > .top-margin select, > .top-margin textarea) textarea {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---- 36. signed-in header: one shadow, and room under it ---------------
   Measured on the admin dashboard: the fixed navbar sits 0-71 and casts
   rgba(132,0,0,.18) 0 2px 10px, while #head.secondaryCustom sits 0-70 and
   casts rgba(132,0,0,.20) 0 3px 12px. Two maroon shadows overlapping on the
   cream page are what shows up as that pink band under the header.

   The strip's shadow is dropped here. It exists for the PUBLIC pages, where
   the navbar itself refuses box-shadow and the strip has to carry it; the
   signed-in navbar takes its own shadow, so one is enough.

   The content container also started at y=70 against a 71px navbar - flush,
   with nothing between the bar and the first heading. `> .container` picks
   out the content one only; the navbar has a .container of its own and must
   not be pushed down. */
body.spa-app header.secondaryCustom,
body.spa-app #head.secondaryCustom {
    box-shadow: none !important;
}

body.spa-app > .container {
    padding-top: 22px;
}

/* ---- 37. scrolled header on signed-in pages: no blur -------------------
   The frosted treatment puts backdrop-filter: blur(14px) on the strip behind
   the menu. On the public pages that strip sits behind page content and the
   effect is the point. On the signed-in layouts the strip is #head, it spans
   0-70, and the logo sits at 4-58 - the two overlap, and the logo comes out
   looking washed as soon as the page scrolls.

   The blur is dropped here and the background made near-opaque instead. The
   bar still reads as a solid light surface and the links stay legible; only
   the blur layer over the logo goes. The public pages keep the frosting. */
body.spa-app.nav-scrolled header.secondary,
body.spa-app.nav-scrolled header.secondaryCustom,
body.spa-app.nav-scrolled #head.secondary,
body.spa-app.nav-scrolled #head.secondaryCustom {
    background: rgba(245, 240, 232, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.spa-app .navbar.navbar-inverse.nav-solid,
body.spa-app .navbar.navbar-inverseCustom.nav-solid,
body.spa-app .navbar.navbar-inverse.nav-solid .navbar-collapse {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---- 38. signed-in pages: ONE header band, not two --------------------
   #head.secondaryCustom is an empty 70px strip that sits at 0-70, exactly
   under the fixed navbar at 0-71. Measured: they overlap. Its only purpose
   was to draw the old black band and to reserve space below the fixed bar.

   Painting it was what produced two header bands and, once it took a
   background on scroll, what washed the logo out - the strip covers the
   logo's box. The navbar cannot carry the background itself: setting
   background-color on it with !important still computes to transparent on
   these layouts, which is why the strip was being used at all.

   So the strip is collapsed to nothing and the content takes over the job of
   clearing the fixed navbar. One band, nothing over the logo.

   Note this is a spacer swap, not just a colour change: removing the height
   without adding the padding would slide the content under the navbar. */
body.spa-app header.secondaryCustom,
body.spa-app #head.secondaryCustom,
body.spa-app.nav-scrolled header.secondaryCustom,
body.spa-app.nav-scrolled #head.secondaryCustom {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 71px of navbar + 22px of breathing room, replacing the strip's 70px. */
body.spa-app > .container {
    padding-top: 93px;
}


/* ===========================================================================
   39. SIGNED-IN NAVBAR - self-contained component
   ===========================================================================
   Replaces what were sections 39, 40 and 41. Those were three separate sets of
   overrides that ended up fighting each other and the theme, and between them
   produced: a bar wider than the viewport, a logo on its own row, a menu that
   wrapped into a column on a laptop, and a dropdown panel that opened
   off-screen to the right.

   The root cause is that these layouts carry Bootstrap 3 MARKUP
   (.navbar-header / .navbar-collapse / floated .navbar-nav) while loading
   Bootstrap 5 CSS, plus a theme that re-adds Bootstrap 3 rules on top. Rather
   than keep out-specifying that pile one property at a time, this block takes
   ownership of the whole bar for body.spa-app and states every property it
   depends on.

   Bootstrap's collapse JS is still what opens and closes the panel - only the
   .show / .in / .collapsing classes are read here, never fought.

   Layout:
     >=1200px   one row: [ logo ][ flexible gap ][ menu ]
     <1200px    logo left, hamburger right, panel drops full width and centred
   1200 rather than the theme's 768 because the therapist menu is six items
   with long labels and needs ~1140px before the logo is allowed for.
   =========================================================================== */

/* ---- the bar itself ---- */
body.spa-app .navbar.navbar-inverse,
body.spa-app .navbar.navbar-inverseCustom {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* No horizontal padding on the BAR: the dropdown panel is a child, and
       padding here would inset it so it never reaches the screen edges. The
       header carries the gutter instead. */
    padding: 0 !important;
    min-height: 71px;
}

/* The inner .container must not impose its own width - as a flex item beside
   the logo, width:100% made the row total 100% + logo and overflow the page. */
body.spa-app .navbar > .container {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- brand ---- */
body.spa-app .navbar .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    float: none !important;
    padding: 0 12px;
}

body.spa-app .navbar .navbar-brand {
    /* Bootstrap 3 pulls the brand out with a -15px left margin. */
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    float: none !important;
}

body.spa-app .navbar .navbar-brand > img.logoImage {
    display: block;
    max-height: 52px;
    width: auto;
}

/* ---- menu ---- */
body.spa-app .navbar .navbar-nav {
    float: none !important;
    margin: 0 !important;
}

body.spa-app .navbar .navbar-nav > li {
    float: none !important;
}

/* =================== 1200px and up: single row =================== */
@media (min-width: 1200px) {
    body.spa-app .navbar .navbar-header {
        flex: 0 0 auto;
    }

    /* The collapse is the flexible middle; the menu is pushed to its end. */
    body.spa-app .navbar > .container > .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: center;
        height: auto !important;
        overflow: visible !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* !important: the theme forces this list back to display:block, so the
       row would silently become a column of six. */
    body.spa-app .navbar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        flex-wrap: nowrap;
    }

    body.spa-app .navbar .navbar-nav > li {
        width: auto !important;
        flex: 0 0 auto;
    }

    body.spa-app .navbar .navbar-nav > li > a {
        white-space: nowrap;
    }

    body.spa-app .navbar .navbar-toggle {
        display: none !important;
    }
}

/* =================== below 1200px: hamburger =================== */
@media (max-width: 1199px) {
    /* main.css pins .navbar-inverseCustom to height:71px. With the panel open
       the container wraps to two lines - header 44px + panel 327px - and a
       wrapping flex container CENTRES its lines in the box it has. In a 71px
       box that pushed the header to top:-105, i.e. off-screen: the logo and
       hamburger vanished the moment the menu opened.

       Letting the bar grow, and stacking the lines from the top rather than
       centring them, keeps the header where it belongs. */
    body.spa-app .navbar.navbar-inverse,
    body.spa-app .navbar.navbar-inverseCustom {
        height: auto !important;
        min-height: 71px !important;
        align-items: flex-start;
        align-content: flex-start;
    }

    body.spa-app .navbar > .container {
        align-content: flex-start;
        align-items: center;
    }

    body.spa-app .navbar .navbar-header {
        min-height: 71px;
    }

    body.spa-app .navbar .navbar-toggle {
        display: block !important;
        order: 2;
        margin: 0 !important;
    }

    body.spa-app .navbar .navbar-header {
        flex: 1 1 auto;
        width: 100%;
        /* border-box or the 12px gutter is added ON TOP of 100% and the toggle
           ends up a few px past the right edge. */
        box-sizing: border-box;
    }

    /* Full width on its own line under the bar. `order` puts it after the
       header even though the markup nests it in the same container. */
    body.spa-app .navbar > .container > .navbar-collapse {
        order: 3;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(245, 240, 232, 0.97) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    }

    /* Hidden when closed. :not(.collapsing) is essential - Bootstrap adds that
       class for the duration of the animation and it carries neither .show nor
       .in, so without the exclusion the panel is force-hidden mid-transition,
       the animation never finishes, .show is never added and the hamburger
       appears dead. Height/overflow are left to Bootstrap, which sets them
       inline while animating. */
    body.spa-app .navbar > .container > .navbar-collapse.collapse:not(.show):not(.in):not(.collapsing) {
        display: none !important;
    }

    body.spa-app .navbar > .container > .navbar-collapse.show,
    body.spa-app .navbar > .container > .navbar-collapse.in,
    body.spa-app .navbar > .container > .navbar-collapse.collapsing {
        display: block !important;
    }

    body.spa-app .navbar .navbar-nav {
        display: block;
        width: 100% !important;
        float: none !important;
    }

    body.spa-app .navbar .navbar-nav > li {
        width: 100% !important;
        text-align: center !important;
    }

    body.spa-app .navbar .navbar-nav > li > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 8px !important;
    }
}