/**
 * Lightweight Blocks - Minimal CSS
 * Only ~3KB minified vs 136KB from theme
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
  /* Colors - Glozin inspired */
  --lwb-primary: #1a1a1a;
  --lwb-secondary: #666666;
  --lwb-accent: #c9a961;
  --lwb-light: #ffffff;
  --lwb-dark: #000000;
  
  /* Typography */
  --lwb-font-family: inherit;
  --lwb-font-weight-normal: 400;
  --lwb-font-weight-medium: 500;
  --lwb-font-weight-bold: 700;
  
  /* Spacing */
  --lwb-spacing-xs: 0.5rem;
  --lwb-spacing-sm: 1rem;
  --lwb-spacing-md: 1.5rem;
  --lwb-spacing-lg: 2rem;
  
  /* Transitions */
  --lwb-transition: all 0.3s ease;
}

/* ==========================================================================
   Heading Block
   ========================================================================== */
.lwb-heading {
  font-family: var(--lwb-font-family);
  font-weight: var(--lwb-font-weight-bold);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

/* Size Variants */
.lwb-heading--default { font-size: clamp(1.5rem, 4vw, 2rem); }
.lwb-heading--normal { font-size: clamp(1.75rem, 5vw, 2.5rem); }
.lwb-heading--medium { font-size: clamp(2rem, 6vw, 3rem); }
.lwb-heading--large { font-size: clamp(2.5rem, 8vw, 4rem); }
.lwb-heading--xlarge { font-size: clamp(3rem, 10vw, 5rem); }

/* ==========================================================================
   Button Block
   ========================================================================== */
.lwb-button-wrapper {
  display: block;
}

.lwb-button {
  --lwb-btn-radius: 0;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--lwb-font-family);
  font-weight: var(--lwb-font-weight-medium);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
  border-radius: var(--lwb-btn-radius);
  cursor: pointer;
  transition: var(--lwb-transition);
  position: relative;
  overflow: hidden;
}

/* Size Variants */
.lwb-button--small {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.lwb-button--medium {
  padding: 0.875rem 1.75rem;
  font-size: 0.8125rem;
}

.lwb-button--large {
  padding: 1.125rem 2.25rem;
  font-size: 0.875rem;
}

/* Style Variants */
.lwb-button--solid-dark {
  background: var(--lwb-dark);
  color: var(--lwb-light);
  border-color: var(--lwb-dark);
}

.lwb-button--solid-dark:hover {
  background: var(--lwb-accent);
  border-color: var(--lwb-accent);
  color: var(--lwb-dark);
}

.lwb-button--solid-light {
  background: var(--lwb-light);
  color: var(--lwb-dark);
  border-color: var(--lwb-light);
}

.lwb-button--solid-light:hover {
  background: var(--lwb-accent);
  border-color: var(--lwb-accent);
}

.lwb-button--outline-dark {
  background: transparent;
  color: var(--lwb-dark);
  border-color: var(--lwb-dark);
}

.lwb-button--outline-dark:hover {
  background: var(--lwb-dark);
  color: var(--lwb-light);
}

.lwb-button--outline-light {
  background: transparent;
  color: var(--lwb-light);
  border-color: var(--lwb-light);
}

.lwb-button--outline-light:hover {
  background: var(--lwb-light);
  color: var(--lwb-dark);
}

.lwb-button--underline {
  background: transparent;
  color: var(--lwb-dark);
  border: none;
  border-bottom: 2px solid var(--lwb-dark);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.lwb-button--underline:hover {
  border-bottom-color: var(--lwb-accent);
  color: var(--lwb-accent);
}

.lwb-button--text {
  background: transparent;
  color: var(--lwb-dark);
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.lwb-button--text:hover {
  color: var(--lwb-accent);
}

/* Hover Effect Animation */
.lwb-button--solid-dark::before,
.lwb-button--solid-light::before,
.lwb-button--outline-dark::before,
.lwb-button--outline-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.lwb-button:hover::before {
  left: 100%;
}

/* ==========================================================================
   Shape Divider Block
   ========================================================================== */
.lwb-shape-divider {
  --lwb-shape-color: #ffffff;
  --lwb-shape-height: 100px;
  
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--lwb-shape-height);
  overflow: hidden;
  line-height: 0;
}

.lwb-shape-divider svg {
  display: block;
  width: calc(100% + 1.3px);
  height: 100%;
}

.lwb-shape--top {
  top: 0;
}

.lwb-shape--bottom {
  bottom: 0;
}

.lwb-shape--flip {
  transform: scaleX(-1);
}

.lwb-shape--top.lwb-shape--flip,
.lwb-shape--top:not(.lwb-shape--flip) {
  transform: rotateX(180deg);
}

.lwb-shape--top.lwb-shape--flip {
  transform: rotateX(180deg) scaleX(-1);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.lwb-text-left { text-align: left; }
.lwb-text-center { text-align: center; }
.lwb-text-right { text-align: right; }

/* ==========================================================================
   Editor Styles
   ========================================================================== */
.wp-block-lwb-heading,
.wp-block-lwb-button,
.wp-block-lwb-shape-divider {
  margin-bottom: 1rem;
}