/*
Theme Name: Fern & Flat
Theme URI: https://fernandflat.com
Author: Fern & Flat
Description: Lightweight block theme for Fern & Flat, indoor plants for small spaces. Forest green, cream and soft pink.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fernandflat
*/

/* Header */
.ff-header { padding: 14px 24px; }
.ff-header__inner { max-width: 1240px; margin: 0 auto; gap: 20px; }
.ff-logo { font-family: var(--wp--preset--font-family--fraunces); font-size: 30px; font-weight: 600; letter-spacing: -0.5px; color: var(--wp--preset--color--cream) !important; text-decoration: none; white-space: nowrap; }
.ff-logo span { color: var(--wp--preset--color--blush); }
.ff-header .wp-block-navigation { font-size: 15px; font-weight: 500; }
.ff-header .wp-block-navigation a { color: var(--wp--preset--color--cream); text-decoration: none; }
.ff-header .wp-block-navigation a:hover { color: var(--wp--preset--color--blush); }
.ff-header .wp-block-search__button { background: transparent; color: var(--wp--preset--color--cream); border: 1px solid #4A6352; border-radius: 999px; min-width: 44px; min-height: 44px; }
.ff-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--cream); }

/* Hero */
.ff-hero { padding: 72px 24px 64px; }
.ff-hero .wp-block-columns { max-width: 1240px; margin: 0 auto; gap: 56px; align-items: center; }
.ff-eyebrow { color: var(--wp--preset--color--blush); font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.ff-hero h1 { color: var(--wp--preset--color--cream); font-size: clamp(42px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -1.5px; margin: 0 0 20px; }
.ff-hero__lead { color: #D9DFCC; font-size: 19px; max-width: 520px; }
.ff-hero .wp-block-buttons { margin-top: 26px; gap: 14px; }
.ff-btn-blush .wp-block-button__link { background: var(--wp--preset--color--blush); color: var(--wp--preset--color--ink); }
.ff-btn-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--cream); border: 1.5px solid var(--wp--preset--color--cream); }
.ff-hero-img img { width: 100%; height: 460px; object-fit: cover; border-radius: 28px 28px 220px 28px; }

/* Sections */
.ff-section { max-width: 1240px; margin: 0 auto; padding: 104px 24px 0; }
.ff-section > .wp-block-heading { margin: 0 0 36px; }
.ff-section-bg { padding: 96px 24px; }
.ff-section-title { text-align: center; margin: 0 0 36px; }
.ff-row-head { border-bottom: 2px solid var(--wp--preset--color--forest); padding-bottom: 12px; margin-bottom: 28px; gap: 16px; }
.ff-row-head h2 { margin: 0; font-size: 32px; }
.ff-see-all a, a.ff-see-all { color: var(--wp--preset--color--olive); font-weight: 600; font-size: 15px; text-decoration: none; }

/* Category tiles */
.ff-tiles { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.ff-tile { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--wp--preset--color--forest); }
.ff-tile__img { height: 280px; border-radius: 16px; background-size: cover; background-position: center; }
.ff-tile__name { font-family: var(--wp--preset--font-family--fraunces); font-size: 24px; font-weight: 600; }
.ff-tile__more { font-size: 15px; font-weight: 600; color: var(--wp--preset--color--olive); }

/* Post cards */
.ff-cards .wp-block-post { display: flex; flex-direction: column; gap: 10px; }
.ff-cards .wp-block-post-featured-image { margin: 0; }
.ff-cards .wp-block-post { gap: 14px; }
.ff-cards .wp-block-post-featured-image img { border-radius: 16px; }
.ff-cards .wp-block-post-featured-image:empty, .ff-noimg { background: var(--wp--preset--color--olive-light); }
.ff-cards .wp-block-post-title { font-size: 20px; line-height: 1.3; margin: 0; }
.ff-cards .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--forest); }
.ff-cards .wp-block-post-title a:hover { color: var(--wp--preset--color--olive); }
.ff-cards .wp-block-post-terms { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.ff-cards .wp-block-post-terms a { color: var(--wp--preset--color--olive); text-decoration: none; }

/* Pink bands */
.ff-band { background: var(--wp--preset--color--blush-light); padding: 72px 24px; }
.ff-band--spaced { margin-top: 104px; padding: 88px 24px; }
.ff-wrap { max-width: 1240px; margin: 0 auto; }
.ff-wrap > .wp-block-heading { margin: 0 0 8px; }
.ff-wrap > p { margin: 0 0 36px; color: #3D4A3F; }

/* Email signup */
.ff-signup { max-width: 760px; margin: 0 auto; text-align: center; }
.ff-signup .wp-block-heading { margin: 0 0 12px; font-size: 34px; }
.ff-signup__sub { font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--forest); margin: 0; }
.ff-signup__form { margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 560px; }
.ff-signup__form input[type=email] { flex: 1 1 280px; height: 50px; box-sizing: border-box; padding: 0 20px; border: 1px solid #D9C9C5; border-radius: 999px; background: #fff; font: inherit; font-size: 16px; color: var(--wp--preset--color--ink); }
.ff-signup__form button { height: 50px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.ff-signup__form button:hover { background: var(--wp--preset--color--olive); }
.ff-signup__note { font-size: 13px; color: #5A5048; margin: 12px 0 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Plant tools */
.ff-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.ff-tool { background: #fff; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; text-decoration: none; color: var(--wp--preset--color--forest); }
.ff-tool__name { font-family: var(--wp--preset--font-family--fraunces); font-size: 20px; font-weight: 600; line-height: 1.25; }
.ff-tool__desc { font-size: 15px; color: #3D4A3F; }
.ff-tool__go { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--wp--preset--color--olive); }
.ff-tool:hover .ff-tool__go { color: var(--wp--preset--color--forest); }

/* Meet Clara */
.ff-clara { max-width: 1240px; margin: 0 auto; gap: 64px; align-items: center; }
.ff-clara .wp-block-buttons { gap: 12px; }
.ff-btn-outline-dark .wp-block-button__link { background: transparent; color: var(--wp--preset--color--forest); border: 1.5px solid var(--wp--preset--color--forest); }
.ff-btn-outline-dark .wp-block-button__link:hover { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); }
.ff-clara-img img { width: 100%; height: 440px; object-fit: cover; border-radius: 220px 220px 24px 24px; }
.ff-clara p { font-size: 18px; }

/* Single post */
.ff-single { padding: 48px 24px 24px; }
.ff-single .wp-block-post-title { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -0.8px; }
.ff-meta { font-size: 14px; color: #5A6450; gap: 14px; }
.ff-meta a { color: var(--wp--preset--color--olive); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; }
.ff-disclosure { font-size: 14px; font-style: italic; color: #5A6450; border-top: 1px solid #E2DCCB; border-bottom: 1px solid #E2DCCB; padding: 10px 0; }
.ff-single .wp-block-post-featured-image img { border-radius: 20px; }
.ff-author { background: var(--wp--preset--color--cream-deep); border-radius: 20px; padding: 28px; gap: 20px; align-items: center; }
.ff-author__avatar { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--blush); }
.wp-block-post-content img { border-radius: 14px; }

/* Footer */
.ff-footer { padding: 64px 24px 32px; }
.ff-footer__inner { max-width: 1240px; margin: 0 auto; }
.ff-footer, .ff-footer p { color: #E8ECE4; font-size: 15px; }
.ff-footer a { color: #E8ECE4; text-decoration: none; }
.ff-footer a:hover { color: var(--wp--preset--color--blush); }
.ff-footer .ff-logo { font-size: 30px; }
.ff-footer h3 { color: #fff; font-family: var(--wp--preset--font-family--figtree); font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.ff-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ff-footer__bottom { border-top: 1px solid #3A5243; padding-top: 22px; margin-top: 40px; font-size: 14px; color: #C9D3C4; }

/* Pagination & misc */
.wp-block-query-pagination { margin-top: 40px; font-weight: 600; }
:where(a, button, input):focus-visible { outline: 2px solid var(--wp--preset--color--olive); outline-offset: 2px; }

@media (max-width: 781px) {
  .ff-hero { padding: 48px 20px; }
  .ff-hero-img img { height: 320px; }
  .ff-clara-img img { height: 360px; }
  .ff-section { padding-top: 72px; }
  .ff-band--spaced { margin-top: 72px; padding: 64px 20px; }
  .ff-signup .wp-block-heading { font-size: 28px; }
}