/*
Theme Name: PureHarvest
Author: InkDot Creation
Description: A block theme for PureHarvest, an organic grocery store. Built for WordPress with WooCommerce. Design tokens, typography and buttons live in theme.json; this file holds only what theme.json cannot express.
Version: 1.4.1
Requires at least: 6.6
Tested up to: 7.1
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: pureharvest
*/

/* Colors, fonts, spacing and radii come from theme.json (--wp--preset--* and --wp--custom--*). */

.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-group, .wp-block-heading, .wp-block-paragraph { overflow-wrap: break-word; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 1.25rem; height: 1.25rem; flex: none; }
:focus-visible { outline: 3px solid var(--focus, var(--wp--preset--color--primary)); outline-offset: 3px; }
.on-dark { --focus: var(--wp--custom--color--on-hero); }
.muted { color: var(--wp--custom--color--muted); }

/* content only the business can provide: shown as an intentional slot */
.slot-block {
  padding: var(--wp--preset--spacing--30); border: 1.5px dashed var(--wp--custom--color--slot-line);
  border-radius: var(--wp--custom--radius--md); background: var(--wp--custom--color--slot-bg);
}

/* groups used as grids or rows: WordPress's flow-layout block gap must not offset their children */
.wp-block-group.tile-grid > *, .wp-block-group.trust__grid > *, .wp-block-group.review-grid > *, .wp-block-group.footer-grid > *,
.wp-block-group.why > *, .wp-block-group.benefits > *, .wp-block-group.benefit > *, .wp-block-group.hero__inner > *,
.wp-block-group.newsletter > *, .wp-block-group.commit > *, .wp-block-group.section-head > *, .wp-block-group.tile > *,
.wp-block-group.tile__body > *, .wp-block-group.trust__item > *, .wp-block-group.shelf > *, .wp-block-group.tile__art > * { margin-block-start: 0; }

/* ---- header ---------------------------------------------------------- */
header.wp-block-template-part {
  position: sticky; top: calc(-1 * var(--wp--custom--announcement-height)); z-index: 50;
  background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--custom--color--line);
}
.admin-bar header.wp-block-template-part { top: calc(32px - var(--wp--custom--announcement-height)); }
.announcement {
  display: flex; align-items: center; justify-content: center; height: var(--wp--custom--announcement-height); overflow: hidden;
  background: var(--wp--custom--color--footer); color: var(--wp--custom--color--on-footer); font-size: var(--wp--preset--font-size--small);
  text-align: center; padding-inline: var(--wp--preset--spacing--30);
}
.announcement p { margin: 0; color: inherit; }
.site-header__bar { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--header-height); max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40)); margin-inline: auto; width: 100%; }
.site-logo { display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin-right: auto; }
.site-logo .logo-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.site-logo__text { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.1; }
.site-logo .wp-block-site-title { margin: 0; font: 700 clamp(1.15rem, 0.6rem + 2.6vw, 1.45rem)/1 var(--wp--preset--font-family--heading); white-space: nowrap; }
.site-logo .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.site-footer .site-logo .wp-block-site-title a { color: var(--wp--custom--color--on-footer); }
.site-logo .wp-block-site-tagline { display: none; margin: 0; font-size: var(--wp--custom--font-size--x-small); color: var(--wp--custom--color--muted); }
.header-actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--10); flex: none; }
.header-actions .wc-block-mini-cart__button { color: var(--wp--preset--color--contrast); }
.header-actions .wc-block-mini-cart__button svg, .header-actions .wc-block-mini-cart__icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.header-actions .wc-block-mini-cart__badge { background: var(--wp--preset--color--primary); color: var(--wp--custom--color--on-primary); }
.header-actions .wp-block-woocommerce-customer-account { font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.header-actions .wp-block-woocommerce-customer-account a, .header-actions .wc-block-mini-cart__button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.wp-block-navigation { font-weight: 500; }
.wp-block-navigation .wp-block-navigation-item__content { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--pill); }
.wp-block-navigation .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--tertiary); }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--tertiary); font-weight: 600; }
@media (min-width: 782px) { .site-logo .wp-block-site-tagline { display: block; } .site-logo { margin-right: 0; } .site-header__bar { gap: var(--wp--preset--spacing--40); } }

/* ---- footer ---------------------------------------------------------- */
.site-footer { background: var(--wp--custom--color--footer); color: var(--wp--custom--color--on-footer); padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.site-footer a { color: var(--wp--custom--color--on-footer); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2, .site-footer h3 { font: 600 var(--wp--preset--font-size--medium)/1.3 var(--wp--preset--font-family--body); color: var(--wp--custom--color--on-footer); margin-bottom: var(--wp--preset--spacing--20); }
.site-footer p { color: var(--wp--custom--color--on-footer-muted); font-size: var(--wp--preset--font-size--small); }
.site-footer .slot-block { background: color-mix(in srgb, var(--wp--preset--color--secondary) 22%, var(--wp--custom--color--footer)); border-color: var(--wp--custom--color--on-footer-muted); color: var(--wp--custom--color--on-footer); padding: 0.4rem 0.7rem; margin: 0 0 var(--wp--preset--spacing--20); }
.site-footer .wp-block-navigation-item__content { color: var(--wp--custom--color--on-footer-muted); font-size: var(--wp--preset--font-size--small); padding-inline: 0; border-radius: 0; }
.site-footer .wp-block-navigation-item__content:hover { background: none; color: var(--wp--custom--color--on-footer); }
.site-footer .wp-block-navigation__container { gap: 0; }
.site-footer .wp-block-navigation-item__content { min-height: 40px; }
.site-footer .slot-filled { margin: 0 0 var(--wp--preset--spacing--20); }
.footer-grid { display: grid; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); grid-template-columns: 1fr 1fr; max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40)); margin-inline: auto; }
.footer-brand { grid-column: 1 / -1; max-width: 26rem; }
.footer-bottom { max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40)); margin: var(--wp--preset--spacing--50) auto 0; padding-top: var(--wp--preset--spacing--30); border-top: 1px solid color-mix(in srgb, var(--wp--custom--color--on-footer) 22%, transparent); }
.footer-bottom p { margin: 0; font-size: var(--wp--custom--font-size--x-small); }
@media (min-width: 782px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } .footer-brand { grid-column: auto; } }

/* ---- buttons (outline hover, hero button) ---------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: var(--wp--custom--color--on-primary); }
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hero .hero-btn .wp-block-button__link { background: var(--wp--custom--color--on-hero); color: var(--wp--custom--color--hero); }
.hero .hero-btn .wp-block-button__link:hover { background: var(--wp--preset--color--secondary); color: var(--wp--custom--color--on-secondary); }
.hero .hero-link .wp-block-button__link { background: none; border: 0; color: var(--wp--custom--color--on-hero); text-decoration: underline; text-underline-offset: 0.2em; padding-inline: 0; }

/* shelf-edge label: the signature device */
.shelf-label { display: flex; flex-direction: column; margin: 0; line-height: 1.2; padding: 0.35rem 0.55rem; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); border-left: 4px solid var(--wp--preset--color--secondary); border-radius: 3px; }
.shelf-label__price { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.shelf-label__size { font-size: 0.75rem; color: var(--wp--custom--color--muted); }

/* ---- hero ------------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero { background: var(--wp--custom--color--hero); color: var(--wp--custom--color--on-hero); overflow: hidden; }
.hero h1, .hero p { color: inherit; }
.hero .shelf__tag, .hero .shelf__tag strong { color: inherit; }
.hero .shelf__tag { color: var(--wp--custom--color--muted); }
.hero .shelf__tag strong { color: var(--wp--preset--color--contrast); }
.hero h1 { font-size: clamp(2.35rem, 1.35rem + 3.9vw, 4rem); }
.hero__inner { display: grid; gap: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--50); }
.hero__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; max-width: 30rem; }
.hero__copy > * { animation: rise 0.6s both; }
.hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 0.85rem auto; column-gap: var(--wp--preset--spacing--20); align-items: end; }
.shelf__pack { grid-row: 1; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 10px; animation: rise 0.7s both; }
.shelf__pack a { display: block; height: 100%; }
.shelf__pack img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.shelf__pack:hover img { transform: scale(1.05); }
.shelf__pack:nth-child(2) { animation-delay: 0.3s; }
.shelf__pack:nth-child(3) { animation-delay: 0.4s; }
.shelf__pack:nth-child(4) { animation-delay: 0.5s; }
.shelf__board { grid-row: 2; grid-column: 1 / -1; align-self: stretch; margin-top: -1px; background: color-mix(in srgb, black 34%, var(--wp--custom--color--hero)); border-top: 2px solid color-mix(in srgb, white 22%, var(--wp--custom--color--hero)); border-radius: 4px; box-shadow: 0 7px 0 -1px color-mix(in srgb, black 30%, var(--wp--custom--color--hero)); }
.shelf__tag { grid-row: 3; margin-top: 1.1rem; display: block; font-size: 0.75rem; line-height: 1.25; padding: 0.35rem 0.55rem; background: var(--wp--preset--color--surface); color: var(--wp--custom--color--muted); border-left: 4px solid var(--wp--preset--color--secondary); border-radius: 3px; }
.shelf__tag strong { display: block; font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--contrast); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 782px) { .hero__inner { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--wp--preset--spacing--60); padding-block: var(--wp--preset--spacing--60); } }

/* ---- trust strip, tiles, benefits, reviews, newsletter ---------------- */
.trust { border-bottom: 1px solid var(--wp--custom--color--line); }
.trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
.trust__item { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.trust__item .icon { width: 1.75rem; height: 1.75rem; color: var(--wp--preset--color--primary); }
.trust__item p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--muted); line-height: 1.5; }
.trust__item p.trust__title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; color: var(--wp--preset--color--contrast); }
@media (min-width: 782px) { .trust__grid { grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--40); } }

.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--40); }
.section-head h2, .section-head p { margin: 0; }
.section-head p { color: var(--wp--custom--color--muted); }

.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
.tile { position: relative; display: flex; flex-direction: column; background: var(--tile-bg); border-radius: var(--wp--custom--radius--lg); overflow: hidden; }
.tile--grain { --tile-bg: color-mix(in srgb, var(--wp--custom--pack--wheat) 24%, var(--wp--preset--color--tertiary)); }
.tile--pulse { --tile-bg: color-mix(in srgb, var(--wp--custom--pack--leaf) 24%, var(--wp--preset--color--tertiary)); }
.tile--oil { --tile-bg: color-mix(in srgb, var(--wp--custom--pack--oil) 26%, var(--wp--preset--color--tertiary)); }
.tile--essential { --tile-bg: color-mix(in srgb, var(--wp--custom--pack--honey) 24%, var(--wp--preset--color--tertiary)); }
.tile__art { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; aspect-ratio: 2 / 1.15; overflow: hidden; }
.tile__art .wp-block-image { margin: 0; overflow: hidden; }
.tile__art img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transform-origin: center 55%; transition: transform 0.35s; }
.tile:hover .tile__art img { transform: scale(1.22); }
.tile__body { padding: var(--wp--preset--spacing--30); display: flex; flex-direction: column; gap: 0.2rem; }
.tile__body h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.tile__body h3 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.tile__body h3 a::after { content: ""; position: absolute; inset: 0; }
.tile__body h3 a:hover { text-decoration: underline; }
.tile__body p { margin: 0; font-size: var(--wp--custom--font-size--x-small); color: var(--wp--custom--color--muted); line-height: 1.4; }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--40); } .tile__body h3 { font-size: 1.35rem; } }

.why { display: grid; gap: var(--wp--preset--spacing--40); }
.why__lede p { color: var(--wp--custom--color--muted); max-width: 28rem; }
.benefit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--30) 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--tertiary)); }
.benefit:last-child { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--tertiary)); }
.benefit .icon { width: 2rem; height: 2rem; color: var(--wp--preset--color--primary); margin-top: 0.2rem; }
.benefit h3 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.benefit p { margin: 0; color: var(--wp--custom--color--muted); }
@media (min-width: 782px) { .why { grid-template-columns: 5fr 7fr; gap: var(--wp--preset--spacing--60); align-items: start; } }

.review-grid { display: grid; gap: var(--wp--preset--spacing--30); }
.review-slot { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); border: 1.5px dashed var(--wp--custom--color--slot-line); border-radius: var(--wp--custom--radius--md); background: var(--wp--custom--color--slot-bg); }
.review-slot p { margin: 0; }
@media (min-width: 782px) { .review-grid { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--40); } }

.review-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--custom--color--line); border-radius: var(--wp--custom--radius--md); }
.review-card::before { content: "\201C"; font: 700 3.5rem/0.6 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--primary); height: 1.5rem; }
.review-card p { margin: 0; }
.review-card .review-card__quote { font: 500 1.1rem/1.5 var(--wp--preset--font-family--heading); }
.review-card .review-card__by { margin-top: auto; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--muted); }
.wp-block-group.review-card > * { margin-block-start: 0; }

/* newsletter signup form */
.ph-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ph-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ph-subscribe { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--20); }
.ph-subscribe .ph-sub-email { width: 100%; min-height: 48px; padding: 0.65rem 0.9rem; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); border: 1.5px solid var(--wp--custom--color--field-border); border-radius: var(--wp--custom--radius--sm); font: inherit; }
.ph-sub-msg { margin: 0 0 var(--wp--preset--spacing--20); font-weight: 500; }
.ph-sub-msg--error { color: var(--wp--custom--color--danger); }
@media (min-width: 480px) { .ph-subscribe { flex-direction: row; } .ph-subscribe .ph-sub-email { flex: 1; } }

/* footer social icons and note */
.site-footer .wp-block-social-links { gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--20); }
.site-footer .wp-block-social-links .wp-social-link { background: none; color: var(--wp--custom--color--on-footer); }
.site-footer .wp-block-social-links .wp-social-link a { color: var(--wp--custom--color--on-footer); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.site-footer .wp-block-social-links .wp-social-link svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.site-footer .footer-note { font-size: var(--wp--custom--font-size--x-small); }
.footer-bottom a { text-decoration: underline; }

.newsletter { display: grid; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); background: var(--wp--preset--color--tertiary); border-radius: var(--wp--custom--radius--lg); }
.newsletter h2 { margin-bottom: var(--wp--preset--spacing--20); }
.newsletter p { margin: 0 0 var(--wp--preset--spacing--20); color: var(--wp--custom--color--muted); }
@media (min-width: 782px) { .newsletter { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--wp--preset--spacing--60); gap: var(--wp--preset--spacing--60); } }

.page-head { background: var(--wp--preset--color--tertiary); padding-block: var(--wp--preset--spacing--50); }
.page-head h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.about-lede { font: 500 clamp(1.5rem, 1.05rem + 1.6vw, 2.3rem)/1.3 var(--wp--preset--font-family--heading); max-width: 30ch; }
.commit { display: grid; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40) 0; border-top: 1px solid var(--wp--custom--color--line); }
.commit h3 { margin: 0; }
@media (min-width: 782px) { .commit { grid-template-columns: 1fr 2fr; } }

/* ---- WooCommerce blocks (shop, product, cart, checkout use WooCommerce's own templates) ---- */
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.wc-block-product .wc-block-components-product-image { background: var(--wp--preset--color--tertiary); border-radius: var(--wp--custom--radius--md); overflow: hidden; }
.wc-block-product .wp-block-post-title { margin: var(--wp--preset--spacing--20) 0 0; font-size: 1.1rem; line-height: 1.25; }
.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { text-decoration: underline; }
.wc-block-components-product-price { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.wc-block-product .wp-block-button__link { background: transparent; color: var(--wp--preset--color--primary); border: 2px solid var(--wp--preset--color--primary); width: 100%; }
.wc-block-product .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: var(--wp--custom--color--on-primary); }
.single-product .single_add_to_cart_button, .wc-block-components-button:not(.is-link) { border-radius: var(--wp--custom--radius--pill); }
.wc-block-cart, .wc-block-checkout { font-family: var(--wp--preset--font-family--body); }
.wc-block-components-sidebar-layout .wc-block-components-main { padding-right: var(--wp--preset--spacing--40); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 700; }

/* ---- details (accordion) and reduced motion ---------------------------- */
.wp-block-details { border-bottom: 1px solid var(--wp--custom--color--line); }
.wp-block-details summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- section rhythm and layout helpers ------------------------------- */
.section { padding-block: var(--wp--preset--spacing--50); }
.section--compact { padding-block: var(--wp--preset--spacing--40); }
.section--generous { padding-block: var(--wp--preset--spacing--60); }
.band-sage { background: var(--wp--preset--color--tertiary); }
main.wp-block-group > * + * { margin-block-start: 0; }
@media (min-width: 782px) {
  .section { padding-block: var(--wp--preset--spacing--60); }
  .section--compact { padding-block: var(--wp--preset--spacing--50); }
  .section--generous { padding-block: var(--wp--preset--spacing--70); }
  body { --wp--style--root--padding-left: var(--wp--preset--spacing--40); --wp--style--root--padding-right: var(--wp--preset--spacing--40); }
}