/* ==========================================================================
   VISIBLE Modern Update v3 – Colors & Polish Only, NO size/padding/font changes
   Test & revert sections if too much
   ========================================================================== */

/* Quick color vars */
:root {
  --primary-blue: #083e96;       /* darker end for text/links */
  --blue-gradient: linear-gradient(to bottom, #476fce, #083e96);
  --yellow-gradient: linear-gradient(to bottom, #fffe5c, #ffbd2b);
}

/* Header – make blue stand out if not already; keep your bg, just accent */
header, #header, .site-header, body > header {
  color: white;
}

/* If header was already blue/textured, comment above and use this instead for subtle boost */
header {
  /* background: your-existing-or-gradient-with-texture; */
}

/* Logo – ensure white bg & left flow if needed */
img[src*="logo"], .logo, #logo, [class*="logo"] {
  background: white;
  /* If text isn't shifting right of logo: */
  /* float: left; margin: 0 20px 10px 0; */  /* uncomment only if broken */
}

/* Headline sections – solid gradients, no JPGs anywhere */

/* Default / yellow headline: full yellow gradient + dark text */
.headline, .headlineyellow, [class*="headline"] {
  background: var(--yellow-gradient) !important;
  color: #083e96 !important;  /* dark blue text for strong contrast on yellow */
}

/* Blue headline: full blue gradient + white text */
.headlineblue {
  background: var(--blue-gradient) !important;
  color: white !important;
}

/* Green headline: solid modern green gradient + white text */
.headlinegreen {
  background: linear-gradient(to bottom, #28a745, #1e7e34) !important;  /* vibrant green */
  color: white !important;
}

/* Red headline: solid modern red gradient + white or dark text */
.headlinered {
  background: linear-gradient(to bottom, #dc3545, #c82333) !important;  /* strong red */
  color: white !important;  /* white works well on red; change to #083e96 if you prefer dark blue text */
}


/* Buttons – yellow primary, blue text, hover brighten (no size/move) */
.button, .button-primary, input[type="submit"], a.button {
  background: var(--yellow-gradient) !important;
  color: #083e96 !important;
  border-color: #ffbd2b !important;
  transition: background 0.3s ease;  /* smooth color shift only */
}

.button:hover, .button-primary:hover {
  background: linear-gradient(to bottom, #fffe5c, #fffe5c) !important;  /* lighter yellow on hover */
}

/* Force modern green/red buttons – override any old backgrounds */
.buttongreen,
.button.buttongreen,
a.buttongreen,
input.buttongreen {
  background: linear-gradient(to bottom, #28a745, #1e7e34) !important;  /* solid modern green; remove blue overlay if unwanted */
  /* Or with your blue scheme blend: linear-gradient(to bottom, #28a745, #1e7e34), var(--blue-gradient) !important; */
  /* background-blend-mode: overlay !important; */  /* uncomment if using blend */
  color: white !important;
  border-color: #1e7e34 !important;  /* match green */
  transition: background 0.3s ease !important;
}

.buttongreen:hover,
.button.buttongreen:hover,
a.buttongreen:hover {
  background: linear-gradient(to bottom, #34d058, #28a745) !important;  /* brighter green hover */
}

.buttonred,
.button.buttonred,
a.buttonred,
input.buttonred {
  background: linear-gradient(to bottom, #dc3545, #c82333) !important;  /* solid modern red */
  /* Or blend: linear-gradient(to bottom, #dc3545, #c82333), var(--blue-gradient) !important; */
  /* background-blend-mode: overlay !important; */
  color: white !important;
  border-color: #c82333 !important;
  transition: background 0.3s ease !important;
}

.buttonred:hover,
.button.buttonred:hover,
a.buttonred:hover {
  background: linear-gradient(to bottom, #e4606d, #dc3545) !important;  /* brighter red hover */
}


/* Links – blue default, yellow hover for energy */
a {
  color: #083e96;
  transition: color 0.3s ease;
}

a:hover {
  color: #ffbd2b;
}

/* Footer – blue base, yellow accents */
footer, #footer, .site-footer {
  color: white;
}

footer a {
  color: #fffe5c;
}

footer a:hover {
  color: #fffe5c;  /* stay bright or adjust */
}

/* Optional: very light card depth on products/sections – comment whole block if unwanted */
.product, .content, section, article, .row > div {
/*  background: white;*/
  box-shadow: none !important;
}

/* Body text contrast if needed */
body {
  color: #222;
}