/*
Theme Name: Mountain Misfits
Theme URI: https://mtnmisfits.com
Author: Radd Icenoggle
Author URI: https://mtnmisfits.com
Description: Mountain Misfits — a field-station block theme for natural history, outdoor adventure, photography, and science storytelling. Dark cinematic field-naturalist with editorial editability. WooCommerce-compatible.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mountain-misfits
Tags: block-theme, full-site-editing, dark, editorial, two-columns, wide-blocks, custom-colors, custom-logo, custom-menu, featured-image-header, featured-images, footer-widgets, threaded-comments, woocommerce
*/

/* ----------------------------------------------------------------
   Front-end stylesheet for the Mountain Misfits block theme.
   Most visual tokens live in theme.json. This file is for things
   theme.json can’t (yet) express: image-zone placeholders, hover
   states, decorative topo background, complex grids, WooCommerce
   overrides, and accessibility niceties.
   Mirror of prototype.css with selectors retargeted at native WP
   block class names.
   ---------------------------------------------------------------- */

:root {
  --mm-display: "Big Shoulders Display", "Oswald", sans-serif;
  --mm-serif:   "Newsreader", "Source Serif Pro", Georgia, serif;
  --mm-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* Base */
body {
  font-family: var(--mm-serif);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link (a11y) */
.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--mm-ember, #ec7a3c);
  color: var(--wp--preset--color--mm-ink, #0c0d0b);
  padding: 10px 16px;
  font-family: var(--mm-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  top: 16px; left: 16px;
}

/* Display headings — let theme.json do the bulk, this is the fine grain */
.has-display-1-font-size, h1.wp-block-heading.has-display-1-font-size {
  text-wrap: balance;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

/* Eyebrow utility — pairs with a class added in block patterns: */
/* <p class="wp-block-paragraph eyebrow">…</p> */
.eyebrow {
  font-family: var(--mm-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mm-ember, #ec7a3c);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}

/* Pull-quote */
.is-style-mm-pullquote {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.1;
  color: var(--wp--preset--color--mm-bone, #f1ede2);
  border-left: 3px solid var(--wp--preset--color--mm-ember, #ec7a3c);
  padding: 8px 0 8px 20px;
  margin: 28px 0 0;
}

/* Buttons — block theme button overrides */
.wp-block-button__link {
  font-family: var(--mm-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 14px 22px;
  transition: background .2s ease, color .2s ease;
}
.wp-block-button.is-style-ember .wp-block-button__link {
  background: var(--wp--preset--color--mm-ember, #ec7a3c);
  color: var(--wp--preset--color--mm-ink, #0c0d0b);
}
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--mm-bone, #f1ede2);
  border: 1px solid rgba(241,237,226,.35);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: rgba(241,237,226,.06);
  border-color: var(--wp--preset--color--mm-bone, #f1ede2);
}
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--mm-sun, #f4c46a);
  outline-offset: 3px;
}

/* Cards (group block with class mm-card) */
.mm-card, .is-style-mm-card {
  background: var(--wp--preset--color--mm-stone, #1c1f23);
  border: 1px solid var(--wp--preset--color--mm-line, #2b2e30);
  padding: 28px 24px;
  border-radius: 4px;
  transition: border-color .25s ease;
}
.mm-card:hover, .is-style-mm-card:hover { border-color: var(--wp--preset--color--mm-ember, #ec7a3c); }

/* Image zone (group block + .mm-image-zone, ratio via aspect-ratio inline) */
.mm-image-zone, .is-style-mm-image-zone {
  position: relative;
  background: var(--wp--preset--color--mm-stone, #1c1f23);
  border: 1px solid var(--wp--preset--color--mm-line, #2b2e30);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-radius: 4px;
}
.mm-image-zone__meta {
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  width: 100%;
}
.mm-image-zone__tag {
  font-family: var(--mm-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--mm-ember, #ec7a3c);
}
.mm-image-zone__caption {
  font-family: var(--mm-mono); font-size: 11px;
  color: var(--wp--preset--color--mm-bone-dim, #c8c3b3);
  margin-top: 4px;
}

/* Pillars (category tile) */
.mm-pillar {
  background: var(--wp--preset--color--mm-stone, #1c1f23);
  border: 1px solid var(--wp--preset--color--mm-line, #2b2e30);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.mm-pillar:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--mm-ember, #ec7a3c); }

/* Header / footer parts */
.mm-site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,13,11,.78);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--wp--preset--color--mm-line-soft, #1f2225);
}
.mm-site-header .wp-block-navigation__container { gap: 14px 28px; }
.mm-site-header .wp-block-navigation-item__content {
  font-family: var(--mm-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mm-bone-dim, #c8c3b3);
}
.mm-site-header .wp-block-navigation-item__content:hover,
.mm-site-header .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--mm-bone, #f1ede2);
}

.mm-site-footer {
  background: #08090a;
  color: var(--wp--preset--color--mm-bone-dim, #c8c3b3);
  border-top: 1px solid var(--wp--preset--color--mm-line-soft, #1f2225);
}

/* Post grid */
.wp-block-query .wp-block-post-title a {
  font-family: var(--mm-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--mm-bone, #f1ede2);
  transition: color .2s ease;
}
.wp-block-query .wp-block-post-title a:hover { color: var(--wp--preset--color--mm-ember, #ec7a3c); }

.wp-block-query .wp-block-post-date,
.wp-block-query .wp-block-post-terms {
  font-family: var(--mm-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mm-mute, #8a8478);
}

/* Pull a single article into a nice editorial measure */
.single .wp-block-post-content > * { max-width: 68ch; }
.single .wp-block-post-content > .alignwide,
.single .wp-block-post-content > .alignfull,
.single .wp-block-post-content > figure { max-width: none; }
.single .wp-block-post-content p { line-height: 1.7; }
.single .wp-block-post-content blockquote {
  border-left: 3px solid var(--wp--preset--color--mm-ember, #ec7a3c);
  font-family: var(--mm-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  padding: 8px 0 8px 20px;
  margin: 28px 0;
  color: var(--wp--preset--color--mm-bone, #f1ede2);
}

/* WooCommerce — keep it consistent with the field-station aesthetic */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--mm-display) !important;
  font-weight: 700;
  font-size: 20px !important;
  color: var(--wp--preset--color--mm-bone, #f1ede2);
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  font-family: var(--mm-mono) !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--mm-bone, #f1ede2) !important;
}
.woocommerce .button,
.wc-block-components-button {
  font-family: var(--mm-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  background: var(--wp--preset--color--mm-ember, #ec7a3c) !important;
  color: var(--wp--preset--color--mm-ink, #0c0d0b) !important;
}

/* Forms (contact / newsletter) */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], textarea, select {
  background: var(--wp--preset--color--mm-ink, #0c0d0b);
  border: 1px solid var(--wp--preset--color--mm-line, #2b2e30);
  color: var(--wp--preset--color--mm-bone, #f1ede2);
  font-family: var(--mm-serif);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 2px;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--wp--preset--color--mm-ember, #ec7a3c);
}

/* A11y: visible focus everywhere */
a:focus-visible, button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--mm-sun, #f4c46a);
  outline-offset: 3px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Mountain Misfits width correction v1.3 */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: min(1120px, calc(100vw - 48px)) !important;
}

body .is-layout-constrained > .alignwide {
  max-width: min(1480px, calc(100vw - 48px)) !important;
}

.mm-site-header > .wp-block-group {
  max-width: min(1480px, calc(100vw - 48px)) !important;
  width: 100% !important;
}

.mm-site-header .wp-block-navigation {
  flex: 1 1 auto;
  justify-content: center;
}

.mm-site-header .wp-block-buttons {
  flex: 0 0 auto;
}

.mm-site-header .wp-block-button__link {
  white-space: nowrap;
}

@media (max-width: 900px) {
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
  body .is-layout-constrained > .alignwide,
  .mm-site-header > .wp-block-group {
    max-width: calc(100vw - 32px) !important;
  }
}