/*
Theme Name:        UseChale
Theme URI:         https://usechale.app
Author:            Cybanext Technologies
Description:       The UseChale website theme: a warm, lively homepage for the student marketplace, with a moving feed of the newest listings, colourful categories, how it works, selling and questions. Gentle animations, rounded shapes and friendly lettering. Works with the UseChale Marketplace plugin, which runs the app at /usechale/. Everything is editable in Appearance → Editor.
Version:           1.3.1
Requires at least: 6.4
Tested up to:      6.8
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       usechale-theme
Tags:              block-patterns, full-site-editing, one-column, wide-blocks, e-commerce, custom-colors
*/


/*
 * Look: warm and lively. Shrikhand (hand-lettered) for big headlines, Figtree for
 * everything else. Soft rounded panels instead of hard bands, a feed of listings
 * that keeps moving at the top, and gentle easing on everything that moves.
 */

:root {
	--uc-green: var(--wp--preset--color--green);
	--uc-green-soft: var(--wp--preset--color--green-soft);
	--uc-gold: var(--wp--preset--color--gold);
	--uc-sun: var(--wp--preset--color--sun);
	--uc-ink: var(--wp--preset--color--ink);
	--uc-muted: var(--wp--preset--color--muted);
	--uc-line: var(--wp--preset--color--line);
	--uc-display: var(--wp--preset--font-family--display);
	--uc-ease: cubic-bezier(.2, .8, .2, 1);
	--uc-pad-y: clamp(3.5rem, 8vw, 6.5rem);
	--uc-radius: 22px;
	--uc-panel-radius: clamp(28px, 4vw, 44px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[id] { scroll-margin-top: 90px; }
:where(.wp-site-blocks) p { text-wrap: pretty; }
:where(.wp-site-blocks) :where(h1, h2) { text-wrap: balance; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--uc-ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--uc-sun); }

/* Buttons: pill-shaped, lift a little on hover */
.wp-element-button, .wp-block-button__link {
	transition: background-color .25s var(--uc-ease), color .25s var(--uc-ease), transform .35s var(--uc-ease), box-shadow .35s var(--uc-ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgb(31 42 36 / .45); }
.wp-block-button__link:active { transform: translateY(0); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--uc-ink);
	border: 2px solid var(--uc-ink);
	padding-top: calc(0.95rem - 2px);
	padding-bottom: calc(0.95rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--uc-ink); color: #fff; }

/* Page structure: sections sit flush and set their own spacing */
.wp-site-blocks > header, .wp-site-blocks > footer, .wp-site-blocks > main { margin-block: 0 !important; }
.uc-main, .uc-main > * { margin-block: 0 !important; }
.uc-section { padding-block: var(--uc-pad-y); }
.uc-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.uc-head h2 { max-width: 16em; }
.uc-head > * { margin-block: 0 !important; }
.uc-head > * + * { margin-top: 0.85rem !important; }
.uc-intro { color: var(--uc-muted); font-size: 1.125rem; line-height: 1.6; max-width: 36em; }

/* Rounded panels that float on the page */
.uc-panel { border-radius: var(--uc-panel-radius); padding: clamp(2rem, 5vw, 4rem); margin-block: 0 !important; }
.uc-panel-green { background: var(--uc-green-soft); }
.uc-panel-dark { background: var(--uc-green); color: #fff; position: relative; overflow: hidden; }
.uc-panel-dark h2 { color: #fff; }
.uc-panel-gold { background: var(--uc-gold); position: relative; overflow: hidden; }
.uc-panel-dark::after, .uc-panel-gold::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -140px;
	bottom: -180px;
	border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%;
	background: rgb(255 255 255 / 0.07);
	animation: uc-blob 18s ease-in-out infinite alternate;
	pointer-events: none;
}
.uc-panel-gold::after { background: rgb(255 255 255 / 0.22); }

/* ---------- Header ---------- */
.uc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgb(255 255 255 / 0.86);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	padding-block: 0.75rem;
	transition: box-shadow .4s var(--uc-ease), padding .4s var(--uc-ease);
}
.uc-header.is-scrolled { box-shadow: 0 8px 24px -18px rgb(31 42 36 / .5); padding-block: 0.5rem; }
.admin-bar .uc-header { top: var(--wp-admin--admin-bar--height, 32px); }
.uc-brand { gap: 0.55rem; }
.uc-brand .wp-block-site-title a { color: var(--uc-ink); }
.uc-header-nav { gap: 1.5rem; }
.uc-header .wp-block-navigation a { position: relative; padding-block: 4px; }
.uc-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--uc-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--uc-ease);
}
.uc-header .wp-block-navigation a:hover::after { transform: scaleX(1); }
.uc-btn-small .wp-block-button__link { padding: 0.62rem 1.15rem; font-size: 0.95rem; white-space: nowrap; }

/* ---------- Hero ---------- */
.uc-hero { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; isolation: isolate; }
.uc-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(62vw, 760px);
	aspect-ratio: 1;
	right: -12vw;
	top: -8%;
	border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%;
	background: radial-gradient(circle at 35% 35%, #FFE7A8 0%, var(--uc-sun) 55%, rgb(255 241 204 / 0) 72%);
	animation: uc-blob 20s ease-in-out infinite alternate;
}
.uc-hero-cols { gap: clamp(2rem, 5vw, 4rem) !important; align-items: center !important; margin-block: 0 !important; }
.uc-live { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.95rem; color: var(--uc-green); background: var(--uc-green-soft); padding: 0.4rem 0.9rem 0.4rem 0.75rem; border-radius: 999px; margin: 0 0 1.25rem !important; }
.uc-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22A06B; box-shadow: 0 0 0 0 rgb(34 160 107 / .5); animation: uc-pulse 2.2s ease-out infinite; }
.uc-hero-title { font-size: clamp(3rem, 6.6vw, 5.4rem) !important; line-height: 1.02 !important; margin: 0 !important; }
.uc-hero-lede { font-size: 1.15rem; line-height: 1.65; color: var(--uc-muted); max-width: 33em; margin-top: 1.4rem !important; }
.uc-hero-actions { gap: 0.75rem; margin-top: 2rem !important; }
.uc-hero-facts { font-size: 0.95rem; color: var(--uc-muted); margin-top: 1.25rem !important; }

/* One orchestrated entrance when the page opens */
@media (prefers-reduced-motion: no-preference) {
	.uc-hero-text > * { animation: uc-rise .9s var(--uc-ease) both; }
	.uc-hero-text > :nth-child(2) { animation-delay: .08s; }
	.uc-hero-text > :nth-child(3) { animation-delay: .18s; }
	.uc-hero-text > :nth-child(4) { animation-delay: .28s; }
	.uc-hero-text > :nth-child(5) { animation-delay: .36s; }
	.uc-hero-feed { animation: uc-fade 1.2s .2s var(--uc-ease) both; }
}

/* Moving feed (shared with the plugin; also used when the plugin is off) */
.uc-ticker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: min(560px, 72vh); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.uc-ticker-track { animation: uc-up 38s linear infinite; }
.uc-ticker-col--down .uc-ticker-track { animation-direction: reverse; animation-duration: 46s; }
.uc-ticker:hover .uc-ticker-track, .uc-ticker:focus-within .uc-ticker-track { animation-play-state: paused; }
.uc-ticker-set { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; }
.uc-tick-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 18px; min-height: 150px; border-radius: var(--uc-radius); background: var(--tint, var(--uc-sun)); color: var(--uc-ink); text-decoration: none; transition: transform .4s var(--uc-ease); }
.uc-tick-cat:hover { transform: scale(1.03); }
.uc-tick-emoji { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; }
.uc-tick-name { font-weight: 800; font-size: 17px; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .uc-ticker-track { animation: none; } }

/* ---------- Categories ---------- */
.uc-cats-section { padding-top: clamp(1rem, 3vw, 2rem); }
.uc-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.uc-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.25rem 1.35rem;
	border-radius: var(--uc-radius);
	background: var(--tint, #fff);
	margin: 0 !important;
	transition: transform .45s var(--uc-ease), box-shadow .45s var(--uc-ease);
}
.uc-cat > * { margin-block: 0 !important; }
.uc-cat:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -20px rgb(31 42 36 / .45); }
.uc-cat-emoji { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; font-size: 27px; line-height: 1; margin-bottom: 1.1rem !important; transition: transform .5s var(--uc-ease); }
.uc-cat:hover .uc-cat-emoji { transform: rotate(-8deg) scale(1.08); }
.uc-cat-name { font-size: 1.15rem !important; }
.uc-cat-name a { color: var(--uc-ink); text-decoration: none; }
.uc-cat-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.uc-cat-desc { color: #46514B; font-size: 0.93rem; line-height: 1.5; margin-top: 0.35rem !important; }
.uc-subs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem !important; }
.uc-subs a { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgb(255 255 255 / .75); color: var(--uc-ink); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background .25s var(--uc-ease); }
.uc-subs a:hover { background: #fff; }
.uc-tint-food { --tint: #FFE4C9; }
.uc-tint-beauty { --tint: #FBDCE6; }
.uc-tint-fashion { --tint: #DDE9FB; }
.uc-tint-phones { --tint: #E8E2FA; }
.uc-tint-campus_services { --tint: #D7F0E9; }
.uc-tint-books { --tint: #FFF1CC; }
.uc-tint-home { --tint: #F3E7DA; }
.uc-tint-groceries { --tint: #E3F2D7; }
.uc-tint-printing { --tint: #E8ECF0; }
.uc-tint-tutoring { --tint: #FDE8CB; }
.uc-tint-creative { --tint: #F8DDEF; }
.uc-tint-tickets { --tint: #FFE1D8; }
.uc-tint-clinical { --tint: #DAEEF6; }

/* ---------- How it works ---------- */
.uc-steps-wrap { position: relative; }
.uc-path { position: absolute; left: 0; right: 0; top: 6px; width: 100%; height: 90px; overflow: visible; }
.uc-path path { stroke-dasharray: 1400; stroke-dashoffset: 0; }
.uc-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.uc-step { margin: 0 !important; }
.uc-step > * { margin-block: 0 !important; }
.uc-step-num { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--uc-ink); color: var(--uc-gold); font-family: var(--uc-display); font-size: 1.9rem; line-height: 1; margin-bottom: 1.25rem !important; box-shadow: 0 0 0 8px #fff; }
.uc-step h3 { margin-bottom: 0.45rem !important; }
.uc-step-text { color: var(--uc-muted); line-height: 1.6; }

/* ---------- Fresh listings ---------- */
.uc-fresh { padding-top: 0; }

/* ---------- Trust ---------- */
.uc-trust { padding-top: 0; }
.uc-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.uc-trust-item { background: #F4F7F4; border-radius: var(--uc-radius); padding: 1.6rem; margin: 0 !important; }
.uc-trust-item > * { margin-block: 0 !important; }
.uc-trust-item::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin-bottom: 1rem;
	border-radius: 14px;
	background: var(--uc-green) center / 24px 24px no-repeat;
}
.uc-ico-shield::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A007' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.uc-ico-badge::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A007' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6.5 16c.6-1.5 1.5-2 2.5-2s1.9.5 2.5 2M14 10h4M14 13h3'/%3E%3C/svg%3E"); }
.uc-ico-pin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A007' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.uc-trust-item h3 { margin-bottom: 0.45rem !important; }
.uc-trust-text { color: var(--uc-muted); line-height: 1.6; }

/* ---------- Sellers ---------- */
.uc-sell-section { padding-top: 0; }
.uc-split { gap: clamp(1.5rem, 5vw, 4rem) !important; margin-block: 0 !important; position: relative; z-index: 1; }
.uc-panel-lede { color: #D9E9DF; font-size: 1.1rem; line-height: 1.6; margin: 1rem 0 1.75rem !important; }
.uc-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.uc-ticks li { position: relative; padding: 0.9rem 1rem 0.9rem 3rem; border-radius: 16px; background: rgb(255 255 255 / .08); line-height: 1.5; transition: background .3s var(--uc-ease), transform .4s var(--uc-ease); }
.uc-ticks li:hover { background: rgb(255 255 255 / .13); transform: translateX(4px); }
.uc-ticks li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 20px; height: 20px; border-radius: 50%; background: var(--uc-gold) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231F2A24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E"); }

/* ---------- Schools ---------- */
.uc-schools { padding-top: 0; }
.uc-pills { list-style: none; padding: 0; margin-block: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.uc-pills li { padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--uc-green-soft); color: var(--uc-green); font-weight: 600; margin: 0; }
.uc-note { color: var(--uc-muted); font-size: 0.95rem; margin-top: 1.4rem !important; }

/* ---------- Questions ---------- */
.uc-faq { padding-top: 0; }
.uc-faq .wp-block-details { margin: 0; border-bottom: 1px solid var(--uc-line); padding-block: 1.15rem; }
.uc-faq .wp-block-details:first-child { border-top: 1px solid var(--uc-line); }
.uc-faq summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; position: relative; padding-right: 2.5rem; transition: color .25s var(--uc-ease); }
.uc-faq summary:hover { color: var(--uc-green); }
.uc-faq summary::-webkit-details-marker { display: none; }
.uc-faq summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--uc-green-soft) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230D5C3A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 1.5v9M1.5 6h9'/%3E%3C/svg%3E"); transition: transform .35s var(--uc-ease); }
.uc-faq details[open] summary::after { transform: rotate(45deg); }
.uc-faq-answer { color: var(--uc-muted); line-height: 1.65; margin-top: 0.7rem !important; max-width: 38em; overflow: hidden; }

/* ---------- Call to action ---------- */
.uc-cta-section { padding-top: 0; }
.uc-panel-gold { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.uc-panel-gold > * { position: relative; z-index: 1; margin-block: 0 !important; margin-inline: 0 !important; }
.uc-panel-gold h2 { max-width: 14em; color: var(--uc-ink); }
.uc-panel-gold .wp-block-buttons { gap: 0.75rem; }
.uc-btn-ink .wp-block-button__link { background: var(--uc-ink) !important; color: #fff !important; }
.uc-btn-ink .wp-block-button__link:hover { background: #000 !important; }

/* ---------- Footer ---------- */
.uc-footer { background: var(--uc-ink); color: #C9D3CD; padding-block: clamp(2.75rem, 6vw, 4rem) 2rem; }
.uc-footer-cols { gap: 2rem !important; margin-block: 0 2rem !important; }
.uc-footer-name { font-family: var(--uc-display); font-size: 2.2rem; line-height: 1; color: var(--uc-gold); margin: 0 0 0.85rem !important; }
.uc-footer-about { max-width: 26em; font-size: 0.95rem; line-height: 1.6; }
.uc-footer-links { font-size: 0.95rem; line-height: 2.05; margin: 0 !important; }
.uc-footer a { color: #fff; text-decoration: none; transition: color .25s var(--uc-ease); }
.uc-footer a:hover { color: var(--uc-gold); }
.uc-footer-small { font-size: 0.85rem; color: #94A39A; border-top: 1px solid rgb(255 255 255 / 0.12); padding-top: 1.25rem; margin-block: 0 !important; }

/* ---------- Scroll motion (only when the visitor allows it; see assets/js/motion.js) ---------- */
.uc-motion .uc-reveal, .uc-motion .uc-stagger > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--uc-ease), transform .8s var(--uc-ease);
}
.uc-motion .uc-reveal.is-in, .uc-motion .uc-stagger > .is-in { opacity: 1; transform: none; }
.uc-motion .uc-cat.is-in:hover { transform: translateY(-5px); }
.uc-motion .uc-path path { stroke-dashoffset: 1400; transition: stroke-dashoffset 2s var(--uc-ease) .2s; }
.uc-motion .uc-path.is-in path { stroke-dashoffset: 0; }

@keyframes uc-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes uc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes uc-fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes uc-pulse { 0% { box-shadow: 0 0 0 0 rgb(34 160 107 / .5); } 80%, 100% { box-shadow: 0 0 0 10px rgb(34 160 107 / 0); } }
@keyframes uc-blob {
	0% { border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; transform: rotate(0deg); }
	100% { border-radius: 44% 56% 58% 42% / 56% 44% 56% 44%; transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
	.uc-hero::before, .uc-panel-dark::after, .uc-panel-gold::after, .uc-live::before { animation: none; }
	.wp-block-button__link:hover, .uc-cat:hover, .uc-ticks li:hover { transform: none; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1000px) {
	.uc-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.uc-header-nav .wp-block-buttons { display: none; }
	.uc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.uc-cat { padding: 1rem; }
	.uc-steps, .uc-trust-grid { grid-template-columns: 1fr; }
	.uc-path { display: none; }
	.uc-ticker { height: 420px; }
	.uc-hero::before { width: 120vw; right: -50vw; top: 30%; }
}
@media (max-width: 600px) {
	.uc-panel { padding: 1.75rem 1rem; }
	.uc-panel-green .uc-head { padding-inline: 0.5rem; }
	.uc-cat { padding: 0.95rem; }
	.uc-cat-emoji { width: 46px; height: 46px; font-size: 23px; margin-bottom: 0.8rem !important; }
	.uc-cat-name { font-size: 1.02rem !important; }
	.uc-cat-desc, .uc-subs { display: none; }
	.uc-panel-dark, .uc-panel-gold { padding: 2rem 1.35rem; }
}

/* Small headings keep their size on every screen */
.uc-step h3, .uc-trust-item h3 { font-size: 1.2rem !important; line-height: 1.3; }