/* .com parity fixes: Inline CTA, FAQ accordion, Pull Quote, H2/H3 spacing — mirrors .com Additional CSS (post 266945) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Newsreader:ital,wght@1,700&display=swap');

/* Blog post H2/H3 — bold H2 with more top margin, H3 clearly smaller so it doesn't read as an H2.
   Scoped to .elementor-widget-theme-post-content, which only renders inside single blog posts. */
.elementor-widget-theme-post-content h2.wp-block-heading {
	font-weight: 700;
	margin-top: 36px;
}
.elementor-widget-theme-post-content h3.wp-block-heading {
	font-size: 22px;
	font-weight: 600;
}

/* FAQ block (Rank Math) — accordion styling to match brand */
.rank-math-block .rank-math-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0 28px;
}
.rank-math-block .rank-math-list-item {
	background: #fff;
	border: 1px solid #EDE7F5;
	border-radius: 16px;
	overflow: hidden;
}
.rank-math-block .rank-math-question {
	margin: 0;
	padding: 18px 48px 18px 20px;
	font-size: 16px;
	font-weight: 700;
	color: #241A38;
	cursor: pointer;
	position: relative;
	user-select: none;
}
.rank-math-block .rank-math-question strong {
	font-weight: 700;
}
.rank-math-block .rank-math-question::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #EC1D43;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}
.rank-math-block .rank-math-list-item.is-open .rank-math-question::after {
	content: "\2212";
}
.rank-math-block .rank-math-answer {
	max-height: 0;
	overflow: hidden;
	padding: 0 20px;
	transition: max-height 0.25s ease, padding 0.25s ease;
}
.rank-math-block .rank-math-answer p {
	margin: 0 0 18px;
	color: #7A7188;
	font-size: 15px;
	line-height: 1.6;
}
.rank-math-block .rank-math-list-item.is-open .rank-math-answer {
	padding-top: 0;
}

/* FAQ block (Elementor Nested Accordion) — purple bubble design, matches the After 40 Topic Hub FAQ.
   Used on the State Hub template's FAQ section (currently the only place this widget appears). */
.elementor-widget-n-accordion .e-n-accordion-item {
	background: #EFE9FF !important;
	border: none !important;
	border-radius: 18px !important;
	margin-bottom: 14px !important;
	overflow: hidden;
}
.elementor-widget-n-accordion .e-n-accordion-item > .e-con {
	background: transparent !important;
	border: none !important;
	padding: 0 24px 22px 24px !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title {
	padding: 20px 48px 20px 24px !important;
	border: none !important;
	position: relative;
	transition: background 0.2s ease;
}
.elementor-widget-n-accordion .e-n-accordion-item-title:hover {
	background: #E1D4FF !important;
}
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
	background: #B9A0FF !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-text {
	color: #261062 !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 22px;
}
/* Plus/minus icon, forced to the right and red — replaces the default chevron icon. */
.elementor-widget-n-accordion .e-n-accordion-item-title-icon {
	display: none !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title::after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: #EC1D43;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
	content: "\2212";
}

/* Featured Real Story teaser cards — used in the State Hub template's purple "story" section
   (featured_story_link_1 / featured_story_link_2). White card on the purple background so the
   two story teasers read clearly instead of blending into the background as plain text. */
.gf-story-teaser {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #fff;
	border-radius: 20px;
	padding: 20px 24px;
	margin-bottom: 16px;
	box-shadow: 0 10px 30px rgba(38, 16, 98, 0.12);
}
.gf-story-teaser img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.gf-story-teaser-body {
	min-width: 0;
}
.gf-story-teaser-title {
	color: #261062 !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 17px;
	margin: 0 0 4px;
}
.gf-story-teaser-excerpt {
	color: #6E6880 !important;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 8px;
}
.gf-story-teaser-link {
	color: #EC1D43 !important;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.gf-story-teaser-link:hover {
	text-decoration: underline;
}
@media (max-width: 600px) {
	.gf-story-teaser {
		flex-direction: column;
		text-align: center;
	}
}

/* Pull quote — Newsreader bold italic, purple, thinner red border */
.gf-pull-quote {
	border-left-width: 2px !important;
}
.gf-pull-quote p {
	font-family: 'Newsreader', serif !important;
	font-weight: 700 !important;
	color: #6D4AA6 !important;
}

/* Inline CTA: red card, white circle icon with real Gofrendly logo, white text — desktop + mobile.
   Previously this hid .gf-inline-cta-icon and hotlinked a white logo variant from gofrendly.com
   onto .gf-inline-cta-line as a workaround, because no logo file existed in the co.uk media
   library yet. Now that gofrendly-women-only-friendship-logo-global.png is uploaded natively to
   co.uk, the normal PHP-rendered circle icon (includes/gofrendly-content-blocks.php) renders the
   correct logo directly, so this override is no longer needed. */
.gf-inline-cta {
  background: #EC1D43 !important;
  border: none !important;
  padding: 26px 32px !important;
  gap: 24px !important;
  margin-top: 32px !important;
}
.gf-inline-cta-headline {
  color: #fff !important;
}
.gf-inline-cta .gf-inline-cta-text,
.gf-inline-cta-body .gf-inline-cta-text {
  color: #fff !important;
}
.gf-inline-cta a {
  border: none !important;
}
@media (max-width: 600px) {
  .gf-inline-cta {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px 20px !important;
    gap: 8px !important;
  }
  .gf-inline-cta-icon {
    width: 46px !important;
    height: 46px !important;
  }
  .gf-inline-cta-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  .gf-inline-cta-body {
    text-align: center !important;
  }
  .gf-inline-cta a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* Soft background transition from white to light purple while scrolling a blog post.
   Same technique as .com (which fades white -> pink); co.uk uses the brand Purple 50/100 instead. */
body.single-post {
	background: linear-gradient(to bottom, #ffffff 0%, #ffffff 25%, #F8F5FF 55%, #E1D7FD 100%);
}

/* Float image with text wrap — reusable pattern (mirrors .com).
   Apply the class directly on the <figure>, not the <img>:
   cf-img-float-left  or  cf-img-float-right */
.elementor-widget-theme-post-content .cf-img-float-left {
  float: left;
  margin: 6px 28px 18px 0;
  border-radius: 16px;
  overflow: hidden;
}
.elementor-widget-theme-post-content .cf-img-float-right {
  float: right;
  margin: 6px 0 18px 28px;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .elementor-widget-theme-post-content .cf-img-float-left,
  .elementor-widget-theme-post-content .cf-img-float-right {
    float: none;
    width: 100% !important;
    margin: 0 0 16px 0;
  }
}

/* Topbar nav — "Get the app" styled as a solid pill CTA button, matching the .se topbar pattern.
   Class is added via the menu item's CSS Classes field (lands on the <li>). */
.gf-nav-cta-btn > a.elementor-item {
  background: #EC1D43 !important;
  color: #fff !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  box-shadow: 0 10px 24px rgba(236, 29, 67, 0.35) !important;
  transition: box-shadow 0.2s ease, background 0.2s ease !important;
}
.gf-nav-cta-btn > a.elementor-item:hover,
.gf-nav-cta-btn > a.elementor-item:focus {
  background: #d81a3c !important;
  color: #fff !important;
}
.gf-nav-cta-btn > a.elementor-item:after {
  display: none !important;
}