/*
Theme Name: FriendLove
Theme URI: https://myfriendlove.com
Author: Grace Elizabeth Oxley
Description: The FriendLove theme: kindred wine and cream, Fraunces, Cormorant Garamond and Jost, and the FriendLove homepage as editable blocks.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
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: friendlove
*/

/* ---------- base ---------- */
body { -webkit-font-smoothing: antialiased; }
a:focus-visible { outline: 3px solid #F5E6A8; outline-offset: 3px; }
.fl-main { margin: 0; }
.fl-main > .wp-block-post-content > *, .wp-site-blocks > * + * { margin-block-start: 0 !important; }
.fl-sec > .fl-narrow, .fl-sec > .fl-lede.fl-narrow { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
.fl-cards3 + *, .fl-dims + *, .fl-split + .fl-label, .fl-conf-row + .fl-label { margin-block-start: 20px !important; }
.wp-block-columns { margin-bottom: 0; }

/* ---------- sections ---------- */
.fl-sec { padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 80px); }
.fl-dark { background: #36132E; color: #F6F1EA; }
.fl-deep { background: #240B1F; color: #F6F1EA; }
.fl-cream { background: #F6F1EA; color: #2C2420; }
.fl-sec > * + * { margin-block-start: 24px; }

/* ---------- type ---------- */
.fl-label { font-family: var(--wp--preset--font-family--label); font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.7; margin: 0; }
.fl-label a { text-decoration: none; }
.fl-butter { color: #F5E6A8; }
.fl-plum { color: #7A3F63; }
.fl-mauve { color: #CDB0BF; }
.fl-mist { color: #EBDCE2; }
.fl-kin { font-family: var(--wp--preset--font-family--label); font-weight: 500; font-size: 15px; letter-spacing: .32em; text-transform: uppercase; margin: 0; }
.fl-tight { margin-block-start: 8px !important; }
.fl-narrow { max-width: 760px; }

.fl-hero-title { font-size: clamp(72px, 12vw, 168px); line-height: .9; letter-spacing: -.03em; margin: 0; }
.fl-hero-title em { color: #D9A38A; }
.fl-h2 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.fl-h2-xl { font-size: clamp(40px, 6.5vw, 92px); letter-spacing: -.025em; }
.fl-dark .fl-h2 em, .fl-deep .fl-h2 em { color: #D9A38A; }
.fl-cream .fl-h2 { color: #36132E; }
.fl-cream .fl-h2 em { color: #7A3F63; }
.fl-h3 { font-family: var(--wp--preset--font-family--display); font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.fl-lede { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; font-style: italic; text-wrap: balance; margin: 0; }
.fl-upright { font-style: normal; }
.fl-italic { font-style: italic; }
.fl-body-lg { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.5; }
.fl-card-title { font-family: var(--wp--preset--font-family--display); font-size: 32px; line-height: 1.05; margin: 0; }

/* ---------- header and footer ---------- */
.fl-header { background: #36132E; color: #F6F1EA; padding: 22px clamp(20px, 5vw, 80px); }
.fl-header-row { align-items: center; gap: 16px 32px; }
.fl-nav { gap: 12px 28px; }
.fl-nav a { opacity: .82; transition: opacity .2s; }
.fl-nav a:hover, .fl-nav .fl-butter a { opacity: 1; }
.fl-wordmark { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 30px; letter-spacing: -.01em; line-height: 1; margin: 0; }
.fl-wordmark a { text-decoration: none; }
.fl-wordmark em { font-style: italic; color: #D9A38A; }
.fl-wordmark-lg { font-size: 34px; }
.fl-footer { background: #2C2420; color: #F6F1EA; padding: 56px clamp(20px, 5vw, 80px); }
.fl-footer .fl-label { margin-block-start: 12px; }
.fl-footer-tag { font-style: italic; color: #D9A38A; font-size: 22px; margin: 10px 0 0; }
.fl-copy { margin-block-start: 40px !important; letter-spacing: .14em; }

/* ---------- buttons and links ---------- */
.fl-btns { gap: 16px 24px; margin-block-start: 32px !important; }
.wp-block-button .wp-block-button__link { transition: transform .2s ease, background .2s ease; }
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); }
.fl-btn-butter .wp-block-button__link { background: #F5E6A8; color: #36132E; }
.fl-btn-butter .wp-block-button__link:hover { background: #FBF0C4; }
.fl-btn-line .wp-block-button__link { background: transparent; color: #F5E6A8; border: 1px solid #F5E6A8; }
.fl-btn-line .wp-block-button__link:hover { background: rgba(245, 230, 168, .12); }
.fl-textlink { font-family: var(--wp--preset--font-family--label); font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-block-start: 16px !important; }
.fl-textlink a { text-underline-offset: 6px; }
.fl-meta { margin-block-start: 24px !important; }
.fl-row { gap: 20px 32px; margin-block-start: 48px !important; }
.fl-row .fl-btns, .fl-row .fl-meta { margin: 0 !important; }

/* ---------- hero ---------- */
.fl-hero-cols { align-items: center; gap: 56px 64px; }
.fl-hero-main { flex-basis: 58% !important; }
.fl-hero-cols > .wp-block-column:not(.fl-hero-main) { flex: 1 1 360px !important; min-width: min(100%, 360px); }
.fl-hero-main > * + * { margin-block-start: 32px; }
.fl-hero-main > .fl-textlink, .fl-hero-main > .fl-btns + * { margin-block-start: 16px; }
.fl-profile { background: #F6F1EA; color: #2C2420; padding: clamp(28px, 4vw, 48px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: rotate(1.5deg); max-width: 480px; margin-inline: auto; }
.fl-profile > * + * { margin-block-start: 20px; }
.fl-profile-top { justify-content: space-between; border-bottom: 1px solid #D9A38A; padding-bottom: 20px; }
.fl-profile-top p { margin: 0; }
.fl-profile-name { font-family: var(--wp--preset--font-family--display); font-size: clamp(44px, 6vw, 64px); line-height: 1; letter-spacing: -.02em; color: #36132E; margin: 0; }
.fl-profile-quote { font-style: italic; font-size: 24px; line-height: 1.35; margin: 0; }
.fl-profile-foot { border-top: 1px solid #D9A38A; padding-top: 20px; }

/* ---------- split sections ---------- */
.fl-split { gap: 48px 80px; }
.fl-split > .wp-block-column > * + * { margin-block-start: 24px; }
.fl-end { align-items: flex-end; }
.fl-quote { border-top: 1px solid #D9A38A; padding-top: 20px; }
.fl-quote-text { font-style: italic; color: #7A3F63; margin: 0; }
.fl-quote .fl-label { margin-block-start: 10px; }

/* ---------- kindred ---------- */
.fl-dims, .fl-cards3, .fl-conf-row { gap: 24px; margin-block-start: 56px !important; }
.fl-conf-row + .fl-conf-row { margin-block-start: 24px !important; }
.fl-dim { background: #EFE7DB; color: #2C2420; padding: 32px; border-top: 3px solid #D9A38A; min-height: 240px; transition: background .25s ease; }
.fl-dim:hover { background: #E8DECF; }
.fl-dim > * + * { margin-block-start: 16px; }
.fl-dim .fl-card-title { color: #36132E; }
.fl-ruled { border-top: 1px solid #F5E6A8; padding-top: 56px; margin-block-start: 72px !important; }
.fl-ruled > * + * { margin-block-start: 20px; }
.fl-names { gap: 8px 40px; margin-block-start: 32px !important; }
.fl-names p { font-family: var(--wp--preset--font-family--display); font-size: clamp(36px, 6vw, 84px); line-height: 1.05; letter-spacing: -.02em; margin: 0; transition: color .25s ease; }
.fl-names p:hover { color: #F5E6A8; font-style: italic; }
.fl-names-clay p { color: #D9A38A; }

/* ---------- result ---------- */
.fl-send { background: #36132E; color: #F6F1EA; padding: 36px; min-height: 340px; display: flex; flex-direction: column; gap: 20px; transition: transform .25s ease; }
.fl-send > * { margin: 0 !important; }
.fl-send:hover, .fl-conf:hover { transform: translateY(-6px) rotate(-.6deg); }
.fl-send-text { font-style: italic; font-size: 25px; line-height: 1.4; }
.fl-foot { margin-top: auto !important; }

/* ---------- how it works ---------- */
.fl-step { border-top: 1px solid #F5E6A8; padding-top: 28px; }
.fl-step > * + * { margin-block-start: 16px; }

/* ---------- the gallery ---------- */
.fl-conf { padding: 36px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; transition: transform .25s ease; }
.fl-conf > * { margin: 0 !important; }
.fl-conf-text { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -.01em; }
.fl-conf-1 { background: linear-gradient(165deg, #5E1A3A 0%, #36132E 100%); color: #F6F1EA; }
.fl-conf-1 .fl-label { color: #F5E6A8; }
.fl-conf-1 .fl-foot { color: #CDB0BF; }
.fl-conf-2 { background: linear-gradient(165deg, #F5E6A8 0%, #D9A38A 100%); color: #36132E; }
.fl-conf-2 .fl-label { color: #5E1A3A; }
.fl-conf-3 { background: linear-gradient(165deg, #24696B 0%, #123B3C 100%); color: #F6F1EA; }
.fl-conf-3 .fl-label { color: #F5E6A8; }
.fl-conf-4 { background: #F6F1EA; color: #36132E; }
.fl-conf-4 .fl-label { color: #7A3F63; }

/* ---------- research ---------- */
.fl-finding { border-top: 1px solid #D9A38A; padding-top: 24px; font-size: 23px; line-height: 1.45; }
.fl-finding > * + * { margin-block-start: 14px; }

/* ---------- closing ---------- */
.fl-close { padding-top: clamp(80px, 11vw, 160px); padding-bottom: clamp(80px, 11vw, 160px); }
.fl-close > * + * { margin-block-start: 40px; }

/* ---------- other pages ---------- */
.fl-page { padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 80px); }
.fl-page .fl-h2 { color: #36132E; margin-bottom: 32px; }

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link, .fl-send, .fl-conf, .fl-dim, .fl-names p { transition: none; }
	.wp-block-button .wp-block-button__link:hover, .fl-send:hover, .fl-conf:hover { transform: none; }
}