/* Site overrides applied on top of the archived stylesheet.
 *
 * Kept in one small file, injected into every page, so improvements survive
 * regenerating the pages from the archive. Nothing here restyles her design;
 * it only fixes readability problems and styles sections that are new. */

/* ------------------------------------------------------------------ *
 * Homepage header legibility
 *
 * On the front page the header sits over the hero photo, which is bright
 * where the archway opens, so white menu text loses contrast. A soft scrim
 * fading downward restores it. It is fixed at the very top and sits behind
 * the header, so once the solid purple sticky header slides in on scroll it
 * simply paints over the scrim, which is the fade the eye expects.
 * ------------------------------------------------------------------ */
/* The homepage header used to sit transparent over the hero photograph, and
   white menu text on a bright archway is simply hard to read. A gradient scrim
   helped but never fully solved it, so the header now carries the same solid
   purple it has on every other page, from the moment the page loads.
   rgb(89,20,94) is measured from her own header, not chosen. */
/* The header row on the front page carries sc_layouts_row_fixed, and the theme
   keeps that transparent here with a rule that outranks a plain class
   selector, so this matches both classes together and forces it. */
body.home .sc_layouts_row.sc_layouts_row_fixed,
body.frontpage .sc_layouts_row.sc_layouts_row_fixed,
body.home .sc_layouts_row.sc_layouts_row_type_compact,
body.frontpage .sc_layouts_row.sc_layouts_row_type_compact,
body.home .sc_layouts_row_type_normal,
body.frontpage .sc_layouts_row_type_normal {
  background-color: rgb(89, 20, 94) !important;
}

/* ------------------------------------------------------------------ *
 * Homepage hero height
 *
 * The hero ran nearly a full screen tall, so a visitor had to scroll before
 * seeing anything but a photograph. Shortening it brings the music panel and
 * everything below it up into view sooner.
 *
 * Clipping this with CSS was tried and was the wrong tool. The slider computes
 * its own height in JavaScript and reserves that space in the layout, so a
 * max-height hid the lower half of the picture, cut off the tagline, and left
 * the empty space behind regardless.
 *
 * The height is changed at its source instead, in the setREVStartSize call in
 * the page itself, by tools/shorten_hero.py. The slider then genuinely renders
 * shorter, scales its own text to fit, and everything below moves up.
 *
 * That alone left a white band above and below it. The Elementor section
 * holding the hero carries a minimum height of one full screen with its
 * contents centred, so a shorter slider simply floated in the middle of a
 * viewport-tall box. The section has to shrink to its contents as well.
 * ------------------------------------------------------------------ */
body.home .elementor-element-83e1605,
body.frontpage .elementor-element-83e1605,
body.home .elementor-element-83e1605 > .elementor-container,
body.frontpage .elementor-element-83e1605 > .elementor-container {
  min-height: 0 !important;
  height: auto !important;
}

/* The body carries header_position_over, so the header is meant to sit on top
   of the hero. That worked while it was transparent; now it is solid purple it
   covered her name. The hero starts below the bar instead. */
body.home .elementor-element-83e1605,
body.frontpage .elementor-element-83e1605 {
  padding-top: 128px !important;
}

/* Her layout pulls the music panel up over the hero by 145px. On her original
   860px hero that was a gentle overlap; against a shorter one it swallowed a
   third of the picture. Removing it entirely was wrong the other way: the panel
   sat in its own band below the photograph and the layering she designed was
   gone. It overlaps by a smaller amount instead, keeping the player resting on
   the picture while the archway stays whole behind it.

   The panel already carries z-index 4, so it paints over the slider without
   any stacking of our own. */
body.home .elementor-element-510dc16,
body.frontpage .elementor-element-510dc16 {
  margin-top: -80px !important;
}

@media (max-width: 1024px) {
  body.home .elementor-element-510dc16,
  body.frontpage .elementor-element-510dc16 {
    margin-top: -55px !important;
  }
}

/* Too little room to overlap on a phone: the panel would cover the tagline. */
@media (max-width: 767px) {
  body.home .elementor-element-510dc16,
  body.frontpage .elementor-element-510dc16 {
    margin-top: 0 !important;
  }
}

@media (max-width: 1024px) {
  body.home .elementor-element-83e1605,
  body.frontpage .elementor-element-83e1605 {
    padding-top: 110px !important;
  }
}

@media (max-width: 767px) {
  body.home .elementor-element-83e1605,
  body.frontpage .elementor-element-83e1605 {
    padding-top: 90px !important;
  }
}

/* With a solid bar behind it the text needs no shadow, which was only ever
   propping up legibility against the photograph. */
body.home .sc_layouts_menu_nav > li > a,
body.frontpage .sc_layouts_menu_nav > li > a {
  text-shadow: none;
}

/* The shadow that used to prop up legibility against the photograph is gone
   with the transparent header; a solid bar needs no help. */

/* ------------------------------------------------------------------ *
 * New content: sections added to /see/, the music pages, and Laughter
 *
 * Her theme sets body copy to rgb(132,121,136), a light grey that works in
 * her short intro paragraphs but is hard going across the longer passages
 * carried over from the retired site. These use her heading colour instead,
 * which is the same palette, just readable at length.
 * ------------------------------------------------------------------ */
.jr-folded-inner,
.jr-rescued,
.jr-music,
.jr-song,
.jr-lyrics {
  color: rgb(50, 32, 56);
}

.jr-folded-inner p,
.jr-rescued p,
.jr-music p,
.jr-song p,
.jr-lyrics p,
.jr-folded-inner li,
.jr-rescued li {
  color: rgb(50, 32, 56);
}

/* Images sit to the left with the text beside them, then wrapping underneath,
   rather than stacked full width with the text stranded below. */
/* These photographs are small originals, between 162 and 246 pixels wide, so a
   percentage width scaled them up: too large on the page and soft where there
   is no detail to enlarge. Capping keeps them at natural size or below, and the
   right margin stops the text running into them.
 *
 * !important is needed here, not preferred. Her theme's inlined stylesheet
 * carries more specific rules for images inside post content, and they were
 * silently winning: computed float came back as none, margin-right as 0, and
 * the width as 233px despite a 190px cap. The scope is deliberately narrow,
 * only images inside the sections added to her site. */
.jr-folded-inner img,
.jr-rescued img {
  float: left !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  margin: 0.35rem 2.4rem 1.4rem 0 !important;
  border-radius: 6px;
}

/* Headings on the carried-over sections read better centred above the text. */
.jr-folded-inner h2,
.jr-rescued h2 {
  text-align: center;
  clear: both;
}

.jr-folded-inner::after,
.jr-rescued::after {
  content: "";
  display: block;
  clear: both;
}

/* On a narrow screen a floated image leaves too little room for the text
   beside it, so it stacks instead. These carry !important for the same reason
   as the rules above, and would otherwise lose to them. */
@media (max-width: 640px) {
  .jr-folded-inner img,
  .jr-rescued img {
    float: none !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 1.2rem !important;
    display: block;
  }
}

/* ------------------------------------------------------------------ *
 * Top menu fit
 *
 * Adding Music made nine items, which overflowed the 694px the header gives
 * the nav, so the theme pushed Contact into its three-dots overflow. Trimming
 * the horizontal padding recovers roughly 90px, enough for all nine, and is
 * far less noticeable than reducing her type size.
 * ------------------------------------------------------------------ */
/* Keeping every item visible means the row must actually fit beside the logo,
   or it wraps onto a second line underneath it. Nine items need roughly 15%
   less width than eight did, so the spacing tightens and the type steps down
   slightly on narrower screens, returning to normal where there is room. */
/* The items are floated by the theme, and floats wrap whenever the row runs
   short, which is what made the menu jump to a second line and back while
   resizing. A flex row that is not allowed to wrap cannot do that: the items
   simply stay on one line. */
.sc_layouts_menu_nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  white-space: nowrap;
}

.sc_layouts_menu_nav > li {
  float: none !important;
  flex: 0 0 auto;
}

/* Submenus are their own stacking context and must stay vertical. */
.sc_layouts_menu_nav .sub-menu {
  display: block;
  flex-wrap: initial;
}

.sc_layouts_menu_nav .sub-menu > li {
  float: none !important;
  display: block;
}

.sc_layouts_menu_nav > li > a {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 15px;
}

/* The header column is an Elementor widget wrap, which is a flex row that is
   allowed to wrap. Once the logo and nine menu items together exceeded it, the
   whole menu dropped onto a second line under the logo, then jumped back up as
   the window narrowed further and the items shrank. That is the flicker seen
   while resizing. The row simply must not wrap; the items step down in size
   instead, below. */
/* Scoped to the header element, not to sc_layouts_row: the footer is built
   from those same rows, and stopping it wrapping put its widgets side by side
   and pushed the page 1223px wider than the window. */
header.top_panel .sc_layouts_row .elementor-widget-wrap {
  flex-wrap: nowrap !important;
}

/* The logo keeps its natural size while the menu takes the squeeze. */
header.top_panel .sc_layouts_row .elementor-widget-wrap > .sc_layouts_item {
  flex: 0 0 auto;
}

/* Below 1400 the menu has to give up some spacing to stay on one line. It only
   has to hold out to 1280, where the theme swaps in its mobile header and the
   hamburger takes over. */
@media (max-width: 1400px) {
  .sc_layouts_menu_nav > li > a {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 14px;
  }
}

/* 1560, not 1500: at 1500-1559 the roomier size pushed the menu a few pixels
   past its own column. */
@media (min-width: 1560px) {
  .sc_layouts_menu_nav > li > a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
  }
}

@media (min-width: 1750px) {
  .sc_layouts_menu_nav > li > a {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
  }
}

/* Submenus must not inherit the single-line rule, or their longer labels
   would run off the edge. */
.sc_layouts_menu_nav .sub-menu {
  white-space: normal;
}

.sc_layouts_menu_nav .sub-menu > li > a {
  font-size: 15px;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

/* Once the sticky header engages it has its own solid background, so the
   shadow is no longer needed and would only muddy the text. */
body .sc_layouts_row_fixed .sc_layouts_menu_nav > li > a,
body .sc_layouts_row_fixed_on .sc_layouts_menu_nav > li > a {
  text-shadow: none;
}

/* ------------------------------------------------------------------ *
 * Three-across blocks on a phone
 *
 * The theme lays these out as thirds and never stops: at 390px each one is
 * 135px wide, so "Clairvoyant Training" breaks into seven one-word lines and
 * a testimonial becomes a ribbon of single words. They stack instead below
 * 768px, one per line.
 *
 * Two blocks use this: the service cards on the homepage and the testimonials
 * on Be Seen. They are the only thirds in the whole site, so the rule cannot
 * reach anything else.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .trx_addons_columns_wrap {
    flex-wrap: wrap;
  }

  .trx_addons_columns_wrap > .trx_addons_column-1_3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center;
  }

  /* Full width, the mandala photograph becomes a banner half a screen tall.
     Capping the card keeps the proportions it has on a desktop; on a phone
     narrower than the cap this does nothing. */
  .trx_addons_columns_wrap > .trx_addons_column-1_3 .sc_services_item {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------------ *
 * Breathing room down the sides on a phone
 *
 * Her page content sits in a fullscreen wrapper with no side padding, and
 * Elementor's gap-extended containers pull themselves 15px wider than their
 * column padding to make gutters between columns. Side by side on a desktop
 * that cancels out. Stacked on a phone there is nothing to cancel, so every
 * heading, paragraph and post date started hard against the left edge, and
 * the arrows on the event rows against the right.
 *
 * The pull is removed and a fixed inset is put on the top-level columns, one
 * level only, so nested sections inherit it rather than adding to it.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .page_content_wrap .elementor-top-section > .elementor-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 35, not 20: these sections hang 15px off each edge of the page, which is
     how the theme makes a full-width band. 35 lands the text 20px in. The
     hero and the music panel are excluded: both are pictures, and both look
     better running edge to edge. */
  .page_content_wrap .elementor-top-section:not(.elementor-element-83e1605):not(.elementor-element-510dc16)
    > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }

  /* The music panel spans the screen, with the album cover flush to the left
     edge and the player running to the right.

     15, not 0: the whole Elementor canvas hangs 15px off each side of the page
     (that is how the theme builds full-width bands), so zero padding would put
     the cover 15px off-screen and cut it in half. 15 lands it exactly on the
     edge. */
  body.home .elementor-element-510dc16 .elementor-widget-wrap,
  body.frontpage .elementor-element-510dc16 .elementor-widget-wrap {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ------------------------------------------------------------------ *
 * The event schedule on a phone
 *
 * Elementor hides the row of month tabs below 768 and turns the widget into
 * an accordion: three bare month names stacked below the events, with nothing
 * to say which events belonged to which month. Her own labels were stale
 * there as well, which is fixed at the source in tools/update_events.py.
 *
 * The row of months is shown instead, wrapping if it must, and the accordion
 * titles are hidden. site.js writes the month name into each panel as a
 * heading above its events.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-tabs .elementor-tabs-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    border-style: none;
  }

  .elementor-tabs .elementor-tabs-wrapper .elementor-tab-title {
    display: block;
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 15px;
    border-style: none;
    opacity: 0.65;
  }

  .elementor-tabs .elementor-tabs-wrapper .elementor-tab-title.elementor-active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  .elementor-tabs .elementor-tab-mobile-title {
    display: none !important;
  }
}

/* Three "September 2026" labels do not fit across a phone. site.js wraps the
   year so it can be dropped here, leaving the months on one row; the heading
   below each row still gives the year in full. */
@media (max-width: 620px) {
  .elementor-tabs .elementor-tabs-wrapper .jr-tab-year {
    display: none;
  }

  .elementor-tabs .elementor-tabs-wrapper .elementor-tab-title {
    padding: 8px 10px;
  }
}

/* The heading site.js writes into each panel. It only has a job on a phone,
   where the row of months is small; on a desktop the lit tab says it already. */
.jr-month-heading {
  display: none;
}

@media (max-width: 767px) {
  .jr-month-heading {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
  }
}

/* ------------------------------------------------------------------ *
 * The music player on a phone
 *
 * Her player is a fixed two-column block: album cover on the left, text and
 * controls on the right. The right side carries 51px of side padding and the
 * media element sets its own width in JavaScript, so on a 390px screen the
 * controls ran 107px past the right edge and the volume slider was simply not
 * there. The play button ended up left of centre and high.
 *
 * The right side is allowed to shrink, the media element is made to fill
 * whatever room is left, and the text and controls are centred in the panel,
 * which puts the play button in the middle of the block beside the cover.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .trx_addons_audio_player_wrap {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    padding: 20px 16px !important;
  }

  .trx_addons_audio_player_wrap .audio_info,
  .trx_addons_audio_player_wrap .audio_frame {
    width: 100% !important;
    text-align: center;
  }

  /* The width here is written inline by MediaElement's own script, which is
     why these need !important rather than a plain rule. */
  .trx_addons_audio_player_wrap .mejs-container,
  .trx_addons_audio_player_wrap .mejs-container .mejs-controls,
  .trx_addons_audio_player_wrap .mejs-inner,
  .trx_addons_audio_player_wrap .mejs-layers {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The rail sits between the two clocks and takes what is left. */
  .trx_addons_audio_player_wrap .mejs-time-rail {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* ------------------------------------------------------------------ *
 * The video's play button on a phone
 *
 * The button sits between two spacer widgets. Her desktop settings space it
 * evenly, 290px above and below, but the phone settings are 70 above and 120
 * below, which left the button 25px high in its own band. Both are set to 95
 * so it lands in the middle and the band keeps the height it had.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body.home .elementor-element-68c29fe .elementor-spacer-inner,
  body.frontpage .elementor-element-68c29fe .elementor-spacer-inner,
  body.home .elementor-element-c274d6f .elementor-spacer-inner,
  body.frontpage .elementor-element-c274d6f .elementor-spacer-inner {
    height: 95px !important;
  }
}

/* ------------------------------------------------------------------ *
 * The blog's two columns below a wide desktop
 *
 * Her blog list and every post are a fixed 840px content column floated
 * beside a fixed 410px sidebar. Together with the gutter that needs about
 * 1290px, and nothing in the theme reduces it, so on anything narrower the
 * content column simply ran off the right: 465px past a phone screen, 141px
 * past a tablet. The page scrolled sideways and the sidebar sat half
 * off-screen. Her live site does the same today.
 *
 * Below that width the two stack: content first at full width, sidebar under
 * it. Above it nothing changes.
 * ------------------------------------------------------------------ */
@media (max-width: 1310px) {
  .content_wrap > .content,
  .content_wrap > .sidebar,
  .content_wrap_fullscreen > .content,
  .content_wrap_fullscreen > .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The sidebar carried the gap that used to separate the columns. */
  .content_wrap > .sidebar,
  .content_wrap_fullscreen > .sidebar {
    margin-top: 3rem !important;
  }
}

/* ------------------------------------------------------------------ *
 * Two things that let the page slide sideways
 *
 * The theme's search panel is absolutely positioned at a fixed 1290px, which
 * is fine inside a wide desktop and hangs off the side of everything smaller.
 * It is capped to the space it actually has.
 *
 * Separately, the whole Elementor canvas is 15px wider than the page on each
 * side, which is how the theme builds full-width bands. html already refuses
 * to scroll horizontally, but with body left visible the viewport still
 * scrolled those 15px, so a phone drifted sideways under the thumb. Both are
 * closed here.
 * ------------------------------------------------------------------ */
.search_form_wrap,
.search_wrap .search_form {
  max-width: 100% !important;
}

body {
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ *
 * Blog cards on a phone
 *
 * The band layout puts the photograph and the text side by side at 49% and
 * 51%. On a phone that leaves the text about 190px wide, so a title breaks
 * into four lines of two words. They stack instead: picture above, text
 * below, both full width.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  article.post_layout_band {
    flex-direction: column !important;
  }

  article.post_layout_band > .post_featured,
  article.post_layout_band > .post_content_wrap {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The picture is a background image on a box with no height of its own once
     it stops being a column, so it needs one. */
  article.post_layout_band > .post_featured {
    min-height: 220px;
  }
}

/* ------------------------------------------------------------------ *
 * The subscribe form's new First Name field
 *
 * Her theme styles the email box and nothing else, so a second field arrived
 * as a bare underlined input floating above it. This gives the name the same
 * white bar, and drops the Subscribe button to the last row, where it used to
 * sit against the only field there was.
 * ------------------------------------------------------------------ */
.mc4wp-form-fields input[name="FNAME"] {
  display: block;
  width: 100%;
  height: 55px;
  margin-bottom: 10px;
  padding: 11px 27px;
  border: none;
  background-color: #fff;
  box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.05);
  font: 16px/22px Nunito, sans-serif;
  color: rgb(50, 32, 56);
}

.mc4wp-form-fields input[name="FNAME"]::placeholder {
  color: rgb(132, 121, 136);
}

/* The button is positioned against the top right of the field block, which
   was the email row when the email was the only field. It is pushed down by
   exactly the height of the name field and its gap, so it sits inside the
   email bar again, in the space her design already leaves for it. */
.mc4wp-form-fields button {
  top: 65px !important;
  bottom: auto !important;
}

/* ------------------------------------------------------------------ *
 * The contact form's reply
 *
 * Her theme leaves this box in the markup, empty and hidden, for the plugin
 * to fill. site.js fills it instead, after /contact.php sends the visitor
 * back. It only ever shows when it has something to say.
 * ------------------------------------------------------------------ */
.wpcf7 .wpcf7-response-output.jr-contact-reply,
.wpcf7-response-output.jr-contact-reply {
  display: block;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: none;
  border-left: 4px solid rgb(89, 20, 94);
  background: rgba(89, 20, 94, 0.06);
  color: rgb(50, 32, 56);
  font-size: 16px;
  line-height: 1.5;
}

.wpcf7 .wpcf7-response-output.jr-contact-warn,
.wpcf7-response-output.jr-contact-warn {
  border-left-color: rgb(176, 76, 40);
  background: rgba(176, 76, 40, 0.07);
}

/* ------------------------------------------------------------------ *
 * The contact panel below a wide desktop
 *
 * Her contact form sits in a white panel that is pulled 105px to the left and
 * made 1370px wide, so it bleeds out of its column on a big screen. Below
 * about 1400 there is nothing to bleed into and the panel hung off the left
 * edge: at 1280 the first 35px of every field, and of the reply, were off the
 * screen. The pull is dropped and the panel keeps to its column.
 * ------------------------------------------------------------------ */
@media (max-width: 1400px) {
  .elementor-element-57d45ddc > .elementor-widget-container {
    margin-left: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-57d45ddc > .elementor-widget-container {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

/* ------------------------------------------------------------------ *
 * The privacy consent on the subscribe form
 *
 * The line read in her light body grey against a near white panel, and the
 * box beside it was a 16px outline in rgb(222,212,225), which is close to
 * invisible. A consent people are asked to give should be easy to see and
 * easy to hit.
 *
 * Three things about her theme shape these selectors:
 *
 *  - the control that shows is not the checkbox. The real input is parked to
 *    one side and the box is drawn as the label's ::before, so the box is
 *    styled there and the input is properly hidden instead of left floating
 *    at the edge of the form.
 *  - her rules are written as input[type=checkbox] + label, which outranks a
 *    plain class selector, so these match the same way and add a class.
 *  - the border colour is set from an id with !important, and only an id can
 *    outrank an id. #style-7 and #style-11 are the two subscribe forms, named
 *    in her own markup.
 * ------------------------------------------------------------------ */
.mc4wp-form-fields input[type="checkbox"] {
  /* Hidden to the eye, still focusable and still announced by a screen
     reader, which display:none would not be. */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.mc4wp-form-fields input[type="checkbox"] + label {
  color: rgb(50, 32, 56);
  font-size: 15px;
  padding-left: 36px;
  line-height: 24px;
  cursor: pointer;
}

/* Her rule is #style-7.mc4wp-form input[...] + label::before with !important
   on the border colour. Only a heavier selector beats it, so the form's own
   second class and the field wrapper are both named here. */
#style-7.mc4wp-form .mc4wp-form-fields input[type="checkbox"] + label::before,
#style-11.mc4wp-form .mc4wp-form-fields input[type="checkbox"] + label::before,
.mc4wp-form-fields input[type="checkbox"] + label::before {
  content: "" !important;
  width: 24px !important;
  height: 24px !important;
  top: 50% !important;
  margin-top: -12px !important;
  border: 2px solid rgb(89, 20, 94) !important;
  border-color: rgb(89, 20, 94) !important;
  border-radius: 4px !important;
  background-color: #fdf3de !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

#style-7.mc4wp-form .mc4wp-form-fields input[type="checkbox"]:checked + label::before,
#style-11.mc4wp-form .mc4wp-form-fields input[type="checkbox"]:checked + label::before,
.mc4wp-form-fields input[type="checkbox"]:checked + label::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 L6.4 12 L13 4' fill='none' stroke='%2359145e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

#style-7.mc4wp-form .mc4wp-form-fields input[type="checkbox"]:focus-visible + label::before,
#style-11.mc4wp-form .mc4wp-form-fields input[type="checkbox"]:focus-visible + label::before {
  box-shadow: 0 0 0 3px rgba(89, 20, 94, 0.25) !important;
}

.mc4wp-form-fields input[type="checkbox"] + label a {
  color: rgb(89, 20, 94);
  border-bottom-color: rgb(89, 20, 94);
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Search results
 *
 * The results page is her own page shell with this block dropped into the
 * content region, so the header, footer, fonts and colours are hers and only
 * the list is new.
 * ------------------------------------------------------------------ */
/* The block sits straight inside her content container, which has no padding
   of its own, so it would otherwise run to both edges of the window. A
   results list also reads better narrow than full width. */
.jr-search {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 2rem;
  color: rgb(50, 32, 56);
}

.jr-search-form {
  display: flex;
  gap: 10px;
  margin: 0 0 1.8rem;
}

.jr-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(50, 32, 56, 0.18);
  border-radius: 4px;
  background: #fff;
  font: 16px/54px Nunito, sans-serif;
  color: rgb(50, 32, 56);
}

.jr-search-form button {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 28px;
  border: none;
  border-radius: 4px;
  background: rgb(89, 20, 94);
  color: #fff;
  font: 700 14px/54px "Kumbh Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.jr-search-form button:hover {
  background: rgb(67, 16, 60);
}

.jr-search-count {
  margin: 0 0 1.6rem;
  color: rgb(132, 121, 136);
}

.jr-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jr-search-results li {
  padding: 1.4rem 0;
  border-top: 1px solid rgba(50, 32, 56, 0.12);
}

.jr-search-title {
  display: inline-block;
  font-family: "Kumbh Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(50, 32, 56);
}

.jr-search-title:hover {
  color: rgb(89, 20, 94);
}

.jr-search-snippet {
  margin: .5rem 0 .4rem;
  color: rgb(90, 78, 96);
  font-size: 16px;
  line-height: 1.6;
}

/* The matched words, marked in the snippet rather than shouted in colour. */
.jr-search-snippet mark {
  padding: 0 2px;
  background: rgba(89, 20, 94, 0.12);
  color: inherit;
  font-weight: 700;
}

.jr-search-url {
  color: rgb(132, 121, 136);
  font-size: 14px;
}

@media (max-width: 560px) {
  .jr-search-form {
    flex-wrap: wrap;
  }

  .jr-search-form input[type="search"],
  .jr-search-form button {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ *
 * The footer on a phone
 *
 * Her footer keeps its three desktop columns at every width, so on a 375px
 * screen they came out 197, 91 and 86 pixels wide: "Located In" and "Say
 * Hello" each broke over two lines, and the email address broke mid-domain.
 * Underneath, the links and the copyright sit in two half-width columns that
 * are both wider than half a phone, so "Contact" and the copyright printed on
 * top of each other.
 *
 * On a phone the name takes a row of its own, the two short columns share the
 * next row, and the bottom bar stacks with the copyright last, where a
 * copyright belongs. The ids are her footer's own and are on every page.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  footer .elementor-element-562d27ea {
    width: 100% !important;
    margin-bottom: 1.6rem;
  }

  /* Not an even half each: her email address needs about 200px to stay on one
     line, and the town it sits beside needs far less. */
  footer .elementor-element-35dccc6 {
    width: 42% !important;
  }

  footer .elementor-element-4874598d {
    width: 58% !important;
  }

  /* If it ever does have to break, break it rather than let it overflow. */
  footer .elementor-element-4874598d a {
    overflow-wrap: anywhere;
  }

  footer .elementor-element-1d354524,
  footer .elementor-element-720d2baa {
    width: 100% !important;
    text-align: center;
  }

  footer .elementor-element-1d354524 {
    margin-bottom: .6rem;
  }

  /* Both bottom columns are flex rows pushed to one end: the links to the
     left, the copyright to the right. Centring the text inside them is not
     enough, because the block itself is narrower than the column and sits at
     that end, which is why the copyright still read as right aligned on any
     screen wider than the text. The rows themselves are centred. */
  footer .elementor-element-1d354524 .elementor-widget-wrap,
  footer .elementor-element-720d2baa .elementor-widget-wrap {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 1.4rem;
  }

  /* Her scroll-to-top button floats over the bottom right corner of the
     window, which is exactly where the last line of the copyright landed once
     the page was scrolled to the end. This keeps the text above it. */
  footer .elementor-element-720d2baa {
    padding-bottom: 64px;
  }
}

/* ------------------------------------------------------------------ *
 * Body text that can actually be read
 *
 * Her theme sets body copy to #847988 on a near white page. That is about
 * 3.7:1 against the background, below the 4.5:1 ordinary text needs, and it
 * shows: the long passages on About Jean, CHALICE, the classes pages and
 * every blog post were hard going.
 *
 * The colour comes from --theme-color-text, so the variable is changed rather
 * than hunting down every rule that uses it. Only the light schemes are
 * touched. scheme_dark is her purple bands, where the same variable holds a
 * pale colour that has to stay pale.
 *
 * #4c4053 sits between her body grey and her heading colour, #322038, and
 * reads at about 10:1. Secondary text keeps a lighter tone so a date or a
 * caption still recedes.
 * ------------------------------------------------------------------ */
body .scheme_default,
body .scheme_light,
body.scheme_default,
body.scheme_light {
  --theme-color-text: #4c4053;
  --theme-color-alter_text: #4c4053;
  --theme-color-extra_text: #4c4053;
  --theme-color-input_text: #4c4053;
  --theme-color-text_light: #6b5f72;
  /* Placeholders: Name, Phone, Email and the rest on the contact form. Her
     theme colours them from this variable, from a selector heavier than a
     plain input::placeholder rule, so the variable is the way in. */
  --theme-color-input_light: #6b5f72;
}

/* ------------------------------------------------------------------ *
 * Breadcrumbs and post navigation
 *
 * The line under a page title ("Home / In Person Classes for Intuitives...")
 * was #6b5f72 on near white, and the small Previous and Next labels above a
 * post's neighbours were the same. Both take her purple, which is both easier
 * to read and says plainly that they are links.
 * ------------------------------------------------------------------ */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs .breadcrumbs_item,
.breadcrumbs .breadcrumbs_delimiter {
  color: rgb(89, 20, 94);
}

.breadcrumbs a:hover {
  color: rgb(122, 29, 107);
}

.nav-links .nav-arrow-label,
.navigation .nav-arrow-label {
  color: rgb(89, 20, 94);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Side spacing on the pages built from a shell
 *
 * The music section, the rescued pages and the passages folded into See sit
 * straight inside her content container, which has no padding of its own.
 * On a desktop the container is inset by the layout; on a phone it is not, so
 * this text ran to both edges of the screen. The folded blocks need more
 * because, unlike the others, they hang 15px off each edge with the rest of
 * the Elementor canvas.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .jr-rescued,
  .jr-music,
  .jr-song,
  .jr-lyrics {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* !important because the built page sets this padding in ems from a more
     specific selector, which computed to 25.5px and left the text 11px from
     the screen edge. */
  .jr-folded-inner {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
}

/* The album byline is her purple, not body grey. It has to be said here as
   well as in the built page, because the rule above that colours paragraphs
   inside .jr-music is the more specific of the two. */
.jr-music .jr-byline,
.jr-song .jr-byline {
  color: rgb(91, 20, 80);
}

/* Her own rule for these labels is three classes deep, so this matches the
   same way rather than reaching for !important. */
.nav-links-single .nav-links .nav-arrow-label {
  color: rgb(89, 20, 94);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * A blog post on a phone
 *
 * The post template has no side padding of its own, so every paragraph ran
 * from edge to edge. Only posts are touched: pages carry Elementor sections
 * that are already inset, and padding both would double it.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body.single-post .content_wrap > .content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Some placeholders are drawn at reduced opacity as well as a pale colour. */
input::placeholder,
textarea::placeholder {
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Be Seen: the reading, and the photograph beside its heading
 *
 * The heading filled the left half of a row whose right half was an empty
 * column, and below it a row of three put the photograph first and the two
 * opening paragraphs in the remaining thirds. So the reading began two thirds
 * of the way across the page while the space beside its own heading sat
 * empty. tools/fix_be_seen_layout.py moves the photograph up into that empty
 * column; this collapses the column it came from and lets the two paragraphs
 * share the row from the left margin.
 * ------------------------------------------------------------------ */
.elementor-element-e2a54c7 {
  display: none;
}

/* !important because Elementor writes a per-element width into the page's own
   stylesheet, scoped by the page id, which outranks anything written here. */
@media (min-width: 768px) {
  .elementor-column.elementor-element-55ced01,
  .elementor-column.elementor-element-0734ada {
    width: 50% !important;
  }
}

/* ------------------------------------------------------------------ *
 * The poem book's buy button
 *
 * The WooCommerce cart is gone, so the page has one link to her Stripe
 * payment link instead. It is styled to match her other buttons rather than
 * left as a bare link, since it is the one thing on the page a reader is
 * meant to press.
 * ------------------------------------------------------------------ */
.jr-buy {
  display: inline-block;
  padding: 0 34px;
  border-radius: 4px;
  background: rgb(89, 20, 94);
  color: #fff;
  font: 700 14px/54px "Kumbh Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.jr-buy:hover {
  background: rgb(122, 29, 107);
  color: #fff;
}

/* On a phone the fixed 54px line box left "Buy the book" broken over three
   lines in a narrow column, so there it becomes a full-width button. */
@media (max-width: 767px) {
  .jr-buy {
    display: block;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
  }
}

.jr-buy-note {
  margin: .8rem 0 0;
  font-size: 14px;
  color: #6b5f72;
}

/* ------------------------------------------------------------------ *
 * The poem book's page on a phone
 *
 * The shop template keeps its two desktop columns at every width: the cover
 * floated left and the summary right at 44%, which on a 375px screen left the
 * summary 165px wide and broke the buy button over three lines. They stack,
 * cover then summary, and the page gets the side spacing the rest of the site
 * has.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .product .woocommerce-product-gallery,
  .product .images,
  .product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The summary carries 60px of left padding to clear the cover beside it.
     Stacked, that just indented the title and the button away from the
     picture's own edge. */
  .product .summary.entry-summary {
    margin-top: 1.6rem !important;
    padding-left: 0 !important;
  }

  body .content_wrap > .content > .post_item_single.post_type_product {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ------------------------------------------------------------------ *
 * One-sided indents on a phone
 *
 * Some of her text blocks carry a left indent from the desktop design, 30px
 * on About Jean for instance, to line up with something beside them. Stacked
 * on a phone there is nothing to line up with, and the paragraph ends up 67px
 * from the left edge and 35 from the right, which reads as crooked. Only the
 * prose widgets are touched, and only where her own padding is lopsided in
 * the first place.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .page_content_wrap .elementor-widget-text-editor > .elementor-widget-container,
  .page_content_wrap .elementor-widget-heading > .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ------------------------------------------------------------------ *
 * The purple panel at the top of Be Seen
 *
 * Its two columns run to the very edges of the panel: the heading began 40px
 * in on the left while the paragraph stopped 15px short on the right, so the
 * text looked pressed against the right edge and the whole panel looked
 * lopsided. Both sides get about 60px of breathing room. Only on a desktop:
 * on a phone the columns stack and already have their own spacing.
 * ------------------------------------------------------------------ */
/* !important because Elementor writes these paddings into the page's own
   stylesheet, scoped by page id, which outranks anything written here. */
@media (min-width: 768px) {
  .elementor-element-1cc3f01 > .elementor-widget-wrap {
    padding-left: 40px !important;
  }

  .elementor-element-b639bb2 > .elementor-widget-wrap {
    padding-right: 60px !important;
  }
}

/* ------------------------------------------------------------------ *
 * The event schedule's purple band on CHALICE
 *
 * On the homepage the band runs the full width of the page with the events
 * inset inside it. On CHALICE the same widget sits in a boxed section, so the
 * purple stopped at the content column and the band looked like a panel
 * rather than a band.
 *
 * The section is pulled out to the width of the window and back into place,
 * which is the usual way to break a boxed section out of its column. Its own
 * container keeps the inset, so the events stay where they are.
 * ------------------------------------------------------------------ */
.elementor-element-6cab447 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}