/*
Theme Name: Pawvik
Theme URI: https://pawvik.com
Description: Pawvik storefront. Wet slate and tennis ball — the palette of a UK dog
  walk. Photography carries the warmth; the interface stays quiet and lets one colour
  do the shouting.
Author: Pawvik
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
License: GPLv2 or later
Text Domain: pawvik
*/

/* ---------------------------------------------------------------------------
   Tokens live in theme.json. This file carries only what theme.json cannot say.
   --------------------------------------------------------------------------- */

/* Fraunces has optical-size, softness and wonk axes. Dialling softness up and
   wonk on is what stops it reading like every other high-contrast serif. */
h1, h2, h3, h4,
.wp-block-site-title a,
.wp-block-post-title {
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-wrap: balance;
}

/* Running text stays near 65 characters however wide the column gets. */
p { max-width: 68ch; }
.entry-content > p { margin-block: 1em; }

/* The tennis-ball accent is legible only on slate. Never let a theme default
   put it on a pale ground. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
a:focus-visible {
  outline: 3px solid var(--wp--preset--color--slate);
  outline-offset: 2px;
}

/* Product tiles: one flat surface, no drop shadow. Border and radius are spent
   on separation, not decoration. */
.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
  background: var(--wp--preset--color--chalk);
  border-radius: 2px;
  padding: 0;
}
.wc-block-components-product-price,
.woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 600;
  color: var(--wp--preset--color--slate);
}

/* The USP band and the footer sit on slate; everything inside them inverts. */
.pv-band { background: var(--wp--preset--color--slate); color: var(--wp--preset--color--chalk); }
.pv-band a, .pv-band p, .pv-band h2 { color: var(--wp--preset--color--chalk); }

/* Hero type sits on the photograph. A gradient scrim keeps it legible without
   dropping a solid box over the image. */
.pv-hero { position: relative; }
.pv-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(34,43,41,.62) 0%, rgba(34,43,41,.15) 45%, transparent 70%);
}
.pv-hero > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Product grid: consistent tiles, image on chalk, text below on the page ground.
   Titles wrap rather than clip — a truncated product name is a bug, not a style. */
.wp-block-woocommerce-product-template {
  gap: 2rem 1.5rem;
}
.wp-block-woocommerce-product-template li .wp-block-woocommerce-product-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: 2px;
}
.wp-block-woocommerce-product-template li .wp-block-post-title a {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  overflow-wrap: anywhere;
}
.wp-block-woocommerce-product-template li .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* Product gallery: let the photograph fill its column cleanly. */
.wp-block-woocommerce-product-image-gallery img { border-radius: 2px; }

/* Reviews: 6,000+ of them, so keep the list quiet and readable. */
.woocommerce #reviews .commentlist { padding-left: 0; }
.woocommerce #reviews .comment_container { background: var(--wp--preset--color--chalk); }