/* Dr Carra glue CSS. Layout and colour live in the Divi modules; this file only does what
   Divi settings cannot: sticky blur header, vertical tabs, hover states, badges, the coral
   offset block, reduced motion. Class hooks are set on modules by the generator. */

:root {
  --dc-navy: #163C6F; --dc-navy-deep: #102F58; --dc-coral: #EC6059; --dc-coral-dark: #D94F49;
  --dc-ivory: #F8F6F1; --dc-pale: #EEF3F8; --dc-ink-soft: #4B6783; --dc-line: #D8E1EA;
  --dc-mid-blue: #7796B5;
  --dc-shadow: 0 24px 72px rgba(22,60,111,.14); --dc-shadow-soft: 0 18px 46px rgba(22,60,111,.10);
}
html { scroll-behavior: smooth; }
body { color: var(--dc-navy); }

/* Header (Theme Builder layout, Task 7) */
.dc-header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(22,60,111,.10); }
.dc-header .et_pb_row { align-items: center; min-height: 82px; }
.dc-wordmark p { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700;
  font-size: 32px; letter-spacing: .025em; line-height: 1; margin: 0; }
.dc-wordmark a { color: var(--dc-navy); text-decoration: none; }
.dc-nav ul.et-menu > li > a { padding: 10px 0; position: relative; }
.dc-nav ul.et-menu > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 2px; background: var(--dc-coral); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.dc-nav ul.et-menu > li > a:hover::after, .dc-nav ul.et-menu > li > a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 980px) { .dc-header .et_pb_row { min-height: 72px; } }

/* Footer (Theme Builder layout, Task 7) */
.dc-footer-links a, .dc-wordmark-footer a { text-decoration: none; }
/* Divi colours its text modules by setting `color` on .et_pb_text_inner (confirmed in the
   page's own deferred CSS: `footer .et_pb_text_inner{color:#FFFFFF!important}` etc, present
   and correct), never on a nested <a> -- inheritance alone loses to Divi's own base rule
   `a, .et-db #et-boc .et-l a { color: var(--gcid-link-color,#163C6F) }`. This needs
   !important: Divi's per-page CSS minifier only sometimes coalesces that ID-scoped branch
   into the same rule as the bare `a` selector (confirmed by comparing matched rules on
   different pages), so the *effective* specificity of Divi's own default varies page to page
   -- home resolves it as a plain `a` (0,0,1), which a class beats unaided, but the article,
   answer and topic pages resolve the ID-scoped branch too (1,1,1), which no number of classes
   can beat. A scoped `color: inherit` alone therefore fixed the footer on home but left it
   broken (navy on navy) on every other page -- confirmed by checking all three page types. */
.dc-footer-links a { color: inherit !important; }
/* .dc-wordmark is shared with the header (navy on white); on the navy footer background the
   wordmark needs to stay white, so this has to out-specificity the shared header rule. */
.dc-wordmark-footer a { color: #fff; }
/* Hover rule on the anchor (inline-block), so the coral line is as long as the word, not the column. */
.dc-footer-links a { display: inline-block; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .18s; }
.dc-footer-links a:hover { border-color: var(--dc-coral); }
.dc-footer-legal { align-items: center; }
@media (max-width: 650px) { .dc-footer-legal .et_pb_column:last-child p { text-align: left; } }

/* Text links: the underlined "Read the article" style. The generator puts the dc-textlink
   class directly on the .et_pb_button anchor (compound selector, not descendant). The single
   underline is Divi's own text-decoration, tinted per instance by the generator; the arrow is
   an inline-block ::after so the underline stops at the last letter. */
/* display inline !important: on Theme Builder pages Divi's et_flex_module makes the anchor a
   column flex box, which drops the arrow onto its own underlined line. */
.et_pb_button.dc-textlink { display: inline !important; border: 0 !important; padding-bottom: 0; }
/* Every declaration here is !important on purpose: the arrow lives in the same ::after
   Divi uses for its chevron, and Divi styles that pseudo-element from an ID-scoped selector on
   Theme Builder pages (.et-db #et-boc .et-l .et_pb_button::after: content "5", opacity 0,
   position absolute) and hides it site-wide via .et_button_no_icon. Scoped to .dc-textlink. */
.et_pb_button.dc-textlink::after { content: '\2192' !important; display: inline-block !important; opacity: 1 !important; position: static !important; right: auto !important; top: auto !important; transform: none !important; width: auto !important; font-family: inherit !important; font-size: inherit !important; line-height: 1 !important; margin-left: 9px !important; text-decoration: none; transition: margin .18s; }
.et_pb_button.dc-textlink:hover { text-decoration-color: var(--dc-coral) !important; }
.et_pb_button.dc-textlink:hover::after { margin-left: 14px !important; }

/* Buttons lift on hover */
.et_pb_button_module_wrapper .et_pb_button { transition: transform .18s, background-color .18s, border-color .18s; }
.et_pb_button_module_wrapper .et_pb_button:hover { transform: translateY(-2px); }
/* Two buttons side by side (e.g. podcast hero "Watch the latest episode" / "Listen to the
   podcast") sit inline with a gap on desktop, then stack full width at <=650. */
.dc-inline-btn { display: inline-block; margin-right: 12px; margin-top: 28px; }
@media (max-width: 650px) { .dc-inline-btn { display: block; margin-right: 0; } .dc-inline-btn .et_pb_button { display: block; text-align: center; } }

/* Typed role line */
.dc-role p { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 32.8px; line-height: 1.2; }
.dc-typed, .dc-typed-text { color: var(--dc-coral); }
.dc-typed-cursor { display: inline-block; width: 2px; height: .9em; background: var(--dc-coral); margin-left: 3px; vertical-align: -.1em; animation: dc-blink .85s step-end infinite; }
@keyframes dc-blink { 50% { opacity: 0; } }
@media (max-width: 980px) { .dc-role p { font-size: 23.7px; } }

/* Home hero: photo fills the right column edge to edge with a coral bar along its bottom
   edge; on narrow widths it drops to a strip under the copy with a top-down white fade. */
.dc-hero .et_pb_row { min-height: 665px; }
.dc-hero-photo { position: relative; min-height: 665px; }
.dc-hero-photo::after { content: ''; position: absolute; right: 0; bottom: 0; width: 52%; height: 5px; background: var(--dc-coral); }
@media (max-width: 980px) { .dc-hero .et_pb_row { min-height: 0; } .dc-hero-photo { min-height: 410px; } }
@media (max-width: 650px) { .dc-hero-photo { min-height: 365px; } }

/* Question finder: Divi tabs laid out as a vertical list beside the photo panel */
.dc-finder { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr); gap: 58px; align-items: stretch; border: 0 !important; background: transparent !important; }
.dc-finder .et_pb_tabs_controls { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(22,60,111,.18); background: transparent; border-radius: 0; }
.dc-finder .et_pb_tabs_controls li { border-bottom: 1px solid rgba(22,60,111,.18); border-right: 0; min-height: 78px; display: flex; align-items: center; position: relative; }
.dc-finder .et_pb_tabs_controls li a { padding: 0; width: 100%; }
.dc-finder .et_pb_tabs_controls li::after { content: '\2192'; color: var(--dc-coral); position: absolute; right: 0; opacity: 0; transform: translateX(-6px); transition: all .2s; font-size: 22px; }
.dc-finder .et_pb_tabs_controls li:hover::after, .dc-finder .et_pb_tabs_controls li.et_pb_tab_active::after { opacity: 1; transform: none; }
.dc-finder .et_pb_all_tabs { border-radius: 14px; box-shadow: var(--dc-shadow); min-height: 610px; display: flex; align-items: flex-end; overflow: hidden; }
.dc-finder .et_pb_tab { padding: 42px; color: #fff; }
.dc-finder .et_pb_tab_content { color: #fff; }
.dc-finder .et_pb_tab_content .dc-preview-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dc-coral); margin: 0 0 9px; }
.dc-finder .et_pb_tab_content h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #fff; font-size: clamp(2.5rem, 4vw, 3.6rem); line-height: 1.02; max-width: 530px; margin: 0 0 12px; padding: 0; }
.dc-finder .et_pb_tab_content p.dc-preview-summary { color: #E7EEF5; max-width: 560px; margin: 0 0 18px; }
.dc-finder .et_pb_tab_content ul.dc-preview-links { list-style: none; padding: 0; margin: 0 0 20px; }
.dc-finder .et_pb_tab_content ul.dc-preview-links li { border-top: 1px solid rgba(255,255,255,.2); }
.dc-finder .et_pb_tab_content ul.dc-preview-links a { display: flex; justify-content: space-between; color: #fff; font-size: 14px; font-weight: 600; padding: 10px 0; }
.dc-finder .et_pb_tab_content ul.dc-preview-links a::after { content: '\2192'; color: var(--dc-coral); }
.dc-finder .et_pb_tab_content a.dc-preview-all { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.45); }
.dc-finder .et_pb_tab.et_pb_active_content { animation: dc-preview-in .42s ease; }
@keyframes dc-preview-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .dc-finder { grid-template-columns: 1fr; gap: 28px; } .dc-finder .et_pb_tabs_controls li { min-height: 66px; } .dc-finder .et_pb_tab { padding: 28px; } }

/* Cards (loop columns) */
.dc-card { border: 1px solid var(--dc-line); border-radius: 8px; background: #fff; transition: transform .22s, box-shadow .22s; overflow: hidden; }
.dc-card:hover { transform: translateY(-5px); box-shadow: var(--dc-shadow-soft); }
/* Answer cards are loop columns: pad the copy like the article cards, pull the thumbnail
   full-bleed, and tighten the module gap Divi's flex column gives every child. */
.dc-answer-card { padding: 0 26px 28px; row-gap: 14px; }
.dc-answer-card .dc-thumb { margin: 0 -26px 12px; }
.dc-answer-card .dc-card-label { margin-top: 4px; }
.dc-answer-card .dc-textlink { margin-top: 6px; }
.dc-thumb { position: relative; }
.dc-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
/* Play glyph. Scoped to .dc-video-thumb, set by partials.answer_card_column and the topic
   template's ANSWER loop only, so article cards in the topic archives do not get a play
   button painted over a still image. */
.dc-video-thumb::after { content: '\25B6'; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--dc-coral); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.18); pointer-events: none; }
.dc-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(16,47,88,.08), rgba(16,47,88,.42)); pointer-events: none; }
.dc-duration p { position: absolute; right: 12px; bottom: 12px; background: rgba(7,24,44,.82); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 3px; margin: 0; z-index: 2; }
.dc-duration:has(p:empty) { display: none; }
.dc-article-card { background: #fff; min-height: 320px; padding: 34px; border-radius: 8px; border: 1px solid rgba(22,60,111,.12); box-shadow: var(--dc-shadow-soft); border-top: 5px solid var(--dc-coral); display: flex; flex-direction: column; }
.dc-article-card:nth-child(3n+2) { border-top-color: var(--dc-navy); }
.dc-article-card:nth-child(3n) { border-top-color: var(--dc-mid-blue); }
.dc-article-card .dc-textlink { margin-top: auto; padding-top: 24px; }
/* Topic library cards: thumb spans the first four rows beside the stacked copy; single
   column on narrow widths. */
.dc-library-card { display: grid; grid-template-columns: 220px 1fr; gap: 26px; padding: 16px; align-items: start; }
.dc-library-card .dc-library-thumb { grid-row: 1 / span 4; }
@media (max-width: 650px) { .dc-library-card { grid-template-columns: 1fr; } .dc-library-card .dc-library-thumb { grid-row: auto; } }
.dc-ticks { list-style: none; padding: 0; margin: 0 0 24px; }
.dc-ticks li { padding: 12px 0 12px 28px; border-bottom: 1px solid rgba(255,255,255,.14); position: relative; }
.dc-ticks li::before { content: '\2713'; color: var(--dc-coral); position: absolute; left: 0; }

/* Media panels and badges */
.dc-panel img { border-radius: 14px; box-shadow: var(--dc-shadow); }
.dc-badge p { display: inline-block; background: var(--dc-coral); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 10px 16px; border-radius: 4px; margin: 0; }
.dc-badge { position: absolute; right: -18px; bottom: 34px; }
.dc-offset { position: relative; }
.dc-offset::before { content: ''; position: absolute; right: -18px; bottom: -18px; width: 70%; height: 85%; background: var(--dc-coral); border-radius: 10px; z-index: 0; }
.dc-offset img { position: relative; z-index: 1; }
@media (max-width: 980px) { .dc-badge { right: 18px; } }
/* Welcome video poster: radius 14, inner white outline inset 14px, caption bottom-left. */
.dc-poster-wrap { position: relative; }
.dc-poster .et_pb_video_overlay::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; pointer-events: none; }
.dc-poster-caption { position: absolute; left: 38px; bottom: 38px; color: #fff; pointer-events: none; }
.dc-poster-caption small { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.dc-poster-caption strong { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 700; display: block; }
/* Podcast band: coral offset block, "FEATURED IN-DEPTH EPISODE" badge top-left of the photo,
   decorative circle top-left of the band. */
.dc-podcast-band { position: relative; overflow: hidden; }
.dc-podcast-band::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); top: -170px; left: -210px; }
.dc-episode-badge { position: absolute; top: 18px; left: 18px; z-index: 2; }
.dc-episode-badge p { background: rgba(16,47,88,.88); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 8px 10px; border-radius: 3px; margin: 0; }
.dc-podcast-feature { position: relative; }

/* Answer page */
.dc-quick-answer { background: var(--dc-pale); border-left: 4px solid var(--dc-coral); padding: 30px 34px; margin-bottom: 50px; }
.dc-callout { background: var(--dc-pale); border-left: 4px solid var(--dc-coral); padding: 22px 26px; margin: 28px 0; }
.dc-callout.dc-urgent { background: #FFF8F6; border: 1px solid rgba(236,96,89,.35); border-left-width: 4px; }
.dc-callout .dc-callout-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dc-coral); margin-bottom: 8px; }
.dc-aside-box { background: #fff; border: 1px solid var(--dc-line); border-radius: 6px; padding: 24px; margin-bottom: 20px; }
.dc-aside-box.dc-urgent { background: #FFF8F6; border-color: rgba(236,96,89,.35); }
.dc-toc { list-style: none; padding: 0; margin: 0; }
.dc-toc li { border-bottom: 1px solid var(--dc-line); }
.dc-toc a { display: block; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--dc-navy); }
.dc-answer-body h2 { margin-top: 52px; }
.dc-references { font-size: 14px; color: var(--dc-ink-soft); }
.dc-references a, .dc-further-reading a, .dc-list a { color: var(--dc-navy); text-decoration: underline; text-decoration-color: rgba(22,60,111,.28); text-underline-offset: 3px; }
.dc-references a:hover, .dc-further-reading a:hover, .dc-list a:hover { text-decoration-color: var(--dc-coral); }
.dc-further-reading { border-top: 1px solid var(--dc-line); padding-top: 18px; margin-top: 36px; }

/* Published elsewhere cards (Articles page): white card, 34px padding, coral publication line */
.dc-external-card { background: #fff; }
.dc-publication-line p { letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.dc-answer-aside { position: sticky; top: 110px; align-self: flex-start; }
/* Articles with no dc_video_url have their video column removed by its display condition,
   which leaves the copy column at its authored 12/24 and half the hero row empty. When the
   copy column is the row's only child it takes the full row instead. flex-basis/max-width
   are what Divi 5 sizes columns with; flex-grow is set too so the flex line fills. */
.dc-answer-hero .dc-answer-hero-copy:only-child { flex: 1 1 100%; max-width: 100%; }
/* Same anchor-inheritance gap as the footer links above, and the same reason it needs
   !important: confirmed correct on every page type once !important is added (home, article,
   answer, topic, paws-and-effect, work). */
.dc-breadcrumb a { color: inherit !important; }
.dc-answer-body h3, .dc-faq .et_pb_toggle_title { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; }
/* The Loop Builder prints a lone column with <div class="entry"><h2 class="not-found-title">
   No Results Found.</h2><p>...</p></div> when a topic archive's query returns nothing (e.g.
   /topic/behaviour/ before any answer/article carries that term). Hide the whole empty card,
   not just the text, so no blank bordered box is left in the grid. */
.dc-topic-library .dc-card:has(.not-found-title) { display: none; }
/* Review line: see templates/single_answer.py review_line() -- the label lives in a nested
   <b>, the meta token in a following <i>, so an empty token can be targeted with :has(). */
.dc-review-line span:has(i:empty) { display: none; }

/* Credentials and proof bands */
.dc-cred { border-right: 1px solid rgba(22,60,111,.16); padding: 0 30px; }
.dc-cred:last-child { border-right: 0; }
.dc-proof p { text-align: center; font-size: 13px; color: var(--dc-ink-soft); }
.dc-proof a { color: var(--dc-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dc-proof .dc-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--dc-coral); margin: 0 14px; vertical-align: middle; }
@media (max-width: 650px) { .dc-cred { border-right: 0; border-bottom: 1px solid rgba(22,60,111,.16); padding: 15px 0; } .dc-proof .dc-dot { display: block; margin: 8px 0; width: 0; } }

/* Forminator forms (Contact, Work with Dr Carra): the plugin's own default submit-button
   colour (a teal blue, nothing in our token set) was left untouched by earlier tasks. */
.forminator-button-submit { background-color: var(--dc-coral) !important; border-radius: 5px !important;
  border: 0 !important; font-weight: 700 !important; transition: background-color .18s, transform .18s; }
.forminator-button-submit:hover { background-color: var(--dc-coral-dark) !important; transform: translateY(-2px); }
.forminator-row .forminator-input, .forminator-row .forminator-textarea, .select2-container .select2-selection {
  border-color: var(--dc-line) !important; border-radius: 4px !important; }
.forminator-row .forminator-input:focus, .forminator-row .forminator-textarea:focus {
  border-color: var(--dc-coral) !important; outline: none; }

/* Feeds and embeds */
.dc-spotify iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; }
.dc-ytfeed .sby_item, .dc-igfeed .sbi_item { border-radius: 6px; overflow: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dc-card, .dc-card:hover, .et_pb_button_module_wrapper .et_pb_button, .dc-finder .et_pb_tab.et_pb_active_content { transition: none; animation: none; transform: none; }
  .dc-typed-cursor { display: none; }
}