/*
 Theme Name:   Ocean WP Child
 Theme URI:    https://yourwebsite.com
 Description:  A child theme of Ocean WP
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     oceanwp
 Version:      1.0.0
 License:      GPL v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  oceanwp-child
*/

/* Add your custom CSS below */

/* Remove outline on logo click */
#site-logo a:focus,
#site-logo a:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

a:focus,
.focus a {
	outline: none !important;
}

/* Targeting the specific Spectra highlight class */
.uagb-highlight {
    background: linear-gradient(90deg, #a172ff, #55b9fd) !important; /* Brand teal to blue */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block; /* Ensures the gradient spans correctly */
}

/* 1. INACTIVE STATE: Set text color to #333333 */
#site-header ul li a > span {
    color: #333333 !important;
    position: relative !important;
    display: inline-block !important;
    transition: color 0.3s ease;
}

/* 2. HOVER & ACTIVE STATE: Apply Brand Gradient to Text */
#site-header ul li a:hover > span,
#site-header ul li.current-menu-item a > span,
#site-header ul li.current-menu-ancestor a > span {
    background: linear-gradient(73deg, #A172FF 0%, #55B9FD 99%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 3. THE UNDERLINE: Reset and Precision Positioning */
#site-header ul li a > span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(73deg, #A172FF 0%, #55B9FD 99%) !important;
    
    /* Position the line exactly at the baseline of the text */
    top: 80%; 
    /* Move it down exactly 10px from that baseline */
    transform: translateY(5px) scaleX(0); 
    
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. HOVER & ACTIVE: Trigger the Underline */
#site-header ul li a:hover > span::after,
#site-header ul li.current-menu-item a > span::after,
#site-header ul li.current-menu-ancestor a > span::after {
    /* Keep the 10px downward shift but grow the width to 100% */
    transform: translateY(1px) scaleX(1) !important;
}

/* GLOBAL GRADIENT BULLETS FOR CLOUDKOMPAS */
.gradient-bullets {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.gradient-bullets li {
    position: relative;
    color: #333333;
    
    /* ADJUSTABLE SETTINGS */
    font-size: 16px;            
    padding-left: 25px;        /* Distance between bullet and text */
    line-height: 1.25;          /* Space between lines */
    margin-bottom: 10px;       
    
    /* This ensures the li itself is a flex container for alignment */
    display: block; 
}

/* The Gradient Bullet - Centered Vertically */
.gradient-bullets li::before {
    content: "•"; 
    position: absolute;
    left: 0;
    
    /* VERTICAL CENTERING LOGIC */
    top: 50%;
    transform: translateY(-50%); /* Pulls the bullet up by half its own height */
    
    /* Brand Gradient: 73deg Purple to Blue */
    background: linear-gradient(73deg, #A172FF 0%, #55B9FD 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Bullet Appearance */
    font-weight: bold;
    font-size: 1.5em; 
    line-height: 1; /* Keeps the bullet's own bounding box tight */
}


/* target only headings and paragraphs inside Spectra Containers */
.wp-block-uagb-container h3 {
    margin-top: 10px !important;    /* Space above the H3 */
    margin-bottom: 10px !important; /* Gap between H3 and the paragraph below */
    line-height: 1.4 !important;    /* Heading line height (usually tighter) */
}

.wp-block-uagb-container p {
    margin-top: 0px !important;     /* Prevents double-spacing with the heading */
    margin-bottom: 0px !important; /* Space between separate paragraphs */
    line-height: 1.5 !important;    /* Paragraph line height for readability */
}



/* Remove underline from links inside headings + paragraphs (site-wide) */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
p a {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  text-decoration-thickness: auto !important;
}

/* Keep no underline on hover/focus too */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
p a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus,
p a:focus {
  text-decoration: none !important;
}

/* Optional: don't show underline from background-clip text links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
p a {
  background-image: none !important;
}



.mc4wp-response{
  margin-top: 16px !important;  /* space between button and message */
  font-size: 16px;              /* optional text size */
  line-height: 1.5;
}

/* =========================================================
   BOOSTRAPPER — WPForms Styling (ALL-IN-ONE)
   Matches your inline newsletter form + editable variables
   Paste into: Appearance → Customize → Additional CSS
   ========================================================= */

/* ✅ EDIT ONLY THESE VARIABLES */
:root{
  /* INPUT */
  --bk-input-width: 100%;
  --bk-input-height: 40px;
  --bk-input-radius: 999px;
  --bk-input-padding-y: 0px;
  --bk-input-padding-x: 22px;
  --bk-input-border: 1px solid rgba(0,0,0,0.18);
  --bk-input-bg: rgba(255,255,255,0.92);
  --bk-input-font-size: 16px;
  --bk-input-placeholder: rgba(0,0,0,0.55);

/* Button width by device */
--bk-btn-width-desktop: 50%;
--bk-btn-width-tablet: 100%;
--bk-btn-width-mobile: 100%;


  /* GAP (between last field and button) */
  --bk-gap-input-button: 30px;

  /* TEXTAREA (keep consistent but usable) */
  --bk-textarea-radius: 18px;
  --bk-textarea-min-height: 160px;
  --bk-textarea-padding-y: 12px;

  /* BUTTON */
  --bk-btn-width: 100%;
  --bk-btn-minheight: 40px;
  --bk-btn-radius: 999px;
  --bk-btn-padding-y: 15px;
  --bk-btn-padding-x: 10px;

  --bk-btn-font-size: 16px;
  --bk-btn-font-weight: 500;
  --bk-btn-letter-spacing: 2px;
  --bk-btn-text-transform: none;

  /* BUTTON GRADIENT (normal) */
  --bk-grad-a: #8c52fe;
  --bk-grad-b: #55b9fd;

  /* BUTTON GRADIENT (hover) */
  --bk-grad-hover-a: #55b9fd;
  --bk-grad-hover-b: #8c52fe;

  /* LABELS */
  --bk-label-font-size: 14px;
  --bk-label-font-weight: 500;
  --bk-label-color: rgba(0,0,0,0.75);
  --bk-label-letter-spacing: 0px;
  --bk-label-text-transform: none;
  --bk-label-margin-top: 0px;
  --bk-label-margin-bottom: 8px;
}

/* ---------------------------
   Normalize WPForms spacing
---------------------------- */
.wpforms-container .wpforms-field,
.wpforms-container .wpforms-field-row,
.wpforms-container .wpforms-field-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------
   Labels
---------------------------- */
.wpforms-container .wpforms-form .wpforms-field-label{
  font-size: var(--bk-label-font-size) !important;
  font-weight: var(--bk-label-font-weight) !important;
  color: var(--bk-label-color) !important;
  letter-spacing: var(--bk-label-letter-spacing) !important;
  text-transform: var(--bk-label-text-transform) !important;
  margin-top: var(--bk-label-margin-top) !important;
  margin-bottom: var(--bk-label-margin-bottom) !important;
	margin-left: 10px;
  line-height: 1.3 !important;
}

/* Required asterisk */
.wpforms-container .wpforms-form .wpforms-required-label{
  color: var(--bk-label-color) !important;
  opacity: 0.85;
}

/* ---------------------------
   Inputs (pill)
---------------------------- */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form input[type="password"],
.wpforms-container .wpforms-form select{
  width: var(--bk-input-width) !important;
  height: var(--bk-input-height) !important;
  border-radius: var(--bk-input-radius) !important;
  border: var(--bk-input-border) !important;
  background: var(--bk-input-bg) !important;
  padding: var(--bk-input-padding-y) var(--bk-input-padding-x) !important;
  font-size: var(--bk-input-font-size) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Placeholder */
.wpforms-container .wpforms-form ::placeholder{
  color: var(--bk-input-placeholder) !important;
}

/* Textarea (consistent but multi-line friendly) */
.wpforms-container .wpforms-form textarea{
  width: var(--bk-input-width) !important;
  min-height: var(--bk-textarea-min-height) !important;
  border-radius: var(--bk-textarea-radius) !important;
  border: var(--bk-input-border) !important;
  background: var(--bk-input-bg) !important;
  padding: var(--bk-textarea-padding-y) var(--bk-input-padding-x) !important;
  font-size: var(--bk-input-font-size) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  resize: vertical;
}

/* Remove any default focus glow */
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------
   Spacing between fields
   (keeps layout clean)
---------------------------- */
.wpforms-container .wpforms-field{
  margin-bottom: 20px !important;
}

/* Gap before submit button */
.wpforms-container .wpforms-submit-container{
  margin-top: var(--bk-gap-input-button) !important;
  padding: 0 !important;
}

/* ---------------------------
   Submit button (gradient)
---------------------------- */
.wpforms-container .wpforms-form button[type="submit"]{
	width: var(--bk-btn-width-desktop) !important;
  min-height: var(--bk-btn-minheight) !important;
  border: 0 !important;
  border-radius: var(--bk-btn-radius) !important;
  padding: var(--bk-btn-padding-y) var(--bk-btn-padding-x) !important;
  cursor: pointer !important;

  background: linear-gradient(90deg, var(--bk-grad-a) 0%, var(--bk-grad-b) 100%) !important;
  color: #fff !important;

  font-size: var(--bk-btn-font-size) !important;
  font-weight: var(--bk-btn-font-weight) !important;
  letter-spacing: var(--bk-btn-letter-spacing) !important;
  text-transform: var(--bk-btn-text-transform) !important;

  box-shadow: none !important;

  transition: transform .18s ease, filter .18s ease !important;
}

/* Hover */
.wpforms-container .wpforms-form button[type="submit"]:hover{
  background: linear-gradient(90deg, var(--bk-grad-hover-a) 0%, var(--bk-grad-hover-b) 100%) !important;
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
}

.wpforms-container .wpforms-form button[type="submit"]:active{
  transform: translateY(0) !important;
  filter: brightness(1.01) !important;
}

/* ---------------------------
   Success / Error messages
---------------------------- */
.wpforms-container .wpforms-confirmation-container-full,
.wpforms-container .wpforms-error-container{
  margin-top: 16px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ---------------------------
   Mobile sizing
---------------------------- */
@media (max-width: 480px){
  .wpforms-container .wpforms-form input[type="text"],
  .wpforms-container .wpforms-form input[type="email"],
  .wpforms-container .wpforms-form input[type="tel"],
  .wpforms-container .wpforms-form input[type="url"],
  .wpforms-container .wpforms-form input[type="number"],
  .wpforms-container .wpforms-form input[type="password"],
  .wpforms-container .wpforms-form select,
  .wpforms-container .wpforms-form textarea{
    font-size: 16px !important;
  }

  .wpforms-container .wpforms-form button[type="submit"]{
    font-size: 16px !important;
  }
}

/* Tablet */
@media (max-width: 1024px){
  .wpforms-container .wpforms-form button[type="submit"]{
    width: var(--bk-btn-width-tablet) !important;
  }
}

/* Mobile */
@media (max-width: 480px){
  .wpforms-container .wpforms-form button[type="submit"]{
    width: var(--bk-btn-width-mobile) !important;
  }
}



/* Override menu font size to match customizer */
#site-header ul li a {
    font-size: 16px !important; /* Change 16px to your desired size */
    font-weight: 500 !important;
}

#site-header ul li a > span {
    font-size: 16px !important; /* Match the above */
}



/* Reduce gap between header and hero section */
/* Reduce gap between header and hero section */
#content-wrap {
    padding-top: 0px !important; /* Adjust this value: 0px, 10px, 20px, etc. */
}



/* Add Opera-specific prefixes */
* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* For gradients (which you use a lot) */
.uagb-highlight,
#site-header ul li a:hover > span,
.gradient-bullets li::before {
    -o-background-clip: text; /* Opera prefix */
}



/* Opera tablet viewport fix */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
}

#site-header,
#content-wrap,
.container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Ensure no element exceeds viewport width */
* {
    max-width: 100%;
    box-sizing: border-box;
}


/* iPhone landscape mode fix */
@media (max-width: 812px) and (orientation: landscape) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }
    
    #site-header {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    #content-wrap {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0;
    }
    
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}



/* =====================================================
   SPECTRA/UAGB ARCHIVE PAGES CUSTOM STYLING
   Matches your custom blog page design
   ===================================================== */

/* Fix UAGB post grid container */
.uagb-container-inner-blocks-wrap {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* UAGB Post Grid */
.uagb-post-grid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

/* Tablet - 2 columns */
@media (max-width: 1024px) {
    .uagb-post-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {
    .uagb-post-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 15px !important;
    }
}

/* UAGB Post Card Wrapper - Image breaks out of padding */
.uagb-post__inner-wrap {
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Card hover effect */
.uagb-post__inner-wrap:hover {
    box-shadow: linear-gradient(73deg, #A172FF 0%, #55B9FD 99%) !important;
    transform: translateY(2px);
}

/* Image takes full width of card */
.uagb-post__image {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.uagb-post__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Content wrapper - no padding */
.uagb-post__content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* UAGB Post Title - Add padding */
.uagb-post__title.uagb-post__text {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
    padding: 20px 20px 0 20px !important;
}

.uagb-post-title,
.uagb-post__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.uagb-post-title a,
.uagb-post__title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.uagb-post-title a:hover,
.uagb-post__title a:hover {
    background: linear-gradient(73deg, #A172FF 0%, #55B9FD 99%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* UAGB Post Meta/Byline - Add padding */
.uagb-post__text.uagb-post-grid-byline {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #666666 !important;
    margin-bottom: 10px !important;
    padding: 0 20px !important;
}

.uagb-post-meta,
.uagb-post__meta {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #666666 !important;
    margin-bottom: 10px !important;
}

.uagb-post-meta a,
.uagb-post__meta a {
    color: #666666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.uagb-post-meta a:hover,
.uagb-post__meta a:hover {
    color: #A172FF !important;
}

/* UAGB Post Excerpt - Add padding with bottom padding */
.uagb-post__text.uagb-post__excerpt {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    padding: 0 20px 25px 20px !important;
}

.uagb-post-excerpt,
.uagb-post__excerpt {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin: 0 0 15px 0 !important;
    flex-grow: 1 !important;
}

/* Archive header */
.archive-header,
.page-header {
    text-align: center !important;
    padding: 60px 20px !important;
    background: linear-gradient(135deg, rgba(161, 114, 255, 0.08) 0%, rgba(85, 185, 253, 0.08) 100%) !important;
    margin-bottom: 40px !important;
    border-radius: 12px !important;
}

.archive-header h1,
.page-header h1 {
    font-size: 42px !important;
    margin: 0 !important;
}

/* Pagination */
.pagination {
    margin-top: 40px !important;
    text-align: center !important;
}

.pagination a,
.pagination span {
    display: inline-block !important;
    padding: 10px 15px !important;
    margin: 5px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: #333333 !important;
    transition: all 0.3s ease !important;
}

.pagination a:hover {
    background: linear-gradient(90deg, #8c52fe, #55b9fd) !important;
    color: white !important;
    border-color: transparent !important;
}

.pagination .current {
    background: linear-gradient(90deg, #8c52fe, #55b9fd) !important;
    color: white !important;
    border-color: transparent !important;
}



/* ============================================
   Boostrapper Blog Article - COMPLETE FIXED CODE
   ============================================ */

/* 1. GLOBAL CONTAINER FIX
   Ensures boxes and images stay within the blog width */
.boostrapper-article, 
.boostrapper-article * {
    box-sizing: border-box !important;
}

/* 2. PARAGRAPH STYLES
   Forcing line-height and spacing */
.boostrapper-article p,
article.boostrapper-article p {
    line-height: 1.8 !important;
    margin-bottom: 1.5em !important;
}

/* 3. HEADING MARGINS
   Higher top margin, very low bottom margin for aesthetic grouping */
.boostrapper-article h2,
article.boostrapper-article h2 {
    margin-top: 1.8em !important;
    margin-bottom: 0.3em !important;
    line-height: 1.2 !important;
}

.boostrapper-article h3,
article.boostrapper-article h3 {
    margin-top: 1.5em !important;
    margin-bottom: 0.3em !important;
    line-height: 1.3 !important;
}

/* Tighten gap between headings and the immediate next paragraph */
.boostrapper-article h2 + p,
.boostrapper-article h3 + p {
    margin-top: 0 !important;
}

/* 4. IMAGES
   Prevents overflow and adds rounded corners */
.boostrapper-article img,
.boostrapper-article .article-featured-image,
.boostrapper-article .article-image {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 2em auto;
    border-radius: 15px;
}

/* 5. PRO TIP BOXES 
   Uses H3 for the header as requested */
.boostrapper-article .pro-tip {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 25px 30px;
    margin: 35px 0;
    color: white;
}

.boostrapper-article .pro-tip h3.pro-tip-header {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 12px 0 !important;
    color: white !important;
    border: none !important;
    background: none !important;
}

.boostrapper-article .pro-tip-content {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: white;
}

/* 6. KEY TAKEAWAYS SECTION */
.boostrapper-article .key-takeaways {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 5px 20px;
    margin: 0px 0;
}

.boostrapper-article .key-takeaways-header {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    margin-top: 0;
}

.boostrapper-article .takeaway-section {
    margin-bottom: 25px;
}

.boostrapper-article .takeaway-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.boostrapper-article .takeaway-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

/* 7. RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .boostrapper-article .pro-tip,
    .boostrapper-article .key-takeaways {
        padding: 20px;
        margin: 25px 0;
    }
    
    .boostrapper-article h2 {
        font-size: 24px !important;
    }
}


/* ======================================================
   Boostrapper: Tag Cloud pills styled like gradient buttons
   Target: Tag Cloud block with outline style
   Class: is-style-outline wp-block-tag-cloud
====================================================== */

.owp-tag-texts a{
  /* Button-like */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 20px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;

  /* Sizing similar to buttons */
  padding: 10px 16px !important;
  line-height: 1 !important;

  /* Brand gradient fill */
  background: linear-gradient(90deg, #8c52fe 0%, #55b9fd 100%) !important;
  color: #ffffff !important;

  /* Button-ish text feel */
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;

  transition: transform .18s ease, filter .18s ease, background .18s ease !important;
}

/* Hover like your gradient buttons */
.owp-tag-texts a:hover{
  background: linear-gradient(90deg, #55b9fd 0%, #8c52fe 100%) !important;
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
}

/* Active press */
.owp-tag-texts a:active{
  transform: translateY(0) !important;
  filter: brightness(1.01) !important;
}

/* Spacing between tags */
.owp-tag-texts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}