/* ===========================================================================
 *  CIRCLE COMMUNITY — Brand overrides
 *  Loaded LAST (after scheme-01.css) so these :root variables win.
 *  Rebrands the theme via the hooks that already exist in style.css/coloring.css:
 *    --primary-color / --secondary-color  → #7AAD9D (all green accents + buttons)
 *    --body-font / --title-font           → Montserrat
 *    --alt-font                           → Ananda (the green cursive script words)
 * ===========================================================================*/

/* ---------------------------------------------------------------------------
 *  ANANDA web font.
 *  The font file is NOT bundled (it's large). Drop the file(s) into:
 *      your-theme/assets/fonts/ananda/
 *  named ananda.woff2 / ananda.woff / ananda.ttf  (any you have is fine).
 *  Paths below are relative to THIS file (assets/css/brand.css).
 *  Until the file is added, the cursive falls back to "Allison" (already loaded)
 *  so the script words still look scripty.
 * ------------------------------------------------------------------------- */
@font-face {
	font-family: "Ananda";
	src: url("../fonts/ananda/ananda.woff2") format("woff2"),
	     url("../fonts/ananda/ananda.woff") format("woff"),
	     url("../fonts/ananda/ananda.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand green — unify primary + secondary so buttons AND text accents match. */
	--primary-color: #7AAD9D;
	--primary-color-rgb: 122, 173, 157;
	--secondary-color: #7AAD9D;
	--secondary-color-rgb: 122, 173, 157;

	/* Fonts: Montserrat for body + headings, Ananda for the script accent. */
	--body-font: "Montserrat", Helvetica, Arial, sans-serif;
	--title-font: "Montserrat", Helvetica, Arial, sans-serif;
	--alt-font: "Ananda", "Allison", cursive;

	/* Handy alias for use in this file. */
	--brand-green: #7AAD9D;
}

/* Safety net: a few spots reference the colour directly rather than the var. */
.id-color,
.id-color-2 { color: var(--brand-green) !important; }

.bg-color,
.bg-color-2 { background: var(--brand-green) !important; }

/* ---------------------------------------------------------------------------
 *  SCRIPT ACCENT FONT — enforce directly (don't rely only on the --alt-font var,
 *  which style.css also sets without a cursive fallback). !important guarantees
 *  the cursive look even before the Ananda file is added (falls back to Allison,
 *  which the theme already loads from Google Fonts).
 * ------------------------------------------------------------------------- */
.alt-font {
	font-family: "Ananda", "Allison", "Segoe Script", "Brush Script MT", cursive !important;
	line-height: 1.15;
}

/* ===========================================================================
 *  HERO TYPOGRAPHY  (match the Figma proportions)
 *  The theme markup puts .fs-96 (96px) on the script line, so it rendered huge
 *  and wrapped to two lines. These selectors are specific enough to beat the
 *  .fs-96 / .fs-xs-60 utilities (which carry no !important).
 * ===========================================================================*/
.hero-static .slider-title {
	font-family: var(--title-font);   /* Montserrat for the main title */
	font-size: 36px;
	line-height: 1.06;
	letter-spacing: -1px;
	font-weight: 700;
}
.hero-static .slider-title .alt-font {
	display: block;
	font-size: 50px !important;       /* down from 96px; cursive reads smaller */
	line-height: 1.12;
	letter-spacing: 0;
	font-weight: 500;
	margin-top: .12em;
}
@media (max-width: 991px) {
	.hero-static .slider-title { font-size: 38px; }
	.hero-static .slider-title .alt-font { font-size: 42px !important; }
}

/* ===========================================================================
 *  STATIC HERO  (replaces the old swiper slider on the Home page)
 *  The section carries the background image inline; .v-center provides the
 *  full-height flex-centred layout. A soft dark overlay keeps white text legible.
 * ===========================================================================*/
.hero-static {
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.hero-static::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 0;
}
.hero-static .v-center {
	background: transparent;       /* override the theme's white .v-center bg */
	position: relative;
	z-index: 1;
}
.hero-static .sw-text-wrapper .btn-main + .btn-main { margin-left: .5rem; }

/* ===========================================================================
 *  PAGE BANNER  (Contact page "Contact Us" hero — shorter than the home hero)
 * ===========================================================================*/
.page-hero {
	position: relative;
	min-height: 52vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 0;
}
.page-hero .page-hero-title {
	position: relative;
	z-index: 1;
	color: #fff;
	font-weight: 700;
	margin: 0;
}

/* ===========================================================================
 *  CONTACT FORM  (matches the shared Contact Us design)
 * ===========================================================================*/
.cc-contact-form .form-label {
	font-weight: 600;
	color: #1d1d1d;
	margin-bottom: .5rem;
	display: block;
}
.cc-contact-form .form-control,
.cc-contact-form .form-select {
	width: 100%;
	background: #ecebe9;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 16px 20px;
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cc-contact-form .form-control::placeholder { color: #b3a9a6; }
.cc-contact-form .form-control:focus,
.cc-contact-form .form-select:focus {
	outline: none;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .18);
	background: #fff;
}
.cc-contact-form textarea.form-control { min-height: 230px; resize: vertical; }

.cc-contact-form .btn-submit {
	display: inline-block;
	background: var(--brand-green);
	color: #fff;
	border: none;
	border-radius: 40px;
	padding: 15px 55px;
	font-weight: 600;
	font-size: 17px;
	cursor: pointer;
	transition: filter .2s ease, transform .05s ease;
}
.cc-contact-form .btn-submit:hover { filter: brightness(.93); }
.cc-contact-form .btn-submit:active { transform: translateY(1px); }

/* Inline success / error notices above the form. */
.cc-form-notice {
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 26px;
	font-weight: 500;
}
.cc-form-notice.is-success { background: rgba(var(--primary-color-rgb), .15); color: #2f6b59; }
.cc-form-notice.is-error   { background: #fbe9e9; color: #b3261e; }

/* Honeypot — keep visually hidden but not display:none (bots skip display:none). */
.cc-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; }

/* ===========================================================================
 *  SERVICE PAGE  (Reiki / Spiritual Direction / Meditation)
 * ===========================================================================*/
/* Green benefit pills under "And More About". */
.cc-pill {
	display: inline-block;
	background: var(--brand-green);
	color: #fff;
	border-radius: 40px;
	padding: 15px 34px;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
}
.cc-pills { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }

/* Bordered external-resource box (e.g. International Reiki Organization). */
.cc-resource-box {
	border: 1px solid var(--brand-green);
	border-radius: 20px;
	padding: 30px 40px;
}
.cc-resource-box a { text-decoration: underline; }