/*
Theme Name: Hats and Mittens
Theme URI:
Author: Grapevyne Media
Author URI:
Description:
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hats-and-mittens
Tags:
*/



:root {
	 --hm-radius: 24px;
  	--hm-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 	--hm-transition: 300ms ease;
	--hm-font-heading: var(--wp--preset--font-family--heading);
	--hm-font-body: var(--wp--preset--font-family--body);

	--hm-h1: clamp(3.5rem, 5.5vw, 6.5rem);
	--hm-h2: clamp(2.5rem, 4vw, 4rem);
	--hm-h3: clamp(2rem, 3.5vw, 3.05rem);
	--hm-h4: clamp(1.5rem, 2.4vw, 2.25rem);
	--hm-h5: clamp(1.25rem, 1.8vw, 1.6rem);
	--hm-h6: clamp(1rem, 1.2vw, 1.15rem);
}
p {
  font-size: clamp(1rem, 1.5vw, 1.125rem); /* scales between 16px and 18px */
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--hm-font-heading);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: .02em;
	margin-top: 0;
}

h1 {
	font-size: var(--hm-h1);
}

h2 {
	font-size: var(--hm-h2);
}

h3 {
	font-size: var(--hm-h3);
}

h4 {
	font-size: var(--hm-h4);
	line-height: 1;
}

h5 {
	font-size: var(--hm-h5);
	line-height: 1.05;
	letter-spacing: 0;
}

h6 {
	font-size: var(--hm-h6);
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Optional block-theme editor/frontend helper classes */
.has-h-1-font-size {
	font-size: var(--hm-h1);
}

.has-h-2-font-size {
	font-size: var(--hm-h2);
}

.has-h-3-font-size {
	font-size: var(--hm-h3);
}

.has-h-4-font-size {
	font-size: var(--hm-h4);
}

.has-h-5-font-size {
	font-size: var(--hm-h5);
}

.has-h-6-font-size {
	font-size: var(--hm-h6);
}
.has-heading-font {
  font-family: var(--wp--preset--font-family--heading);
}

.has-body-font {
  font-family: var(--wp--preset--font-family--body);
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
/* Now your global defaults… */
:where(.is-layout-constrained) > * {
  margin-block-start: 0 !important;
}
:where(.wp-site-blocks) > * {
	margin-block-start: 0px;}

.hm-button-group {
		display: flex;
		flex-wrap: wrap;
		gap: 1.25rem;
		width: fit-content;
		max-width: 100%;
	}

/* Reveal */

.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  will-change: opacity, transform;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal[data-reveal="left"] {
  transform: translateX(-24px);
}

.js-reveal[data-reveal="right"] {
  transform: translateX(24px);
}

.js-reveal[data-reveal="zoom"] {
  transform: scale(0.94);
}

.js-reveal.is-visible[data-reveal="left"],
.js-reveal.is-visible[data-reveal="right"],
.js-reveal.is-visible[data-reveal="zoom"] {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.editor-styles-wrapper {

	background: var(--wp--preset--color--off-white, #f3f0f0);

}

.editor-styles-wrapper .js-reveal {

	opacity: 1;
	transform: none;

}
/* ================================

   Global Buttons

   ================================ */

.hm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	height: 38px;
	padding: .25rem 1.55rem 0;
	border: none;
	border-radius: 999px;
	background:#96191c;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		transform 200ms ease,
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease;
}

.hm-button:hover,
.hm-button:focus-visible {
	background: var(--wp--preset--color--bright-red, #d91b2d);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Optional secondary style */
.hm-button--secondary {
	background: transparent;
	border: 2px solid var(--wp--preset--color--deep-red, #b5121b);
	color: var(--wp--preset--color--deep-red, #b5121b);
}
.hm-button--secondary:hover,
.hm-button--secondary:focus-visible {
	background: var(--wp--preset--color--deep-red, #b5121b);
	color: #ffffff;
}

/* White version for dark backgrounds */

.hm-button--white {
	background: #ffffff;
	color: var(--wp--preset--color--deep-red, #b5121b);
}

.hm-button--white:hover,
.hm-button--white:focus-visible {
	background: var(--wp--preset--color--off-white, #f3f0f0);
	color: var(--wp--preset--color--deep-red, #b5121b);
}
/* =========================
   STRING LINK EFFECT
========================= */

/* Text links only — excludes buttons */
:where(.wysiwyg, .entry-content, main p, main li, main h1, main h2, main h3, main h4, main h5, main h6) 
a:not(.hm-button):not(.wp-block-button__link):not([class*="button"]):not([class*="btn"]) {
  position: relative;
  display: inline-block;
  color: #58C7C7;
  text-decoration: none;
  line-height: 1.05;
  transition: color 0.35s ease-in-out;
}

/* string underline */
:where(.wysiwyg, .entry-content, main p, main li, main h1, main h2, main h3, main h4, main h5, main h6) 
a:not(.hm-button):not(.wp-block-button__link):not([class*="button"]):not([class*="btn"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.42em;

  height: 10px;

  background-image: url("data:image/svg+xml,%3Csvg width='180' height='10' viewBox='0 0 180 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5C15 1 30 1 45 5C60 9 75 9 90 5C105 1 120 1 135 5C150 9 165 9 179 5' stroke='%23c92f35' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: repeat-x;
  background-size: 180px 10px;
  background-position: left center;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;

  pointer-events: none;
}

/* hover */
:where(.wysiwyg, .entry-content, main p, main li, main h1, main h2, main h3, main h4, main h5, main h6) 
a:not(.hm-button):not(.wp-block-button__link):not([class*="button"]):not([class*="btn"]):hover {
  color: var(--wp--preset--color--bright-red);
}

:where(.wysiwyg, .entry-content, main p, main li, main h1, main h2, main h3, main h4, main h5, main h6) 
a:not(.hm-button):not(.wp-block-button__link):not([class*="button"]):not([class*="btn"]):hover::after {
  transform: scaleX(1);
}
.page .wp-block-post-title {
	display:none;}
@media (max-width: 800px) {
	.hm-ah__wrap, .hm-ah__inner { min-height: 405px;}}