/*
 * Freshwave 2026 – Shared Styles
 * Loaded on both the front-end AND inside the block editor.
 * Keep this file free of animations, parallax, and motion effects.
 */

/* ============================================================
   fw-panel-bg — pale-grey inset background panel
   ============================================================
   Apply to any wrapper block (Group, Cover, Section…).
   The background is rendered via ::before so it sits inset
   from the element's own edges by --wp--preset--spacing--20
   (5rem / ~80px at default font-size). Content/images inside
   are free to visually overflow the background band by design.

   Usage:
     <div class="fw-panel-bg"> … </div>

   Pad content separately with wp-spacing helpers or custom classes.
   ============================================================ */
.fw-panel-bg {
	position: relative;
	isolation: isolate;
}

.fw-panel-bg::before {
	content: '';
	position: absolute;
	inset: 0 var(--wp--preset--spacing--10, 2.5rem);
	background-color: var(--wp--preset--color--pale-grey, #F4F4F4);
	z-index: -1;
	pointer-events: none;
}

@media (max-width: 767px) {
	.fw-panel-bg::before {
		display: none;
	}
}

/* Stats divider */
.stats-divider .stat {
    position: relative;
}

.stats-divider > .stat:not(:last-child) {
    border-bottom: none;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.stats-divider > .stat:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 0, 0);
    width: 80%;
    height: 1px;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 160 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0.5H160' stroke='%23CCCCCC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


/* ============================================================
   Button helper styles — registered as block styles on core/button
   Apply via the Style panel in the block editor sidebar.
   ============================================================

   Variants:
     is-style-fw-dark-green  — dark-green bg, white text; hover reverses
     is-style-fw-yellow      — #FFCE12 bg, dark-green text; hover opacity 0.8
     is-style-fw-red         — coral (#FF5C5D) bg, dark-green text; hover opacity 0.8

   All variants share a 1px solid dark-green border.
   ============================================================ */

/* Shared base */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-fw-dark-green .wp-block-button__link,
.wp-block-button.is-style-fw-white .wp-block-button__link,
.wp-block-button.is-style-fw-yellow .wp-block-button__link,
.wp-block-button.is-style-fw-red .wp-block-button__link {
	padding-top: 0.667em;
	padding-right: 1.33em;
	padding-bottom: 0.667em;
	padding-left: 1.33em;
}

/* Outline button — hover fills dark green */
.wp-block-button.is-style-outline .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--dark-green, #14322B) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
	border-color: var(--wp--preset--color--dark-green, #14322B) !important;
}

/* Custom variant shared base */
.wp-block-button.is-style-fw-dark-green .wp-block-button__link,
.wp-block-button.is-style-fw-yellow .wp-block-button__link,
.wp-block-button.is-style-fw-red .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--dark-green, #14322B) !important;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* 1. Dark Green */
.wp-block-button.is-style-fw-dark-green .wp-block-button__link {
	background-color: var(--wp--preset--color--dark-green, #14322B) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
}

.wp-block-button.is-style-fw-dark-green .wp-block-button__link:hover,
.wp-block-button.is-style-fw-dark-green .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--white, #ffffff) !important;
	color: var(--wp--preset--color--dark-green, #14322B) !important;
}

/* 1. White */
.wp-block-button.is-style-fw-white .wp-block-button__link {
    background-color: var(--wp--preset--color--white, #14322B);
    color: var(--wp--preset--color--dark-green, #ffffff);
    border: 1px solid var(--wp--preset--color--dark-green, #14322B);
}

.wp-block-button.is-style-fw-white .wp-block-button__link:hover,
.wp-block-button.is-style-fw-white .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--dark-green, #ffffff);
    color: var(--wp--preset--color--white, #14322B);
    border-color: var(--wp--preset--color--white, #14322B);
}

/* 2. Yellow */
.wp-block-button.is-style-fw-yellow .wp-block-button__link {
	background-color: #FFCE12 !important;
	color: var(--wp--preset--color--dark-green, #14322B) !important;
}

.wp-block-button.is-style-fw-yellow .wp-block-button__link:hover,
.wp-block-button.is-style-fw-yellow .wp-block-button__link:focus {
	opacity: 0.8;
}

/* 3. Red / Coral */
.wp-block-button.is-style-fw-red .wp-block-button__link {
	background-color: var(--wp--preset--color--coral, #FF5C5D) !important;
	color: var(--wp--preset--color--dark-green, #14322B) !important;
}

.wp-block-button.is-style-fw-red .wp-block-button__link:hover,
.wp-block-button.is-style-fw-red .wp-block-button__link:focus {
	opacity: 0.8;
}


/* ============================================================
   Stats divider
   ============================================================ */

@media (min-width: 768px) {
    .stats-divider .stat {
        padding: 0 46px;
    }

    .stats-divider > .stat:not(:last-child) {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .stats-divider > .stat:not(:last-child)::after {
        content: '';
        position: absolute;
        left: auto;
        right: 0;
        top: 50%;
        transform: translate3d(50%, -50%, 0);
        width: 64px;
        height: 155px;
        background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 65 155' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M64.5 0.2L0.5 154.7' stroke='%23CCCCCC'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}