/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* ============================================================================
   B WELL AYURVEDA — CHILD THEME STYLES
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   Everything here is safe from Avada updates. The updater replaces
   /themes/Avada/ and the Fusion plugins; it never touches this folder.
   Never edit files inside /themes/Avada/ or any of the fusion- plugins
   (fusion, fusion-builder, fusion-core) — those changes are wiped on
   every update.
   NOTE: never write an asterisk immediately followed by a slash in these
   comments — it closes the comment early and the CSS after it is eaten.

   WHERE CSS CAN LIVE (both survive updates — we use THIS FILE, not both)
     1. This file           — a real file: diffable, backup-able, in the repo.
     2. Global Options → Custom CSS — database only, invisible outside WP admin.
   If a rule isn't taking effect, check the Custom CSS box before assuming
   the cascade is at fault.

   COLOR CONVENTION
   var(--awb-colorN) are Avada's Global Options palette slots, so palette
   changes in WP admin flow through automatically. Fallbacks are approximate
   equivalents, used only if Avada ever renames the variables:
     --awb-color4  body / dark text        ~ #333333
     --awb-color5  muted meta text         ~ #999999
     --awb-color6  hairline borders        ~ #e8e8e8
     --awb-color8  B Well sage accent      ~ #6e9075

   MARKUP OWNED BY US
   .bwell-* classes are ours, output from Avada-Child-Theme/functions.php.
   .fusion-* classes belong to Avada — if a major update renames one, the
   matching block below silently stops applying (nothing breaks, it just
   goes unstyled). That's the trade-off of styling theme internals.

   CONTENTS
     1. Layout trims (home/page spacing, footer gap)
     2. Blog post cards  (Avada Post Cards element — blog + events grids)
     3. Recent posts list (below single post content)
     4. Single post header
     5. Prev/Next post navigation
     6. Single post body text
     7. Custom icon — Detoxification content box
     8. Event featured images (single event pages)
     9. Single event layout (order, title, details card)
    10. Events-only colour header logo
    11. Events-only menu colour
    12. Post card dates
    13. Single event detail type
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. LAYOUT TRIMS
   Kills Avada's default top padding on the homepage and pages, hides the
   page title bar on the homepage, and drops the empty first paragraph Avada
   Builder sometimes emits above homepage content.
   --------------------------------------------------------------------------- */
body.home #main,
body.page #main {
    padding-top: 0 !important;
}

body.home .fusion-page-title-bar {
    display: none !important;
}

body.home .post-content > p:first-child:empty {
    display: none;
}

/* Remove cream gap above footer */
#main {
    padding-bottom: 0 !important;
}


/* ---------------------------------------------------------------------------
   2. BLOG POST CARDS
   Targets the Avada Post Cards element used on the Blog and Events pages:
   lift-on-hover, rounded thumbnails with a slow zoom, quieter meta text.
   --------------------------------------------------------------------------- */
.fusion-post-cards .fusion-layout-column .fusion-column-wrapper {
    padding-bottom: 30px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fusion-post-cards .fusion-layout-column .fusion-column-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.fusion-post-cards .fusion-imageframe {
    border-radius: 12px;
    overflow: hidden;
}

.fusion-post-cards .fusion-imageframe img {
    border-radius: 12px;
    transition: transform 0.4s ease;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.fusion-post-cards .fusion-imageframe:hover img {
    transform: scale(1.05);
}

.fusion-post-cards .fusion-title-heading {
    transition: color 0.3s ease;
}

.fusion-post-cards .fusion-title-heading:hover {
    color: var(--awb-color4, #333333) !important;
}

.fusion-post-cards .fusion-meta-tb {
    font-size: 13px;
    opacity: 0.7;
}

/* Event card date line (dynamic event start date) — match the meta/date style */
.fusion-post-cards .fusion-text p {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.7;
    color: var(--awb-color4, #333333);
    margin: 0;
}

/* Card titles truncate to a single line so cards stay the same height (2026-09-09) */
.fusion-post-cards .fusion-title-heading,
.fusion-post-cards .fusion-title-heading a {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------------------------
   3. RECENT POSTS LIST
   Our own markup (functions.php), shown below the content on single posts.
   Colors here are literal rather than palette vars — pre-dates the convention.
   --------------------------------------------------------------------------- */
.bwell-recent-posts {
    margin-top: 50px;
    padding-top: 30px;
}

.bwell-recent-posts__heading {
    font-size: 22px;
    color: #6e9075;
    margin-bottom: 20px;
}

.bwell-recent-posts__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bwell-recent-posts__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e8;
}

.bwell-recent-posts__item:last-child {
    border-bottom: none;
}

.bwell-recent-posts__item a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.bwell-recent-posts__item a:hover {
    color: #6e9075;
}

.bwell-recent-posts__date {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    margin-left: 20px;
}


/* ---------------------------------------------------------------------------
   4. SINGLE POST HEADER
   The template-builder header overlapped the content; pin it and give it a
   solid sage band instead.
   --------------------------------------------------------------------------- */
body.single-post .fusion-tb-header .fusion-fullwidth {
    position: relative !important;
    background-color: #6e9075 !important;
}


/* ---------------------------------------------------------------------------
   5. PREV / NEXT POST NAVIGATION  (2026-09-10)
   Our own markup, hooked to avada_after_page_title_bar in functions.php, so it
   sits under the title bar and above the hero image on single posts.
   Layout: [← Previous / title]  [All Posts]  [Next / title →]
   --------------------------------------------------------------------------- */
.bwell-post-nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 6% 4px;
}
.bwell-post-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.bwell-post-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--awb-color4, #333333);
    max-width: 40%;
    transition: color 0.2s ease;
}

/* Hover state.
   Avada's global link rules are more specific than a lone class selector, so
   they were underlining the whole link — including the arrow, where the glyph
   chopped the underline into what looked like dashes. Clear decoration on the
   link and every child, then re-apply it on the title alone: 1px, offset 5px.
   The !important is here to beat Avada's globals, not our own rules. */
.bwell-post-nav .bwell-post-nav__link,
.bwell-post-nav .bwell-post-nav__link:hover,
.bwell-post-nav .bwell-post-nav__link:focus,
.bwell-post-nav .bwell-post-nav__link span,
.bwell-post-nav .bwell-post-nav__link:hover span {
    text-decoration: none !important;
}
.bwell-post-nav .bwell-post-nav__link:hover .bwell-post-nav__title {
    color: var(--awb-color8, #6e9075);
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--awb-color6, #e8e8e8);
    text-underline-offset: 5px;
}

/* Placeholder that holds the layout when there is no previous/next post */
.bwell-post-nav__empty { visibility: hidden; }

.bwell-post-nav__arrow {
    font-size: 30px;
    line-height: 1;
    color: var(--awb-color8, #6e9075);
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.bwell-post-nav__prev:hover .bwell-post-nav__arrow { transform: translateX(-4px); }
.bwell-post-nav__next:hover .bwell-post-nav__arrow { transform: translateX(4px); }

.bwell-post-nav__meta { display: flex; flex-direction: column; min-width: 0; }
.bwell-post-nav__next .bwell-post-nav__meta { text-align: right; }
.bwell-post-nav__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--awb-color8, #6e9075);
}
/* min-width:0 on __meta above is what lets this ellipsis work inside flex */
.bwell-post-nav__title {
    font-size: 15px;
    color: var(--awb-color4, #333333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bwell-post-nav__all {
    flex: 0 0 auto;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--awb-color5, #999999);
    border: 1px solid var(--awb-color6, #e8e8e8);
    padding: 8px 18px;
    border-radius: 22px;
    transition: all 0.2s ease;
}
.bwell-post-nav__all:hover {
    background: var(--awb-color8, #6e9075);
    color: #fff;
    border-color: var(--awb-color8, #6e9075);
}

/* Phone: drop the post titles, keep arrows + All Posts */
@media (max-width: 640px) {
    .bwell-post-nav__title { display: none; }
    .bwell-post-nav__link { gap: 0; }
}


/* ---------------------------------------------------------------------------
   6. SINGLE POST BODY TEXT
   The global body color is the sage (color8), which is unreadable at paragraph
   length — force the dark text color inside the post content template.
   --------------------------------------------------------------------------- */
.fusion-content-tb,
.fusion-content-tb p,
.fusion-content-tb li,
.fusion-content-tb span {
    color: var(--awb-color4, #333333);
}
.fusion-content-tb a {
    color: var(--awb-color8, #6e9075);
}


/* ---------------------------------------------------------------------------
   7. CUSTOM ICON — DETOXIFICATION CONTENT BOX  (2026-09-10)
   Betty supplied a custom detox icon. Rather than rebuild the Avada Content
   Box, the element stays exactly as it is (plum circle, title, spacing,
   animation) and only the glyph is swapped: the FontAwesome character is
   blanked and the SVG is painted into ::before as a CSS mask, so it inherits
   the icon's own color and the circle is untouched.

   Matched two ways, so no builder edit is strictly needed:
     - .fa-diagnoses  — the FontAwesome class Avada already puts on the icon
       for the Detoxification box. Catches every instance automatically,
       including the mobile column variants.
     - .bwell-icon-detox — optional manual override, set in Avada Live via
       the parent Content Boxes element -> Options -> Extras -> CSS Class.
   If the Detoxification box is ever switched to a different base icon, update
   the fa-* class below to match.

   Source file: Desktop/Claude/Betty/detox-icon.svg
   Tuning: mask-size below is the glyph's share of the circle. Bigger % = a
   larger glyph. FontAwesome sits around 45%.
   --------------------------------------------------------------------------- */
.bwell-icon-detox .fontawesome-icon,
.fontawesome-icon.fa-diagnoses {
    position: relative;
}
.bwell-icon-detox .fontawesome-icon::before,
.fontawesome-icon.fa-diagnoses::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20154.91%20166.66'%3E%3Cpath%20d='M129.28,77.38h-.33c3-4.57,4.54-10.06,4.54-15.52,0-4.21-.87-8.27-2.49-11.9.72.23,1.49.35,2.28.35,4.17,0,7.56-3.38,7.56-7.56s-3.38-7.56-7.56-7.56-7.27,3.11-7.53,7.04c-4.66-4.67-11.03-7.23-18.17-7.23h-3.4c1.55-3.5,1.59-6.65,1.56-7.61V5.61c0-3.1-2.51-5.61-5.61-5.61s-5.61,2.51-5.61,5.61v21.89c0,.18-.01.05,0,.23,0,.11.03,2.65-1.84,4.56-2.19,2.23-6.12,2.7-9.03,2.7-7.12,0-15.04-.16-15.12-.16-3.08-.09-5.66,2.4-5.72,5.5-.06,3.1,2.4,5.66,5.5,5.72.07,0,6.57.13,13.15.15.07,0,.13.01.2.01h25.93c5.45,0,14.68,3.29,14.68,15.63,0,7.73-4.68,15.52-15.15,15.52H33.5c-3.1,0-5.61,2.51-5.61,5.61s2.51,5.61,5.61,5.61h73.61c.53,0,1.06-.01,1.58-.04.21.02.42.04.64.04h19.96c9.95,0,14.4,7.62,14.4,15.17,0,4.16-1.41,8.16-3.87,10.96-2.78,3.17-6.71,4.78-11.66,4.78h-30.8c-.07,0-.13,0-.19,0-8.49.03-21.94.15-22.1.15-3.1.03-5.59,2.56-5.56,5.66.03,3.08,2.53,5.57,5.61,5.57h.05c.19,0,18.85-.16,26.01-.16,2.91,0,6.85.47,9.03,2.7,1.75,1.79,1.84,4.12,1.84,4.51-.01.13,0,.12,0,.29v21.89c0,3.1,2.51,5.61,5.61,5.61s5.61-2.51,5.61-5.61v-21.79c.03-.96-.02-4.1-1.56-7.6h6.46c10.38,0,16.66-4.68,20.1-8.6,4.29-4.89,6.65-11.42,6.65-18.36,0-13.12-8.8-26.39-25.63-26.39Z'/%3E%3Ccircle%20cx='131.35'%20cy='21.33'%20r='5.63'%20transform='translate(61.38%20134.52)%20rotate(-67.5)'/%3E%3Ccircle%20cx='16.24'%20cy='145.92'%20r='7.56'%20transform='translate(-98.42%2054.22)%20rotate(-45)'/%3E%3Ccircle%20cx='133.28'%20cy='145.92'%20r='7.56'%20transform='translate(-29.96%2034.53)%20rotate(-13.28)'/%3E%3Ccircle%20cx='29.96'%20cy='16.76'%20r='6.04'%20transform='translate(-3.08%2026.09)%20rotate(-45)'/%3E%3Ccircle%20cx='29.96'%20cy='125.13'%20r='6.04'%20transform='translate(-27.95%2010.23)%20rotate(-13.28)'/%3E%3Cpath%20d='M88.62,140.38h-19c-9.96,0-14.42-7.52-14.42-14.98s4.6-15.27,14.89-15.27h52.23c3.1,0,5.61-2.51,5.61-5.61s-2.51-5.61-5.61-5.61H25.54c-9.84,0-14.32-8.4-14.32-16.2,0-4.13,1.24-7.89,3.49-10.57,2.44-2.91,5.92-4.38,10.36-4.38h72.01c3.1,0,5.61-2.51,5.61-5.61s-2.51-5.61-5.61-5.61h-38.62c-10.29,0-14.89-7.67-14.89-15.27s4.46-14.98,14.42-14.98h14.23c3.61,0,5.84-1.6,7.08-2.93,2.53-2.73,2.65-6.24,2.61-7.45V5.61c0-3.1-2.51-5.61-5.61-5.61s-5.61,2.51-5.61,5.61v9.44h-12.69c-7.86,0-14.52,2.89-19.26,8.36-4.12,4.75-6.38,11.09-6.38,17.84,0,5.37,1.49,10.76,4.42,15.27h-11.7c-7.8,0-14.35,2.9-18.96,8.4-3.94,4.7-6.11,11.02-6.11,17.78,0,13.29,8.95,27.42,25.54,27.42h22.88c-2.87,4.38-4.44,9.68-4.44,15.27,0,13.02,8.81,26.2,25.64,26.2h17.46v9.44c0,3.1,2.51,5.61,5.61,5.61s5.61-2.51,5.61-5.61v-10.29c.04-1.2-.07-4.71-2.6-7.45-1.24-1.34-3.48-2.93-7.08-2.93Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20154.91%20166.66'%3E%3Cpath%20d='M129.28,77.38h-.33c3-4.57,4.54-10.06,4.54-15.52,0-4.21-.87-8.27-2.49-11.9.72.23,1.49.35,2.28.35,4.17,0,7.56-3.38,7.56-7.56s-3.38-7.56-7.56-7.56-7.27,3.11-7.53,7.04c-4.66-4.67-11.03-7.23-18.17-7.23h-3.4c1.55-3.5,1.59-6.65,1.56-7.61V5.61c0-3.1-2.51-5.61-5.61-5.61s-5.61,2.51-5.61,5.61v21.89c0,.18-.01.05,0,.23,0,.11.03,2.65-1.84,4.56-2.19,2.23-6.12,2.7-9.03,2.7-7.12,0-15.04-.16-15.12-.16-3.08-.09-5.66,2.4-5.72,5.5-.06,3.1,2.4,5.66,5.5,5.72.07,0,6.57.13,13.15.15.07,0,.13.01.2.01h25.93c5.45,0,14.68,3.29,14.68,15.63,0,7.73-4.68,15.52-15.15,15.52H33.5c-3.1,0-5.61,2.51-5.61,5.61s2.51,5.61,5.61,5.61h73.61c.53,0,1.06-.01,1.58-.04.21.02.42.04.64.04h19.96c9.95,0,14.4,7.62,14.4,15.17,0,4.16-1.41,8.16-3.87,10.96-2.78,3.17-6.71,4.78-11.66,4.78h-30.8c-.07,0-.13,0-.19,0-8.49.03-21.94.15-22.1.15-3.1.03-5.59,2.56-5.56,5.66.03,3.08,2.53,5.57,5.61,5.57h.05c.19,0,18.85-.16,26.01-.16,2.91,0,6.85.47,9.03,2.7,1.75,1.79,1.84,4.12,1.84,4.51-.01.13,0,.12,0,.29v21.89c0,3.1,2.51,5.61,5.61,5.61s5.61-2.51,5.61-5.61v-21.79c.03-.96-.02-4.1-1.56-7.6h6.46c10.38,0,16.66-4.68,20.1-8.6,4.29-4.89,6.65-11.42,6.65-18.36,0-13.12-8.8-26.39-25.63-26.39Z'/%3E%3Ccircle%20cx='131.35'%20cy='21.33'%20r='5.63'%20transform='translate(61.38%20134.52)%20rotate(-67.5)'/%3E%3Ccircle%20cx='16.24'%20cy='145.92'%20r='7.56'%20transform='translate(-98.42%2054.22)%20rotate(-45)'/%3E%3Ccircle%20cx='133.28'%20cy='145.92'%20r='7.56'%20transform='translate(-29.96%2034.53)%20rotate(-13.28)'/%3E%3Ccircle%20cx='29.96'%20cy='16.76'%20r='6.04'%20transform='translate(-3.08%2026.09)%20rotate(-45)'/%3E%3Ccircle%20cx='29.96'%20cy='125.13'%20r='6.04'%20transform='translate(-27.95%2010.23)%20rotate(-13.28)'/%3E%3Cpath%20d='M88.62,140.38h-19c-9.96,0-14.42-7.52-14.42-14.98s4.6-15.27,14.89-15.27h52.23c3.1,0,5.61-2.51,5.61-5.61s-2.51-5.61-5.61-5.61H25.54c-9.84,0-14.32-8.4-14.32-16.2,0-4.13,1.24-7.89,3.49-10.57,2.44-2.91,5.92-4.38,10.36-4.38h72.01c3.1,0,5.61-2.51,5.61-5.61s-2.51-5.61-5.61-5.61h-38.62c-10.29,0-14.89-7.67-14.89-15.27s4.46-14.98,14.42-14.98h14.23c3.61,0,5.84-1.6,7.08-2.93,2.53-2.73,2.65-6.24,2.61-7.45V5.61c0-3.1-2.51-5.61-5.61-5.61s-5.61,2.51-5.61,5.61v9.44h-12.69c-7.86,0-14.52,2.89-19.26,8.36-4.12,4.75-6.38,11.09-6.38,17.84,0,5.37,1.49,10.76,4.42,15.27h-11.7c-7.8,0-14.35,2.9-18.96,8.4-3.94,4.7-6.11,11.02-6.11,17.78,0,13.29,8.95,27.42,25.54,27.42h22.88c-2.87,4.38-4.44,9.68-4.44,15.27,0,13.02,8.81,26.2,25.64,26.2h17.46v9.44c0,3.1,2.51,5.61,5.61,5.61s5.61-2.51,5.61-5.61v-10.29c.04-1.2-.07-4.71-2.6-7.45-1.24-1.34-3.48-2.93-7.08-2.93Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 54%;
    mask-size: 54%;
}


/* ---------------------------------------------------------------------------
   8. EVENT FEATURED IMAGES — SINGLE EVENT PAGES  (2026-09-10)
   Pins every single event featured image to the same 3:2 landscape shape with
   rounded corners, regardless of what was uploaded.

   THE PROBLEM THIS SOLVES
   Avada prints the event featured image at its original uploaded dimensions:
     Avada/tribe-events/single-event.php  ->  avada_singular_featured_image()
     Avada/includes/custom-functions.php  ->  tribe_event_featured_image( ID, 'full', false )
   The 'full' size means no crop and no shape. On top of that, Avada's own rule
   sets the wrapper to display:inline-block with no width, so the block shrank
   to each image's natural width. A tall photo became a vertical wall, a small
   photo rendered small and left-aligned, and no two events matched.

   HOW IT WORKS
   The wrapper is forced to full content width, then the image is given a fixed
   aspect-ratio box with object-fit: cover — the same technique Avada uses on
   the Post Cards image frame, so events and blog cards crop identically.
   Cropping is centered, so uploads should keep the subject in the middle.

   RATIO NOTE
   3 / 2 matches Post Card 969, whose image frame is set to custom_aspect_ratio
   67 in Avada Live. Change both together or the two will drift apart.
   --------------------------------------------------------------------------- */
.single-tribe_events .fusion-events-featured-image {
    display: block;
    width: 100%;
}

.single-tribe_events .fusion-events-featured-image .tribe-events-event-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.single-tribe_events .fusion-events-featured-image .tribe-events-event-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}


/* ---------------------------------------------------------------------------
   9. SINGLE EVENT LAYOUT  (2026-09-10)
   Puts the single event page on the site's own palette and type scale instead
   of The Events Calendar's defaults, and moves the practical information to
   where people look for it.

   WHAT WAS WRONG
   - The title sat in a translucent light-green band, rgba(212,231,181,.85),
     painted over the photo. That green is TEC's own accent (--primary_color)
     and appears nowhere else on the site.
   - Title text resolved to --h1_typography-color, cream #fff9ef, on that pale
     band: about 2.7:1 contrast, unreadable over a bright photo.
   - Date, time and cost rendered at the very bottom of the page, below the
     whole description. On the Hawaii retreat that put the price ~2,200px down.

   WHAT THIS DOES
   The post container becomes a flex column so the blocks reorder without
   touching PHP: photo + title, details card, add to calendar, description.
   The title is lifted out of the overlay into Playfair plum; the schedule line
   becomes a sage uppercase eyebrow on typography set 2; the meta block becomes
   a bordered cream card with its rows in a responsive grid.

   ON SPECIFICITY — READ BEFORE EDITING
   Exactly one !important survives in this section, on the card heading size,
   and the note above that rule explains why. Everything else is plain. Three
   separate mechanisms were making overrides here fail, with different fixes:
     1. Load order. Avada writes Global Options to 'fusion-dynamic-css' and
        enqueues it after everything else, so a child rule used to lose every
        specificity TIE. Fixed in functions.php by declaring that handle as a
        dependency, which makes this file load last.
     2. Specificity. Avada and TEC both ship deeply nested selectors, and those
        win on merit, not order. The two that bite on this page:
          .tribe-events-single > .tribe_events > :not(.primary, .secondary, …)
            { order: 1 }                      in tribe-events-single-skeleton.css
          .single-tribe_events main .fusion-content-widget-area
            .tribe-events-single-section-title { font-size: … }     in Avada's
            generated stylesheet
        :not() carries the specificity of its most specific argument, so the
        first is 0,3,0 and the second 0,4,1. The rules below deliberately match
        or exceed those shapes. If a rule here stops applying after an update,
        check what Avada or TEC changed its selector to and match it.
     3. Avada's own !important, which its responsive typography uses. That is
        the only case where a flag here is justified, because nothing else can
        answer it. Before adding one, confirm the rule you are fighting really
        carries !important — check getPropertyPriority in the console rather
        than assuming, because both other causes look identical from the page.
   --------------------------------------------------------------------------- */

/* 9.1 Block order. Selectors are 0,4,0 to clear TEC's 0,3,0 skeleton rule. */
.single-tribe_events .tribe-events-single > .tribe_events {
    display: flex;
    flex-direction: column;
}

.single-tribe_events .tribe-events-single > .tribe_events > .fusion-events-featured-image {
    order: 1;
}

.single-tribe_events .tribe-events-single > .tribe_events > .fusion-event-meta-columns {
    order: 2;
}

.single-tribe_events .tribe-events-single > .tribe_events > .tribe-events {
    order: 3;
}

.single-tribe_events .tribe-events-single > .tribe_events > .tribe-events-single-event-description {
    order: 4;
}

/* The Avada page title bar already prints the event name above the photo. Now
   that the real title sits under the photo, drop the duplicate. */
body.single-tribe_events .fusion-page-title-bar {
    display: none;
}

body.single-tribe_events #main {
    padding-top: 40px;
}

/* 9.2 Title out of the green overlay band */
.single-tribe_events .fusion-events-featured-image {
    margin-bottom: 26px;
}

.single-tribe_events .fusion-events-featured-image .fusion-ec-hover-type .fusion-events-single-title-content {
    position: static;
    display: block;
    background-color: transparent;
    padding: 26px 0 0;
    z-index: auto;
}

.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-single-event-title {
    font-family: var(--awb-typography1-font-family);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--awb-color5, #56203d);
    margin: 0 0 12px;
}

/* Avada paints everything in this block with --primary_overlay_text_color,
   which is cream — invisible now that the block sits on the cream page rather
   than on the photo. The inner spans need the color restated, not just the
   heading, or the dates disappear and only the separator shows. */
.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule,
.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule h2,
.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule h3,
.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule span,
.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule abbr,
.single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule div {
    font-family: var(--awb-typography2-font-family);
    font-size: 20px; /* was 15px; raised 2026-09-11 with the details card, see section 13 */
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--awb-color8, #6e9075);
    margin: 0;
}

/* 9.3 Details card */
.single-tribe_events main .fusion-content-widget-area.fusion-event-meta-columns {
    background-color: var(--awb-color1, #fff9ef);
    border: 1px solid var(--awb-color6, #e9e3dc);
    border-radius: 12px;
    padding: 30px 34px 26px;
    margin-bottom: 40px;
}

.single-tribe_events main .fusion-content-widget-area .fusion-event-meta-wrapper {
    width: 100%;
    margin: 0;
}

.single-tribe_events main .fusion-content-widget-area .tribe-events-single-section {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* Section headings inside the card ("Details", "Venue", "Organizer") are wired
   to the site's H2 so they follow the type scale instead of being a number
   parked here. 0,5,1 to clear Avada's 0,4,1 rule on the same element.

   THE ONE !important IN THIS SECTION, AND WHY.
   Avada's responsive typography writes
     .fusion-responsive-typography-calculated { font-size: calc(…) !important }
   driven by the inline --fontSize the element carries (30 here). !important can
   only be answered with !important — no selector, however deep, and no load
   order beats it. Verified by appending an identical-specificity rule last in
   the document: without the flag it still lost, with it, it won.
   The clamp keeps Avada's responsive behaviour: it tracks the global H2 on wide
   screens and eases down to 24px on a phone, so this is not a size frozen here. */
.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-group .tribe-events-single-section-title {
    font-family: var(--h2_typography-font-family, "Playfair Display", Georgia, serif);
    font-size: clamp(1.5rem, 3.2vw, var(--h2_typography-font-size, 40px)) !important;
    font-weight: var(--h2_typography-font-weight, 400);
    letter-spacing: var(--h2_typography-letter-spacing, 0);
    text-transform: none;
    line-height: 1.2;
    color: var(--h2_typography-color, #56203d);
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--awb-color6, #e9e3dc);
}

/* Events that carry a venue or organiser render extra groups in the same card.
   Space them apart so the card reads as sections rather than one run-on list. */
.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-group + .tribe-events-meta-group {
    margin-top: 34px;
}

.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-item {
    margin: 0;
    padding: 0;
}

.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-label {
    display: block;
    font-family: var(--awb-typography2-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--awb-color4, #5b6057);
    opacity: 0.65;
    margin-bottom: 4px;
}

.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-value,
.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-value abbr,
.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-value div {
    display: block;
    font-family: var(--awb-typography4-font-family);
    font-size: 17px;
    line-height: 1.4;
    color: var(--awb-color4, #5b6057);
    border: none;
    text-decoration: none;
}

/* A full event URL is far longer than a date, so let its row run the width of
   the card rather than wrapping into four lines inside one grid column. */
.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-item:has(.tribe-events-event-url) {
    grid-column: 1 / -1;
}

.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-value a {
    color: var(--awb-color8, #6e9075);
    overflow-wrap: anywhere;
}

/* Avada's global a:hover adds an underline and outranks a plain base rule, so
   hover is restated here rather than assumed. See gotcha 1 in the notes. */
.single-tribe_events main .fusion-content-widget-area .tribe-events-meta-value a:hover {
    color: var(--awb-color5, #56203d);
    text-decoration: underline;
}

/* 9.4 Add to calendar sits with the details, not adrift */
.single-tribe_events .tribe-events.tribe-common {
    margin: 0 0 44px;
}

/* 9.5 Narrow screens: the card's desktop padding eats too much of a phone
   screen. The details drop to a single column on their own via auto-fit. */
@media only screen and (max-width: 640px) {
    .single-tribe_events main .fusion-content-widget-area.fusion-event-meta-columns {
        padding: 24px 20px 20px;
        border-radius: 10px;
        margin-bottom: 32px;
    }

    .single-tribe_events main .fusion-content-widget-area .tribe-events-meta-list {
        gap: 16px 20px;
    }

    .single-tribe_events .fusion-events-featured-image .fusion-ec-hover-type .fusion-events-single-title-content {
        padding-top: 20px;
    }

    .single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule,
    .single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule h2,
    .single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule h3,
    .single-tribe_events .fusion-events-featured-image .fusion-events-single-title-content .tribe-events-schedule span {
        font-size: 18px; /* was 13px; tracks the desktop size */
        letter-spacing: 0.05em;
    }

    body.single-tribe_events #main {
        padding-top: 24px;
    }
}


/* ---------------------------------------------------------------------------
   10. EVENT DESCRIPTION LEAD-IN HEADINGS  (2026-09-10)
   Styles the bold lead-in at the start of a description paragraph — "Restore &
   Rejuvenate", "Highlights:", "Location:", "Not Included:" — at H3 scale.

   WHAT THESE ACTUALLY ARE
   Not headings. Betty writes each block as one paragraph whose first element is
   <strong>, with the lines below separated by <br>:
     <p><strong>Highlights:</strong><br> 7 nights accommodation<br> …</p>
   CSS can make that LOOK like a heading but cannot make it BE one — the page
   outline, screen readers and search engines still see a paragraph. Converting
   them to real <h3> means editing each event's description; this rule is what
   makes every event Betty writes this way read correctly without her having to
   learn markup.

   Sizing follows the site's H3 set, so the type scale still governs. The rule
   after it hides the <br> that used to follow the bold text inline — now that
   the lead-in is a block, that break would add an empty line under it.

   NOTE: paragraphs where the lead-in was never bolded are not matched. On the
   Hawaii retreat, "Sample Daily Schedule:" is plain text, so it stays body
   copy until someone bolds it in the editor.
   --------------------------------------------------------------------------- */
.single-tribe_events .tribe-events-single-event-description > p > strong:first-child {
    display: block;
    font-family: var(--h3_typography-font-family, "Playfair Display", Georgia, serif);
    font-size: clamp(1.25rem, 2.4vw, var(--h3_typography-font-size, 30px));
    font-weight: var(--h3_typography-font-weight, 400);
    letter-spacing: var(--h3_typography-letter-spacing, 0);
    line-height: 1.25;
    color: var(--h3_typography-color, var(--awb-color5, #56203d));
    margin: 6px 0 12px;
}

.single-tribe_events .tribe-events-single-event-description > p > strong:first-child + br {
    display: none;
}


/* ---------------------------------------------------------------------------
   10. EVENTS-ONLY COLOUR HEADER LOGO
   The header (Avada Layout Builder, Image element in logo mode) shows the
   white horizontal logo on every page. That suits the homepage hero but
   disappears on cream. On The Events Calendar pages only (the events
   listing and single events) the white image is hidden and the two-colour
   logo, exported from Betty's vector file, is painted in its place.

   The Global Options logo slots stay on the white file on purpose, so every
   other page is unchanged. Delete this section to undo.

   How: visibility:hidden keeps the img in the layout, so the header does not
   move. The link around it carries the colour logo as a background, scaled
   to fit that same box. Whichever of Avada's standard, sticky or mobile
   logo is showing sizes the link, so all three states are covered.
   Files: images/bwell-logo-color.png (452x116) and the @2x retina copy.
   --------------------------------------------------------------------------- */
.single-tribe_events .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a,
.post-type-archive-tribe_events .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a {
    display: inline-block;
    background: url("images/bwell-logo-color.png") left center / contain no-repeat;
    background-image: image-set(url("images/bwell-logo-color.png") 1x, url("images/bwell-logo-color@2x.png") 2x);
}

.single-tribe_events .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a > img,
.post-type-archive-tribe_events .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a > img {
    visibility: hidden;
}


/* ---------------------------------------------------------------------------
   11. EVENTS-ONLY MENU COLOUR
   Same problem as the logo in section 10: the main menu links are cream
   (#fff9ef) for the dark hero on the homepage, so on the cream events pages
   they read as blank space. Repainted sage on those pages only, to match the
   logo swap. Global Options menu colours are untouched, so every other page
   keeps the cream menu.

   Liz picked the brown (--awb-color7, #4b3900 — the logo wordmark colour) for
   the resting state on 2026-09-11, after first trying sage. That is about
   11.5:1 on cream, well clear of WCAG AA. Hover and the active item are sage
   (--awb-color8, #6e9075), so the state change still reads.

   Only the top-level links are touched. Submenu links sit on their own
   dropdown background and are still readable as they are.

   HOW, and why the two !important flags are here. Avada paints the links with
   `.awb-menu__main-a { color: var(--awb-color) !important }` and sets
   --awb-color inline on the nav element, so a plain colour rule here loses on
   both counts — see gotcha 3 in the notes. Overriding the VARIABLE instead
   leaves Avada's own rules doing the painting, including hover and the active
   item; !important is needed only because the value it replaces is inline.
   --------------------------------------------------------------------------- */
.single-tribe_events .fusion-tb-header nav.awb-menu,
.post-type-archive-tribe_events .fusion-tb-header nav.awb-menu {
    --awb-color: var(--awb-color7, #4b3900) !important;
    --awb-hover-color: var(--awb-color8, #6e9075) !important;
    --awb-active-color: var(--awb-color8, #6e9075) !important;
}

/* Size. The events pages run a different header layout from the rest of the
   site: 16px links here against 24px elsewhere, which reads as a jump when you
   navigate in. Nudged to 18px — Liz asked for 2px on 2026-09-11 — deliberately
   short of matching 24px, since that header sits on cream with no hero behind
   it and the smaller menu suits it.

   !important for the same reason as the colours above: Avada sets the menu
   font-size from a variable it prints inline on the nav, in a rule flagged
   !important. This one is on the link rather than the variable, so it does not
   depend on Avada's variable name staying the same. */
.single-tribe_events .fusion-tb-header .awb-menu__main-a,
.post-type-archive-tribe_events .fusion-tb-header .awb-menu__main-a {
    font-size: 18px !important;
}


/* ---------------------------------------------------------------------------
   12. POST CARD DATES
   The date under each card title was 13px against a 30px title — legible but
   easy to miss. Now 18px (doubled to 26px first, dialled back by Liz on
   2026-09-11).

   Two markups, because the two grids are built differently: the blog cards
   print a real published-date meta element, the event cards print the date as
   a plain paragraph inside a Text element. The paragraph rule is therefore
   matched by position, not by meaning: if an event card ever gains an excerpt
   or a second Text block, that copy would pick up this size too and the rule
   needs narrowing.

   Applies to every Post Cards grid — homepage, events listing and blog — on
   purpose: they are the same component and mixed date sizes would show.
   --------------------------------------------------------------------------- */
.fusion-post-cards .post-card .fusion-meta-tb,
.fusion-post-cards .post-card .fusion-tb-published-date,
.fusion-post-cards .post-card .fusion-text.fusion-text-no-margin p {
    font-size: 18px;
    line-height: 1.3;
}


/* ---------------------------------------------------------------------------
   13. SINGLE EVENT DETAIL TYPE
   The rows in the details card were set at TEC's own sizes — 12px labels and
   17px values — which read as fine print next to a 41px "Details" heading.
   Now 16px labels, 20px values (Liz settled on 20px on 2026-09-11, after
   doubling to 34px looked too heavy). Labels stay smaller than values so the
   row still reads label-then-answer rather than two equal lines.

   The schedule eyebrow under the title moved with them, 15px to 20px (and
   13px to 18px on phones), but that edit is in SECTION 9, which already owns
   the eyebrow with a longer selector. A second rule here would lose to it.

   The Website row is left alone. A full URL at 34px wraps across three lines
   and swamps the card. That exclusion uses :has(), so in a browser without it
   the whole rule is skipped and every row keeps TEC's sizes — no broken
   layout, just no bump.

   Venue and Organizer groups are untouched; only the Details group was asked
   for.
   --------------------------------------------------------------------------- */
.single-tribe_events .tribe-events-meta-group-details .tribe-events-meta-item:not(:has(.tribe-events-event-url-label)) .tribe-events-meta-label {
    font-size: 16px;
    line-height: 1.3;
}

.single-tribe_events .tribe-events-meta-group-details .tribe-events-meta-item:not(:has(.tribe-events-event-url-label)) .tribe-events-meta-value,
.single-tribe_events .tribe-events-meta-group-details .tribe-events-meta-item:not(:has(.tribe-events-event-url-label)) .tribe-events-meta-value a,
.single-tribe_events .tribe-events-meta-group-details .tribe-events-meta-item:not(:has(.tribe-events-event-url-label)) .tribe-events-abbr {
    font-size: 20px;
    line-height: 1.3;
}


/* ---------------------------------------------------------------------------
   14. DELICIOUS RECIPES — ARCHIVE GRID & SINGLE RECIPE  (2026-09-29)
   Styles the Delicious Recipes plugin output to match the site's brand:
   rounded cards with hover lift (matching blog post cards), brand colours
   on the recipe card, and a readable header on single recipe pages.

   The plugin uses CSS custom properties --primary-color and --secondary-color
   which are set in its own settings (green & cream). The overrides below
   add on-brand styling that the plugin's defaults don't cover.
   --------------------------------------------------------------------------- */

/* 14.1 Archive grid cards — rounded corners, hover lift, image zoom */
.dr-archive-list-gridwrap.grid .dr-archive-single {
    border-radius: 12px;
    overflow: hidden;
    background: var(--awb-color1, #fff9ef);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dr-archive-list-gridwrap.grid .dr-archive-single:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dr-archive-single figure img,
.dr-archive-single figure svg.dr-fallback-svg {
    border-radius: 0;
    transition: transform 0.4s ease;
}

.dr-archive-single:hover figure img {
    transform: scale(1.05);
}

.dr-archive-single figure {
    overflow: hidden;
    margin: 0;
}

.dr-archive-single .wpdr-feat-thumb:not(.dr-fav-recipe-fig) {
    padding-bottom: 0;
}

.dr-archive-single .dr-archive-details {
    padding: 16px 20px 20px;
}

.dr-archive-single .dr-archive-list-title {
    font-family: var(--awb-typography1-font-family, "Playfair Display", Georgia, serif);
    color: var(--awb-color5, #56203d) !important;
    font-size: 1.1em !important;
    line-height: 1.4;
}

.dr-archive-single .dr-archive-list-title a:hover {
    color: var(--awb-color8, #6e9075) !important;
}

.dr-archive-single .dr-entry-meta > span {
    color: var(--awb-color4, #5b6057);
}

.dr-archive-single .dr-entry-meta svg.icon {
    fill: var(--awb-color8, #6e9075);
}

/* 14.2 Single recipe page — header fix: make header flow in-page (not
   overlapping content). No bg color needed — color logo + dark menu text
   on the cream page background matches the Events and Betty's Cookbook pages. */
body.single-recipe .fusion-tb-header .fusion-fullwidth {
    position: relative !important;
}

/* Hide Avada's default title bar on Betty's Cookbook (Recipe Search) page —
   the plugin provides its own branded header */
body.page-id-4305 .fusion-page-title-bar {
    display: none !important;
}

/* 14.2b Betty's Cookbook (Recipe Search) page — search header & filter styling */
body.page-id-4305 .dr-advance-search .page-header {
    background: var(--awb-color8, #6e9075);
    padding: 40px 20px 30px;
    border-radius: 12px 12px 0 0;
}

body.page-id-4305 .dr-advance-search .page-header .container::before {
    content: "Betty\2019s Cookbook";
    display: block;
    font-family: var(--awb-typography1-font-family, "Playfair Display", Georgia, serif);
    color: #fff;
    font-size: 36px;
    text-align: center;
    margin-bottom: 15px;
}

body.page-id-4305 .dr-advance-search .search-form {
    max-width: 600px;
}

body.page-id-4305 .dr-advance-search .search-form input[type="search"] {
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    font-size: 15px;
}

body.page-id-4305 .dr-advance-search .search-form button[type="submit"] {
    background: var(--awb-color5, #56203d);
    border-radius: 0 25px 25px 0;
}

body.page-id-4305 .advance-search-options {
    background: var(--awb-color1, #fff9ef);
    border-radius: 0 0 12px 12px;
    padding: 20px 0 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

body.page-id-4305 .advance-search-options label {
    font-family: var(--awb-typography1-font-family, "Playfair Display", Georgia, serif);
    color: var(--awb-color5, #56203d);
    font-size: 13px;
    font-weight: 600;
}

body.page-id-4305 .advance-search-options .multiselect__tags,
body.page-id-4305 .advance-search-options select {
    border-radius: 8px;
    border-color: var(--awb-color2, #e9e3dc);
}

body.page-id-4305 .advance-search-options .multiselect__option--highlight {
    background: var(--awb-color8, #6e9075);
}

body.page-id-4305 .advance-search-options a[href="#"] {
    background: var(--awb-color5, #56203d);
    color: #fff;
    border-radius: 25px;
    padding: 8px 24px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

body.page-id-4305 .advance-search-options a[href="#"]:hover {
    background: var(--awb-color8, #6e9075);
}

/* Hide Avada's title bar on single recipes — the recipe name is shown by
   WP Delicious in the page body, so the bar is redundant */
body.single-recipe .fusion-page-title-bar {
    display: none !important;
}

body.single-recipe #main {
    padding-top: 40px;
}

/* WP Delicious page-level title (the .dr-entry-title above the featured
   image) — style in plum Playfair to match event pages and other headers */
body.single-recipe .dr-entry-title {
    font-family: var(--awb-typography1-font-family, "Playfair Display", Georgia, serif);
    color: var(--awb-color5, #56203d) !important;
    font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Print Recipe button above the featured image — WP Delicious sets its bg
   to var(--secondary-color) (cream) with white text, invisible on cream.
   Override to the brand green so it matches the Jump To Recipe button. */
body.single-recipe .dr-buttons .dr-print-trigger.dr-btn2 {
    background-color: var(--awb-color8, #6e9075) !important;
    border: 1px solid var(--awb-color8, #6e9075) !important;
    color: #fff !important;
    transition: all ease 0.3s;
}
body.single-recipe .dr-buttons .dr-print-trigger.dr-btn2:hover {
    background-color: transparent !important;
    color: var(--awb-color8, #6e9075) !important;
}

body.single-recipe .wpdelicious-recipe-info-metas {
    display: none !important;
}

body.single-recipe .dr-ingredients-scale {
    display: none !important;
}

body.single-recipe .dr-post-summary .dr-yields {
    display: none !important;
}

/* 14.2c Recipe card meta icons — WP Delicious sets icon fill to
   var(--secondary-color) which is cream (#fff9ef), invisible on the cream
   page background. Override to the brand green so they're visible. */
.dr-recipe-meta svg.icon,
.dr-post-summary svg.icon,
.wpdelicious-recipe-info-metas svg.icon,
.dr-summary-holder svg.icon {
    fill: var(--awb-color8, #6e9075) !important;
}

/* Also fix the post-navigation recipe cards at the bottom of single recipes */
.single-recipe .post-navigation .dr-recipe-meta svg.icon {
    fill: var(--awb-color8, #6e9075) !important;
}

/* Hide the recipe card header (image + title + second print button) —
   the page already shows the featured image, the title, and a print
   button above */
body.single-recipe .dr-recipe-summary-inner {
    display: none !important;
}
body.single-recipe .dr-extra-meta {
    margin-top: 0 !important;
}

/* 14.3 Single recipe card styling */
.dr-summary-holder {
    border-radius: 12px;
    overflow: hidden;
}

.dr-post-summary .dr-psum-title {
    font-family: var(--awb-typography1-font-family, "Playfair Display", Georgia, serif);
    color: var(--awb-color5, #56203d);
}

.dr-tab-content .dr-title,
.dr-ingredient .dr-title,
.dr-instructions .dr-title,
.dr-note .dr-title,
.dr-extra-notes .dr-title {
    font-family: var(--awb-typography1-font-family, "Playfair Display", Georgia, serif);
    color: var(--awb-color5, #56203d);
}

/* Instruction step numbers — plain numbers instead of green circles */
.dr-summary-holder .dr-ordered-list > li::before {
    content: counter(section) ". " !important;
    background: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
    font-weight: normal !important;
    position: static !important;
    display: inline !important;
}
.dr-summary-holder .dr-ordered-list > li {
    padding-left: 0 !important;
}
.dr-summary-holder .dr-ordered-list > li .dr-instruction {
    display: inline !important;
}

/* Bump meta bar text (Difficulty, Prep Time, Cook Time, etc.) to body size */
body.single-recipe .dr-extra-meta .dr-sim-metaa,
body.single-recipe .dr-extra-meta .dr-sim-metaa b,
body.single-recipe .dr-extra-meta .dr-sim-metaa span {
    font-size: 1rem !important;
}

/* Print Recipe button — match site buttons */
.dr-buttons .dr-print-btn,
.dr-buttons .dr-print-btn a {
    background-color: var(--awb-color8, #6e9075) !important;
    border-radius: 25px;
}

.dr-buttons .dr-print-btn:hover,
.dr-buttons .dr-print-btn a:hover {
    background-color: var(--awb-color5, #56203d) !important;
}

/* Jump To Recipe button */
.dr-recipe-jump-to .dr-jump-to-btn {
    background-color: var(--awb-color8, #6e9075);
    border-radius: 25px;
    border: none;
}

.dr-recipe-jump-to .dr-jump-to-btn:hover {
    background-color: var(--awb-color5, #56203d);
}

/* 14.4 Recipe page colour logo & menu (same as events pages) */
body.single-recipe .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a,
body.post-type-archive-recipe .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a,
body.page-id-4305 .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a {
    display: inline-block;
    background: url("images/bwell-logo-color.png") left center / contain no-repeat;
    background-image: image-set(url("images/bwell-logo-color.png") 1x, url("images/bwell-logo-color@2x.png") 2x);
}

body.single-recipe .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a > img,
body.post-type-archive-recipe .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a > img,
body.page-id-4305 .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a > img {
    visibility: hidden;
}

body.single-recipe .fusion-tb-header nav.awb-menu,
body.post-type-archive-recipe .fusion-tb-header nav.awb-menu,
body.page-id-4305 .fusion-tb-header nav.awb-menu {
    --awb-color: var(--awb-color7, #4b3900) !important;
    --awb-hover-color: var(--awb-color8, #6e9075) !important;
    --awb-active-color: var(--awb-color8, #6e9075) !important;
}

body.single-recipe .fusion-tb-header .awb-menu__main-a,
body.post-type-archive-recipe .fusion-tb-header .awb-menu__main-a,
body.page-id-4305 .fusion-tb-header .awb-menu__main-a {
    font-size: 18px !important;
}


/* ---------------------------------------------------------------------------
   15. LIGHT-HEADER PAGES  (2026-10-08)
   Ordinary pages whose content starts on the cream background, with no dark
   hero behind the header. Same treatment as the Events and Cookbook pages:
   colour logo, brown menu, and a slim title band in plum Playfair (matches the
   "Events" band: 30px on #e9e3dc). The class comes from
   bwell_light_header_body_class() in functions.php, which matches pages by
   slug. First used for the 2026 Hawaii retreat page restored from the old site.
   --------------------------------------------------------------------------- */
body.bwell-light-header .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a {
    display: inline-block;
    background: url("images/bwell-logo-color.png") left center / contain no-repeat;
    background-image: image-set(url("images/bwell-logo-color.png") 1x, url("images/bwell-logo-color@2x.png") 2x);
}

body.bwell-light-header .fusion-tb-header .fusion-imageframe.has-fusion-standard-logo > a > img {
    visibility: hidden;
}

body.bwell-light-header .fusion-tb-header nav.awb-menu {
    --awb-color: var(--awb-color7, #4b3900) !important;
    --awb-hover-color: var(--awb-color8, #6e9075) !important;
    --awb-active-color: var(--awb-color8, #6e9075) !important;
}

body.bwell-light-header .fusion-tb-header .awb-menu__main-a {
    font-size: 18px !important;
}

/* 15.1 Title band */
body.bwell-light-header .fusion-page-title-bar {
    height: 85px;
    background-color: #e9e3dc;
}

body.bwell-light-header .fusion-page-title-bar h1,
body.bwell-light-header .fusion-page-title-bar .entry-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 30px !important;
    line-height: 45px !important;
    font-weight: 400;
    color: var(--awb-color5, #56203d) !important;
}

body.bwell-light-header .fusion-page-title-bar .fusion-page-title-secondary {
    display: none;
}

/* 15.2 Breathing room under the band (section 1 zeroes page top padding) */
body.bwell-light-header #main {
    padding-top: 50px !important;
}

/* 15.3 Body copy: section headings get space above, buttons keep their pill */
body.bwell-light-header .post-content h2 {
    margin-top: 1.6em;
    clear: both; /* start below the floated room photos */
}

body.bwell-light-header .post-content h3 {
    margin-top: 1.2em;
}

body.bwell-light-header .post-content img {
    border-radius: 8px;
}

body.bwell-light-header .post-content a.fusion-button {
    text-decoration: none;
    margin: 0.5em 0 1em;
}


/* ---------------------------------------------------------------------------
   16. PUNCH LIST 2  (2026-10-09)
   --------------------------------------------------------------------------- */

/* 16.1 H2 leading. Avada's global H2 line-height is 0.75, so any heading that
   wraps (e.g. "Benefits & Outcomes" on a phone) has its lines overlapping.
   Overriding the variable keeps Avada's own rules doing the painting, the same
   approach as the menu colours in section 11. Title elements on the live site
   take their line-height from Global typography set 2 (also 0.75) rather than
   the H2 setting, so that set is raised too. */
body {
    --h2_typography-line-height: 1.2;
    --awb-custom_typography_2-line-height: 1.2;
}

/* 16.2 Phone gutters. Several columns carry 60-90px of side padding from the
   desktop layout, and Avada reuses it on phones, which left text blocks about
   195px wide on a 375px screen. On phones the side padding of every column and
   container is capped: anything set lower (including 0) is left as it is. */
@media only screen and (max-width: 640px) {
    .fusion-layout-column > .fusion-column-wrapper {
        padding-left: min(var(--awb-padding-left-small, var(--awb-padding-left-medium, var(--awb-padding-left, 0px))), 16px) !important;
        padding-right: min(var(--awb-padding-right-small, var(--awb-padding-right-medium, var(--awb-padding-right, 0px))), 16px) !important;
    }

    .fusion-fullwidth {
        padding-left: min(var(--awb-padding-left-small, var(--awb-padding-left-medium, var(--awb-padding-left, 0px))), 18px) !important;
        padding-right: min(var(--awb-padding-right-small, var(--awb-padding-right-medium, var(--awb-padding-right, 0px))), 18px) !important;
    }
}

/* 16.3 WP Delicious on phones. Avada ships a Bootstrap-style rule that makes
   every .container 750px wide from 0px up. WP Delicious wraps its recipe
   banner (Jump To / Print buttons) and the Cookbook search header in a
   .container, so both ran off the right edge of a phone. Below tablet width a
   container is just the width of its parent, as Bootstrap intends. */
@media only screen and (max-width: 767px) {
    .container {
        width: auto;
        max-width: 100%;
    }

    /* Recipes and the Cookbook stacked Avada's 30px page gutter on top of
       the plugin's own 15px; one gutter is enough on a phone. */
    body.single-recipe #main,
    body.page-id-4305 #main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.single-recipe .wpdelicious-outer-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    body.page-id-4305 .dr-advance-search .page-header .container::before {
        font-size: 30px;
        line-height: 1.2;
    }

    body.page-id-4305 .dr-advance-search .search-form {
        max-width: 100%;
    }

    body.page-id-4305 .dr-advance-search .search-form label,
    body.page-id-4305 .dr-advance-search .search-form input[type="search"] {
        min-width: 0;
        width: 100%;
    }
}

/* 16.4 Mobile menu button on cream-header pages. The hamburger is cream like
   the desktop links, so on the Events, Cookbook, recipe and light-header
   pages it was invisible. Brown to match the desktop menu there (section 11). */
.single-tribe_events .fusion-tb-header nav.awb-menu,
.post-type-archive-tribe_events .fusion-tb-header nav.awb-menu,
body.single-recipe .fusion-tb-header nav.awb-menu,
body.post-type-archive-recipe .fusion-tb-header nav.awb-menu,
body.page-id-4305 .fusion-tb-header nav.awb-menu,
body.bwell-light-header .fusion-tb-header nav.awb-menu {
    --awb-mobile-trigger-color: var(--awb-color7, #4b3900) !important;
}