/*
Theme Name: CamCreatives
Theme URI: https://camcreatives.com
Author: CamCreatives CIC
Author URI: https://camcreatives.com
Description: Custom lightweight block theme for the CamCreatives homepage. Built entirely from native WordPress block markup and patterns — no page builder plugins. Fonts: Clash Display (headings) and Open Sans (body), self-hosted.
Version: 1.0.5
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: camcreatives
*/

/* ---------------------------------------------------------
   Small supplemental CSS for things theme.json can't express.
   Everything else (colors, fonts, spacing, button shape) is
   controlled in theme.json so it stays editable from the
   Site Editor > Styles panel.
--------------------------------------------------------- */

/* WordPress adds automatic spacing between top-level blocks inside <main>
   (its default "block gap") — each of the six homepage sections already has
   its own top/bottom padding for visual spacing, so this extra gap just adds
   an unwanted seam between sections. Removing it here, in CSS, keeps the
   fix out of the template's block markup entirely. */
main.wp-block-group > *,
.wp-site-blocks > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Mobile: section padding uses the same fixed spacing presets at every
   screen size (by design, so it stays predictable everywhere), which on a
   375px-wide phone eats a lot of the available width and height. This
   redefines just the larger presets used for section padding — every
   pattern that references var(--wp--preset--spacing--50/60/70) shrinks
   automatically, no template markup changes needed. Smaller presets (10–40,
   used for tighter gaps) are left alone. */
@media (max-width: 600px) {
	:root {
		--wp--preset--spacing--50: 1.5rem;
		--wp--preset--spacing--60: 2rem;
		--wp--preset--spacing--70: 3rem;
	}
}

/* Accessible, high-visibility focus ring used site-wide (WCAG AA 2.4.7) */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Respect reduced-motion preference for anyone who enables it */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Keep the "kicker" labels (e.g. OUR NEXT EVENT) consistent wherever they're reused */
.cc-kicker {
	display: inline-block;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Rounded corner treatment on the hero photo / feature images, matching the design */
.cc-clipped-image img {
	border-radius: 0 32px 0 32px;
}

/* Square-cropped photos in the "Who we are" row — fills the square, crops rather than distorts */
.cc-square-image img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0 32px 0 32px;
}

/* Logo images in the header/footer. Capped by CSS (not by the block's own
   width/height attributes) so the size holds even after using "Replace" to
   swap in the real logo — Replace can reset a block's stored dimensions,
   but it can't touch this stylesheet rule. */
.cc-header-logo,
.cc-footer-logo {
	margin: 0;
	flex-shrink: 0;
}
.cc-header-logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 32px;
}
.cc-footer-logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 40px;
}

/* Footer social icon row */
.cc-social-icons {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}
.cc-social-icon {
	margin: 0;
}
.cc-social-icon img {
	display: block;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.cc-social-icon a:hover img,
.cc-social-icon a:focus img {
	opacity: 0.75;
}
.cc-social-icon a:active img {
	opacity: 0.6;
}

/* Sponsor card holding logos */
.cc-sponsor-logo {
	margin: 0 0 0.75rem 0;
}
.cc-sponsor-logo img {
	display: block;
	border-radius: 6px;
}

/* Star icon inline with the "Est. 2007 / 4,000+ members" stat lines */
.cc-stat-icon {
	display: inline-block;
	vertical-align: -2px;
	margin-right: 0.15em;
}

/* ---------------------------------------------------------
   Layout utility classes.
   A few rows in the header/footer/sponsors/partner sections
   need custom flex or grid behavior (space-between rows, a
   card grid, a vertical stack). Rather than relying on the
   block editor's built-in "layout" attribute for these — which
   generates classnames the block editor can be finicky about
   matching exactly when markup is hand-written — these plain
   classes give the same visual result with zero ambiguity.
--------------------------------------------------------- */

.cc-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
.cc-header-bar > .wp-block-buttons {
	flex-shrink: 0;
}

.cc-flex-inline {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.6rem;
}

.cc-flex-end-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.cc-flex-between-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.cc-flex-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cc-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 680px) {
	.cc-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Interactive states: buttons, links, linked icons.
   theme.json handles each element's *default* look; the
   hover/focus/active treatments below are specific enough
   (different colors per button variant) that plain CSS is
   more reliable than theme.json's global element states.
   Matches the states reference: hover lightens/darkens the
   fill and adds an underline; focus gets that plus the
   sitewide gold focus ring from earlier in this file; active
   (click/press) uses the same color as hover.
--------------------------------------------------------- */

.wp-element-button {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, text-decoration-color 0.15s ease;
	text-decoration: none;
}

/* Filled Mint button ("Join for free") — on dark or light backgrounds */
.wp-block-button__link.has-mint-background-color:hover,
.wp-block-button__link.has-mint-background-color:focus {
	background-color: var(--wp--preset--color--pale-mint);
	text-decoration: none;
}
.wp-block-button__link.has-mint-background-color:active {
	background-color: var(--wp--preset--color--pale-mint);
	text-decoration: underline;
}

/* Filled Forest button ("Become a sponsor") */
.wp-block-button__link.has-forest-background-color:hover,
.wp-block-button__link.has-forest-background-color:focus {
	background-color: var(--wp--preset--color--mint);
}
.wp-block-button__link.has-forest-background-color:active {
	background-color: var(--wp--preset--color--mint);
	text-decoration: underline;
}

/* Outline button ("Partner with us", "Reserve your space") */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--pale-mint);
	color: var(--wp--preset--color--pale-mint);
	text-decoration: underline;
}
.wp-block-button.is-style-outline .wp-block-button__link:active {
	border-color: var(--wp--preset--color--pale-mint);
	color: var(--wp--preset--color--pale-mint);
	text-decoration: underline;
}
/* The forest-on-cream outline button ("Reserve your space") lightens toward mint rather than pale mint, so it stays readable on Warm White */
.wp-block-button.is-style-outline .wp-block-button__link.has-forest-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-forest-color:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-forest-color:active {
	border-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--mint);
}

/* Meetup button */
.wp-block-button__link.has-meetup-pink-background-color:hover,
.wp-block-button__link.has-meetup-pink-background-color:focus {
	background-color: var(--wp--preset--color--meetup-pink-dark);
}
.wp-block-button__link.has-meetup-pink-background-color:active {
	background-color: var(--wp--preset--color--meetup-pink-dark);
	text-decoration: underline;
}

/* Text links — underlined by default via theme.json; hover/focus already shift to Mint there. Active (click) gets a small color deepen for extra feedback. */
a:not(.wp-element-button):active {
	color: var(--wp--preset--color--forest);
}
.has-cream-color a:active,
.wp-block-group.has-ink-background-color a:active {
	color: var(--wp--preset--color--pale-mint);
}