/*
 * JoMa Healthcare -- Unit J3 (inner pages + new pages) page-specific CSS.
 * Loaded after 05-system.css / 10-chrome.css / 20-home.css by the mu-plugin
 * wp-content/mu-plugins/johma-assets.php (Unit J1), alphabetically.
 *
 * Round 2: 05-system.css now carries the shared CF7 base styles, the
 * sitewide .content_wrap fluid-width fix and the title-band H1 removal
 * (server-side) -- so this file only keeps page-specific layout that isn't
 * covered by the shared system. Page content itself now uses [vc_raw_html]
 * instead of [vc_column_text] for pure-HTML blocks, so wpautop can no
 * longer inject stray <p>/<br> -- see COMPONENTS.md.
 */

/* ---------------------------------------------------------------------
   Privacy Policy (597): readable column, scoped to the page content only
   (.page_content_wrap excludes the header and footer, which also use
   WPBakery .wpb_wrapper/ul/p markup and were being squeezed by mistake).
   --------------------------------------------------------------------- */
.page-id-597 .page_content_wrap .wpb_column > .vc_column-inner > .wpb_wrapper,
.page-id-597 .page_content_wrap .wpb_column_text,
.page-id-597 .page_content_wrap h2,
.page-id-597 .page_content_wrap ul,
.page-id-597 .page_content_wrap p {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
/* The hero/CTA rows build their own full-bleed sections, so exempt them
   from the readable-column rule above -- otherwise their backgrounds get
   squeezed to 780px too. */
.page-id-597 .joma-hero-row,
.page-id-597 .joma-hero-row .wpb_wrapper,
.page-id-597 .wpb_raw_html,
.page-id-597 .wpb_raw_html .wpb_wrapper {
	max-width: none !important;
	width: auto !important;
}
.page-id-597 .page_content_wrap h2 {
	color: var(--jm-teal-deep);
	font-family: var(--jm-font-head);
	margin-top: 2rem;
}
/* The theme's generic blockquote:before quote-mark defaults to link-blue
   (#3174b4); recolour it to the palette wherever we use blockquotes. */
.page-id-106 blockquote:before,
.single-post blockquote:before,
.blog blockquote:before {
	color: var(--jm-aqua) !important;
}
.page-id-106 .joma-mission-quote:before {
	left: 0.2em;
}

/* ---------------------------------------------------------------------
   Section rhythm: give every eyebrow/H2 section head some breathing room
   from the block above it (some rows collapse to zero top margin).
   --------------------------------------------------------------------- */
.page-id-106 .section-head,
.page-id-112 .section-head,
.page-id-126 .section-head,
.page-id-1199 .section-head,
.page-id-1200 .section-head {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------
   Contacts (112): contact cards + restyled CF7 form 6
   --------------------------------------------------------------------- */
.joma-contact-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}
@media (max-width: 959px) {
	.joma-contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.joma-contact-cards { grid-template-columns: 1fr; }
}
.joma-contact-card {
	background: #fff;
	border: 1px solid var(--jm-border);
	border-radius: 12px;
	padding: 28px 22px;
	text-align: center;
	box-shadow: 0 6px 20px rgba(31,92,96,0.06);
}
.joma-contact-card .icon-badge { margin: 0 auto 14px; }
.joma-contact-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.joma-contact-card p, .joma-contact-card a { color: var(--jm-text-muted); }
.joma-contact-card a.joma-contact-card__link {
	color: var(--jm-teal-deep);
	font-weight: 700;
	text-decoration: none;
}
.joma-contact-card a.joma-contact-card__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Click-to-load map (UK PECR): a styled placeholder card replaces the
   iframe until the visitor clicks "Show map" (see the inline script next
   to each usage). No third-party cookies are set until then.
   --------------------------------------------------------------------- */
.joma-map-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(31,92,96,0.10); }
.joma-map-wrap .joma-map-iframe,
.joma-map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }
.joma-map-click {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(31,92,96,0.10);
}
.joma-map-placeholder {
	background: var(--jm-cream);
	border: 1px solid var(--jm-border);
	border-radius: 12px;
	padding: 40px 24px;
	text-align: center;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.joma-map-placeholder .icon-badge { margin-bottom: 4px; }
.joma-map-placeholder__addr {
	font-weight: 700;
	color: var(--jm-teal-deep);
	max-width: 320px;
	margin: 0 0 6px;
}
.joma-map-placeholder .joma-map-show { margin-bottom: 4px; }
.joma-map-placeholder .joma-map-openlink {
	font-size: 0.9rem;
	color: var(--jm-teal);
	font-weight: 700;
	text-decoration: none;
}
.joma-map-placeholder .joma-map-openlink:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   CF7 forms -- grid layout only (colours/inputs/checkboxes/submit are
   all handled sitewide by 05-system.css section 8). Two columns on
   desktop, one on mobile.
   --------------------------------------------------------------------- */
.joma-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
	max-width: 780px;
	margin: 0 auto;
}
@media (max-width: 767px) {
	.joma-form-grid { grid-template-columns: 1fr; }
}
.joma-form-grid .joma-field { margin: 0 0 18px; }
.joma-form-grid .joma-field-wide { grid-column: 1 / -1; }
.joma-form-grid label { color: var(--jm-teal-deep); }
/* The field-label colour rule above also matches each checkbox/radio
   option's own <label> (CF7 nests the option text inside a <label>) --
   restore normal body text colour there, and undo the theme's default
   italic/bordered <legend> styling. */
.joma-form-grid .wpcf7-list-item label,
.joma-form-grid .wpcf7-list-item .wpcf7-list-item-label {
	color: var(--jm-text) !important;
	font-style: normal;
}
.joma-form-grid fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
.joma-form-grid fieldset legend {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--jm-teal-deep);
	background: none;
	border: none;
	margin-bottom: 6px;
	padding: 0;
	width: 100%;
}
.joma-field-consent .wpcf7-list-item { align-items: flex-start; }
.joma-field-submit { text-align: center; margin-top: 4px; }

/* File input (careers CV upload): native file inputs default to a small,
   inline "Choose File" control -- give it a >=44px button-like target. */
.joma-form-grid input[type="file"] {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 8px;
	border: 1px solid var(--jm-border);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	box-sizing: border-box;
}
.joma-form-grid input[type="file"]::file-selector-button {
	min-height: 36px;
	padding: 8px 18px;
	margin-right: 14px;
	border: none;
	border-radius: 6px;
	background: var(--jm-teal);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.joma-form-grid input[type="file"]::file-selector-button:hover { background: var(--jm-teal-deep); }

/* ---------------------------------------------------------------------
   Book a Free Assessment (126): side panel
   --------------------------------------------------------------------- */
.joma-assessment-layout {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 959px) {
	.joma-assessment-layout { grid-template-columns: 1fr; }
}
.joma-side-panel {
	background: var(--jm-cream);
	border-radius: 12px;
	padding: 28px;
	text-align: center;
}
.joma-side-panel h3 { margin-bottom: 0.6rem; }
.joma-side-panel .btn { margin-top: 12px; width: 100%; }

/* ---------------------------------------------------------------------
   Blog listing (130): cards, readable column, brand colours.
   Note: WordPress never runs the_content() for a "page for posts" index
   (theme's index-excerpt.php only loops posts), so page 130's own content
   cannot carry a hero/CTA band here -- fixed with CSS-only equivalents:
   the title-band H1 text ("All Posts", hardcoded in the theme's
   saveo_get_the_title()) is swapped to "Blog" visually, and cards/colours
   are restyled to match the rest of the site.
   --------------------------------------------------------------------- */
.blog .johma-title-band .sc_layouts_title_caption {
	font-size: 0 !important;
	line-height: 0 !important;
}
.blog .johma-title-band .sc_layouts_title_caption:after {
	content: "Blog";
	display: block;
	font-size: clamp(1.7rem, 1.3rem + 2.4vw, 3.2rem);
	line-height: 1.2;
}
.blog .posts_container {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.blog .post_item {
	border: 1px solid var(--jm-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(31,92,96,0.06);
	margin-bottom: 32px;
}
.blog .post_item .post_header {
	padding: 0 32px;
}
.blog .post_item .post_title a { color: var(--jm-teal-deep); }

/* Date badge: theme default is link-blue (#3174b4) -- recolour to teal. */
.blog .post_meta_item.post_date,
.single-post .post_meta_item.post_date {
	background-color: var(--jm-teal) !important;
}
.blog .post_meta_item.post_date a,
.single-post .post_meta_item.post_date a,
.blog .post_meta_item.post_date .post-date,
.blog .post_meta_item.post_date .post-day,
.single-post .post_meta_item.post_date .post-date,
.single-post .post_meta_item.post_date .post-day {
	color: #fff !important;
}

/* "Continue reading" / "more-link": ensure solid contrast in every state
   (the theme's own hover-slide overlay used link-blue, and text-on-teal). */
.blog .more-link,
.single-post .more-link {
	background-color: var(--jm-coral-cta) !important;
	border-color: var(--jm-coral-cta) !important;
	color: #fff !important;
}
.blog .more-link:before,
.blog .more-link:after,
.single-post .more-link:before,
.single-post .more-link:after {
	background-color: var(--jm-coral-cta-hover) !important;
}
.blog .more-link:hover,
.single-post .more-link:hover {
	background-color: var(--jm-coral-cta-hover) !important;
	border-color: var(--jm-coral-cta-hover) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------
   Single blog post (99): readable column + fix the theme's post-card
   padding, which is set in large `em` units (2em margin + 4.3em padding
   each side) that don't scale down for narrow viewports -- on a 390px
   phone this leaves the post body only ~100px wide with mid-word breaks.
   Reduce to normal 20px gutters at <=767px, and keep a readable column
   on wider screens.
   --------------------------------------------------------------------- */
.single-post .post_content.entry-content,
.single-post .post_featured {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	body.single-post .post-body,
	body.blog .post-body {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}