/* ============================================================================
 * New Creation Churches — Theme Overrides
 * Source: theme/church-evethemes/html/css/custom/style.css
 *
 * Loaded after all Cornerstone CSS to apply NCC brand tokens site-wide.
 * Never modify Cornerstone core files — all brand overrides live here.
 * ============================================================================ */


/* ============================================================================
 * 1. GOOGLE FONTS
 * Matches the purchased theme exactly.
 * Roboto = headings, Open Sans = body/nav/UI text.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');


/* ============================================================================
 * 2. BRAND COLOUR TOKENS
 *
 * Overrides Cornerstone's default --color* custom properties.
 * NCC-specific tokens (--ncc-*) are also declared here for use in new blocks.
 * ============================================================================ */

:root {

	/* Primary brand — gold */
	--colorPrimary:             #f1c40f;
	--colorPrimary-light:       #f4d03f;
	--colorPrimary-dark:        #d4a70a;

	/* Secondary brand — brick red (donate / secondary CTA) */
	--colorSecondary:           #c13a0d;
	--colorSecondary-light:     #d9491a;
	--colorSecondary-dark:      #a03209;

	/* Text colours */
	--colorOffBlack:            #333333; /* headings */
	--colorOffBlack-light:      #4d4d4d;
	--colorOffBlack-dark:       #222222;
	--colorOffBlack-perpetual:  #222222;
	--colorText:                #666666; /* body text */
	--colorGrey-dark:           #666666;
	--colorGrey:                #d0d0d2;
	--colorGrey-light:          #f3f3f3;

	/* Surface colours */
	--colorOffWhite:            #f6f6f6; /* alternate section background */
	--colorOffWhite-light:      #ffffff;
	--colorOffWhite-dark:       #e6e6e6;
	--colorWhite:               #ffffff;
	--colorWhite-perpetual:     #ffffff;
	--colorBlack:               #000000;
	--colorBlack-perpetual:     #000000;

	/* Tile / card chrome */
	--colorViewBg:              #ffffff;
	--colorTileBg:              #ffffff;
	--colorTileHdr:             #f6f6f6;
	--colorTileBdr:             #e7e8eb;

	/* State colours */
	--colorSuccess:             #006604;
	--colorWarning:             #edad21;
	--colorDanger:              #db5d5d;
	--colorErrorRed:            #ff0000;

	/* NCC-specific semantic aliases */
	--ncc-color-primary:        #f1c40f;
	--ncc-color-primary-hover:  #ba980d;
	--ncc-color-secondary:      #c13a0d;
	--ncc-color-heading:        #333333;
	--ncc-color-body:           #666666;
	--ncc-color-bg-dark:        #222222;  /* dark section backgrounds */
	--ncc-color-bg-alt:         #f6f6f6;  /* alternating section background */
	--ncc-color-bg-form:        #f3f3f3;  /* form control fill */
	--ncc-color-footer-bg:      #333333;
	--ncc-color-border:         #cccccc;
	--ncc-color-border-accent:  #f1c40f;  /* schedule rule, masonry border */
	--ncc-color-shadow:         #888888;
	--ncc-color-muted:          #adadad;  /* post dates */
}


/* ============================================================================
 * 3. TYPOGRAPHY
 *
 * Overrides Cornerstone's default Nunito stack with the theme's Roboto /
 * Open Sans pairing. Sizes and weights match the theme spec exactly.
 * ============================================================================ */

/* NCC font-stack tokens */
:root {
	--ncc-font-heading: 'Roboto', Helvetica, Arial, sans-serif;
	--ncc-font-body:    'Open Sans', Helvetica, Arial, sans-serif;
}

body {
	font-family: var(--ncc-font-body);
	font-size: 14px;
	color: var(--ncc-color-body);
	background-color: var(--colorWhite);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ncc-font-heading);
	color: var(--ncc-color-heading);
	letter-spacing: 1px;
}

h1, h2 {
	font-weight: 500;
	text-transform: capitalize;
}

h1, .fauxH1 {
	font-size: 2.125rem;  /* 34px */
	line-height: 1.176em; /* 40px */
	margin-bottom: 0.625rem;
}

h2, .fauxH2 {
	font-size: 1.500rem;  /* 24px */
	line-height: 1.250em; /* 30px */
	margin-bottom: 0.938rem;
}

h3 {
	font-size: 1.375rem;  /* 22px */
	font-weight: 500;
	line-height: 1.364em;
	margin-bottom: 1rem;
}

h4 {
	font-size: 1.125rem;  /* 18px */
	font-weight: 500;
	margin-bottom: 1rem;
}

h5 {
	font-size: 1.000rem;  /* 16px */
	font-weight: 500;
	margin-bottom: 1rem;
}

h6 {
	font-size: 0.875rem;  /* 14px */
	font-weight: 700;
	margin-bottom: 1rem;
}

p, ol, ul, li, blockquote, button, a, span, label, input, textarea, select {
	font-family: var(--ncc-font-body);
}

p {
	color: var(--ncc-color-body);
	font-size: 0.875rem;  /* 14px */
	font-weight: 400;
	line-height: 1.714em; /* 24px */
	margin-bottom: 1.25em;
}

/* Hero-specific text sizes (matching theme's .header-head1 / .header-head2) */
:root {
	--ncc-hero-preheading-size:    1.250rem;  /* 20px, weight 400, tracking 5px */
	--ncc-hero-preheading-spacing: 5px;
	--ncc-hero-heading-size:       3.125rem;  /* 50px, weight 400, tracking 5px */
	--ncc-hero-heading-spacing:    5px;
}


/* ============================================================================
 * 4. SPACING SCALE
 *
 * Named spacing tokens from the theme. Use these as variables when building
 * new block components rather than hardcoding pixel values.
 * ============================================================================ */

:root {
	--ncc-space-section:        80px;  /* standard section top/bottom padding */
	--ncc-space-hero:           250px; /* hero section top/bottom padding */
	--ncc-space-cta:            150px; /* CTA bg-image section padding */
	--ncc-space-email:          100px; /* email subscription section padding */
	--ncc-space-row:            40px;  /* common row bottom spacing */
	--ncc-space-content-pad:    30px;  /* inner content horizontal padding */
	--ncc-space-btn-top:        30px;  /* margin above CTA buttons */
	--ncc-space-image-bottom:   20px;  /* image bottom margin */
	--ncc-space-underline:      40px;  /* decorative underline bottom margin */
	--ncc-space-venue-row:      30px;  /* venue address row spacing */
	--ncc-border-radius:        3px;   /* buttons, cards */
	--ncc-border-radius-popup:  5px;   /* modal / popup */
}


/* ============================================================================
 * 5. GLOBAL RESETS
 *
 * Minimal resets from the theme's global CSS. These align browser defaults
 * with the purchased design without conflicting with Cornerstone's own resets.
 * ============================================================================ */

a {
	outline: none;
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid var(--colorPrimary);
}

a:hover {
	color: inherit;
	text-decoration: none;
	border-bottom-color: var(--colorPrimary-dark);
}

a:visited {
	color: inherit;
	text-decoration: none;
}

iframe {
	border: 0;
}

/* Section backgrounds (used by blockSettings backgroundColor options) */
.section-bg-white  { background-color: var(--colorWhite); }
.section-bg-alt    { background-color: var(--ncc-color-bg-alt); }
.section-bg-dark   { background-color: var(--ncc-color-bg-dark); }
.section-bg-dark * { color: var(--colorWhite); }

/* Utility: white-text override for dark/image backgrounds */
.txt-white,
.txt-white h1,
.txt-white h2,
.txt-white h3,
.txt-white p { color: #ffffff; }


/* ============================================================================
 * 6. HOVER STATES
 *
 * Matches the purchased theme's interaction patterns.
 * Source: theme/church-evethemes/html/css/custom/style.css
 * ============================================================================ */

/* Nav links — theme uses gold for hover/active, not secondary (brick red).
   Must match the specificity of mcsComponents.css rule:
   "#siteTopbar .m_navList a:hover { color: var(--colorGrey-dark) }" (1,2,1) */
#siteTopbar .m_navList a:hover,
#siteTopbar .m_navList a:visited:hover {
	color: var(--colorPrimary);
}

#siteTopbar .m_navList a.-active,
#siteTopbar .m_navList a.-active:visited,
#siteTopbar .m_navList a.-active:hover {
	color: var(--colorPrimary);
}

/* Nav underline animation — gold bar slides in on hover/active.
   A_NavItem.razor.css has no ::after rule, so the full setup lives here. */
#siteTopbar .m_navList a {
	position: relative;
}

#siteTopbar .m_navList a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--colorPrimary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}

#siteTopbar .m_navList a:hover::after,
#siteTopbar .m_navList a.-active::after {
	transform: scaleX(1);
}

/* Gallery thumbnails — subtle scale + shadow on hover */
.o_blockGallery ._galleryThumb {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.o_blockGallery ._galleryThumb:hover {
	transform: scale(1.03);
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

/* Feature tiles — gold icon/heading on hover (matches .readmore:hover pattern) */
.m_tileFeature:hover ._heading {
	color: var(--colorPrimary);
	transition: color 0.3s ease;
}

/* Buttons — ghost/outline variant hover (for when -ghost class is used) */
.a_button.-ghost {
	background-color: transparent;
	border: 1px solid var(--colorPrimary);
	color: var(--colorPrimary);
}

.a_button.-ghost:hover {
	background-color: var(--colorPrimary);
	color: var(--colorWhite);
}


/* ============================================================================
 * 7. TOPBAR — ALWAYS VISIBLE
 *
 * The mcsComponents.css (from branch styles-typography-fonts) set the TopBar
 * to opacity:0/visibility:hidden expecting a JS scroll listener that was never
 * implemented. Override here to keep it visible until the scroll-reveal JS is
 * built as a separate piece of work.
 * ============================================================================ */

.o_siteTopBar {
	background-color: var(--colorWhite);
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}


/* ============================================================================
 * 8. TOPBAR — BRAND & LAYOUT
 *
 * Applies the church theme's white navbar appearance to the Cornerstone
 * O_SiteTopBar. Replaces the Mohunky placeholder SVG with the NCC logo
 * image. Hides the cart column (not used in the church header).
 *
 * Scroll-reveal (transparent → white on scroll > 50px) is a separate task —
 * implement once hero sections are in place so the page structure is defined.
 * The .-visible class pattern is already wired in mcsComponents.css.
 * ============================================================================ */

/* NCC logo — replace Mohunky placeholder SVG with church logo image */
.o_siteTopBar ._topBarLogo {
	display: none;
}

#topBarLogo {
	display: block;
	width: 180px;
	height: 65px;
	background-image: url('/_content/MohCornerstone.Web.Ui/images/cropped-New-Creation-Logo_Print_Hi-Res.jpg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	border-bottom: none; /* mcsTypography.css adds border-bottom to all <a> elements */
}

/* Cart column — not part of the church theme header */
#siteTopbar .col.span1 {
	display: none;
}

/* Nav column — grow to fill the space freed by the hidden cart column */
#siteTopbar .col.span9 {
	flex-grow: 1;
}

/* Nav link colour — override the -txtWhite utility class on the nav column.
   Cornerstone's topbar was designed for a gold background; white text was correct
   there but is invisible on our white navbar. */
#siteTopbar .m_navList a,
#siteTopbar .m_navList a:visited {
	color: var(--colorGrey-dark);
}

/* Nav item spacing — 12px per side matches the theme's `margin: 0 12px` */
#siteTopbar .m_navList li {
	padding: 0 0.75rem;
}

/* Burger button — gold to match primary brand, not secondary brick red */
#siteTopbar .a_buttonBurger {
	background-color: var(--colorPrimary);
}


/* ============================================================================
 * 9. MOBILE NAVIGATION
 *
 * Replaces the right-slide fullscreen dark overlay with a top-down dropdown
 * on a white background, matching the church theme's mobile nav pattern.
 *
 * The compiled mcsComponents.css uses `ul.m_navList` selectors for item
 * stacking, but M_NavList renders `<nav class="m_navList"><ul class="_navList">`,
 * so those rules never match. Correct selectors are supplied here.
 * ============================================================================ */

@media only screen and (max-width: 1000px) {

	/* Topbar stays white when mobile nav is open */
	.o_siteTopBar.-tl-navOpen {
		background-color: var(--colorWhite) !important;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	}

	/* Nav panel: top-down dropdown instead of right-slide fullscreen */
	#siteTopbar nav.m_navList {
		right: 0;                            /* cancel compiled right: -100% off-screen */
		height: auto;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		background-color: var(--colorWhite);
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
		transition: max-height 0.4s ease-in-out, padding 0.3s ease;
	}

	#siteTopbar nav.m_navList.-active {
		max-height: 600px;                   /* tall enough for all nav items */
		padding: 0.5rem 0 1rem;
	}

	/* Nav items: stack vertically with full-width tap targets.
	   The compiled `ul.m_navList li` rule never matches (wrong selector),
	   so stacking is applied here via `.m_navList li`. */
	#siteTopbar .m_navList li {
		display: block;
		width: 100%;
		padding: 0;
	}

	/* Nav links: dark text on white, comfortable touch padding */
	#siteTopbar nav.m_navList a,
	#siteTopbar nav.m_navList a:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem 1.5rem;
		color: var(--colorGrey-dark);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2em;
		text-align: center;
	}

	#siteTopbar nav.m_navList a:hover,
	#siteTopbar nav.m_navList a.-active {
		color: var(--colorPrimary);
	}

	/* Underline animation not appropriate in stacked dropdown layout */
	#siteTopbar nav.m_navList a::after {
		display: none;
	}

}


/* ============================================================================
 * 10. FOOTER — BRAND & LAYOUT
 *
 * Applies the church theme's dark footer to the Cornerstone O_SiteBottomBar.
 * Source: theme .footer-bg { background-color: #333333 }
 *         theme .footer-text { color: #f3f3f3 }
 *
 * Hides the Mohunky icon logo (NCC identity lives in the header) and the
 * carbon badge (not part of the church site). The carbon badge column is
 * also removed so the content takes full width.
 * ============================================================================ */

/* Background — theme's .footer-bg is #333333, Cornerstone default is #222222 */
.o_siteBottomBar {
	background-color: var(--ncc-color-footer-bg); /* #333333 */
}

/* Hide Mohunky icon logo */
.o_siteBottomBar .svg_mohLogo_icon_blue {
	display: none;
}

/* Hide the now-empty logo column so the contact button aligns left */
#siteBottomBar .col.span2 {
	display: none;
}

/* Hide carbon badge */
.o_siteBottomBar .a_carbonBadge {
	display: none;
}

/* Remove the carbon badge column; scoped to the main content row only
   (.row.-hCenter) to avoid hiding the copyright column in the row below */
#siteBottomBar .row.-hCenter .col.span6.-txtRight {
	display: none;
}

/* Expand main content column to full width */
#siteBottomBar .row.-hCenter .col.span6:not(.-txtRight) {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}

/* Footer text — light colour matching theme's .footer-text: #f3f3f3 */
.o_siteBottomBar p,
.o_siteBottomBar span,
.o_siteBottomBar li {
	color: var(--colorGrey-light);
}

/* Small-print nav links */
.o_siteBottomBar ._siteBottomNav ul li a {
	color: var(--colorGrey-light);
	border-bottom-color: transparent;
	transition: color 0.3s ease;
}

.o_siteBottomBar ._siteBottomNav ul li a:hover {
	color: var(--colorPrimary);
}

/* Contact CTA button — white border on dark bg, fills gold on hover */
#siteBottomBar .a_button.-ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--colorWhite);
}

#siteBottomBar .a_button.-ghost:hover {
	background-color: var(--colorPrimary);
	border-color: var(--colorPrimary);
	color: var(--colorOffBlack);
}

/* Divider above copyright — matches theme's .footer-br */
#siteBottomBar .row:last-child {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

/* Copyright text */
#siteBottomBar .siteBottomSmallPrint p {
	color: var(--colorGrey-light);
	font-size: 0.75rem;
	line-height: 2em;
	margin-bottom: 0;
}

/* Attribution links (mohunky, umbraco) */
#siteBottomBar .siteBottomSmallPrint a {
	color: var(--colorPrimary);
	border-bottom-color: transparent;
}

#siteBottomBar .siteBottomSmallPrint a:hover {
	color: var(--colorPrimary-light);
}


/* ============================================================================
 * 11. HERO LANDING PAGE
 *
 * Applies the church theme's .header-bgimage section appearance.
 * Source patterns from theme/church-evethemes/html/css/custom/style.css:
 *   .header-section-space { padding: 250px 0 }
 *   .header-head1 { 20px, weight 400, tracking 5px, #f3f3f3 }
 *   .header-head2 { 50px, weight 400, tracking 5px, #f3f3f3 }
 *   .btn-3 { transparent bg, white border → gold fill on hover }
 * ============================================================================ */

/* Content layer sits above _heroBg — the inline opacity style on _heroBg creates
   a stacking context so the container must declare its own z-index to stay on top. */
.o_heroLandingPage .container {
	position: relative;
	z-index: 1;
}

/* Padding — theme's .header-section-space { padding: 250px 0 } */
.o_heroLandingPage main.row {
	padding: var(--ncc-space-hero) 0;
}

/* All paragraph text in the hero — near-white on dark/image background.
   Overrides the global p { color: --ncc-color-body } rule from Section 3. */
.o_heroLandingPage p {
	color: var(--colorGrey-light);
}

/* Pre-heading and sub-heading — 5px letter-spacing to match .header-head1.
   The -txtPrimary utility would set these gold; .o_heroLandingPage p (above)
   already overrides colour — these rules add the additional type treatment. */
.o_heroLandingPage p.-txtPrimary {
	font-size: var(--ncc-hero-preheading-size);   /* 1.25rem / 20px */
	font-weight: 400;
	letter-spacing: var(--ncc-hero-preheading-spacing); /* 5px */
}

/* H1 — theme's .header-head2: 50px, weight 400, 5px tracking, white.
   Overrides Section 3 global h1 { capitalize, 2.125rem }. */
.o_heroLandingPage h1 {
	font-size: var(--ncc-hero-heading-size);      /* 3.125rem / 50px */
	font-weight: 400;
	letter-spacing: var(--ncc-hero-heading-spacing); /* 5px */
	color: var(--colorWhite);
	text-transform: none;
}

/* Primary CTA button — ghost style matching theme's .btn-3.
   Overrides the default gold-filled .a_button base. */
.o_heroLandingPage .a_button.-large,
.o_heroLandingPage .a_button.-large:visited {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--ncc-border-radius);
	color: var(--colorGrey-light);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.625rem 2.8125rem; /* 10px 45px */
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color 0.3s ease-in, border-color 0.3s ease-in, color 0.3s ease-in;
}

.o_heroLandingPage .a_button.-large:hover {
	background-color: var(--colorPrimary);
	border: 1px solid var(--colorPrimary);
	color: var(--colorOffBlack);
}

/* Secondary CTA plain link — white → gold on hover, styled to match btn-3 weight */
.o_heroLandingPage .-flex > a:not(.a_button) {
	color: var(--colorGrey-light);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.o_heroLandingPage .-flex > a:not(.a_button):hover {
	color: var(--colorPrimary);
	border-bottom-color: var(--colorPrimary);
}

/* Responsive — reduce hero height on smaller screens */
@media only screen and (max-width: 800px) {
	.o_heroLandingPage main.row {
		padding: 10rem 0;
	}
	.o_heroLandingPage h1 {
		font-size: 2.5rem;
	}
}

@media only screen and (max-width: 400px) {
	.o_heroLandingPage main.row {
		padding: 6rem 0;
	}
	.o_heroLandingPage h1 {
		font-size: 2rem;
	}
}


/* ============================================================================
 * 12. HERO SIMPLE
 *
 * Inner-page hero used for standard content pages.
 * Base CSS: .o_heroSimple { background-color: var(--colorPrimary); color: var(--colorWhite) }
 *
 * The global Section 3 rules (p, h1 explicit colours) override the inherited
 * white set by the base, resulting in dark text on gold. This section locks
 * that intent explicitly — dark text on the gold banner is high-contrast and
 * consistent with the theme's use of gold as a featured block colour.
 * ============================================================================ */

/* Heading — dark text on gold, no caps (inner pages don't need headline caps) */
.o_heroSimple h1 {
	color: var(--colorOffBlack);
	text-transform: none;
}

/* Sub-heading and rich content — dark on gold */
.o_heroSimple p,
.o_heroSimple .-txtLarger {
	color: var(--colorOffBlack);
}

/* Breadcrumb links — dark on gold (the compiled default is --colorText / grey,
   which is readable but these rules make the intent explicit) */
.o_heroSimple ul.m_navListBreadcrumb li .a_navItem {
	color: var(--colorOffBlack);
}

.o_heroSimple ul.m_navListBreadcrumb li .a_navItem:hover {
	color: var(--colorOffBlack-dark);
}


/* ============================================================================
 * 13. HERO BLOG POST & PAGE HERO
 *
 * Both heroes use a dark/image background but the global h1/p colour rules
 * (Section 3) set dark text explicitly, overriding the inherited white set by
 * the component's own CSS. These scoped rules restore white text with higher
 * specificity. O_HeroBlogPost is a Cornerstone read-only file so its overrides
 * live here; O_HeroPage is a church-specific component and handles its own
 * h1/p colours in O_HeroPage.razor.css.
 * ============================================================================ */

/* Content layer sits above the absolutely-positioned _heroBlogPostBg */
.o_heroBlogPost .container {
	position: relative;
	z-index: 1;
}

/* Heading — white on image; overrides global h1 { color: --ncc-color-heading } */
.o_heroBlogPost h1 {
	color: var(--colorWhite);
	text-transform: none;
}

/* Sub-heading and body text */
.o_heroBlogPost p {
	color: var(--colorGrey-light);
}


/* ============================================================================
 * 14. BLOCK CONTENT — SEPARATOR HEADING ALIGNMENT
 *
 * When "Show Yellow Separator" is ticked, the _sectionDivider is centred via
 * margin: auto. The heading and subheading above it should also be centred.
 * The Razor file is read-only, so :has() targets the parent col when the
 * divider is present.
 * ============================================================================ */

.o_blockContent .col:has(._sectionDivider) h2,
.o_blockContent .col:has(._sectionDivider) h4 {
	text-align: center;
}