/* SVC Site Improvements - loaded after the theme. Brand: bronze #ab815a, dark #1e232b, logo orange #f16923.
   This file holds the site-wide design tokens (colours, type scale, spacing) that assets/svc-home.css
   (homepage) and assets/pages.css (inner pages) build on, plus the small site-wide fixes. */

/* ==========================================================================
   0. Design tokens - one type scale and spacing rhythm for the whole site
   ========================================================================== */
:root {
	/* colours (the theme's own palette) */
	--svc-ink: #1e232b;             /* headings / strong text */
	--svc-text: #3a404a;            /* body text on cream/white (9.9:1) */
	--svc-muted: #5b6270;           /* labels, meta, captions on light (5.8:1 on cream) */
	--svc-bronze: #ab815a;          /* the theme colour - big headings, borders, fills */
	--svc-bronze-mid: #96693f;      /* bronze for big headings on stone #e8e2da (3.4:1) */
	--svc-bronze-deep: #6f4f30;     /* bronze for text under 24px on light backgrounds (7:1 cream, 5.3:1 on #e0dad2) */
	--svc-bronze-soft: #d8c3aa;     /* bronze for small text on dark (9.3:1) */
	--svc-bronze-dark: #8f6741;     /* hover fill - the theme's footer-link hover */
	--svc-orange: #f16923;          /* logo orange - focus rings and tiny accents only */
	--svc-cream: #faf8f5;
	--svc-stone: #e8e2da;
	--svc-stone-2: #d9d1c6;
	--svc-white: #ffffff;
	--svc-light: #c9cdd4;           /* body text on dark (10.6:1) */
	/* fonts (theme fonts) */
	--svc-display: "Gilda Display", Georgia, "Times New Roman", serif;
	--svc-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--svc-label: "Cinzel", "Gilda Display", Georgia, serif;
	/* type scale (rem = 16px) */
	--svc-fs-xs: .8125rem;          /* 13px  captions, eyebrows */
	--svc-fs-sm: .9375rem;          /* 15px  meta, small print */
	--svc-fs-body: 1rem;            /* 16px  body everywhere, phones included */
	--svc-fs-lede: 1.125rem;        /* 18px  intro paragraphs */
	--svc-fs-h4: 1.25rem;           /* 20px  card sub-headings */
	--svc-fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.625rem);   /* 22-26px card titles */
	--svc-fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);        /* 32-54px section titles */
	--svc-fs-h1: clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem);      /* 37-70px page titles */
	--svc-fs-hero: clamp(2.6rem, 1.8rem + 4.6vw, 5.6rem);    /* 42-90px homepage hero */
	--svc-fs-btn: 1rem;             /* 16px  button labels (Cinzel) */
	/* line heights and tracking */
	--svc-lh-display: 1.08;         /* uppercase serif display headings */
	--svc-lh-heading: 1.22;         /* card titles */
	--svc-lh-body: 1.65;
	--svc-ls-caps: .14em;           /* uppercase eyebrows in Inter */
	--svc-ls-display: .02em;        /* uppercase Gilda headings */
	/* spacing rhythm */
	--svc-space-1: .5rem;
	--svc-space-2: .75rem;
	--svc-space-3: 1rem;
	--svc-space-4: 1.5rem;
	--svc-space-5: 2rem;
	--svc-space-6: 3rem;
	--svc-section: clamp(4rem, 9vw, 7.5rem);
	--svc-measure: 64ch;            /* longest comfortable paragraph */
	/* shapes and motion */
	--svc-radius: 18px;
	--svc-radius-sm: 10px;
	--svc-shadow: 0 12px 40px -18px rgba(30, 35, 43, .35);
	--svc-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   1. Type scale - the theme's "responsive fonts" shrink body text to 13px
      and h4 to 13px on phones (14px on tablets). Keep 16px body text and a
      readable heading scale on every screen instead.
   ========================================================================== */
@media only screen and (max-width: 959px) {
	html body,
	html body .mfn-menu-item-megamenu {
		font-size: var(--svc-fs-body);
		line-height: var(--svc-lh-body);
	}
	html body .lead,
	html body .big {
		font-size: 1.0625rem;
		line-height: 1.6;
	}
	html body h3 {
		font-size: 1.375rem;
		line-height: 1.3;
	}
	html body h4 {
		font-size: 1.125rem;
		line-height: 1.35;
	}
	html body h5 {
		font-size: 1rem;
		line-height: 1.45;
	}
	html body h6 {
		font-size: var(--svc-fs-xs);
		line-height: 1.6;
		letter-spacing: 2px;
	}
	html body blockquote {
		font-size: 1rem;
	}
}
/* Uppercase serif banner/section headings: a little tracking so letters don't touch, and lines that never overlap.
   (Scoped to builder headings - post bodies keep the theme's mixed-case heading rhythm.) */
#Content .column_attr h1,
#Content .column_attr h2,
#Content .column_heading h2,
#Content .mcb-section > .section_wrapper h1,
#Subheader .title {
	letter-spacing: var(--svc-ls-display);
	line-height: var(--svc-lh-display);
}
/* Paragraph rhythm inside builder columns (theme default is a tight 15px). */
#Content .column_attr p,
#Content .column_column p,
#Content .the_content_wrapper p {
	margin-bottom: 1em;
}
#Content .column_attr p:last-child,
#Content .column_column p:last-child {
	margin-bottom: 0;
}
#Content .column_attr h2 + p,
#Content .column_attr h3 + p,
#Content .column_attr h4 + p {
	margin-top: var(--svc-space-2);
}

/* ==========================================================================
   2. Buttons - one label size everywhere; outline buttons get the darker
      bronze so the label reads (5.8:1), filled bronze buttons get dark text
      (white on bronze was 3.5:1 - same fix as the phone "Give" button).
   ========================================================================== */
a.button:not(.action_button):not(.footer_button) .button_label,
input.wpcf7-submit,
.comment-form .submit,
#Content input[type="submit"] {
	font-size: var(--svc-fs-btn);
	letter-spacing: 1px;
}
a.button.button_theme .button_label,
input.wpcf7-submit,
.comment-form .submit {
	color: var(--svc-bronze-deep);
}
a.button.button_theme:hover .button_label {
	color: #ffffff;
}

/* ==========================================================================
   3. WhatsApp chat button
   ========================================================================== */
.svc-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 22px 0 14px;
	border: 1px solid #ab815a;          /* theme bronze, like the theme's outline buttons */
	border-radius: 999px;
	background: #1e232b;                 /* theme dark */
	color: #ffffff !important;
	font-family: inherit;                /* same font as the theme's buttons */
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: background-color .2s ease, border-color .2s ease;
}
.svc-whatsapp svg {
	flex: 0 0 auto;
	color: #25d366;                      /* WhatsApp's own green only on the symbol, so people recognise it */
}
.svc-whatsapp:hover,
.svc-whatsapp:focus-visible {
	background: #ab815a;
	border-color: #ab815a;
}
.svc-whatsapp:hover svg,
.svc-whatsapp:focus-visible svg {
	color: #ffffff;
}
.svc-whatsapp:focus-visible {
	outline: 3px solid #1e232b;
	outline-offset: 3px;
}
@media (max-width: 767px) {
	.svc-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 56px;
		padding: 0;
		justify-content: center;
	}
	.svc-whatsapp__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	/* Leave room under the footer text so the WhatsApp button never covers it. */
	#Footer {
		padding-bottom: 84px;
	}
	/* Keep the theme's "back to top" button clear of the WhatsApp button. */
	#back_to_top {
		bottom: 84px !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.svc-whatsapp {
		transition: none;
	}
}

/* ==========================================================================
   4. Header
   ========================================================================== */
/* Desktop dropdowns open right under the menu word, not at the bottom of the tall header.
   The menu link fills the header height with its 60px text line centred, so 50% + 30px is
   the bottom of the text in both the tall header and the smaller sticky header. */
@media (min-width: 1240px) {
	#Top_bar .menu > li > ul.sub-menu {
		top: calc(50% + 34px) !important;
		border-top: 2px solid #ab815a;
	}
	#Top_bar .menu > li > ul.sub-menu li a {
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 15px;
		line-height: 1.4;
	}
}

/* Phone/tablet side menu: "Give" is already the big button at the top, so hide the
   duplicate "Give" menu item (menu-item-114, same Stewardship link) in that menu only.
   BeTheme shows that top button only at 768px and below (checked 1239/1024/960/800 = no button),
   so wider screens keep the menu item. */
@media (max-width: 768px) {
	/* "Give" stays as its own heading with a + (Sept 2026, Bijo): "Give online" and "Why we give & Gift Aid"
	   used to hang loose under Contact because the heading was hidden. */
	/* The GIVE button in the slide-out menu was position:fixed, so menu items scrolled underneath it
	   (it sat on top of "About" on iPhone). Pin it to the menu panel instead: same spot, scrolls with the X. */
	#Side_slide .extras .action_button {
		position: absolute !important;
		top: 10px !important;
		right: 50px !important;
		left: auto !important;
	}
	/* comfortable rows in the slide-out menu */
	#Side_slide #menu ul li a {
		font-size: 1rem;
		line-height: 1.5;
	}
}

/* Mobile header "Give" button: dark text on bronze reads better than white. */
@media (max-width: 767px) {
	#Top_bar .action_button {
		color: #1e232b !important;
	}
}

/* ==========================================================================
   5. Readability - darker bronze for small text on light backgrounds
   ========================================================================== */
.post-meta,
.post-meta a,
.author-date,
.date_label {
	color: var(--svc-muted) !important;
}
.section.bg-cover .themecolor,
p.themecolor,
h6 .themecolor {
	color: var(--svc-bronze-deep) !important;
}

/* ==========================================================================
   6. Mobile tap targets (social icons, reply links)
   ========================================================================== */
@media (max-width: 767px) {
	.mcb-item-icon a,
	.icon_bar a,
	.comment-reply-link {
		display: inline-block;
		min-width: 44px;
		min-height: 44px;
		line-height: 44px;
		text-align: center;
	}
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
#Footer .widget h4 {
	margin-bottom: var(--svc-space-3);
	letter-spacing: var(--svc-ls-display);
}
#Footer .widget p {
	line-height: var(--svc-lh-body);
}
#Footer .widget small,
#Footer .widget p small {
	font-size: var(--svc-fs-xs);
}
/* social icons (theme icons, made larger and easier to tap) */
#Footer ul.social {
	margin-top: 14px;
}
#Footer ul.social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 4px;
	border: 1px solid rgba(171, 129, 90, .5);
	border-radius: 50%;
	font-size: 18px;
	transition: border-color .2s ease;
}
#Footer ul.social li a:hover,
#Footer ul.social li a:focus-visible {
	border-color: #ffffff;
}
/* identity line */
.svc-footer-identity {
	max-width: 900px;
	margin: 0 auto var(--svc-space-1);
	font-size: var(--svc-fs-sm);
	line-height: 1.6;
	opacity: .85;
}
.svc-footer-identity a {
	text-decoration: underline;
}