/* ==========================================================================
   Telezen site CSS — layout fixes, loaded by plugins/telezen-site-css.
   Source of truth: this file in the telezenmd repository. Each block names the defect,
   its root cause and the pages it touches (diagnosis 27.09:
   artifacts/layout-fixes-2026-09-27/). Every rule is narrowly scoped; no !important except in D9 and
   D11, which mirror or override Additional CSS rules that already carry it.
   D4 (uneven "3 easy steps" cards) was fixed at its source instead: plugins/telezen-lazy-placeholder.
   ========================================================================== */


/* --- D1. Pages that Bricks renders as plain post_content, with no Bricks layout ---
   #brx-content.wordpress gets width:1280px from the Bricks theme style
   (bricks-frontend-inline-inline-css, the same value as .brxe-container) but none of
   the 20px side padding that .brxe-section gives normal Bricks pages.
   Pages: /sildenafil-and-tadalafil/ (65), /telehealth-consent/ (69, on the order path),
   /sitemap/ (18266), /affiliate-login/ (318), /affiliate-area/ (319), /affiliate-registration/ (320).
   1320 = 1280 + 2×20, so at viewports ≥1320 the text column stays exactly where it is now. */
.brx-body #brx-content.wordpress {
  width: 1320px;
  padding-inline: 20px;
}
/* Safety net for long unbreakable words. NOT a substitute for the content fix on page 65:
   there "EFFECTS, CONTRAINDICATIONS," is joined by a non-breaking space and gets
   broken mid-word ("CONTRAINDIC|ATIONS"). The   itself has to be replaced
   with a regular space in post_content. */
.brx-body #brx-content.wordpress :is(h1, h2, h3, h4) {
  overflow-wrap: break-word;
}
/* h2 is 32px on phones (Elementor kit 1483: .elementor-kit-1483 h2 at max-width 767px).
   "CONTRAINDICATIONS," alone is 351px at that size and does not fit into 320–350px. */
@media (max-width: 767px) {
  .brx-body #brx-content.wordpress h2 {
    font-size: clamp(24px, 7.5vw, 32px);
  }
}


/* --- D2. Elementor pages: no side gutter between 1025 and ~1340px ---
   The kit gives boxed width 1300px; the top-level containers carry padding-left/right 0
   on desktop (per-element CSS .elementor-<page> .elementor-element-<id> { --padding-left:0px }).
   max() only RAISES a padding below 20px and keeps anything that is already larger,
   so there is no double gutter. At ≥1340 the inner box is still 1300 and nothing moves.
   Tablet and mobile already have their own 20px padding, hence min-width 1025.
   Affects every Elementor page (60+ pages, see report). */
@media (min-width: 1025px) {
  [data-elementor-type="wp-page"] > .e-con-boxed {
    --padding-inline-start: max(20px, var(--padding-left));
    --padding-inline-end: max(20px, var(--padding-right));
  }
  /* Old-style sections (not containers). The selector is deliberately (0,3,1): it beats the kit's
     generic ".elementor-section.elementor-section-boxed > .elementor-container {max-width:1300px}"
     (0,3,0) and LOSES to any per-element content width
     ".elementor-NNNN .elementor-element.elementor-element-xxx > .elementor-container" (0,4,0),
     so a section someone narrows in the editor keeps its setting. Measured 27.09: all 66 top-level
     boxed sections on Elementor pages have 0/0 side padding and max-width 1300px. */
  [data-elementor-type="wp-page"] > section.elementor-section-boxed > .elementor-container {
    max-width: min(calc(100% - 40px), 1300px);
  }
}


/* --- D3. /glp-1-therapy/ and its copy /glp1weightloss/ (20745), "Every plan includes" (heading 03582c4, position:absolute) ---
   The mobile setting is right:-25px + width 200px: the box sticks 25px out of its column
   and 5px past the screen edge. right:0 + width 175px keeps the text in exactly the
   same place (left 195 at 390, 165 at 360, 219 at 414) while the box ends at the column's edge. */
@media (max-width: 767px) {
  body:not(.rtl) .elementor-19344 .elementor-element.elementor-element-03582c4,
  body:not(.rtl) .elementor-20745 .elementor-element.elementor-element-03582c4 {
    right: 0;
    --container-widget-width: 175px;
    max-width: 175px;
  }
}


/* --- D5a. Site-wide header (ElementsKit template 9599) and footer (14362): logo at x=0–10 ---
   Header: container 4e4e30e has 10px padding; footer: 7cf0f6a has 0 on desktop.
   Same max() technique as D2: at ≥1340 nothing moves, at 1025–1339 the gutter becomes 20px. */
@media (min-width: 1025px) {
  .elementor-9599 .elementor-element.elementor-element-4e4e30e,
  .elementor-14362 > .e-con-boxed {
    --padding-inline-start: max(20px, var(--padding-left));
    --padding-inline-end: max(20px, var(--padding-right));
  }
}

/* --- D5b. Grey CTA strip (.cta-container): "COMING SOON" wraps to two lines at 768–769px ---
   flex row, nowrap: text 562 + gap 24 + button 143 = 1px more than the container, and the
   button shrinks to 142px, so its label wraps. Pages: /trt/, /latisse/, /nadold/. */
.cta-container.brxe-container > .brxe-button {
  flex-shrink: 0;
}


/* --- D6 (FOUND BY US, not in the brief). Blog posts: long reference URLs overflow on phones ---
   Link text that is a bare URL (pmc.ncbi.nlm.nih.gov/…, jamanetwork.com/…) does not wrap,
   so 9 of 55 posts get a horizontal scroll at 390px (+4…+267px). Applies to the post body only. */
.brxe-post-content :is(li, p) a {
  overflow-wrap: anywhere;
}


/* --- D7 (FOUND BY US). /glp1-microdosing/ phone mockup: screens, frame and banner line up at one column width only ---
   Post 15610, section .micro-sec. The carousel centres its screens in the column, but the frame is a
   367px image nudged 45px right (Additional CSS `.slider-phone img{right:-45px}`, then -65px at 820–1120,
   0 at ≤767), which matches only when the column is 458px. At ≤1130 the frame sat 45px off the screens and
   its right edge was clipped; at 691–767 it hugged the left edge of a 626px column. Fix 1: centre the frame
   on the same axis as the screens (at 458px that is the old 45px shift, so the wide layout does not move).
   The banner ("Weight Loss 29 lbs", `.glp-slider:after`, a 353×104 image) sat at the bottom, hung 35px past
   the carousel and was cut by the card at wide viewports, and where it fitted it covered the last lines of
   the screens. Fix 2 (developer's call, 07.10): it goes to the very top of the phone, over the notch
   (top:0; 14px in the first pass, moved up at the developer's request), and the screens start below it:
   the carousel's top padding 60px → 86px puts the first content row of both screens (row 29 / 28 of the
   image) 11px under the banner. Measured room: the last content row ends at 86+496=582 of the phone's 617px.
   Fix 3: at ≤767 the frame is scaled to the column (320px at 390) and is only 538px tall, while the screens
   run to 596; the old bottom banner hid that gap. The frame is now as tall as the column (height:100%,
   a 3% stretch at ≥768, 18% at 390; its bezels are straight lines, only the notch is stretched). */
.elementor-15610 .micro-sec .mobile-slider .slider-phone.elementor-absolute {
  left: 50%;
  right: auto;
  width: min(100%, 367px);
  height: 100%;
  transform: translateX(-50%);
}
.elementor-15610 .micro-sec .mobile-slider .slider-phone.elementor-absolute img {
  right: 0;
  width: 100%;
  height: 100%;
}
.elementor-15610 .micro-sec .glp-slider.elementor-element > .elementor-widget-container {
  padding-top: 86px;
}
.elementor-15610 .micro-sec .glp-slider.elementor-element:after {
  top: 0;
  bottom: auto;
}


/* --- D8. The same phone mockup in "Featured Program: Lose It For Life™" on the five state pages ---
   /glp-1-weightloss-california/ (12099), -florida/ (12142), -south-carolina/ (12156), -texas/ (12149),
   -washington/ (12164). Same two screens, same Swiper/lazy-load defect (fixed per page with `lazyload` off on
   carousel 06fd50d) and the same layout defects as D7, but a different build: the banner (efcb1bb, Frame-35-3,
   bottom:15px) and the frame (fdd9ac6, image-27.png 391×617, left:0 / 60px) are image widgets, not the
   `.glp-slider:after` / `.slider-phone` of /glp1-microdosing/, so they are addressed by Elementor id, scoped
   by the section (83f467b). The home page carries the same block (be2c19b) but hidden on every device.
   Same result as D7: frame centred on the screens and as tall as the column, banner at the very top of the
   phone (353px wide, as the image), screens start 86px down so the first logo row is 11px below it. */
.elementor-element-83f467b .mobile-slider .elementor-element-fdd9ac6.elementor-absolute.elementor-widget {
  left: 50%;
  right: auto;
  width: min(100%, 391px);
  height: 100%;
  transform: translateX(-50%);
}
.elementor-element-83f467b .mobile-slider .elementor-element-fdd9ac6.elementor-absolute.elementor-widget img {
  width: 100%;
  height: 100%;
}
.elementor-element-83f467b .mobile-slider .elementor-element-efcb1bb.elementor-absolute.elementor-widget {
  left: 50%;
  right: auto;
  top: 0;
  bottom: auto;
  width: min(100%, 353px);
  transform: translateX(-50%);
}
.elementor-element-83f467b .mobile-slider .elementor-element-efcb1bb.elementor-absolute.elementor-widget img {
  width: 100%;
}
.elementor-element-83f467b .mobile-slider .elementor-element.elementor-element-06fd50d > .elementor-widget-container {
  padding-top: 86px;
}


/* --- D9. /glp1weightloss/ (page 20745, a copy of /glp-1-therapy/ 19344 made 10.10.2026) ---
   The original hides the header navigation, shows the top marquee and hides the mobile
   menu toggle through three rules in Additional CSS (post 915) scoped to page-id-19344.
   A copy has a new id, so those rules do not reach it. They are repeated here for 20745,
   unchanged, rather than added to Additional CSS: writing post 915 goes through kses,
   which escaped `>` and broke /glp-1-therapy/ on 13.09. Additional CSS is not touched.
   !important as in the originals, which they have to match. */
.page-id-20745 .top-marquee {
  display: block !important;
}
body.page-id-20745 .header-cstm-menu {
  display: none !important;
}
@media (max-width: 768px) {
  body.page-id-20745 .toggle-col {
    display: none !important;
  }
}


/* --- D10 (asked for by the developer 15.10.2026). Blog posts: a clicked source lands under the header ---
   Footnote links (<sup class="tz-fn"><a href="#source-N">, rendered by scripts/article-wp.py) jump to
   <li id="source-N"> in the sources list. The browser scrolls that item to the very top of the viewport,
   under the fixed header (.cstm-header, ElementsKit template 9599): 113px tall at 1366 and 1920, 104px
   at 390-1024 (measured 15.10). 129 = 113 + 16px of air.
   Pages: /glp-1-diet-plan/ (post 19327) and every later article rendered the same way. */
.single-post li[id^="source-"] {
  scroll-margin-top: 129px;
}


/* --- D11 (asked for by the developer 15.10.2026). Blog posts: one heading size for all levels, two body text sizes ---
   Additional CSS (post 915) sets `.single-post h2, .single-post h1, .single-post h3` to 26px !important with
   line-height 24px (21px / 30px below 1200px), so the title, the sections and the questions under them are
   the same size. It also sets `li` to 17px, while paragraphs inherit the base size (14px on desktop, 16px on
   phones), so list items read larger than the paragraphs around them (measured 15.10 on /glp-1-diet-plan/
   and /glp-1-weight-regain-after-stopping/). Here: a heading scale H1 > H2 > H3, one 17px size for
   paragraphs and list items (and one colour: paragraphs were rgba(29,29,31,.8), list items .91), and a
   smaller size only for the sources list (<li id="source-N">, D10).
   The heading rules need !important and more specificity (0,2,1) than the !important rules they override. */
.single-post h1.brxe-heading {
  font-size: 34px !important;
  line-height: 1.2 !important;
}
.single-post .brxe-post-content h2 {
  font-size: 26px !important;
  line-height: 1.3 !important;
}
.single-post .brxe-post-content h3 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}
@media (max-width: 1199px) {
  .single-post h1.brxe-heading {
    font-size: 28px !important;
  }
  .single-post .brxe-post-content h2 {
    font-size: 22px !important;
  }
  .single-post .brxe-post-content h3 {
    font-size: 19px !important;
  }
}
.single-post .brxe-post-content :is(p, li) {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(29, 29, 31, 0.91);
}
.single-post .brxe-post-content li[id^="source-"] {
  font-size: 14px;
  line-height: 1.5;
}


/* --- D12 (asked for by the developer 15.10.2026). Blog posts: the FAQ accordion, once for every post ---
   Every post's FAQ is <div class="telezen-faq-accordion"> with <details>/<summary>/<div class="faq-body">, and each
   post carries these rules in its own <style> block inside post_content. The pipeline's articles
   (scripts/article-wp.py) emit the same markup without that block, because kses strips <style> on any later save
   (plugins/README.md, telezen-post-body). The rules are copied here unchanged, so posts that still embed them look
   exactly as before. */
.telezen-faq-accordion details{border:1px solid #e2e8f0;border-radius:10px;margin-bottom:10px;overflow:hidden;}
.telezen-faq-accordion details summary{padding:18px 22px;cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;background:#f8fafc;color:#1a202c;}
.telezen-faq-accordion details summary::-webkit-details-marker{display:none;}
.telezen-faq-accordion details summary::after{content:"+";font-size:22px;font-weight:300;color:#0073aa;flex-shrink:0;margin-left:12px;}
.telezen-faq-accordion details[open] summary{background:#eef4fb;}
.telezen-faq-accordion details[open] summary::after{content:"-";}
.telezen-faq-accordion details .faq-body{padding:16px 22px 20px;border-top:1px solid #e2e8f0;line-height:1.75;color:#374151;}


/* --- /blog/ card titles keep their size after the CSS move of 22.10.2026 ---
   Two rules of equal weight set these titles: the WPCode snippet ".blog h3 {font-size:24px; color:#222}" (client's)
   and Elementor's site kit ".elementor-kit-1483 h3 {font-size:32px; color:#229FD9}". Until 22.10 Elementor printed
   the kit inline near the end of the page, so the kit won; with "CSS Print Method: External" and LiteSpeed CSS
   Combine it moved to the top of <head> and the snippet won: the title box shrank from 32 to 24px and the lines
   came 3px closer (27 -> 24px). The link text inside keeps its own 24px either way. This restores the kit's values
   for those titles only; measured on dev: 57 titles, nothing else on 163 pages. */
.elementor-kit-1483.blog h3 {
  color: #229FD9;
  font-size: 32px;
}