/**
 * Gutenberg Block Styles
 * Styles for WordPress core blocks matching ESKON theme
 *
 * @package ESKON_Precision
 */

/* ==========================================================================
   Layout - Alignments
   ========================================================================== */

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group.alignfull {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ==========================================================================
   Group Block
   ========================================================================== */

.wp-block-group {
    padding: 2rem;
}

.wp-block-group.has-background {
    padding: 3rem 2rem;
}

/* Dark background group */
.wp-block-group.has-dark-background-color,
.wp-block-group.has-navy-background-color {
    color: #fff;
}

.wp-block-group.has-dark-background-color h1,
.wp-block-group.has-dark-background-color h2,
.wp-block-group.has-dark-background-color h3,
.wp-block-group.has-dark-background-color h4,
.wp-block-group.has-navy-background-color h1,
.wp-block-group.has-navy-background-color h2,
.wp-block-group.has-navy-background-color h3,
.wp-block-group.has-navy-background-color h4 {
    color: #fff;
}

/* ==========================================================================
   Columns Block
   ========================================================================== */

.wp-block-columns {
    gap: 2rem;
    margin-bottom: 2rem;
}

.wp-block-column {
    margin-bottom: 0;
}

/* Columns responsive */
@media (max-width: 781px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 1;
    }
}

/* ==========================================================================
   Heading Block
   ========================================================================== */

.wp-block-heading {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1rem;
}

h1.wp-block-heading {
    font-size: clamp(2.5rem, 6vw, 4rem);
}

h2.wp-block-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

h3.wp-block-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4.wp-block-heading {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

/* Gold accent heading */
.wp-block-heading.has-gold-color,
.wp-block-heading.has-copper-color {
    color: var(--eskon-gold);
}

/* ==========================================================================
   Paragraph Block
   ========================================================================== */

.wp-block-paragraph {
    font-family: var(--font-body);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.wp-block-paragraph.has-large-font-size {
    font-size: 1.25rem;
    line-height: 1.6;
}

.wp-block-paragraph.has-x-large-font-size {
    font-size: 1.5rem;
    line-height: 1.5;
}

/* Lead paragraph style */
.is-style-lead,
.wp-block-paragraph.is-style-lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Button Block
   ========================================================================== */

.wp-block-button {
    margin-bottom: 1rem;
}

.wp-block-button__link {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 1rem 2rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Primary button (gold) */
.wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
    background: var(--eskon-gold);
    color: var(--eskon-dark);
}

.wp-block-button__link:hover {
    background: #e6a620;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(247, 183, 49, 0.4);
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--eskon-gold);
    border-color: var(--eskon-gold);
    color: var(--eskon-dark);
}

/* Button on dark background */
.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: #fff;
    color: #fff;
}

/* Buttons group */
.wp-block-buttons {
    gap: 1rem;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Image Block
   ========================================================================== */

.wp-block-image {
    margin-bottom: 2rem;
}

.wp-block-image img {
    border-radius: 8px;
}

.wp-block-image.is-style-rounded img {
    border-radius: 50%;
}

/* Image with shadow */
.wp-block-image.is-style-shadow img {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   List Block
   ========================================================================== */

.wp-block-list {
    font-family: var(--font-body);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.wp-block-list li {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Color Overrides - Override WP core has-text-color
   WordPress generates: .has-text-color{color: var(--wp--preset--color--text) !important;}
   We need more specific selectors to override this.
   ========================================================================== */

/* White color - override has-text-color */
.has-white-color.has-text-color,
.has-white-color.has-text-color strong,
p.has-white-color.has-text-color,
p.has-white-color.has-text-color strong,
h1.has-white-color.has-text-color,
h2.has-white-color.has-text-color,
h3.has-white-color.has-text-color,
h4.has-white-color.has-text-color,
ul.wp-block-list.has-white-color.has-text-color,
ul.wp-block-list.has-white-color.has-text-color li,
ul.wp-block-list.has-white-color.has-text-color li strong,
.wp-block-list.has-white-color,
.wp-block-list.has-white-color li,
.wp-block-list.has-white-color li strong {
    color: #ffffff !important;
}

/* Gold color - override has-text-color */
.has-gold-color.has-text-color,
.has-gold-color.has-text-color strong,
p.has-gold-color.has-text-color,
h1.has-gold-color.has-text-color,
h2.has-gold-color.has-text-color,
h3.has-gold-color.has-text-color,
h4.has-gold-color.has-text-color,
.wp-block-heading.has-gold-color.has-text-color {
    color: var(--eskon-gold, #d4af37) !important;
}

/* Dark color - override has-text-color */
.has-dark-color.has-text-color,
.has-dark-color.has-text-color strong,
p.has-dark-color.has-text-color,
h1.has-dark-color.has-text-color,
h2.has-dark-color.has-text-color,
h3.has-dark-color.has-text-color,
h4.has-dark-color.has-text-color,
.wp-block-heading.has-dark-color.has-text-color {
    color: var(--eskon-dark, #0a1628) !important;
}

/* Check mark list style */
.wp-block-list.is-style-checkmark {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-checkmark li {
    position: relative;
    padding-left: 2rem;
}

.wp-block-list.is-style-checkmark li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--eskon-gold);
    font-weight: bold;
}

/* ==========================================================================
   Quote Block
   ========================================================================== */

.wp-block-quote {
    border-left: 4px solid var(--eskon-gold);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: rgba(247, 183, 49, 0.1);
    border-radius: 0 8px 8px 0;
}

.wp-block-quote p {
    font-size: 1.1rem;
    font-style: italic;
    margin: 0;
}

.wp-block-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--eskon-gray);
    font-style: normal;
}

/* ==========================================================================
   Separator Block
   ========================================================================== */

.wp-block-separator {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 3rem auto;
    max-width: 100px;
}

.wp-block-separator.is-style-wide {
    max-width: 100%;
}

.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
}

.wp-block-separator.is-style-dots::before {
    content: "···";
    color: var(--eskon-gold);
    font-size: 1.5rem;
    letter-spacing: 1rem;
}

/* ==========================================================================
   Spacer Block
   ========================================================================== */

.wp-block-spacer {
    margin: 0;
}

/* ==========================================================================
   Cover Block
   ========================================================================== */

.wp-block-cover {
    min-height: 400px;
    padding: 4rem 2rem;
    margin-bottom: 2rem;
}

.wp-block-cover__inner-container {
    max-width: 1200px;
    margin: 0 auto;
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3 {
    color: #fff;
}

/* ==========================================================================
   Media & Text Block
   ========================================================================== */

.wp-block-media-text {
    margin-bottom: 3rem;
}

.wp-block-media-text .wp-block-media-text__content {
    padding: 2rem;
}

@media (max-width: 600px) {
    .wp-block-media-text {
        display: block !important;
    }

    .wp-block-media-text .wp-block-media-text__media,
    .wp-block-media-text .wp-block-media-text__content {
        width: 100% !important;
    }
}

/* ==========================================================================
   Table Block
   ========================================================================== */

.wp-block-table {
    margin-bottom: 2rem;
    overflow-x: auto;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.wp-block-table th {
    background: var(--eskon-dark);
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wp-block-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

/* ==========================================================================
   Gallery Block
   ========================================================================== */

.wp-block-gallery {
    margin-bottom: 2rem;
}

.wp-block-gallery .wp-block-image {
    margin: 0;
}

.wp-block-gallery .wp-block-image img {
    border-radius: 8px;
}

/* ==========================================================================
   ESKON Custom Block Styles
   ========================================================================== */

/* Feature card style */
.feature-card {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Variant card style (for products) */
.variant-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

/* Protocol icon box */
.protocol-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.protocol-icon img {
    max-width: 60px;
    height: auto;
    filter: grayscale(100%) brightness(2);
    transition: filter 0.3s;
}

.protocol-icon:hover img {
    filter: none;
}

/* Integration item */
.integration-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 781px) {
    .wp-block-group.alignfull {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .wp-block-heading {
        font-size: 1.5rem !important;
    }

    h3.wp-block-heading {
        font-size: 1.2rem !important;
    }

    h4.wp-block-heading {
        font-size: 1rem !important;
    }

    .wp-block-button__link {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.85rem !important;
        width: 100%;
        text-align: center;
    }

    .wp-block-buttons {
        flex-direction: column;
    }

    .feature-card,
    .variant-card {
        margin-bottom: 1.5rem;
    }
}