/**
 * ===================================================
 * 1. ARROW LINK STYLES (Final Update with 4 Color States)
 * ===================================================
 */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; 
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  
  /* SET NORMAL TEXT COLOR */
  color: var(--text-color-normal); 
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pseudo-element for the SVG arrow */
.arrow-link::before {
  content: '';
  display: inline-block;
  
  width: 2.5rem; 
  height: 1.25rem; 
  
  /* SET NORMAL ARROW COLOR via currentColor */
  color: var(--arrow-color-normal); 
  
  /* SVG Data URI with stroke-width 2.5 for clarity */
  /* background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.72 109.67'%3E%3Cline y1='54.83' x2='199.1' y2='54.83' style='fill:none; stroke:currentColor; stroke-miterlimit:10; stroke-width:5.25px;'/%3E%3Cpolyline points='147.02 107.81 200 54.83 147.02 1.86' style='fill:none; stroke:currentColor; stroke-miterlimit:10; stroke-width:5.25px;'/%3E%3C/svg%3E");*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='40' y2='12'%3E%3C/line%3E%3Cpolyline points='30 4 42 12 30 20'%3E%3C/polyline%3E%3C/svg%3E");
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  opacity: 1; /* Ensure maximum clarity */
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HOVER STATES */
.arrow-link:hover {
  /* SET HOVER TEXT COLOR */
  color: var(--text-color-hover); 
}

.arrow-link:hover::before {
  /* SET HOVER ARROW COLOR */
  color: var(--arrow-color-hover); 
  
  /* Arrow movement on hover */
  transform: translateX(0.3rem); 
}

/* =========================================================
   SLIDER ARROW LINK (copy of arrow-link, but independent)
   - Text: normal  = var(--color-primary)
           hover   = var(--color-white)
   - Arrow: always white (custom SVG from Simon)
   ========================================================= */

.arrow-link-slider {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);

  color: var(--color-primary); /* normal text color */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* white SVG arrow via ::before, similar size as original */
.arrow-link-slider::before {
  content: '';
  display: inline-block;
  width: 2.5rem;
  height: 1.25rem;

  /* fixed white arrow (your SVG encoded as data URI) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.97 17.75'%3E%3Cline y1='8.88' x2='32.23' y2='8.88' style='fill:none;stroke:%23ffffff;stroke-miterlimit:10;stroke-width:.85px;'/%3E%3Cpolyline points='23.8 17.45 32.37 8.88 23.8 .3' style='fill:none;stroke:%23ffffff;stroke-miterlimit:10;stroke-width:.85px;'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;

  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover: text to white, arrow stays white and moves a bit */
.arrow-link-slider:hover,
.arrow-link-slider:focus-visible {
  color: var(--color-white);
}

.arrow-link-slider:hover::before,
.arrow-link-slider:focus-visible::before {
  transform: translateX(0.3rem);
}

/**
 * ===================================================
 * GEOMETRIC BUTTON STYLES (FINAL: TWO PSEUDO-ELEMENTS FOR BORDER & FILL)
 * Fixes: Guarantees skewed border and transparent center.
 * ===================================================
 */

.btn-geometric {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* padding: top/right/bottom/left */
  padding: 0.7rem 2.4rem 0.7rem 1.9rem;

  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;

  /* border color = element color (for SVG stroke) */
  color: var(--btn-border-normal, #00c9cf);

  /* background from shortcode (section color or transparent) */
  background-color: var(--btn-bg-normal, transparent);

  text-decoration: none;
  cursor: pointer;
  border: none;

  /* no clip-path needed anymore */
  overflow: visible;

  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

/* the label text uses its own color */
.btn-geometric-text {
  position: relative;
  z-index: 1;
  color: var(--btn-text-normal, #ffffff);
}

/* SVG border */
.btn-geometric-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* HOVER STATE */
.btn-geometric:hover {
  /* change border + SVG stroke color */
  color: var(--btn-border-hover, #00c9cf);
  /* background */
  background-color: var(--btn-bg-hover, transparent);
}

.btn-geometric:hover .btn-geometric-text {
  color: var(--btn-text-hover, #00c9cf);
}

/* Base button container */
.si-geo-svg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* inner spacing – tweak here for more/less space */
  padding: 0.9rem 2.8rem 0.9rem 2.2rem;

  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;

  /* colors controlled by shortcode via CSS vars */
  background-color: var(--geo-btn-bg-normal, transparent);
  text-decoration: none;
  border: none;
  cursor: pointer;

  overflow: visible;
}

/* Text layer */
.si-geo-svg-btn__label {
  position: relative;
  z-index: 2;
  color: var(--geo-btn-text-normal, #ffffff);
}

/* SVG outline as background image – SCALES with button size */
.si-geo-svg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background-image: url("/wp-content/themes/Impreza-child/geo-button-outline.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  pointer-events: none;
}

/* Hover: background + text color via vars; SVG border stays as in the file (white) */
.si-geo-svg-btn:hover {
  background-color: var(--geo-btn-bg-hover, transparent);
}

.si-geo-svg-btn:hover .si-geo-svg-btn__label {
  color: var(--geo-btn-text-hover, #00c9cf);
}

/* base button wrapper */
.svg-geo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* adjust inner space here */
  padding: 0.9rem 2.8rem 0.9rem 2.2rem;

  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;

  background-color: var(--svg-btn-bg);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

/* text */
.svg-geo-btn__label {
  position: relative;
  z-index: 2;
  color: var(--svg-btn-text);
}

/* INLINE SVG outline */
.svg-geo-btn__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* let SVG scale with button size */
  pointer-events: none;
  z-index: 1;
}

/* hover */
.svg-geo-btn:hover {
  background-color: var(--svg-btn-bg-hover);
}

.svg-geo-btn:hover .svg-geo-btn__label {
  color: var(--svg-btn-text-hover);
}

.svg-geo-btn:hover .svg-geo-btn__outline polygon {
  stroke: var(--svg-btn-border-hover);
}

/**
 * ===================================================
 * CONSTANT ANGLE BUTTON STYLES (TRANSFORM SKEW METHOD)
 * Guarantees a constant angle of 5 degrees.
 * ===================================================
 */

:root {
  /* Define the precise angle */
  --btn-skew-angle: 5deg; /* Adjust this value to change the slope */
  --btn-stroke-width: 1.2px; /* Matches SVG stroke width */
  
  /* Assuming global spacing vars like --space-sm are available */
}

.fixed-angle-btn {
    position: relative;
    display: inline-flex; 
    align-items: center;
    text-decoration: none;
    z-index: 1; 
    overflow: hidden; 

    /* Typography */
    font-family: var(--font-family-primary); 
    font-weight: 400;
    font-size: var(--font-size-lg);
    
    /* Set Padding using global spacing variables */
    padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md);
    
    /* --- CRITICAL: Apply the fixed angle skew to the container --- */
    transform: skewX(var(--btn-skew-angle));
    
    /* Set Text Color using the unique shortcode variable */
    color: var(--fixed-angle-text); 
    
    /* Ensure clean base */
    background: transparent !important;
    border: none !important;
    
    transition: all 0.3s ease-in-out;
}

/* 1. TEXT WRAPPER (Un-skews the text) */
.fixed-angle-btn__label {
    /* CRITICAL: Counter-skew the text to make it straight */
    transform: skewX(calc(var(--btn-skew-angle) * -1));
    display: block; 
    line-height: var(--line-height-reset);
    text-align: center;
    z-index: 2; /* Ensure text is above SVG */
}

/* 2. SVG (The Border and Background Layer) */
.fixed-angle-btn__outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Place SVG behind text */
}

/* HOVER STATES */
.fixed-angle-btn:hover {
    color: var(--fixed-angle-text-hover);
}

.fixed-angle-btn:hover .fixed-angle-btn__outline rect {
    /* Target the SVG rect to change color using unique hover variables */
    fill: var(--fixed-angle-bg-hover);
    stroke: var(--fixed-angle-border-hover);
}

/**
 * ===================================================
 * FINAL CSS: STRAIGHT EDGE BUTTON (.straight-edge-btn)
 * Guarantees: Straight Edges, Border, Transparency, and Custom Padding.
 * ===================================================
 */

:root {
  /* Define the unique structural variables */
  --btn-stroke-width: 0.053rem; /* 0.8504px stroke thickness */
  --btn-skew-amount: 1.5rem;    /* FIXED horizontal shift (24px) for the right side */
  
  /* --- CUSTOM PADDING VALUES (Based on user request) --- */
  --btn-padding-y: 0.9rem;      
  --btn-padding-left: 2.2rem;   
  --btn-padding-right: 2.8rem;  
}

.straight-edge-btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  z-index: 1; 
  overflow: hidden; 

  /* Typography */
  font-family: var(--font-family-primary); 
  font-weight: 400;
  font-size: var(--font-size-lg);
  
  /* Text Color */
  color: var(--straight-edge-text); 
  
  /* CRITICAL: Main element must be transparent and hold the shape definition */
  background-color: transparent !important; 
  border: none !important;

  /* Apply the correct four-point clip-path for straight edges */
  clip-path: polygon(
    0% 0%,        /* Top Left */
    100% 0%,      /* Top Right */
    calc(100% - var(--btn-skew-amount)) 100%, /* Bottom Right (Fixed Shift) */
    0% 100%       /* Bottom Left */
  );

  /* PADDING: Uses custom values */
  padding: var(--btn-padding-y) var(--btn-padding-right) var(--btn-padding-y) var(--btn-padding-left);
  
  transition: all 0.3s ease-in-out;
}

/* 1. BORDER FRAME (.straight-edge-btn__border-frame) - The outermost colored border */
.straight-edge-btn__border-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2; /* Furthest back layer */
  
  /* Use the BORDER color */
  background-color: var(--straight-edge-border) !important;
  clip-path: inherit; /* Inherits the shape */
  transition: background-color 0.3s ease-in-out;
}

/* 2. INNER FILL (.straight-edge-btn__fill-cutout) - The inner layer, cutting out the transparent space */
.straight-edge-btn__fill-cutout {
  position: absolute;
  z-index: -1; /* Placed between the border and the text */
  
  /* Offset from the border */
  top: var(--btn-stroke-width); 
  left: var(--btn-stroke-width); 

  /* Size reduced by twice the stroke width */
  width: calc(100% - (2 * var(--btn-stroke-width))); 
  height: calc(100% - (2 * var(--btn-stroke-width))); 
  
  /* --- Inner Fill Color (Matches Section BG or transparent) --- */
  background-color: var(--straight-edge-bg, transparent) !important; 
  clip-path: inherit; 
  
  transition: background-color 0.3s ease-in-out;
}

/* 3. TEXT WRAPPER */
.straight-edge-btn__label {
  display: block;
  line-height: var(--line-height-reset);
  text-align: center;
}

/* HOVER STATES */
.straight-edge-btn:hover {
  color: var(--straight-edge-text-hover);
}

.straight-edge-btn:hover .straight-edge-btn__border-frame {
  background-color: var(--straight-edge-border-hover) !important;
}

.straight-edge-btn:hover .straight-edge-btn__fill-cutout {
  background-color: var(--straight-edge-bg-hover) !important;
}

/**
 * ===================================================
 * FINAL WORKING SOLUTION: GUARANTEED BORDER AND TRANSPARENCY
 * Method: Three-Layer Structure (Border Frame + Inner Fill Cutout)
 * ===================================================
 */

:root {
  /* Define the unique structural variables */
  --btn-stroke-width: 0.053rem; /* 0.8504px thickness */
  --btn-skew-amount: 1.5rem;    /* Angle depth */
  
  /* --- CUSTOM PADDING VALUES --- */
  --btn-padding-y: 0.9rem;      
  --btn-padding-left: 2.2rem;   
  --btn-padding-right: 2.8rem;  
}

.straight-edge-btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  z-index: 1; 
  overflow: hidden; 

  /* Typography */
  font-family: var(--font-family-primary); 
  font-weight: 400;
  font-size: var(--font-size-lg);
  
  /* --- CRITICAL: Main element must be completely clear of background/border --- */
  background-color: transparent !important; 
  border: none !important;
  color: var(--straight-edge-text); 
  
  /* Apply the correct four-point clip-path for straight edges */
  clip-path: polygon(
    0% 0%,        
    100% 0%,      
    calc(100% - var(--btn-skew-amount)) 100%, 
    0% 100%       
  );

  /* PADDING: Uses custom values */
  padding: var(--btn-padding-y) var(--btn-padding-right) var(--btn-padding-y) var(--btn-padding-left);
  
  transition: all 0.3s ease-in-out;
}

/* 1. BORDER FRAME (.straight-edge-btn__border-frame) - The outermost colored border (Z-index -2) */
.straight-edge-btn__border-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2; /* Furthest back */
  
  /* Use the BORDER color */
  background-color: var(--straight-edge-border) !important;
  clip-path: inherit; 
  transition: background-color 0.3s ease-in-out;
}

/* 2. INNER FILL (.straight-edge-btn__fill-cutout) - The inner transparent/colored layer (Z-index -1) */
.straight-edge-btn__fill-cutout {
  position: absolute;
  z-index: -1; /* Placed between the border and the text */
  
  /* Offset from the border */
  top: var(--btn-stroke-width); 
  left: var(--btn-stroke-width); 

  /* Size reduced by twice the stroke width */
  width: calc(100% - (2 * var(--btn-stroke-width))); 
  height: calc(100% - (2 * var(--btn-stroke-width))); 
  
  /* --- CRITICAL: Inner Fill Color (MATCHES SECTION BG or transparent) --- */
  background-color: var(--straight-edge-bg, transparent) !important; 
  clip-path: inherit; 
  
  transition: background-color 0.3s ease-in-out;
}

/* 3. TEXT WRAPPER */
.straight-edge-btn__label {
  display: block;
  line-height: var(--line-height-reset);
  text-align: center;
}

/* HOVER STATES */
.straight-edge-btn:hover {
  color: var(--straight-edge-text-hover);
}

.straight-edge-btn:hover .straight-edge-btn__border-frame {
  background-color: var(--straight-edge-border-hover) !important;
}

.straight-edge-btn:hover .straight-edge-btn__fill-cutout {
  background-color: var(--straight-edge-bg-hover) !important;
}

/* =========================================
   One-side skew button (CodePen-based)
   ========================================= */

.si-skew-btn {
  /* transition */
  transition: all 0.25s ease-in-out;

  display: inline-block;
  position: relative;

  /* padding roughly like CodePen: 15px 35px 15px 15px */
  padding: 0.9rem 2.2rem 0.9rem 1rem;

  text-decoration: none;
  cursor: pointer;

  /* colors via CSS variables */
  color: var(--si-skew-text, #ffffff);
  background-color: var(--si-skew-bg, transparent);
}

/* inner label */
.si-skew-btn > span {
  position: relative;
  z-index: 5;
}

/* main skewed box */
.si-skew-btn::after {
  transition: all 0.25s ease-in-out;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  border-style: solid;
  border-width: 2px 2px 2px 0; /* no left border here */
  border-color: var(--si-skew-border, currentColor);

  background-color: var(--si-skew-bg, transparent);

  transform: skewX(-15deg);
  z-index: 1;
}

/* little left vertical piece */
.si-skew-btn::before {
  transition: all 0.25s ease-in-out;
  content: "";
  position: absolute;
  top: 0;
  left: -9px;
  bottom: 0;
  width: 17px;

  border-style: solid;
  border-width: 2px 0 2px 2px;
  border-color: var(--si-skew-border, currentColor);

  background-color: var(--si-skew-bg, transparent);
  z-index: 2;
}

/* hover */
.si-skew-btn:hover,
.si-skew-btn:focus {
  color: var(--si-skew-text-hover, #ffffff);
  background-color: var(--si-skew-bg-hover, transparent);
}

/* hover: apply color changes to box pieces */
.si-skew-btn:hover::after,
.si-skew-btn:focus::after {
  border-color: var(--si-skew-border-hover, var(--si-skew-border, currentColor));
  background-color: var(--si-skew-bg-hover, transparent);
}

.si-skew-btn:hover::before,
.si-skew-btn:focus::before {
  border-color: var(--si-skew-border-hover, var(--si-skew-border, currentColor));
  background-color: var(--si-skew-bg-hover, transparent);
}

/* =============================================
   SI Skew Button v2  (2-sided skew, outline or filled)
   ============================================= */

.si-skew2-btn {
  color: var(--sk2-text, #ffffff);
  background: var(--sk2-bg, transparent);
  border: 2px solid var(--sk2-border, #00c9cf);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  min-height: 2.5rem;
  font-family: Montserrat, sans-serif;
  font-size: clamp(0.81rem, 0.7rem + 0.3vw, 1.13rem);
  line-height: 1;
  text-decoration: none;

  transform: skewX(-16deg);
  transition: 0.25s ease;
}

/* inner text */
.si-skew2-btn > span {
  display: inline-block;
  transform: skewX(16deg);
  color: inherit;
}

/* hover state */
.si-skew2-btn:hover,
.si-skew2-btn:focus {
  color: var(--sk2-text-hover, #ffffff);
  background: var(--sk2-bg-hover, transparent);
  border-color: var(--sk2-border-hover, #00c9cf);
}

/* make sure the span actually picks up the hover color */
.si-skew2-btn:hover > span,
.si-skew2-btn:focus > span {
  color: var(--sk2-text-hover, #ffffff);
}

/* =========================================
   BASE STYLE for header skew button
   ========================================= */
.si-skew2--header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    min-height: 2.625rem;
    font-size: var(--font-size-nav)!important;
    line-height: 1.14 !important;
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    background: transparent;
    transform: skewX(-16deg);
    text-decoration: none;
    transition: 0.25s ease;
    border: 2px solid #00c9cf;
    color: #00c9cf;
}

.si-skew2--header-btn > span {
    display: inline-block;
    transform: skewX(16deg);
    color: inherit;
}

.si-skew2--header-btn:hover span,
.si-skew2--header-btn:focus span {
    color: inherit;
}

/* =========================================
   HEADER STATES (color + border-color)
   ========================================= */

/* --- TRANSPARENT HEADER (non-sticky) --- */
.bg_transparent .si-skew2--header-btn {
    color: #ffffff !important;
    border-color: #00c9cf !important;
}
.bg_transparent .si-skew2--header-btn:hover,
.bg_transparent .si-skew2--header-btn:focus {
    color: #ffffff !important;
    border-color: #00c9cf !important;
    background: #00c9cf !important;
}

/* --- TRANSPARENT + STICKY --- */
.l-header.bg_transparent.sticky .si-skew2--header-btn,
.l-header .bg_transparent.sticky .si-skew2--header-btn {
    color: #121c2e !important;
    border-color: #00c9cf !important;
}
.l-header.bg_transparent.sticky .si-skew2--header-btn:hover,
.l-header.bg_transparent.sticky .si-skew2--header-btn:focus,
.l-header .bg_transparent.sticky .si-skew2--header-btn:hover,
.l-header .bg_transparent.sticky .si-skew2--header-btn:focus {
    color: #ffffff !important;
    border-color: #00c9cf !important;
    background: #00c9cf !important;
}

/* =========================================
   SOLID HEADER (non-sticky)
   ========================================= */

.bg_solid:not(.sticky) .si-skew2--header-btn {
    color: #121c2e !important;
    border-color: #00c9cf !important;
}

.bg_solid:not(.sticky) .si-skew2--header-btn:hover,
.bg_solid:not(.sticky) .si-skew2--header-btn:focus {
    color: #ffffff !important;
    border-color: #00c9cf !important;
    background: #00c9cf !important;
}

/* =========================================
   SOLID HEADER + STICKY
   ========================================= */

.bg_solid.sticky .si-skew2--header-btn {
    color: #121c2e !important;
    border-color: #00c9cf !important;
}

.bg_solid.sticky .si-skew2--header-btn:hover,
.bg_solid.sticky .si-skew2--header-btn:focus {
    color: #121c2e !important;
    border-color: #00c9cf !important;
    background: #00c9cf !important;
}

/* =============================================
   SI Skew Button v2  (2-sided skew, outline or filled)
   ============================================= */

.si-no-skew2-btn {
  color: var(--sk2-text, #ffffff);
  background: var(--sk2-bg, transparent);
  border: 2px solid var(--sk2-border, #00c9cf);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  min-height: 2.5rem;
  font-family: Montserrat, sans-serif;
  font-size: clamp(0.81rem, 0.7rem + 0.3vw, 1.13rem);
  line-height: 1;
  text-decoration: none;
  /*transform: skewX(-16deg);*/
  transition: 0.25s ease;
}

/* inner text */
.si-no-skew2-btn > span {
  display: inline-block;
  /*transform: skewX(16deg);*/
  color: inherit;
}

/* hover state */
.si-no-skew2-btn:hover,
.si-no-skew2-btn:focus {
  color: var(--sk2-text-hover, #ffffff);
  background: var(--sk2-bg-hover, transparent);
  border-color: var(--sk2-border-hover, #00c9cf);
}

/* make sure the span actually picks up the hover color */
.si-no-skew2-btn:hover > span,
.si-no-skew2-btn:focus > span {
  color: var(--sk2-text-hover, #ffffff);
}