/* ==========================================================================
   The Love Trumpet · Energy Medicine Page Enhancements
   File: css/energy-enhancements.css
   Load AFTER the site's main stylesheet on about-energy-medicine.html.
   All classes use the "tee-" prefix so nothing collides with existing styles.
   ========================================================================== */

:root {
  --tee-navy: #0a1d30;
  --tee-navy-2: #123a5c;
  --tee-gold: #c9a84c;
  --tee-gold-text: #7A5F28;
  --tee-cream: #f4f1e9;
  --tee-bg: #fdfcf9;
  --tee-ink: #39424c;
  --tee-highlight: #fff9ae;
  --tee-serif: "Cormorant Garamond", serif;
  --tee-sans: Inter, sans-serif;
}

/* ---------- Shared ---------- */
.tee-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.tee-eyebrow { font: 600 15px/1 var(--tee-sans) !important; letter-spacing: .3em !important; text-transform: uppercase; color: var(--tee-gold-text) !important; margin: 0 0 14px !important; }
.tee-eyebrow--lg { font-size: 15px !important; }
.tee-h2 { font-family: var(--tee-serif) !important; font-weight: 500 !important; font-size: clamp(32px, 4vw, 44px) !important; line-height: 1.1 !important; color: var(--tee-navy) !important; margin: 0 0 16px !important; }
.tee-p { font: 400 16px/1.75 var(--tee-sans) !important; color: var(--tee-ink) !important; margin: 0 0 16px !important; }
.tee-btn {
  display: inline-block; background: var(--tee-gold); color: var(--tee-navy) !important;
  font: 600 15px/1 var(--tee-sans); letter-spacing: .04em; padding: 17px 30px; border-radius: 100px;
  border: 0; cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.tee-btn:hover, .tee-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201, 168, 76, .4); }
.tee-card { background: #fff; border: 1px solid rgba(10, 29, 48, .1); border-radius: 14px; padding: 24px; text-align: left; }
.tee-card h3 { font: 600 16px/1.35 var(--tee-sans) !important; color: var(--tee-navy) !important; margin: 0 0 8px !important; }
.tee-card p { font: 400 14px/1.6 var(--tee-sans) !important; color: var(--tee-ink) !important; margin: 0 !important; }
.tee-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- 1. Reading progress + "On this page" ---------- */
.tee-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--tee-gold); z-index: 10000; transition: width .1s linear; }
.tee-toc-wrap { margin: 40px auto 0; max-width: 860px; }
.tee-toc-wrap .tee-eyebrow { text-align: center; margin-bottom: 12px !important; }
.tee-toc { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tee-toc a { font: 500 16px var(--tee-sans); color: var(--tee-navy); text-decoration: none; padding: 10px 16px; border-radius: 100px; border: 1px solid rgba(10, 29, 48, .18); background: #fff; }
.tee-toc a:hover, .tee-toc a:focus-visible { border-color: var(--tee-navy); }

/* ---------- Figures & captions ---------- */
.tee-figure { margin: 40px auto 0; max-width: 900px; text-align: center; }
.tee-figure svg { width: 100%; height: auto; display: block; }
.tee-caption { font: 500 20.33px/1.5 var(--tee-serif) !important; font-style: normal !important; color: #000 !important; margin-top: 12px; }
.tee-caption--lg { font-size: 21px !important; margin-top: 14px; }

/* ---------- 2. Interactive energy anatomy ---------- */
.tee-anat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; text-align: left;
  background: radial-gradient(circle at 30% 45%, #16395a, var(--tee-navy) 70%); border-radius: 18px; padding: 26px;
}
.tee-anat svg { width: 100%; height: auto; max-height: 470px; }
.tee-anat-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tee-anat-legend button { font: 500 15px var(--tee-sans); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); border-radius: 100px; padding: 9px 15px; cursor: pointer; transition: all .2s ease; }
.tee-anat-legend button[aria-pressed="true"] { background: var(--tee-gold); color: var(--tee-navy); border-color: var(--tee-gold); }
.tee-anat h4 { font: 500 30px/1.2 var(--tee-serif); color: #fff; margin: 0 0 8px; }
.tee-anat-text { font: 400 17px/1.65 var(--tee-sans) !important; color: rgba(255, 255, 255, .82) !important; margin: 0 !important; }
.tee-anat-hint { font: 400 17.67px var(--tee-sans) !important; color: rgba(255, 255, 255, .5) !important; margin: 16px 0 0 !important; }
.tee-anat .tee-layer { transition: opacity .5s ease; }
.tee-anat.is-focused .tee-layer { opacity: .12; }
.tee-anat.is-focused .tee-layer.is-active { opacity: 1; }
.tee-nerve { stroke-dasharray: 6 14; animation: tee-dash 1.4s linear infinite; }
.tee-spark { animation: tee-twinkle 2.4s ease-in-out infinite; }
.tee-aura { transform-origin: 150px 280px; animation: tee-aura 4s ease-in-out infinite; }
.tee-fas-web { animation: tee-fas-breathe 5s ease-in-out infinite; opacity: .3; }
.tee-fas-flow { stroke-dasharray: 22 30; animation: tee-dash 3.2s linear infinite; opacity: .85; }
@keyframes tee-fas-breathe { 0%, 100% { opacity: .18; } 50% { opacity: .42; } }
@keyframes tee-dash { to { stroke-dashoffset: -60; } }
@keyframes tee-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes tee-aura { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .7; transform: scale(1.04); } }

/* ---------- 3. Voltage Ladder gauge + yellow highlight ---------- */
.tee-ladder-wrap { display: grid; grid-template-columns: 70px 1fr; gap: 22px; align-items: stretch; }
.tee-gauge { position: relative; border-radius: 40px; background: linear-gradient(var(--tee-gold), #e8d9a8 40%, #e9b8a0 70%, #b85c4a); min-height: 100%; }
.tee-gauge-marker { position: absolute; left: 50%; top: 0; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--tee-navy); transform: translate(-50%, -50%); transition: top .35s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.tee-gauge-label { position: absolute; left: 50%; transform: translateX(-50%); font: 600 10px var(--tee-sans); color: var(--tee-navy); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tee-gauge-label--top { top: -18px; }
.tee-gauge-label--bottom { bottom: -18px; }
[data-tee-ladder] > div { cursor: pointer; transition: background-color .35s ease, box-shadow .35s ease; }
[data-tee-ladder] > div:hover,
[data-tee-ladder] > div.tee-row-on {
  background: var(--tee-highlight) !important;
  box-shadow: inset 4px 0 0 var(--tee-gold), 0 6px 18px rgba(201, 168, 76, .28) !important;
  position: relative; z-index: 1;
}

/* ---------- 4. Energy check-in ---------- */
.tee-checkin { margin-top: 44px; text-align: center; padding: 36px 30px; background: var(--tee-cream); border-radius: 14px; }
.tee-checkin h3 { font: 500 30px/1.2 var(--tee-serif) !important; color: var(--tee-navy) !important; margin: 0 0 6px !important; }
.tee-checkin-sub { font: 400 18px var(--tee-sans) !important; color: var(--tee-ink) !important; margin: 0 !important; }
.tee-checkin-q { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0; }
.tee-checkin-q button { font: 500 16px var(--tee-sans); color: var(--tee-navy); background: #fff; border: 1px solid rgba(10, 29, 48, .2); border-radius: 100px; padding: 12px 18px; cursor: pointer; transition: all .2s ease; }
.tee-checkin-q button[aria-pressed="true"] { background: var(--tee-navy); color: #fff; border-color: var(--tee-navy); }
.tee-checkin-result { min-height: 40px; margin-top: 10px; }
.tee-checkin-result p { font: italic 500 24px/1.4 var(--tee-serif) !important; color: var(--tee-navy) !important; margin: 0 0 16px !important; }
.tee-checkin-note { font: 400 14px var(--tee-sans) !important; color: #000 !important; margin: 14px 0 0 !important; }

/* ---------- 7. "Why this matters to you" bar on each slide ---------- */
.tee-whybar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; box-sizing: border-box;
  background: #f4ecd4; border-left: 5px solid var(--tee-gold); border-radius: 0 6px 6px 0;
  padding: 14px 22px; margin: 0 0 18px;
}
.tee-whybar b { flex: none; font: 600 14.67px var(--tee-sans); letter-spacing: .16em; text-transform: uppercase; color: #000; }
.tee-whybar span { font: 500 17.33px/1.5 var(--tee-sans); color: #000; }

/* ---------- 8. Invitation after the last slide ---------- */
.tee-endcta { margin-top: 24px; background: var(--tee-navy); border-radius: 16px; padding: 30px 32px; text-align: center; }
.tee-endcta[hidden] { display: none; }
.tee-endcta p { font: 500 26px/1.3 var(--tee-serif) !important; color: #fff !important; margin: 0 0 18px !important; }

/* ---------- 9. Heart field animation ---------- */
.tee-heartfield { position: relative; height: 380px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at center, var(--tee-navy-2), var(--tee-navy) 70%); }
.tee-heartfield canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tee-heartfield-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font: italic 500 25.33px var(--tee-serif); margin: 0; }

/* ---------- 10. Healing With Frequency ---------- */
.tee-freq { padding: 96px 0; background: var(--tee-bg); }
.tee-freq-head { max-width: 760px; margin: 0 auto; text-align: center; }
.tee-freq-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; margin-top: 30px; }
.tee-video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 0; padding: 0; width: 100%; cursor: pointer; }
.tee-video img, .tee-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.tee-video img { opacity: .85; }
.tee-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tee-play i { width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .95); display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.tee-video:hover .tee-play i { transform: scale(1.06); }
.tee-play i::after { content: ""; margin-left: 7px; border-left: 24px solid var(--tee-navy); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.tee-video-title { font: 600 14px var(--tee-sans) !important; color: var(--tee-navy) !important; margin: 14px 0 2px !important; }
.tee-video-sub { font: 400 13px var(--tee-sans) !important; color: #7a828a !important; margin: 0 !important; }
.tee-video-note { font: 400 13px/1.55 var(--tee-sans) !important; color: #7a828a !important; margin: 8px 0 0 !important; }
.tee-freq-cards-head { text-align: center; margin: 64px 0 8px; }
.tee-res-card .tee-num { font: 500 36px/1 var(--tee-serif); color: var(--tee-gold-text); margin-bottom: 10px; }
.tee-res-card a { display: inline-block; margin-top: 12px; font: 600 13px var(--tee-sans); color: var(--tee-gold-text); text-decoration: none; }
.tee-res-card a:hover { text-decoration: underline; }

/* ---------- 11. Mid-page invitation ---------- */
.tee-mid { background: #fff; padding: 48px 0; }
.tee-mid .tee-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.tee-mid p { font: italic 500 clamp(20px, 2.2vw, 28px)/1.35 var(--tee-serif) !important; color: var(--tee-navy) !important; margin: 0 !important; white-space: nowrap; }

/* ---------- 12. Resource cards ---------- */
.tee-resources { text-align: center; }
.tee-resources .tee-eyebrow { color: var(--tee-gold) !important; }
.tee-resources .tee-h2 { color: #fff !important; }
.tee-resources .tee-g3 { margin-top: 34px; }
.tee-resources a.tee-card { display: block; text-decoration: none; transition: transform .2s ease; }
.tee-resources a.tee-card:hover { transform: translateY(-3px); }
.tee-res-title { font: 500 30px var(--tee-serif); color: var(--tee-gold-text); margin-bottom: 10px; }

/* ---------- Motion + responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  .tee-nerve, .tee-spark, .tee-aura, .tee-fas-web, .tee-fas-flow { animation: none; }
  .tee-btn, .tee-gauge-marker { transition: none; }
}
@media (max-width: 800px) {
  .tee-g3, .tee-freq-grid, .tee-anat { grid-template-columns: 1fr; }
  .tee-ladder-wrap { grid-template-columns: 40px 1fr; }
  .tee-whybar { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tee-mid p { white-space: normal; }
  .tee-heartfield { height: 300px; }
}

/* TLT-EM-MID: closing line matches Founder quote style */
.tee-mid .tee-wrap { gap: 56px; }
.tee-mid p { font: normal 500 clamp(1.5rem, 2.8vw, 2.2rem)/1.3 'Cormorant Garamond', Georgia, serif !important; color: #1d232b !important; white-space: normal !important; max-width: 1000px; text-wrap: balance; }
.tee-mid p .tee-mid-gold { color: #7A5F28; }

.tee-mid p .tee-mid-gold { font-weight: 700; }
.tee-mid p { text-wrap: wrap; }
@media (max-width: 700px) { .tee-mid .tee-mid-br { display: none; } }

/* Check-in "Book a Free Call": blue with white text on hover, like the header button */
.tee-checkin-result .tee-btn { transition: background .4s cubic-bezier(.22,.7,.2,1), color .4s cubic-bezier(.22,.7,.2,1), border-color .4s cubic-bezier(.22,.7,.2,1), box-shadow .4s cubic-bezier(.22,.7,.2,1), transform .3s cubic-bezier(.22,.7,.2,1); }
.tee-checkin-result .tee-btn:hover, .tee-checkin-result .tee-btn:focus-visible { background: #164C77; border-color: #164C77; color: #fff !important; box-shadow: 0 10px 28px rgba(22, 76, 119, .4); text-shadow: none; transform: translateY(-1px); }

/* ===== Tablets held upright: "Healing With Frequency" - first paragraph full width, then the Bioresonance paragraph
   beside the video (video top level with that paragraph), "In my work" underneath on the left. ===== */
@media (min-width:701px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  #frequency .tee-freq-grid{display:grid !important;grid-template-columns:1fr 1fr !important;grid-template-rows:auto auto auto 1fr !important;column-gap:40px !important;row-gap:0 !important;align-items:start !important;}
  #frequency .tee-freq-grid > div:first-child{display:contents !important;}
  #frequency .tee-freq-grid > div:first-child > p:first-child{grid-column:1 / -1;grid-row:1;}
  #frequency .tee-freq-grid > div:first-child > p:nth-child(2){grid-column:1;grid-row:2;}
  #frequency .tee-freq-grid > div:first-child > p:nth-child(3){grid-column:1;grid-row:3;margin-top:4px !important;}
  #frequency .tee-freq-grid > div:last-child{grid-column:2;grid-row:2 / 5;align-self:start;margin-top:0 !important;padding-top:6px;}
}

/* ===== Tablets held upright: Energy Medicine carousel. Cream bars all the same height with the label level with the first line of text;
   no stretched gap above the picture; on slides marked eh-wrap the text flows under the picture full width
   (all slides except Electrons, Mitochondria & ATP, The Electromagnetic Field and EZ Water). ===== */
@media (min-width:701px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  /* every slide: the cream bar keeps the same height and the slide rows do not stretch */
  #ehTrack .eh-slide{align-content:start !important;}
  #ehTrack .tee-whybar{display:grid !important;grid-template-columns:auto 1fr;column-gap:22px;align-items:baseline;align-content:center;box-sizing:border-box;min-height:96px;padding:16px 24px !important;margin:0 0 22px !important;}
  /* slides marked eh-wrap: the picture sits on the left and the text flows beside it, then under it full width */
  #ehTrack .eh-slide.eh-wrap{display:block !important;}
  #ehTrack .eh-slide.eh-wrap .eh-slide-img{float:left;width:50%;margin:0 clamp(30px,4vw,52px) 16px 0;}
  #ehTrack .eh-slide.eh-wrap .eh-slide-txt{display:block !important;padding:0 clamp(30px,4vw,52px) clamp(30px,4vw,52px) 0 !important;}
  #ehTrack .eh-slide.eh-wrap::after{content:"";display:block;clear:both;}
}

/* YouTube-style title bar on video placeholders (shown before the video loads) */
.tee-video .yt-bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;flex-direction:column;gap:2px;padding:14px 18px 28px;text-align:left;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));color:#fff;font-family:Inter,system-ui,sans-serif;pointer-events:none;}
.tee-video .yt-t{font-weight:600;font-size:clamp(13px,1.6vw,18px);line-height:1.3;}
.tee-video .yt-c{font-size:12px;opacity:.85;}
.tee-video img[width="1280"]{opacity:1;}
.eh-slide-img .tee-video{background:#000;}
.eh-slide-img .tee-video img{height:100% !important;object-fit:contain;}

/* ===== Videos on this page: the same code as the Documentaries page (copied from documentaries.css) ===== */
.doc-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0A1D30;box-shadow:0 0 0 1px rgba(201,166,70,.55),0 16px 36px rgba(10,29,48,.22)}
.doc-frame iframe,.doc-play{position:absolute;inset:0;width:100%;height:100%;border:0}
.doc-play{padding:0;cursor:pointer;background:#0A1D30;display:block}
.doc-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s,filter .4s;filter:brightness(.82)}
.doc-play:hover img{transform:scale(1.04);filter:brightness(.95)}
.doc-play .pb{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(10,29,48,.55);border:2px solid #E3C877;display:grid;place-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .3s,background .3s}
.doc-play .pb svg{width:30px;height:30px;fill:#E3C877;margin-left:5px}
.doc-play:hover .pb{transform:scale(1.08);background:#C9A646}
.doc-play:hover .pb svg{fill:#0A1D30}
.doc-frame-sq{border-radius:0;box-shadow:none;}
.eh-slide-video .eh-slide-img{align-items:center !important;}
.doc-play img{height:100% !important;}
.eh-slide-img > .doc-frame{width:100%;flex:0 0 100%;}

/* ===== Look of the two videos (the play code is the Documentaries code) ===== */
/* Carousel video: fills the slide like the YouTube player did, with the title bar and red YouTube play button */
.eh-slide-video .eh-slide-img{align-items:stretch !important;}
.eh-slide-img > .doc-frame-sq{height:auto;align-self:stretch;background:#000;}
.doc-frame-sq .doc-play{background:#000;}
.doc-frame-sq .doc-play img{object-fit:cover;filter:none;}
@media (max-width:700px){.doc-frame-sq .doc-play img{object-fit:contain;}}
.doc-frame-sq .doc-play:hover img{transform:none;filter:brightness(1.05);}
.doc-play .yt-bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 20px 34px;text-align:left;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0));color:#fff;font-family:Roboto,Arial,Inter,sans-serif;pointer-events:none;}
.doc-play .yt-ch{flex:none;width:40px;height:40px;border-radius:50%;background:#E62B1E;display:grid;place-items:center;font:700 12px Arial,sans-serif;color:#fff;letter-spacing:-.02em;}
.doc-play .yt-ch sup{font-size:7px;}
.doc-play .yt-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.doc-play .yt-t{font-weight:600;font-size:clamp(14px,1.7vw,22px);line-height:1.25;}
.doc-play .yt-c{font-size:13px;opacity:.9;}
.doc-play .pb.pb-yt{width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:#FF0000;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
.doc-play .pb.pb-yt svg{fill:#fff;width:26px;height:26px;margin-left:3px;}
.doc-play:hover .pb.pb-yt{background:#FF0000;transform:scale(1.06);}
.doc-play:hover .pb.pb-yt svg{fill:#fff;}
/* Frequency video: rounded picture with the white round play button, no gold ring */
.doc-frame-tee{box-shadow:none;border-radius:16px;background:#000;}
.doc-frame-tee .doc-play img{filter:brightness(.9);}
.doc-play .pb.pb-white{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(255,255,255,.95);border:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
.doc-play .pb.pb-white svg{fill:#0A1D30;width:30px;height:30px;margin-left:5px;}
.doc-play:hover .pb.pb-white{background:#fff;transform:scale(1.06);}
.doc-play:hover .pb.pb-white svg{fill:#0A1D30;}

/* Accessibility: darker grey for the small text under the frequency video (passes contrast, barely visible change) */
.tee-video-sub,.tee-video-note{color:#5c636b !important;}
main#main{display:block;}