/* MegaOne Digital Marketing design language — layout/spacing/buttons only.
   No MegaOne logos, images, or copy. Brand colors from brand.css variables. */

:root {
  --yw-container: 1140px;
  --yw-section-pad: clamp(5rem, 12vw, 12.5rem);
  --yw-section-pad-sm: clamp(4rem, 8vw, 8.125rem);
  --yw-gutter: 1rem;
  --yw-nav-h: 90px;
  --yw-ease: 0.5s ease;
}

/* Container rhythm */
.wp-site-blocks > .wp-block-group.alignwide,
.wp-block-group.is-layout-constrained > .wp-block-group,
.entry-content > .alignwide,
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce {
  max-width: var(--yw-container);
}

/* Airy sections (MegaOne ~130–200px) */
.yw-section,
.wp-block-group.yw-section,
.home .wp-block-group.has-background {
  padding-top: var(--yw-section-pad);
  padding-bottom: var(--yw-section-pad);
}
.yw-section-sm { padding-top: var(--yw-section-pad-sm); padding-bottom: var(--yw-section-pad-sm); }

/* Oversized headlines */
h1, .yw-hero-title, .wp-block-post-title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.15;
  font-weight: 700;
}
h2 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); line-height: 1.2; }

/* Pill CTAs — pink → dark hover (MegaOne pattern) */
.wp-block-button__link,
.wp-element-button,
button.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
  background: var(--brand-btn-bg) !important;
  color: #fff !important;
  border: 1px solid var(--brand-btn-bg) !important;
  border-radius: 999px !important;
  padding: 10px 35px !important;
  font-weight: 600 !important;
  font-family: var(--brand-font-heading) !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  transition: background var(--yw-ease), border-color var(--yw-ease), color var(--yw-ease), transform var(--yw-ease);
  box-shadow: none !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button.button:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
  background: #202020 !important;
  border-color: #202020 !important;
  color: #fff !important;
}

/* Outline / secondary CTA */
.wp-block-button.is-style-outline .wp-block-button__link,
.yw-btn-outline {
  background: transparent !important;
  color: #202020 !important;
  border: 1px solid #202020 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.yw-btn-outline:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Accent yellow fill utility (hero wedges / badges — fills only) */
.yw-accent-bg,
.has-brand-accent-background-color { background-color: var(--brand-accent) !important; color: #202020 !important; }
.yw-dark-bg,
.has-brand-secondary-background-color { background-color: #202020 !important; color: #fff !important; }

/* Cards — soft shadow, 4px radius */
.yw-card,
.wp-block-column.is-style-card,
ul.products li.product,
.wc-block-grid__product,
.wp-block-group.yw-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 10px #e1e1e1;
  overflow: hidden;
  transition: box-shadow var(--yw-ease), transform var(--yw-ease);
}
ul.products li.product:hover,
.wc-block-grid__product:hover,
.yw-card:hover {
  box-shadow: 2px 2px 18px #d0d0d0;
  transform: translateY(-2px);
}

/* Shop grid breathing room */
ul.products { gap: 1.5rem; }
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--brand-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
}
ul.products li.product .price { color: var(--brand-price); font-weight: 700; }
span.onsale {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.35em 0.75em !important;
  line-height: 1.2 !important;
  min-height: auto !important;
  min-width: auto !important;
}

/* Sticky header feel (Extendable site header) */
header.wp-block-template-part,
.wp-block-navigation {
  font-family: var(--brand-font-heading);
  font-weight: 500;
  font-size: 1.05rem;
}
.wp-block-navigation .wp-block-navigation-item__content { padding: 0.4em 0.85em; }

/* Testimonial / quote cards */
.yw-quote,
blockquote {
  border: 0;
  background: #fff;
  box-shadow: 2px 2px 15px #e1e1e1;
  border-radius: 0;
  padding: 2rem;
  font-size: 1.125rem;
}

/* Form inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], textarea, select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 0.75em 1em;
  transition: border-color var(--yw-ease);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
  border-color: var(--brand-primary);
}

/* Footer */
footer.wp-block-template-part,
.yw-footer {
  background: #202020;
  color: #f0f0f0;
  padding-top: 4rem;
  padding-bottom: 2rem;
}
footer a { color: #fff; }

/* MegaOne-inspired hero: absolute rotated rounded SVG wedges (design language only) */
.yw-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(28rem, 70vh, 41rem);
  background: #fff;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.yw-hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.yw-hero-wedge {
  position: absolute;
  display: block;
}
/* Primary yellow diagonal (MegaOne yellow-square pattern: rotate -45 rounded rect) */
.yw-hero-wedge-yellow {
  right: 0;
  top: -340px;
  height: 335%;
  width: auto;
  max-width: none;
}
/* Small pink accent peek (bottom-left) */
.yw-hero-wedge-pink {
  left: -2%;
  bottom: -8%;
  height: 42%;
  width: auto;
  opacity: 0.92;
}
/* Small charcoal accent (top-right edge of yellow) */
.yw-hero-wedge-dark {
  right: 8%;
  top: -4%;
  height: 28%;
  width: auto;
  opacity: 0.85;
}
.yw-hero-columns {
  position: relative;
  z-index: 1;
  min-height: inherit;
  align-items: stretch !important;
}
.yw-hero-copy {
  background: transparent;
}
.yw-hero-panel {
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Fallback panel fill if SVG unsupported / editor canvas */
@supports not (display: grid) {
  .yw-hero-panel { background: var(--brand-accent); }
}
/* Utility wedges for other sections */
.yw-wedge-yellow,
.yw-hero-wedge-css {
  background: var(--brand-accent);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.yw-wedge-dark { background: #202020; color: #fff; }
.yw-wedge-pink { background: var(--brand-primary); color: #fff; }

@media (max-width: 781px) {
  :root { --yw-section-pad: 4.5rem; --yw-section-pad-sm: 3.5rem; }
  h1, .yw-hero-title { font-size: clamp(2rem, 9vw, 2.75rem); }
  .yw-hero { min-height: 0; }
  .yw-hero-wedge-yellow {
    top: auto;
    bottom: -40%;
    right: -15%;
    height: 120%;
    opacity: 0.95;
  }
  .yw-hero-wedge-pink { height: 28%; bottom: -4%; left: -8%; }
  .yw-hero-wedge-dark { display: none; }
  .yw-hero-panel {
    background: color-mix(in srgb, var(--brand-accent) 88%, transparent);
  }
}