/* ===========================================================================
   California Spa - page components
   Brings the existing WordPress pages to the .NET design.

   WHY THIS IS CSS-ONLY, AND NOT A REPLACEMENT PAGE
   The WordPress home page already has the .NET layout - the .NET page was
   ported FROM it. Both use the same class vocabulary: .box, .effect1,
   .pst, .bordrbg, .referr_fee, and the colour classes .yellowcol, .pink,
   .green. Only the palette and type scale differ.

   So nothing here rewrites content. Every rule targets a class the page
   already carries, which means all the extra WordPress copy - the "Welcome
   To California Spa Massage in Banglore" heading, the longer wording, the
   shortcode sections - stays exactly as it is.

   .NET class          ->  WordPress class
     .col81d742 (green)    .yellowcol, .yellowcolline, .green
     .colb30af3 (purple)   .pink (NOT .pinkpst - see section 2)
     .box .effect1         .box .effect1          (same)
     .JobDivbordrbg        .bordrbg
     .pst                  .pst                   (same)

   Palette tokens come from californiaspa-theme.css, which loads first.
   =========================================================================== */

/* ---- 1. green body copy ------------------------------------------------
   >>> SPECIFICITY NOTE, PLEASE DO NOT "SIMPLIFY" THIS <<<
   The home page's own content starts with an inline <style> block:

       .yellowcol { color: #81d742; }
       .yellowcolline { color: #81d742; line-height: 1.5; }

   That block sits in the BODY, so it renders after this stylesheet. At
   equal specificity the later rule wins, and a plain `.yellowcol {...}`
   here would silently lose. Prefixing with `body ` raises specificity from
   (0,1,0) to (0,1,1) and takes it cleanly - no !important needed. */
body .yellowcol,
body .yellowcolline,
body .green,
body .pstlelf,
body .pst {
    color: var(--spa-green);
    font-family: var(--spa-font-body);
    font-size: var(--spa-size-body);
    font-weight: 700;
    line-height: 28px;
}

/* Links inside the copy blocks take the purple accent.

   Scoped to .pst / .pstlelf on purpose. Every content link on the site
   sits inside one of those two - checked against the rendered pages - so
   this cannot reach the main menu, the footer menu or the social icons,
   all of which live outside them. A blanket `#main a` would have hit the
   social sprite links and repainted them. */
body .pst a,
body .pstlelf a,
body .pst a strong,
body .pstlelf a strong {
    color: var(--spa-purple);
    font-weight: 700;
}

body .pst a:hover,
body .pstlelf a:hover {
    color: var(--spa-maroon);
    text-decoration: underline;
}

/* Links that are a LIST ITEM in their own right - "Female Massage
   Bangalore", "Home Massage Bangalore" under Most Popular Services - take
   the body green instead, so a list of services reads as continuous copy
   rather than a row of purple accents.

   Inline links inside prose (www.harbin.org, www.esalen.org, the
   "massage Bangalore" mentions) stay purple: there the purple is what
   marks them out as links mid-sentence. A list item does not need that -
   it is already visually separated by its own bullet and line.

   (0,1,4) beats the (0,1,2) rule above regardless of source order. */
body .pst ul li a,
body .pstlelf ul li a,
body .pst ul li a strong,
body .pstlelf ul li a strong {
    color: var(--spa-green);
}

body .pst ul li a:hover,
body .pstlelf ul li a:hover {
    color: var(--spa-purple);
    text-decoration: underline;
}

/* The same applies to anything nested inside those blocks - the theme and
   the editor both wrap copy in <strong>, <div> and <p>. */
body .yellowcol strong,
body .yellowcol p,
body .yellowcol div,
body .yellowcolline strong,
body .pst > strong,
body .pst > p,
body .pst li {
    color: var(--spa-green);
    font-family: var(--spa-font-body);
    font-size: var(--spa-size-body);
    font-weight: 700;
}

/* ---- 1c. legacy colours written into the page as inline styles ---------
   >>> THE ONLY !important IN THIS FILE, AND IT IS UNAVOIDABLE <<<

   Some paragraphs carry the colour in a style ATTRIBUTE, e.g. on
   /types-of-massage-bangalore/:

       <p style="font-size:29px; font-weight:599; color:#f8d66a; ...">

   An inline style beats every stylesheet rule regardless of specificity.
   `!important` is the only thing that overrides it, so it is used here and
   nowhere else.

   Both legacy colours are caught:
     #f8d66a - measures 1.02:1 on the cream page. Effectively invisible;
               this is the "text not showing" case.
     #81d742 - the old bright green the .NET site replaced with #228B22.

   The attribute substring selector matches only elements whose inline
   style actually names one of those colours, so nothing else is touched.

   NOTE: this is a display-level patch. The colours are still in the page
   content in the database (3 published pages). If you would rather clean
   them out properly, say so and I will write a SQL script the same way as
   the vacancy removal - then this rule can be deleted. */
[style*="#f8d66a"], [style*="#F8D66A"],
[style*="#81d742"], [style*="#81D742"] {
    color: var(--spa-green) !important;
}

/* ---- 1d. h3-h6 are running text on this site, not headings -------------
   The pages were authored with heading tags used for body copy. Measured
   on the real pages:

     Jobs         H2 "Training Arrangements"    21 chars   a real heading
                  H3 "California Spa has its.."  973 chars  body copy
                  H3 "Our Basic work require.."  1289 chars body copy
     Testimonials H2 "SN", "CG"                  2 chars    the initials
                  H3 "The massage services ar.." 200+ chars a testimonial

   The pattern is consistent: h1 and h2 are headings, h3 through h6 carry
   paragraphs. So h3-h6 inside the content get the body treatment - green
   Roboto 16px - which is what the .NET site shows, and what was asked for:
   maroon headings, green text.

   Scoped to #main, so footer and header headings are untouched.

   KNOWN EXCEPTION: "SPA Job Prospects in Bangalore" on the Jobs page is a
   genuine short heading marked up as h3, so it goes green with the rest.
   Fixing that properly means changing it to an h2 in the page editor - it
   cannot be told apart from body copy in CSS. */
body #main h3,
body #main h4,
body #main h5,
body #main h6,
body #main h3 strong,
body #main h4 strong,
body #main h5 strong,
body #main h6 strong {
    color: var(--spa-green);
    font-family: var(--spa-font-body);
    font-size: var(--spa-size-body);
    font-weight: 700;
    line-height: 28px;
}

/* Real headings that happen to use those tags keep the heading treatment.
   Both selectors are (1,1,2), which beats the (1,0,2) rule above. */
body #main .border-title h1,
body #main .border-title h2,
body #main .border-title h3,
body #main .border-title h1 em,
body #main .border-title h2 em,
body #main .border-title h3 em,
body #main .widget h3,
body #main h3.widgettitle,
body #main .widget h4 {
    color: var(--spa-maroon);
    font-family: var(--spa-font-display);
    font-size: 26px;
    line-height: 1.3;
    font-style: normal;
}

@media (max-width: 767px) {
    body #main .border-title h1,
    body #main .border-title h2,
    body #main .border-title h3,
    body #main .border-title h1 em,
    body #main .border-title h2 em,
    body #main .border-title h3 em {
        font-size: 21px;
    }
}

/* ---- 2. purple accents -------------------------------------------------
   .pink is the WordPress equivalent of .colb30af3 on the .NET page. It is
   used on links and on the "Most Popular Services" items. */
/* >>> .pinkpst IS DELIBERATELY NOT IN THIS LIST <<<
   It is not a colour signal - it is a spacing wrapper, and the page uses
   it on blocks of BOTH colours:

       <div class="pst pinkpst yellowcol">  the bullet lists  -> green
       <div class="pst pinkpst pink">       popular services  -> purple

   Colouring .pinkpst purple turned the bullet lists purple too: it has the
   same specificity as the .yellowcol rule above and comes later, so it
   won. .pink is the real signal, so only .pink is matched here. */
body .pink,
body a.pink,
body .pink strong,
body .pink a,
body .pink a strong {
    color: var(--spa-purple);
    font-weight: 700;
}

body a.pink:hover,
body .pink a:hover {
    color: var(--spa-maroon);
    text-decoration: underline;
}

/* ---- 3. pill headings --------------------------------------------------
   .box .effect1 with the per-section modifiers the page uses:
   .bodymessage1, .bodymessage, .uniquebox, .popularServ, .benifit.
   All five get the same treatment, exactly as on the .NET page. */
.box.effect1,
.box.bodymessage,
.box.bodymessage1,
.box.uniquebox,
.box.popularServ,
.box.benifit {
    display: block;
    width: min(100%, 33.333%);
    min-width: 280px;
    margin: 34px auto 24px;
    padding: 14px 18px;
    text-align: center;
    border: 2px solid var(--spa-maroon);
    border-radius: 10px;
    background-color: var(--spa-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Playfair Display 12px bold maroon. 12px is small for a section heading,
   but it is what the .NET site uses and the brief was an exact match, so
   it is reproduced rather than "improved". */
.box.effect1,
.box.effect1 strong,
.box.bodymessage,
.box.bodymessage1,
.box.uniquebox,
.box.popularServ,
.box.benifit {
    font-family: var(--spa-font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--spa-maroon);
}

/* ---- 4. bullet lists ---------------------------------------------------
   Purple bullet drawn with ::before, not ::marker. ::marker refused to
   take a colour on the live site across three attempts - support is patchy
   once list-style is touched - so the marker is removed and a real element
   drawn instead. Scaled 2.8x, as agreed.

   Scoped to .pst so it cannot reach the theme's own menus, sliders or
   widget lists. That exact leak put bullets on the carousel once already. */
body .pst ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .pst ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    line-height: 26px;
}

body .pst ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: -0.15em;
    color: var(--spa-purple);
    font-size: 2.8em;
    line-height: 1;
}

/* ---- 5. job vacancies box ---------------------------------------------
   .bordrbg is the WordPress name for .JobDivbordrbg.

   Double border, as asked. 'double' needs at least 3px to draw two lines -
   at 2px the browser silently renders it solid - so this is 6px: two 2px
   rules with a 2px gap.

   background-COLOR, never the shorthand. On the .NET site this box drew
   its frame from a background image, and using the shorthand was what
   finally removed it; the shorthand also wipes background-image on any
   element that has one. */
/* >>> float MUST be cleared for the box to centre <<<
   The jobs box is also a .fullwidth-section, and the theme sets
   `.fullwidth-section { float: left; }` - (0,1,0). A float ignores
   `margin: auto` entirely, so the box sat hard against the left edge of
   the content column on every page that carries it (Home, About Us,
   Massage Styles, PROFILE / APPT, Testimonials, Jobs).

   `body .bordrbg.fullwidth-section` is (0,2,1), which takes the float
   cleanly; `margin: auto` in the rule below then does the centring. */
body .bordrbg.fullwidth-section,
body .bordrbg {
    float: none;
}

.bordrbg {
    /* flow-root, not block. The children inside the box are floated by the
       theme, and until now the box contained them only because it was
       floated itself. Clearing its float to allow `margin: auto` removed
       that containment, and the frame collapsed to the height of the first
       line with the rest of the vacancy spilling out below it.
       flow-root makes the box contain its floats without floating. */
    display: flow-root;
    width: min(100%, 66.666%);
    margin: 40px auto;
    padding: 22px 26px;
    background-image: none;
    background-color: var(--spa-card);
    border: 6px double var(--spa-maroon);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    text-align: center;
}

/* The theme's .container carries a HARD pixel width (710px at this
   breakpoint) because it is normally the full-width page column. Inside
   the jobs box that column is only ~520px, so the fixed width overflowed
   the frame and the vacancy text ran out past the right border.

   Scoped to .bordrbg, so the site-wide .container is untouched. */
.bordrbg .container,
.bordrbg .fullwidth-bg {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    float: none;
}

/* The jobs markup nests a .box.effect1 INSIDE the .bordrbg wrapper:

       <div class="... bordrbg"><div class="box effect1 effect2"> ... </div></div>

   Section 3 styles .box.effect1 as a pill, so without this the vacancy is
   drawn as a box inside a box, the inner one a third of the width. The
   outer .bordrbg is the frame; the inner one resets to a plain block. */
.bordrbg .box,
.bordrbg .box.effect1 {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Heading and job titles purple bold, everything else green. <em> carries
   the job titles on both sites. */
.bordrbg em,
.bordrbg strong em {
    display: block;
    color: var(--spa-purple);
    font-family: var(--spa-font-body);
    font-size: var(--spa-size-body);
    font-weight: 700;
    font-style: normal;
    margin: 14px 0 6px;
}

body .bordrbg span,
body .bordrbg div,
body .bordrbg p {
    color: var(--spa-green);
    font-family: var(--spa-font-body);
    font-size: var(--spa-size-body);
    font-weight: 700;
    line-height: 26px;
}

/* The referral-fee line sits directly under the heading. */
body .referr_fee {
    color: var(--spa-green);
    font-family: var(--spa-font-body);
    font-size: var(--spa-size-small);
    font-weight: 700;
}

/* ---- 6. section title block -------------------------------------------
   [dt_sc_h2_title] renders .border-title with a .tag-line underneath -
   the same component the .NET page uses. The theme already gives the
   tagline its Tangerine face, so only the colour changes. */
/* The .NET site renders these section titles at 12px. Reproduced literally
   that is far too small to read as a heading here - the "Welcome to
   California Spa-Body Massage Bangalore" line was the same size as a
   caption - so this one value departs from the .NET original on purpose.
   Everything else in the file still matches it exactly.

   The <em> inside is included because the page wraps the title text in one
   and it would otherwise pick up the browser default size. */
.border-title h1,
.border-title h2,
.border-title h3,
.border-title h1 em,
.border-title h2 em,
.border-title h3 em {
    font-family: var(--spa-font-display);
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    font-style: normal;
    color: var(--spa-maroon);
}

@media (max-width: 767px) {
    .border-title h1,
    .border-title h2,
    .border-title h3,
    .border-title h1 em,
    .border-title h2 em,
    .border-title h3 em {
        font-size: 21px;
    }
}

.border-title .tag-line,
.border-title .description {
    color: var(--spa-purple);
}

/* ---- 7. centred images -------------------------------------------------
   The page uses .aligncenter for the logo and the home1 illustration. */
.entry-content img.aligncenter,
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* ---- 8. narrow screens ------------------------------------------------- */
@media (max-width: 767px) {
    .box.effect1,
    .box.bodymessage,
    .box.bodymessage1,
    .box.uniquebox,
    .box.popularServ,
    .box.benifit,
    .bordrbg {
        width: 100%;
        min-width: 0;
    }
}