/*
Theme Name: Talking Cedar
Theme URI: https://talkingcedar.com
Author: Sasquatch Agency
Author URI: https://sasquatch.agency
Description: Parent block theme for the Talking Cedar brewery and distillery sites. Holds shared brand tokens (theme.json), shared ACF blocks, schema helpers, and base templates. Activate one of the child themes (tc-brewery, tc-distillery) — not this parent directly. Built on SasquatchOS WordPress Standard v1.3.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: talking-cedar
*/

/*
 * Block themes load design tokens from theme.json. Keep this file lean —
 * use it only for base/reset rules that theme.json cannot express.
 * Block-specific styles live in each block's own style.css (blocks/<name>/style.css).
 */

:where(img, svg, video) {
  max-width: 100%;
  height: auto;
}

:where(figure) {
  margin: 0;
}

/* Sticky footer: keep the footer at the bottom of the viewport on short pages.
 * .wp-site-blocks is the FSE template wrapper; margin-top:auto pushes the footer
 * down regardless of how much content precedes it. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.wp-site-blocks > .tc-footer,
.wp-site-blocks > :last-child {
  margin-top: auto;
}

/* Full-bleed support: the page/single templates wrap post-content in a
 * constrained <main>, which would clamp the content wrapper — and every
 * alignfull section inside it — to content-width. Let the post-content span its
 * <main> so alignfull sections reach the viewport. The post-content keeps its
 * own constrained layout, so normal/wide blocks inside it stay constrained. */
main.is-layout-constrained > .wp-block-post-content {
  max-width: none;
}

/* "Full width" should always mean full width. Some section blocks set their own
 * max-width on the root (e.g. tc-story, the grids), which would re-constrain a
 * block the editor set to Full. The doubled class outranks those single-class
 * block rules so alignfull truly fills the width. */
.alignfull.alignfull {
  max-width: none;
}

/* Visible keyboard focus on brand backgrounds.
 * Gold alone is ~6.5:1 on dark backgrounds (fine) but only ~2.4:1 on light ones
 * (fails WCAG 2.4.11). The dark companion halo guarantees >=3:1 on light pages,
 * while the gold outline carries the contrast on dark pages — so focus is always
 * clearly visible regardless of background. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--cedar-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--cedar-dark) 55%, transparent);
}

/*
 * Brand button used by ACF block CTAs.
 *
 * Fully variable-driven so it can be styled at the theme level (Brand Settings →
 * Buttons emits --tc-btn-primary-* / --tc-btn-secondary-* on :root) and
 * overridden per button (is-style-custom + inline --tc-btn-c-* vars). The
 * fallbacks below reproduce the original look when Brand Settings is untouched.
 */
.tc-button {
  /* Active (resolved) properties — schemes/customs feed these. */
  --tc-btn-bg: var(--wp--preset--color--cedar-green);
  --tc-btn-bg-hover: var(--wp--preset--color--cedar-green-medium);
  --tc-btn-text: var(--wp--preset--color--cedar-white);
  --tc-btn-text-hover: var(--tc-btn-text);
  --tc-btn-radius: 2px;
  --tc-btn-border-width: 2px;
  --tc-btn-border-color: transparent;

  display: inline-block;
  font-family: var(--wp--preset--font-family--nav);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--nav);
  text-decoration: none;
  cursor: pointer;
  padding: 0.85em 1.75em;
  background-color: var(--tc-btn-bg);
  color: var(--tc-btn-text);
  border: var(--tc-btn-border-width) solid var(--tc-btn-border-color);
  border-radius: var(--tc-btn-radius);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tc-button:hover {
  background-color: var(--tc-btn-bg-hover);
  color: var(--tc-btn-text-hover);
}

/* Primary scheme — theme vars (Brand Settings) over original-look fallbacks. */
.tc-button.is-style-primary {
  --tc-btn-bg: var(--tc-btn-primary-bg, var(--wp--preset--color--cedar-green));
  --tc-btn-bg-hover: var(--tc-btn-primary-bg-hover, var(--wp--preset--color--cedar-green-medium));
  --tc-btn-text: var(--tc-btn-primary-text, var(--wp--preset--color--cedar-white));
  --tc-btn-text-hover: var(--tc-btn-primary-text-hover, var(--tc-btn-primary-text, var(--wp--preset--color--cedar-white)));
  --tc-btn-radius: var(--tc-btn-primary-radius, 2px);
  --tc-btn-border-width: var(--tc-btn-primary-border-width, 2px);
  --tc-btn-border-color: var(--tc-btn-primary-border-color, transparent);
}

/* Secondary scheme. */
.tc-button.is-style-secondary {
  --tc-btn-bg: var(--tc-btn-secondary-bg, transparent);
  --tc-btn-bg-hover: var(--tc-btn-secondary-bg-hover, var(--wp--preset--color--cedar-gold));
  --tc-btn-text: var(--tc-btn-secondary-text, var(--wp--preset--color--cedar-white));
  --tc-btn-text-hover: var(--tc-btn-secondary-text-hover, var(--wp--preset--color--cedar-dark));
  --tc-btn-radius: var(--tc-btn-secondary-radius, 2px);
  --tc-btn-border-width: var(--tc-btn-secondary-border-width, 2px);
  --tc-btn-border-color: var(--tc-btn-secondary-border-color, var(--wp--preset--color--cedar-gold));
}

/* Per-button custom override — inline --tc-btn-c-* vars set on the element. */
.tc-button.is-style-custom {
  --tc-btn-bg: var(--tc-btn-c-bg, var(--wp--preset--color--cedar-green));
  --tc-btn-bg-hover: var(--tc-btn-c-bg-hover, var(--tc-btn-c-bg, var(--wp--preset--color--cedar-green-medium)));
  --tc-btn-text: var(--tc-btn-c-text, var(--wp--preset--color--cedar-white));
  --tc-btn-text-hover: var(--tc-btn-c-text-hover, var(--tc-btn-c-text, var(--wp--preset--color--cedar-white)));
}

/*
 * Per-button TYPE override. Wins over the theme-level type (Brand Settings) via
 * !important, so an editor can force a single button to container or link
 * regardless of the scheme's site-wide type. Colors still flow from the vars.
 */
.tc-button.tc-button--link,
.tc-button.tc-button--link:hover {
  background-color: transparent !important;
  border-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tc-button.tc-button--link {
  text-decoration: underline !important;
}
.tc-button.tc-button--container {
  background-color: var(--tc-btn-bg) !important;
  border-width: var(--tc-btn-border-width) !important;
  padding-left: 1.75em !important;
  padding-right: 1.75em !important;
  text-decoration: none !important;
}
.tc-button.tc-button--container:hover {
  background-color: var(--tc-btn-bg-hover) !important;
}

/* -------------------------------------------------------------------------
 * Primary header / navigation (driven by Brand Settings → Header).
 * Body classes (tc-header-sticky / tc-header-transparent / tc-nav-button-last)
 * are added by brand-settings.php; tc-header.js sets --tc-header-h and toggles
 * .is-scrolled once the hero is scrolled past.
 * ---------------------------------------------------------------------- */

/* Sticky */
body.tc-header-sticky .tc-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Semi-transparent over the hero, opaque once scrolled past it. The core
 * background color class carries !important, so these do too (and outrank it
 * by specificity). */
body.tc-header-transparent .tc-header {
  background-color: color-mix(in srgb, var(--tc-header-bg, var(--wp--preset--color--cedar-dark)) var(--tc-header-opacity, 18%), transparent) !important;
  transition: background-color 0.3s ease;
}
body.tc-header-transparent .tc-header.is-scrolled {
  background-color: var(--tc-header-bg, var(--wp--preset--color--cedar-dark)) !important;
}
/* Pull the hero up under the (transparent) header so it shows through. */
body.tc-header-transparent .tc-hero {
  margin-top: calc(-1 * var(--tc-header-h, 80px));
}

/* Last nav item styled as a primary button (uses the button system vars). */
body.tc-nav-button-last .tc-header .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
  background-color: var(--tc-btn-primary-bg, var(--wp--preset--color--cedar-green));
  color: var(--tc-btn-primary-text, var(--wp--preset--color--cedar-white)) !important;
  padding: 0.6em 1.25em;
  border-radius: var(--tc-btn-primary-radius, 2px);
  transition: background-color 0.2s ease;
}
body.tc-nav-button-last .tc-header .wp-block-navigation-item:last-child > .wp-block-navigation-item__content:hover {
  background-color: var(--tc-btn-primary-bg-hover, var(--wp--preset--color--cedar-green-medium));
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.tc-footer {
  color: var(--wp--preset--color--cedar-cream);
}
.tc-footer__connect .tc-footer__social {
  margin-bottom: var(--wp--preset--spacing--40);
}
.tc-footer__phone {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--large);
}
.tc-footer__phone a {
  color: inherit;
  text-decoration: none;
}
.tc-footer__phone a:hover {
  text-decoration: underline;
}
.tc-footer__address {
  margin: 0;
}

/* Full-width SVG wordmark — sits flush at the very bottom of the footer. */
.tc-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--wp--preset--spacing--40) 0 0;
  color: var(--wp--preset--color--cedar-cream);
  opacity: 0.92;
}
.tc-footer__wordmark text {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
}

/* Asset placeholder (used until real imagery is delivered) */
.tc-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--wp--preset--color--cedar-green) 0,
    var(--wp--preset--color--cedar-green) 12px,
    var(--wp--preset--color--cedar-green-medium) 12px,
    var(--wp--preset--color--cedar-green-medium) 24px
  );
  color: var(--wp--preset--color--cedar-white);
  font-family: var(--wp--preset--font-family--nav);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--nav);
  opacity: 0.85;
}

/* Visually hidden but available to screen readers and crawlers. Used to append
 * context to otherwise-generic link text (e.g. "Learn More" + product name).
 * Not display:none — that would hide it from assistive tech too. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Rich-text container (shared standard via tc_rich_text()).
 * A WYSIWYG field supplies its own <p>/<ul>/<ol> children, so collapse their
 * outer margins and let the container's own margin stay authoritative. Inner
 * spacing is set here rather than inherited, so paragraph rhythm is the same
 * whether the field is a textarea (one text node, no children) or a wysiwyg. */
.tc-richtext > :first-child {
  margin-top: 0;
}
.tc-richtext > :last-child {
  margin-bottom: 0;
}
.tc-richtext > * + * {
  margin-top: 0.75em;
}
/* `list-style` is inherited, and several rich-text containers sit inside
 * list-based layouts that reset it (`.tc-product-slider__track`,
 * `.tc-info-cards__grid`, …). Without the revert, a list typed into the field
 * renders with no bullets. Reverting restores the UA default — disc for ul,
 * decimal for ol. */
.tc-richtext ul,
.tc-richtext ol {
  padding-left: 1.25em;
  list-style: revert;
}

/* Block background-color utility (shared standard via tc_block_bg()).
 * A block sets --tc-bg-color inline and adds .tc-has-bg-color plus the
 * matching text-contrast class. */
.tc-has-bg-color {
  background-color: var(--tc-bg-color);
}
.tc-on-dark {
  color: var(--wp--preset--color--cedar-cream);
}
.tc-on-light {
  color: var(--wp--preset--color--cedar-dark);
}

/* Eyebrow label utility shared by several blocks */
.tc-eyebrow {
  font-family: var(--wp--preset--font-family--nav);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--eyebrow);
  color: var(--wp--preset--color--cedar-gold);
  margin: 0 0 var(--wp--preset--spacing--20);
}

/* Badge / tag pill utility shared by several blocks (badge-cta, info-cards).
 * Lime-on-dark pill: cedar-green-medium ground + dark text reads well on both
 * light and dark section backgrounds (unlike gold, which fails on light). */
.tc-badge {
  display: inline-block;
  padding: 0.4em 1em;
  border-radius: 999px;
  background-color: var(--wp--preset--color--cedar-green-medium);
  color: var(--wp--preset--color--cedar-dark);
  font-family: var(--wp--preset--font-family--nav);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.2;
  white-space: nowrap;
}

/* Typographic polish (QA #15, 16, 26, 27, 36). `balance` evens out short display
 * headings so a 1-2 letter word never lands alone on the last line; `pretty`
 * trims single-word widows in body copy. Both are progressive-enhancement — they
 * no-op in browsers that don't support text-wrap. */
h1, h2, h3, h4 {
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
 * Shared media carousel (single-product image carousel). Sizing of the images
 * is inherited from each host block's __media rules; this only handles the
 * carousel mechanics (track translate, arrows, dots).
 * ---------------------------------------------------------------------- */
.tc-media-carousel {
  position: relative;
}

.tc-media-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.tc-media-carousel__track {
  display: flex;
  transition: transform 0.4s ease;
}

.tc-media-carousel__slide {
  flex: 0 0 100%;
  margin: 0;
  min-width: 0;
}

.tc-media-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  background: color-mix(in srgb, var(--wp--preset--color--cedar-dark) 70%, transparent);
  color: var(--wp--preset--color--cedar-white);
  transition: background-color 0.2s ease;
}
.tc-media-carousel__arrow:hover {
  background: var(--wp--preset--color--cedar-gold);
  color: var(--wp--preset--color--cedar-dark);
}
.tc-media-carousel__arrow--prev { left: var(--wp--preset--spacing--20); }
.tc-media-carousel__arrow--next { right: var(--wp--preset--spacing--20); }

.tc-media-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--wp--preset--spacing--30);
}

.tc-media-carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--cedar-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tc-media-carousel__dot.is-active {
  background: var(--wp--preset--color--cedar-gold);
}

/* -------------------------------------------------------------------------
 * Shared card carousel (horizontal scroll-snap row of cards + arrows).
 * ---------------------------------------------------------------------- */
.tc-card-carousel {
  position: relative;
}

.tc-card-carousel__track {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--wp--preset--spacing--20);
}
.tc-card-carousel__track::-webkit-scrollbar { display: none; }

.tc-card-carousel__item {
  flex: 0 0 clamp(220px, 26%, 300px);
  scroll-snap-align: start;
}

.tc-card-carousel__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--wp--preset--color--cedar-gold);
  color: var(--wp--preset--color--cedar-dark);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.35);
}
.tc-card-carousel__arrow--prev { left: calc(-1 * var(--wp--preset--spacing--20)); }
.tc-card-carousel__arrow--next { right: calc(-1 * var(--wp--preset--spacing--20)); }

@media (prefers-reduced-motion: reduce) {
  .tc-media-carousel__track { transition: none; }
  .tc-card-carousel__track { scroll-behavior: auto; }
}

/* Award list with optional badge images (beer + spirit PDPs). */
.tc-award-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.tc-award {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}
.tc-award__badge {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.tc-award__name {
  line-height: 1.3;
}