/**
 * Block Style Variations
 *
 * Custom styles for core WordPress blocks.
 *
 * @package ThemeBlocks
 */

/* ==========================================================================
   Button Styles
   ========================================================================== */

/* Gradient Button */
.wp-block-button.is-style-gradient .wp-block-button__link {
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--primary, #0073aa) 0%,
    var(--wp--preset--color--secondary, #005177) 100%
  );
  border: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Shadow Button */
.wp-block-button.is-style-shadow .wp-block-button__link {
  box-shadow: 0 4px 14px rgb(0 0 0 / 20%);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Pill Shape Button */
.wp-block-button.is-style-rounded-full .wp-block-button__link {
  border-radius: 50px;
  padding-left: 2em;
  padding-right: 2em;
}

/* Underline Button */
.wp-block-button.is-style-underline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--primary, #0073aa);
  border: none;
  border-bottom: 2px solid currentcolor;
  border-radius: 0;
  padding: 0.5em 0;
  transition: border-color 0.2s ease;
}

/* Arrow Button */
.wp-block-button.is-style-icon-arrow .wp-block-button__link::after {
  content: ' \2192';
  transition: transform 0.2s ease;
  display: inline-block;
}

/* Button Hover States */
.wp-block-button.is-style-gradient .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.wp-block-button.is-style-shadow .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
}

.wp-block-button.is-style-underline .wp-block-button__link:hover {
  border-bottom-width: 3px;
}

.wp-block-button.is-style-icon-arrow .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   Quote Styles
   ========================================================================== */

/* Bordered Quote */
.wp-block-quote.is-style-bordered {
  border-left: 4px solid var(--wp--preset--color--primary, #0073aa);
  padding-left: 1.5em;
  margin-left: 0;
  font-style: italic;
}

/* Boxed Quote */
.wp-block-quote.is-style-boxed {
  background: var(--wp--preset--color--tertiary, #f7f7f7);
  padding: 2em;
  border-radius: 8px;
  border: none;
  margin: 1.5em 0;
}

.wp-block-quote.is-style-boxed cite {
  display: block;
  margin-top: 1em;
  font-size: 0.9em;
  opacity: 0.8;
}

/* Quote Marks */
.wp-block-quote.is-style-quote-marks {
  position: relative;
  padding-left: 3em;
  border: none;
}

.wp-block-quote.is-style-quote-marks::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.2em;
  font-size: 4em;
  line-height: 1;
  color: var(--wp--preset--color--primary, #0073aa);
  opacity: 0.3;
}

/* Minimal Quote */
.wp-block-quote.is-style-minimal {
  border: none;
  padding: 0;
  font-size: 1.25em;
  line-height: 1.6;
}

.wp-block-quote.is-style-minimal cite {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Image Styles
   ========================================================================== */

/* Image with Shadow */
.wp-block-image.is-style-shadow img {
  box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
  transition: box-shadow 0.3s ease;
}

/* Image with Border */
.wp-block-image.is-style-border img {
  border: 4px solid var(--wp--preset--color--tertiary, #e0e0e0);
  padding: 4px;
  background: #fff;
}

/* Polaroid Style */
.wp-block-image.is-style-polaroid {
  background: #fff;
  padding: 10px 10px 40px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  transform: rotate(-2deg);
}

.wp-block-image.is-style-polaroid img {
  display: block;
}

.wp-block-image.is-style-polaroid figcaption {
  text-align: center;
  margin-top: 10px;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

/* Hover Zoom */
.wp-block-image.is-style-hover-zoom {
  overflow: hidden;
}

.wp-block-image.is-style-hover-zoom img {
  transition: transform 0.3s ease;
}

/* Image Hover States */
.wp-block-image.is-style-shadow:hover img {
  box-shadow: 0 15px 40px rgb(0 0 0 / 20%);
}

.wp-block-image.is-style-hover-zoom:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   Separator Styles
   ========================================================================== */

/* Thick Separator */
.wp-block-separator.is-style-thick {
  height: 4px;
  border: none;
  background: currentcolor;
}

/* Dotted Separator */
.wp-block-separator.is-style-dotted {
  border: none;
  border-top: 3px dotted currentcolor;
  background: transparent;
  height: auto;
}

/* Gradient Separator */
.wp-block-separator.is-style-gradient {
  border: none;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--wp--preset--color--primary, #0073aa) 50%,
    transparent 100%
  );
}

/* Ornament Separator */
.wp-block-separator.is-style-ornament {
  border: none;
  height: auto;
  background: transparent;
  text-align: center;
  overflow: visible;
}

.wp-block-separator.is-style-ornament::before {
  content: '\2022  \2022  \2022';
  letter-spacing: 0.5em;
  color: var(--wp--preset--color--primary, #0073aa);
}

/* ==========================================================================
   Group Styles
   ========================================================================== */

/* Card Style */
.wp-block-group.is-style-card {
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

/* Shadow Style */
.wp-block-group.is-style-shadow {
  box-shadow: 0 10px 40px rgb(0 0 0 / 10%);
  border-radius: 8px;
}

/* Left Border */
.wp-block-group.is-style-border-left {
  border-left: 4px solid var(--wp--preset--color--primary, #0073aa);
  padding-left: 1.5em;
}

/* Glass Effect */
.wp-block-group.is-style-glass {
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 12px;
  padding: 2em;
}

/* ==========================================================================
   List Styles
   ========================================================================== */

/* Checkmarks List */
.wp-block-list.is-style-checkmarks {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-checkmarks li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 0.5em;
}

.wp-block-list.is-style-checkmarks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--primary, #0073aa);
  font-weight: 700;
}

/* Arrows List */
.wp-block-list.is-style-arrows {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-arrows li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 0.5em;
}

.wp-block-list.is-style-arrows li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--primary, #0073aa);
}

/* No Bullets List */
.wp-block-list.is-style-no-bullets {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-no-bullets li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--wp--preset--color--tertiary, #e0e0e0);
}

/* Inline List */
.wp-block-list.is-style-inline {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
}

.wp-block-list.is-style-inline li {
  display: inline-flex;
  align-items: center;
}

.wp-block-list.is-style-inline li::before {
  content: '\2022';
  margin-right: 0.5em;
  color: var(--wp--preset--color--primary, #0073aa);
}

/* List Pseudo-class States */
.wp-block-list.is-style-no-bullets li:last-child {
  border-bottom: none;
}