/*
Theme Name: SurePay Emerald
Theme URI: https://example.com/
Description: Child theme of Twenty Twenty-Five for SurePay Technology Inc. with emerald branding and custom block patterns.
Author: Mark Jones Solano
Author URI: https://www.linkedin.com/in/mark-jones-solano-b17624147/
Template: twentytwentyfive
Version: 1.2.0
Text Domain: surepay-emerald
*/

a,
a:visited,
a:hover,
a:focus {
  text-decoration: none !important;
}

a.hover,
.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--yellow, #ffd700) !important;
}

:where(.wp-site-blocks *:focus) {
    outline: none;
}


footer {
    margin: 0;
}

.wp-block-query .wp-block-post-title a::after{
  content: " ↗";
  font-size: .9em;
  margin-left: .25em;
  opacity: .75;
}

/* Titles + description */
.surepay-career-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

.surepay-career-note {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #64748b;
}

/* ==================================================
   SUREPAY FORM SYSTEM (Global)
   Wrap any form with: .surepay-form
   Optional card container: .surepay-form--card
   ================================================== */

/* Container (optional card UI) */
.surepay-form--card {
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-sizing: border-box;
}

/* Typography inside form */
.surepay-form h1,
.surepay-form h2,
.surepay-form h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #0f172a;
}
.surepay-form p {
  margin-bottom: 1rem;
}

/* Labels */
.surepay-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

/* Base control styles: apply to most inputs/selects/textarea */
.surepay-form .surepay-input,
.surepay-form .surepay-textarea,
.surepay-form input[type="text"],
.surepay-form input[type="email"],
.surepay-form input[type="tel"],
.surepay-form input[type="number"],
.surepay-form input[type="url"],
.surepay-form input[type="file"],
.surepay-form input[type="password"],
.surepay-form select,
.surepay-form textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  box-sizing: border-box;
}

/* Textarea */
.surepay-form .surepay-textarea,
.surepay-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Select arrow (clean + consistent) */
.surepay-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 1.05rem) calc(1rem + 2px),
    calc(100% - 0.75rem) calc(1rem + 2px),
    100% 0;
  background-size:
    6px 6px,
    6px 6px,
    2.5rem 100%;
  background-repeat: no-repeat;
}

/* Focus */
.surepay-form input:focus,
.surepay-form select:focus,
.surepay-form textarea:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 1px #05966922;
  background-color: #ffffff;
}

/* Placeholder */
.surepay-form ::placeholder {
  color: #94a3b8;
}

/* Buttons */
.surepay-form .surepay-btn,
.surepay-form input[type="submit"],
.surepay-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.8rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #059669, #0f766e);
  color: #ffffff;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}

.surepay-form .surepay-btn:hover,
.surepay-form input[type="submit"]:hover,
.surepay-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15, 118, 110, 0.25);
  opacity: 0.96;
}

.surepay-form .surepay-btn:active,
.surepay-form input[type="submit"]:active,
.surepay-form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

/* Submit wrap spacing */
.surepay-form .surepay-submit-wrap {
  margin-top: 1.5rem;
}

/* CF7 messages (only affect forms inside .surepay-form) */
.surepay-form .wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: #b91c1c;
  margin-top: 0.25rem;
}

.surepay-form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
}

.surepay-form .wpcf7-mail-sent-ok {
  border: 1px solid #16a34a;
  background: #dcfce7;
  color: #14532d;
}

.surepay-form .wpcf7-validation-errors,
.surepay-form .wpcf7-mail-sent-ng {
  border: 1px solid #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
}



/* Textarea height */
.surepay-textarea {
  min-height: 140px;
  resize: vertical;
}

/* File input info */
.surepay-file-field small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #64748b;
}

.surepay-submit-wrap {
  margin-top: 1.5rem;
}

.surepay-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15, 118, 110, 0.25);
  opacity: 0.96;
}

.surepay-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

.surepay-blur {
    backdrop-filter: blur(2px);
}

/* If you see overlap with the WP admin bar when logged in */
body.admin-bar .surepay-sticky-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}


/* Base layout: row on larger screens */
.press-release-banner__inner {
    display: flex;
    gap: 1rem;
}

.wp-block-button.is-style-surepay-cta .wp-block-button__link {
    background-color: var(--wp--preset--color--primary-700);
    color: var(--wp--preset--color--text-invert);
    font-weight: 700;
    font-style: normal;
    font-size: var(--wp--preset--font-size--small);
    border-radius: 999px; /* pill style – optional */
    padding: 0.6em 1.4em; /* tweak as you like */
    text-decoration: none;
}

/* Optional: hover state */
.wp-block-button.is-style-surepay-cta .wp-block-button__link:hover {
    filter: brightness(1.05);
}

/* Custom Gutenberg Button Style: Fancy Gradient */
.wp-block-button.is-style-btn-surepay-green .wp-block-button__link {
    border-radius: 999px;            /* pill shape */
    padding: 0.8em 2.4em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;

  
    /* WordPress-like green gradient */
    background-image: linear-gradient(135deg, #46b450, #22863a 80%);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        background-position 0.18s ease-out;
    background-size: 140% 140%;
    background-position: 0% 50%;
}

.wp-block-button.is-style-btn-surepay-green .wp-block-button__link:hover,
.wp-block-button.is-style-btn-surepay-green .wp-block-button__link:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
    background-position: 100% 50%;
    text-decoration: none;
    outline: none;
} 

.wp-block-button.is-style-btn-surepay-green .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}

/* Custom Gutenberg Button Style: Orange Accent */
.wp-block-button.is-style-btn-surepay-orange .wp-block-button__link {
    border-radius: 999px;
    padding: 0.8em 2.4em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;

    /* Orange gradient based on #e59d00 */
    background-image: linear-gradient(135deg, #e59d00, #c27800 80%);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        background-position 0.18s ease-out;
    background-size: 140% 140%;
    background-position: 0% 50%;
}

.wp-block-button.is-style-btn-surepay-orange .wp-block-button__link:hover,
.wp-block-button.is-style-btn-surepay-orange .wp-block-button__link:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
    background-position: 100% 50%;
    text-decoration: none;
    outline: none;
}

.wp-block-button.is-style-btn-surepay-orange .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}
/* Shared base for ghost buttons (optional, for consistency) */
.wp-block-button.is-style-my-green-ghost .wp-block-button__link,
.wp-block-button.is-style-my-orange-ghost .wp-block-button__link {
    border-radius: 999px;
    padding: 0.8em 2.4em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: transparent;
    box-shadow: none;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        background-color 0.18s ease-out,
        color 0.18s ease-out;
}

/* Green Ghost */
.wp-block-button.is-style-btn-green-ghost .wp-block-button__link {
    border: 2px solid #46b450;
    color: #46b450;
}

.wp-block-button.is-style-btn-green-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-btn-green-ghost .wp-block-button__link:focus {
    background-color: #46b450;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    outline: none;
}

.wp-block-button.is-style-btn-green-ghost .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}

/* Orange Ghost – based on #e59d00 */
.wp-block-button.is-style-btn-orange-ghost .wp-block-button__link {
    border: 2px solid #e59d00;
    color: #e59d00;
}

.wp-block-button.is-style-btn-orange-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-btn-orange-ghost .wp-block-button__link:focus {
    background-color: #e59d00;
    border: 2px solid #e59d00;
    color: #0f2937 !important;
    border-color: #e59d00 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    outline: none;
}

.wp-block-button.is-style-btn-orange-ghost .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}

/* PULSE ANIMATION LAYER
   Apply by adding "has-pulse-animation" to the Button block's Additional CSS class(es)
*/

/* Idle: breathing pulse */
.wp-block-button.has-pulse-animation .wp-block-button__link {
  animation: press-release-pulse 1.6s ease-in-out infinite;
  transform: scale(1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);

  /* Keep transitions so hover feels smooth */
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}

/* Hover / focus: steady, slightly larger, no pulse */
.wp-block-button.has-pulse-animation .wp-block-button__link:hover,
.wp-block-button.has-pulse-animation .wp-block-button__link:focus-visible {
  animation: none;
  transform: scale(1.04);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
}

/* Active (clicked): tiny press-down */
.wp-block-button.has-pulse-animation .wp-block-button__link:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.no-margin {
    margin: 0;
}

/* Keyframes: smooth pulse ring */
@keyframes press-release-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(40, 163, 122, 0.24);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(40, 163, 122, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(40, 163, 122, 0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button.has-pulse-animation .wp-block-button__link {
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
}


@media (min-width: 768px) {
    
    /* Base fixed header – always at the top */
    .surepay-sticky-header {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	z-index: 1000;
    
    	background: transparent;
    	backdrop-filter: blur(2px);
    	box-shadow: none;
    
    	transition:
    		background-color 0.3s ease,
    		backdrop-filter 0.3s ease,
    		box-shadow 0.3s ease;
    }
    
    /* With admin bar */
    body.admin-bar .surepay-sticky-header {
    	top: var(--wp-admin--admin-bar--height, 32px);
    	min-height: 56px;
    	align-content: flex-end;
    }

    /* When page is scrolled down */
    body.has-scrolled .surepay-sticky-header {
    	background: #0f2937; /* SurePay dark/nav color */
    	backdrop-filter: blur(12px);
    	box-shadow: 0 10px 10px  rgba(0, 0, 0, 0.2);
    }

}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .press-release-banner__inner {
        flex-direction: column;
        align-items: flex-start; /* or center */
        padding-left: 0;
    }

    .press-release-banner .wp-block-buttons {
        margin-top: 0.5rem;
    }
    
    .surepay-engagement-container {
        flex-direction: column;
    
    }
    
    .surepay-engagement-content {
        display: flex !important;
        flex-direction: column;
    }
    
    .surepay-engagement-item {
      padding: 12px;
    }
    
  .mobile-flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
  
  .mobile-flex-flow-row-reverse {
    flex-flow: row-reverse;
  }
  .mobile-flex-flow-column-reverse {
      flex-flow: column-reverse;
  }
  
  .map-contained {
    contain: content;
    width: 100%;
  }

  .surepay-form--card {
    margin: 1.5rem 1rem;
    padding: 1.5rem 1.25rem;
  }
}