/*
Theme Name: Charina WP
Theme URI: https://example.com/charina-wp
Author: Migrated by Claude Code
Author URI: https://example.com
Description: WordPress theme migration of the Charina nonprofit/charity HTML5 template. Preserves the original design, layout, responsiveness and interactive behaviour while making content manageable from wp-admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: charina-wp
Tags: campaign, charity, church, donate, donations, foundation, fund, fundraising, ngo, non-profit, nonprofit, organization, volunteer

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ==========================================================================
   Design token layer (additive only).
   Normalizes the handful of near-duplicate brand-orange hex values found
   across the original stylesheet into CSS custom properties. The full
   ~5,360-line ported ruleset lives in assets/css/theme-style.css and is
   NOT retrofitted to consume these tokens (to avoid visual regressions) —
   these variables exist for new theme code (nav walker, forms, focus
   states) to reference consistently going forward.
   ========================================================================== */
:root{
	--charina-color-primary: #ff6a00;
	--charina-color-primary-dark: #e65c00;
	--charina-color-dark: #0a0a23;
	--charina-color-text: #6b6b6b;
	--charina-color-white: #ffffff;
	--charina-color-light-bg: #f7f7f7;
	--charina-focus-outline: #ff6a00;
}

/* Minimal, additive accessibility improvement: the source template has zero
   focus-visible states. This is the one deliberate net-new visual addition. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--charina-focus-outline);
	outline-offset: 2px;
}

/* The real Fife's Foundation logo file is a wide lockup (2172x724px) with no
   intrinsic size constraint in the original template CSS -- the source demo
   logo happened to be a small ~198x44px file so nothing broke. Constrain it
   so it fits the nav/footer the way the original compact wordmark did.
   The nav logo sits inside a tall decorative dark panel (.charina_nav_manu
   :before, 175% height) sized for a much bigger wordmark than the demo's
   tiny placeholder -- 46px read as too small against that panel, so give
   the nav logo more room while keeping the footer logo compact. */
.logo_img img,
.main_sticky img {
	max-height: 68px;
	width: auto;
}
.charina-logo img {
	max-height: 42px;
	width: auto;
}

/* .charina_nav_manu's 75px left padding (theme-style.css) was tuned to clear
   the dark logo panel's edge for the original narrow layout -- it now
   leaves a large empty gap between that panel and the "Home" link. Reduce
   it since the panel itself already provides its own visual separation. */
.charina_nav_manu {
	padding-left: 30px;
}

/* Secondary CTA buttons (hero second link, "Partner With Us" pairs) already
   inherit full pill-button styling from their parent .hero-button/.charina-button
   wrapper's descendant selector -- no rendering bug. This just gives the
   second button an outline treatment, using only the existing brand-orange
   token, so two adjacent buttons read as primary/secondary rather than
   visual duplicates. Additive only, no new colors introduced. */
.hero-button-secondary,
.charina-button-secondary {
	background: transparent !important;
	color: var(--charina-color-primary) !important;
	border: 2px solid var(--charina-color-primary);
}
.hero-button-secondary:hover,
.charina-button-secondary:hover {
	background: var(--charina-color-primary) !important;
	color: var(--charina-color-white) !important;
}

/* The rotating "watch videos" circular badge (.hero-shape) next to the hero
   buttons uses a fixed pixel offset (left: 250px in theme-style.css) tuned
   for the original single-button hero. Now that a second button can appear,
   push the badge further right so it clears both buttons instead of
   overlapping the second one. Scoped only to the hero (via :has()) so no
   other .hero-shape-adjacent layout is affected. */
.hero-button:has(.hero-button-secondary) + .video-button .video-icon {
	left: 500px;
}
.hero-button:has(.hero-button-secondary) + .video-button .hero-shape {
	left: 590px;
}

/* Contact form "I want to:" checkbox group has no matching styles in the
   original theme (the source template never had checkboxes) -- without
   this, each <label>'s text renders using the form's faint placeholder-gray
   color at default browser checkbox size, collapsing into one illegible
   line. Minimal, additive styling only: readable text color matching the
   theme's body-text color, one option per line, normal-sized checkboxes. */
.charina-intent-list {
	background: transparent;
	border: none;
	padding: 0;
}
.charina-intent-list p {
	color: var(--charina-color-dark);
	margin-bottom: 12px;
}
.charina-intent-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--charina-color-dark);
	font-weight: 400;
	margin-bottom: 10px;
	cursor: pointer;
}
.charina-intent-list input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: none;
	display: inline-block;
	background-color: var(--charina-color-white);
	accent-color: var(--charina-color-primary);
}

/* Hero body paragraph (.hero-desc) is new -- the original template's hero
   only ever had a short 2-3 line title, never body copy, so nothing in
   theme-style.css styles it. Left unstyled it inherits the sitewide body
   text color (#6f7775, tuned for white backgrounds) which is nearly
   invisible against the dark hero photo, and has no width limit so it runs
   text under the photo on the right. Keep it within the image's dark left
   panel and make it legible. */
.hero-content {
	max-width: 650px;
}
.hero-desc p {
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
@media (max-width: 767px) {
	.hero-content {
		max-width: 100%;
	}
}

/* CTA banner (.call-to-*) went from 2 wide col-lg-6 panels to 3 narrower
   col-lg-4 panels (Volunteer/Partner/Lend Expertise). Its heading size
   (32px) and floated icon were tuned for the wider panel -- in the narrower
   column, longer headings like "Community Outreach & Mobile Health" wrap
   tight against the floated icon with little breathing room. Stack icon
   above heading and scale text down to fit 3-across comfortably. Classes
   are only used in content-cta.php, so no other layout is affected. */
.call-to-icon {
	float: none;
	margin: 0 0 16px;
}
.call-to-title h2 {
	font-size: 22px;
	line-height: 30px;
}
.call-to-desc p {
	padding: 10px 0 16px;
	font-size: 14px;
	line-height: 24px;
}

/* Hero text sits inside Bootstrap's centered, gutter-limited .container,
   while the photo behind it is a full-bleed background -- so on wide
   viewports the text starts well right of the true left edge even though
   the image already reaches it. Let the hero's container use the full
   section width with a modest fixed inset instead of the centered,
   max-width container used elsewhere, so hero text starts close to the
   viewport edge like the image does. Scoped to .hero-section only. */
.hero-section > .container {
	max-width: 100%;
	padding-left: 60px;
	padding-right: 60px;
}
@media (max-width: 767px) {
	.hero-section > .container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Program/service cards (.service-single-box) have no fixed or equal height
   -- each card's white box sizes itself purely to its own title+description
   length, so cards with longer titles ("Community Outreach & Mobile
   Health") stand visibly taller than shorter ones ("Empowerment Programs")
   even though their grid columns are the same width, making the row look
   uneven. Bootstrap's .row already stretches columns to equal height by
   default; make the card itself fill that height and use flex internally
   so the "Read More" row lands at a consistent position regardless of how
   much the title/description wrap. */
.service-single-box {
	height: calc(100% - 30px);
	display: flex;
	flex-direction: column;
}
.service-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.service-desc {
	flex: 1;
}

/* Topbar now shows the office email/phone as real links (replacing the
   removed Login/Register block) -- give them the same sizing/spacing as
   the social icons they sit beside instead of inheriting default link
   styling, and stack them on narrow screens so they don't collide with
   the social icon row. */
.header_top_menu_contact {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-right: 20px;
}
.header_top_menu_contact a {
	font-size: 14px;
	white-space: nowrap;
}
@media (max-width: 991px) {
	.header_top_menu_contact {
		display: none;
	}
}

/* Confidentiality reassurance line under the contact form submit button --
   the source template's form had no equivalent copy at all. */
.charina-form-confidential-note {
	margin-top: 14px;
	font-size: 13px;
	color: var(--charina-color-text);
}
/* Same note is reused inside .contact-info-section, which has a dark photo
   background -- the default mid-gray body-text color is nearly invisible
   there, so override to a legible light color in that context only. */
.contact-info-section .charina-form-confidential-note {
	color: rgba(255, 255, 255, 0.85);
}

/* Get Involved "ways to help" cards (content-get-involved.php) -- new
   content with no matching source-template component, styled minimally
   with existing brand tokens to match the rest of the site's card look. */
.charina-way-box {
	background: var(--charina-color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 30px;
	height: calc(100% - 30px);
	text-align: center;
}
.charina-way-box h3 {
	margin-bottom: 14px;
}
.charina-way-box a {
	color: var(--charina-color-primary);
	font-weight: 700;
}

/* Per-cause volunteer/partner link (content-donate-carousel.php) -- ties
   the "can't give? volunteer instead" ask to the specific cause the visitor
   was already looking at, instead of one generic block below all three
   cards. New content, no matching source-template element. */
.donate-cause-cta {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eee;
}
.donate-cause-cta a {
	color: var(--charina-color-primary);
	font-weight: 700;
	font-size: 14px;
}

/* Launch countdown (content-launch-countdown.php), replacing "Upcoming
   Events" -- reuses .events-section's own background/padding untouched.
   These 4 digit boxes are new content with no matching source-template
   element, styled minimally with existing brand tokens. */
.charina-countdown-section {
	background: var(--charina-color-light-bg);
	padding: 60px 0;
}
/* .volunteers-section's own 100px top padding (theme-style.css), stacked
   on top of this section's bottom padding, left a very large blank gap
   before "Board of Trustees" on the homepage. Scoped to only when it
   directly follows the countdown section, so the Team page (which also
   uses content-volunteers.php right after its banner) is unaffected. */
.charina-countdown-section + .volunteers-section {
	padding-top: 40px;
}
.charina-countdown-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 30px 0;
}
.charina-countdown-box {
	background: var(--charina-color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	min-width: 100px;
	padding: 20px 10px;
}
.charina-countdown-box span {
	display: block;
	font-size: 40px;
	font-weight: 800;
	color: var(--charina-color-primary);
	line-height: 1;
}
.charina-countdown-box small {
	display: block;
	margin-top: 8px;
	color: var(--charina-color-text);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
}
.charina-countdown-live {
	font-size: 24px;
	color: var(--charina-color-primary);
	margin: 30px 0;
}
.charina-countdown-subtext {
	margin-bottom: 20px;
}

/* Footer tagline line, new -- sits between the logo and the description
   paragraph that were already there. */
.charina-footer-tagline {
	color: var(--charina-color-primary);
	margin: 10px 0 6px;
	font-size: 15px;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   Redesign pass: "Three Ways In", "Give by Bank Transfer", "Refer Someone"
   (get-involved.php) and "Four Programmes" (services.php). New card system
   reusing the site's existing brand tokens plus two extra swatches (teal,
   blue) that already existed as raw hex in theme-style.css for icon accents
   -- promoted here to named tokens instead of repeating the hex.
   ========================================================================== */
:root {
	--charina-color-teal: #53C99F;
	--charina-color-blue: #19C7EB;
}

/* Plain section wrapper for new content blocks that don't belong to the
   About page's offset-photo composition -- .about-section's own background
   image (about-bg.jpg) is tuned to sit behind that specific layout and
   shows through oddly with no photo to mask it. */
.charina-plain-section {
	padding: 90px 0;
}
.charina-plain-section + .charina-plain-section {
	padding-top: 0;
}

.charina-content-width {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Shared card: Give/Volunteer/Partner and the four programme cards. */
.charina-icon-card {
	background: var(--charina-color-white);
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 44px 34px;
	height: 100%;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	display: flex;
	flex-direction: column;
}
.charina-icon-card:hover,
.charina-icon-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(10, 10, 35, 0.09);
	border-color: rgba(255, 106, 0, 0.28);
}
.charina-icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px;
	font-size: 28px;
	color: var(--charina-color-white);
	flex: none;
}
.charina-icon-circle.is-orange { background: var(--charina-color-primary); }
.charina-icon-circle.is-teal   { background: var(--charina-color-teal); }
.charina-icon-circle.is-blue   { background: var(--charina-color-blue); }
.charina-icon-card h3 {
	margin-bottom: 12px;
	font-size: 21px;
}
.charina-icon-card p {
	color: var(--charina-color-text);
	flex: 1;
	margin-bottom: 18px;
}
.charina-card-cta {
	color: var(--charina-color-primary);
	font-weight: 700;
	font-size: 14px;
	display: inline-block;
}
.charina-cards-row {
	max-width: 1200px;
	margin: 0 auto;
	row-gap: 30px;
}

/* Four Programmes: spacious 2x2 grid, image-icon kept, adds an explicit
   "designed, not yet operational" status tag per card so the point can't
   be missed even by a skimming reader. */
.charina-program-card {
	padding: 46px 40px;
	text-align: left;
}
.charina-program-card .service-icon {
	text-align: left;
}
.charina-program-status {
	display: inline-block;
	align-self: flex-start;
	margin-top: 14px;
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	border-radius: 20px;
	background: rgba(255, 106, 0, 0.10);
	color: var(--charina-color-primary-dark);
}

/* Give by Bank Transfer: two-column split -- message/options on the left,
   a highlighted action card on the right carrying the one real CTA. */
.charina-donate-split {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 50px;
	align-items: start;
}
@media (max-width: 991px) {
	.charina-donate-split {
		grid-template-columns: 1fr;
	}
}
.charina-donate-card {
	background: var(--charina-color-light-bg);
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 40px;
	position: sticky;
	top: 100px;
}
.charina-donate-card h3 {
	margin-bottom: 10px;
}
.charina-donate-card .charina-button {
	margin-top: 22px;
}

/* Refer Someone: full-width, visually distinct dark banner so it doesn't
   read as another donation card. */
.charina-refer-banner {
	background: var(--charina-color-dark);
	border-radius: 18px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 50px;
	text-align: center;
}
.charina-refer-banner .charina-icon-circle {
	background: var(--charina-color-teal);
}
.charina-refer-banner .charina-section-title h1,
.charina-refer-banner .charina-section-title h1 span {
	color: var(--charina-color-white);
}
.charina-refer-banner .charina-section-title p {
	color: rgba(255, 255, 255, 0.78);
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.charina-refer-banner,
	.charina-donate-card,
	.charina-icon-card,
	.charina-program-card {
		padding: 32px 24px;
	}
}