/* Cali Foods theme layer */

/* Header */
.cf-site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 246, 238, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--wp--preset--color--line); padding-top: .85rem; padding-bottom: .85rem; }
.admin-bar .cf-site-header { top: 32px; }
.cf-header-row { gap: 1.25rem; align-items: center; }
.cf-brand { margin: 0; white-space: nowrap; }
.cf-brand a { color: var(--wp--preset--color--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.cf-brand a::before { content: ""; width: 1.05em; height: 1.05em; border-radius: 50%; background: radial-gradient(circle at 50% 120%, var(--wp--preset--color--sunset) 0 45%, transparent 46%), linear-gradient(180deg, var(--wp--preset--color--gold), var(--wp--preset--color--sunset)); box-shadow: inset 0 -.2em 0 rgba(0, 0, 0, .08); flex: none; }
.cf-main-nav a { color: var(--wp--preset--color--ink); text-decoration: none; }
.cf-main-nav a:hover { color: var(--wp--preset--color--sunset-deep); }
.cf-main-nav .wp-block-navigation__container { gap: 1.6rem; }

/* Main */
.cf-main { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); min-height: 60vh; }
.cf-front { padding-top: 0; }
.cf-page-title { margin-bottom: 1.5rem; }

/* Hero */
.cf-hero { position: relative; overflow: hidden; padding-top: clamp(4rem, 10vw, 8rem) !important; padding-bottom: clamp(4rem, 10vw, 7.5rem) !important; background:
	radial-gradient(1200px 500px at 85% 110%, rgba(226, 84, 43, .35), transparent 60%),
	radial-gradient(900px 420px at 10% -10%, rgba(240, 168, 48, .35), transparent 60%),
	linear-gradient(180deg, #fff4e3 0%, #fde3cd 100%); margin-top: 0 !important; }
.cf-hero::after { content: ""; position: absolute; right: -6vw; bottom: -18vw; width: 46vw; max-width: 620px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffc65a, var(--wp--preset--color--sunset) 70%); opacity: .9; filter: saturate(1.1); pointer-events: none;
	-webkit-mask: repeating-linear-gradient(180deg, #000 0 22px, transparent 22px 30px); mask: repeating-linear-gradient(180deg, #000 0 22px, transparent 22px 30px); }
.cf-hero > * { position: relative; z-index: 1; }
.cf-hero-title { margin-top: .25rem; }
.cf-hero-lead { max-width: 52ch; font-size: 1.2rem; color: #4d3f33; }
.cf-hero .wp-block-buttons { margin-top: 2rem; }

.cf-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; color: var(--wp--preset--color--sunset-deep); }
.cf-btn-sunset .wp-block-button__link { background: var(--wp--preset--color--sunset); color: #fff; }
.cf-btn-sunset .wp-block-button__link:hover { background: var(--wp--preset--color--sunset-deep); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

/* Sections */
.cf-section { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); margin-top: 0 !important; }
.cf-section-alt { background: #f5ecdf; }
.cf-section > .wp-block-heading { margin-bottom: 2.25rem; }
.cf-steps { gap: 1.5rem !important; }
.cf-steps .wp-block-column { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 1.75rem; }
.cf-steps h3 { margin: .5rem 0 .5rem; }
.cf-steps p:last-child { color: var(--wp--preset--color--muted); margin: 0; }
.cf-step-num { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.25rem; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.cf-cta { text-align: center; }
.cf-cta > * { max-width: 640px; margin-inline: auto !important; }
.cf-lead { font-size: 1.2rem; color: var(--wp--preset--color--muted); }

/* Footer */
.cf-site-footer { background: var(--wp--preset--color--ink); color: #e9ded1; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 2rem; margin-top: 0 !important; }
.cf-site-footer .cf-brand a { color: #fff; }
.cf-site-footer h4 { color: #fff; font-family: var(--wp--preset--font-family--body); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .75rem; }
.cf-footer-note { color: #bfb1a3; max-width: 34ch; }
.cf-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.cf-footer-links a { color: #e9ded1; text-decoration: none; }
.cf-footer-links a:hover { color: var(--wp--preset--color--gold); }
.cf-copyright { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.25rem; margin-top: 2rem !important; font-size: .85rem; color: #9c8e80; }

@media (max-width: 781px) {
	.cf-header-row { flex-wrap: wrap !important; }
	.cf-hero::after { width: 80vw; right: -30vw; bottom: -40vw; opacity: .5; }
	.cf-main-nav { order: 3; }
}
@media (max-width: 600px) {
	.admin-bar .cf-site-header { top: 0; position: relative; }
	.cf-usermenu > a:not(.cf-btn) { display: none; }
}

/* Front page uses a wider measure than text pages */
.cf-front .cf-hero > *, .cf-front .cf-section > * { max-width: 1100px !important; }
.cf-hero-title { box-sizing: border-box; max-width: none; padding-right: max(0px, calc(100% - 11em)); text-wrap: balance; }
.cf-hero-lead { box-sizing: border-box; padding-right: max(0px, calc(100% - 600px)); }
.cf-card-media { text-decoration: none; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Logo */
.cf-logo { margin: 0; line-height: 0; flex: none; }
.cf-logo a { display: inline-block; line-height: 0; }
.cf-logo img { height: auto; max-width: 100%; }
.cf-site-header .cf-logo img { width: 156px; }
.cf-site-header { padding-top: .6rem; padding-bottom: .6rem; }
.cf-footer-logo a { background: #fff8ee; border-radius: 14px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.cf-footer-logo img { width: 168px; }
.cf-footer-note { margin-top: 1.25rem !important; }

@media (max-width: 781px) {
	.cf-site-header .cf-logo img { width: 100px; }
}
@media (max-width: 400px) {
	.cf-site-header .cf-logo img { width: 88px; }
}