/*
Theme Name: JCI Cochabamba
Theme URI: https://jcicochabamba.org
Description: Child theme of Twenty Twenty-Five for JCI Cochabamba. Core blocks only: no page builder, no plugin dependencies. Reproduces the former Colibri design: brand colours, self-hosted Open Sans / Playfair Display and the reusable page sections.
Author: JCI Cochabamba
Template: twentytwentyfive
Version: 1.5.1
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jci
*/

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
/*
 * Where the design lives:
 *   - colours, fonts, sizes, shadows, gradients ........ theme.json (presets)
 *   - card / section / button / image / text looks ..... styles/blocks/jci-*.json (block styles, pickable in the editor)
 *   - section and column padding ......................... block attributes (editable in the editor)
 *   - this file: only what blocks cannot express — header behaviour, hover effects, pseudo-elements,
 *     overlaps and positioning, grids, and the Forminator form.
 */
#features, #contact { scroll-margin-top: 5rem; }
.jci-serif { font-family: var(--wp--preset--font-family--playfair); font-style: italic; }
.wp-block-button__link { transition: background-color .2s, border-color .2s, color .2s; }
.wp-block-buttons { gap: 20px; }

/* ---- page frame: sections butt against each other, as on the old site --- */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
.jci-front > *, .jci-page-content > * { margin-block-start: 0 !important; margin-block-end: 0; }
/* the white header of interior pages stays on top while scrolling */
header.wp-block-template-part:has(.jci-header-solid) { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part:has(.jci-header-solid) { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part:has(.jci-header-solid) { top: 46px; } }

/* ---- header ---------------------------------------------------------- */
.jci-header { z-index: 50; }
.jci-header-inner { width: 100%; max-width: var(--wp--style--global--wide-size, 1232px); margin-inline: auto; }
.jci-header .jci-logo { margin: 0; }
.jci-header .jci-logo img { display: block; height: auto; }
.jci-nav { gap: 2.5rem; }
.jci-nav .wp-block-navigation-item__content { padding: .5rem 0; }

/* white bar with dark logo: every page except the front page, and the front page once scrolled */
.jci-header-solid { position: relative; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .5); }
.jci-header-solid .wp-block-navigation .wp-block-navigation-item__content,
.jci-header-solid .wp-block-navigation__responsive-container-open { color: #026e9f !important; }

/* front page: transparent over the photo, white logo + white links */
.jci-header-overlay { position: fixed; top: 0; left: 0; right: 0; transition: background-color .3s, box-shadow .3s, padding .3s; }
.admin-bar .jci-header-overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar .jci-header-overlay { top: 46px; } }
.jci-header-overlay .wp-block-navigation .wp-block-navigation-item__content,
.jci-header-overlay .wp-block-navigation__responsive-container-open { color: #fff !important; }
.jci-header-overlay .jci-logo-dark { display: none; }
.jci-header-overlay.is-scrolled { background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .5); padding-top: .5rem !important; padding-bottom: .5rem !important; }
.jci-header-overlay.is-scrolled .jci-logo-light { display: none; }
.jci-header-overlay.is-scrolled .jci-logo-dark { display: block; }
.jci-header-overlay.is-scrolled .wp-block-navigation .wp-block-navigation-item__content,
.jci-header-overlay.is-scrolled .wp-block-navigation__responsive-container-open { color: #026e9f !important; }
.jci-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: #03a9f4 !important; }
.jci-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff !important; }

/* Site editor: the transparent header has no photo behind it there (white logo on white),
   so show it in place on a dark brand background. The public site is unaffected. */
.editor-styles-wrapper .jci-header-overlay { position: relative !important; top: auto !important; background: linear-gradient(135deg, #17252a 0%, #026e9f 100%); }

/* ---- button styles: hover states (the looks are in styles/blocks/jci-*.json) --- */
.is-style-jci-outline-light .wp-block-button__link:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.is-style-jci-square .wp-block-button__link:hover { background: #026e9f; border-color: #026e9f; color: #fff; }
.is-style-jci-orange .wp-block-button__link:hover { background: #d97c00; border-color: #d97c00; color: #fff; }
.is-style-jci-orange-band .wp-block-button__link:hover { background: #f7b359; border-color: #f7b359; color: #fff; }
.is-style-jci-whatsapp .wp-block-button__link:hover { background: #075e54; border-color: #075e54; color: #fff; }
.is-style-jci-ghost .wp-block-button__link:hover { background: #026e9f; color: #fff; }
.is-style-jci-link .wp-block-button__link:hover { color: #03a9f4; }
.is-style-jci-disabled .wp-block-button__link { pointer-events: none; }

/* ---- hero ------------------------------------------------------------ */
.jci-hero .jci-hero-title { font-weight: 600; font-size: clamp(2.4rem, 1.5rem + 3vw, 3.75rem); margin-bottom: 1.5rem; }
.jci-hero .wp-block-buttons + .wp-block-buttons { margin-top: 20px; }

/* ---- icons (inline SVG in Custom HTML blocks) -------------------------- */
.jci-icon-wrap { display: flex; justify-content: center; margin-bottom: 1rem; color: #03a9f4; }
.jci-icon-wrap .jci-icon { display: block; }
.jci-icon-white { color: #fff; }
.jci-icon-left { justify-content: flex-start; margin-bottom: .5rem; }
.jci-icon-circle { width: 84px; height: 84px; margin: 0 auto 1.25rem; border: 2px solid #03a9f4; border-radius: 50%; align-items: center; }

/* ---- cards over the hero --------------------------------------------- */
.jci-overlap { position: relative; z-index: 5; margin-top: -50px !important; }
.jci-feature-bar { background: #fff; box-shadow: var(--wp--preset--shadow--jci-lifted); margin-block: 0 !important; gap: 0 !important; }
.jci-feature-bar > .wp-block-column { padding: 2.5rem 1.75rem 1.75rem; }
.jci-feature-bar .jci-icon-wrap { color: #333; margin-bottom: 1.5rem; }
.jci-feature-bar h5 { margin-bottom: .75rem; }
@media (min-width: 782px) {
	.jci-feature-bar > .wp-block-column + .wp-block-column { border-left: 1px solid #ddd; }
}

/* ---- about: large text card, photo card (same size) in front of it ------ */
.jci-about { gap: 0 !important; }
.jci-about-card { position: relative; z-index: 1; }
.jci-about-card h6 { margin-bottom: 1.25rem; }
.jci-about-title { font-size: 2.5rem !important; }
.jci-about-photo { position: relative; z-index: 2; margin: 0 !important; }
@media (min-width: 782px) {
	.jci-about > .wp-block-column:first-child { flex: 0 0 58%; }
	.jci-about > .wp-block-column:last-child { flex: 0 0 42%; }
	.jci-about-photo { width: 540px; max-width: none; margin-left: -74px !important; }
	.jci-about-photo img { width: 540px; }
}

/* ---- programmes ------------------------------------------------------ */
.jci-programs > .is-style-jci-lead { max-width: 940px; }
.jci-cards { gap: 28px !important; margin-top: 3rem !important; }
.jci-shadow-card { height: 100%; }

/* ---- recognitions ---------------------------------------------------- */
.jci-recognitions { gap: 4rem !important; }
.jci-rec-title { font-size: 2.375rem !important; margin-bottom: 1.25rem; }
.jci-recognitions h4 { text-transform: uppercase; margin-bottom: .5rem; }
.jci-recognitions .wp-block-columns { gap: 2.5rem; margin-top: 2rem; }

/* ---- gradient bands -------------------------------------------------- */
.jci-band h3 { font-weight: 400; text-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* ---- contact --------------------------------------------------------- */
.jci-contact-box { align-items: stretch !important; max-width: 893px; margin-inline: auto !important; gap: 0 !important; border-radius: 5px; overflow: hidden; background: #fff; }
.jci-contact-side { display: flex; flex-direction: column; justify-content: center; align-self: stretch !important; }
.jci-contact-side h5 { color: #fff; margin-bottom: 0; }
.jci-contact-side > * + * { margin-top: 40px !important; }
.jci-icon-ring { width: 72px; height: 72px; margin: 0 auto; border: 2px solid #fff; border-radius: 50%; align-items: center; }
.jci-contact-side .wp-block-social-links { gap: 10px; }
.jci-contact-side .wp-social-link { border: 1px solid #fff; border-radius: 50%; padding: 4px; transition: border-color .5s; }
.jci-contact-side .wp-social-link:hover { border-color: #a6dcf4; }

/* Forminator form 296 styled like the old Colibri contact form */
.jci-contact .forminator-ui.forminator-custom-form { margin: 0 !important; }
.jci-contact .forminator-ui .forminator-label { color: #17252a !important; font-weight: 700 !important; font-size: 13px !important; }
.jci-contact .forminator-ui .forminator-input,
.jci-contact .forminator-ui .forminator-textarea {
	border: 0 !important; border-bottom: 1px solid #17252a !important; border-radius: 0 !important;
	background: #fff !important; box-shadow: none !important; padding: 8px 10px !important; margin: 4px 0 16px !important; font-size: 16px !important;
}
.jci-contact .forminator-ui .forminator-textarea { min-height: 140px !important; }
.jci-contact .forminator-ui .forminator-button-submit {
	float: right; background: #03a9f4 !important; color: #fff !important; border-radius: 5px !important; border: 0 !important;
	text-transform: uppercase; letter-spacing: 2px; font-weight: 600 !important; font-size: 13px !important; padding: 20px 40px !important;
}
.jci-contact .forminator-ui .forminator-button-submit:hover { background: #026e9f !important; }
@media (max-width: 781px) {
	.jci-contact-box { flex-direction: column; }
	.jci-contact-form { padding: 25px !important; }
}

/* =======================================================================
   Interior pages (Programas, Actividades, Asambleas, JCI Market)
   ======================================================================= */

/* ---- page hero -------------------------------------------------------- */
.jci-page-hero { min-height: 460px; }
/* core: .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { margin: 0; width: auto } */
.wp-block-cover.jci-page-hero.has-custom-content-position .wp-block-cover__inner-container { width: 100% !important; max-width: var(--wp--style--global--wide-size, 1232px); margin-inline: auto !important; }
.jci-page-hero .wp-block-cover__inner-container > * { max-width: 760px; margin-left: 0 !important; margin-right: auto !important; }
.jci-page-hero h1 { color: #fff; font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem); margin: .5rem 0 1rem; }
.jci-page-hero .jci-hero-sub { color: #e8f6fd; font-size: 1.25rem; font-weight: 300; max-width: 720px; }
.jci-page-hero.jci-hero-compact { min-height: 320px; }
.jci-crumbs { font-size: .875rem; color: #a6dcf4; margin-bottom: .25rem; }
.jci-crumbs a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.jci-crumbs a:hover { color: #a6dcf4; }

/* ---- text styles: the parts blocks cannot express ---------------------- */
.is-style-jci-eyebrow { display: flex; align-items: center; gap: .75rem; }
.is-style-jci-eyebrow.has-text-align-center { justify-content: center; }
.is-style-jci-eyebrow::before { content: ""; width: 32px; height: 2px; background: currentColor; }
.jci-page-hero .is-style-jci-eyebrow, .is-style-jci-section-dark .is-style-jci-eyebrow { color: #a6dcf4; }
/* The Entradilla style sets a dark text colour; inside the dark section it must stay light. */
.is-style-jci-section-dark .is-style-jci-lead { color: #d6ecf6; }
.is-style-jci-badge, .is-style-jci-badge-orange { display: inline-block; }
.is-style-jci-price { align-self: flex-start; }

/* ---- layout helpers ---------------------------------------------------- */
.jci-section-title { text-align: center; margin-bottom: 3rem !important; }
.jci-section-title h2 { margin-bottom: .75rem; }
.jci-split { gap: 4rem !important; }

/* ---- facts strip (columns overlapping the hero) ----------------------- */
.jci-facts { background: #fff; box-shadow: 0 4px 10px 2px rgba(74, 74, 74, .15); gap: 0 !important; margin-top: -60px !important; position: relative; z-index: 3; }
.jci-facts > .wp-block-column { padding: 2rem 1.5rem; text-align: center; }
@media (min-width: 782px) { .jci-facts > .wp-block-column + .wp-block-column { border-left: 1px solid #e6eef2; } }
.jci-fact-label { font-size: .9375rem; margin: 0; }

.is-style-jci-highlight strong { color: #17252a; font-weight: 600; }

/* ---- gallery ---------------------------------------------------------- */
.jci-gallery.wp-block-gallery { gap: 14px !important; }
.jci-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { flex-grow: 0; width: calc(33.333% - 10px); }
@media (max-width: 600px) { .jci-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc(50% - 7px); } }
.jci-gallery .wp-block-image { overflow: hidden; border-radius: 8px; box-shadow: var(--wp--preset--shadow--jci-card); }
.jci-gallery .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.jci-gallery .wp-block-image:hover img { transform: scale(1.06); }

/* ---- cards: hover lift and equal heights (looks: Tarjeta JCI style) ------ */
.jci-cards-3 { gap: 28px !important; }
.jci-info-card { height: 100%; transition: transform .25s, box-shadow .25s; }
.jci-info-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(2, 110, 159, .15); }
.jci-info-card h4 { margin-bottom: .5rem; }
.jci-host-card img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }

/* ---- lists: markers and pills (spacing in the list styles) -------------- */
.is-style-jci-checklist { list-style: none; }
.is-style-jci-checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .45rem; color: #25292a; }
.is-style-jci-checklist li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #e8f6fd
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2303a9f4' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.is-style-jci-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.is-style-jci-chips li { padding: .3rem .7rem; border-radius: 999px; background: #f5fafd; border: 1px solid #d9e9f1; color: #026e9f; font-size: .8125rem; margin: 0; }
.is-style-jci-section-dark .is-style-jci-chips li, .jci-page-hero .is-style-jci-chips li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* ---- market: category and product cards (looks: Tarjeta con imagen) ---- */
.jci-cat-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 28px; }
.jci-products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
.jci-cat-card, .jci-product { position: relative; display: flex !important; flex-direction: column; overflow: hidden; margin: 0 !important; transition: transform .25s, box-shadow .25s; }
.jci-cat-card:hover, .jci-product:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(2, 110, 159, .18); }
.jci-cat-card .jci-cat-img, .jci-product .jci-product-img { margin: 0 !important; }
.jci-cat-card .jci-cat-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s; }
.jci-cat-card:hover .jci-cat-img img { transform: scale(1.05); }
/* the flyers are square artwork with text on them: always shown whole */
.jci-product .jci-product-img { background: #f5fafd; }
.jci-product .jci-product-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.jci-cat-body, .jci-product-body { display: flex; flex-direction: column; flex: 1; }
.jci-cat-body .wp-block-buttons, .jci-product-body .wp-block-buttons { margin-top: auto; }
.jci-product-body h3 { margin-bottom: .25rem; }
.jci-product-body .wp-block-buttons { gap: 10px; }
.jci-cat-card > .jci-soon { position: absolute !important; top: 14px; right: 14px; z-index: 2; background: rgba(23, 37, 42, .85); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: .35rem .8rem; border-radius: 999px; margin: 0 !important; }

/* ---- market: join block ---------------------------------------------- */
.jci-contact-chip h4 { margin-bottom: .25rem; }
.jci-contact-chip .jci-phone { font-size: 1.5rem; font-weight: 300; color: #fff; margin: .5rem 0 1.25rem; }

/* ---- president's message --------------------------------------------- */
.jci-quote-wrap { max-width: 860px; margin-inline: auto; text-align: center; position: relative; }
.jci-quote-wrap::before { content: "\201C"; display: block; font-family: var(--wp--preset--font-family--playfair); font-size: 7rem; line-height: .6; color: #03a9f4; margin-bottom: 1rem; }
.jci-quote { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 300; line-height: 1.7; color: #fff !important; }
.jci-quote-close { font-family: var(--wp--preset--font-family--playfair); font-style: italic; font-size: 1.75rem; color: #a6dcf4 !important; margin: 1.5rem 0 2rem; }
.jci-quote-sign { font-size: .9375rem; letter-spacing: 1px; color: #d6ecf6 !important; }
.jci-quote-sign::before { content: ""; display: block; width: 48px; height: 2px; background: #03a9f4; margin: 0 auto 1rem; }
.jci-address-card h4 { font-size: 1.125rem !important; letter-spacing: .5px; }