/* ============================================================
   Reload — brand tokens, fonts, base, shared section CSS
   ============================================================
   Every per-section Elementor block targets classes namespaced
   under .reload-*. Section-specific layout sits inline in the
   widget; this file is shared.
   ============================================================ */

@font-face{
  font-family:'Erstoria';
  src:url('../fonts/erstoria.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* Core brand */
  --reload-ink:#2E405B;           /* deep blue, primary text on light bg */
  --reload-ink-soft:rgba(46,64,91,.65);
  --reload-ink-line:rgba(46,64,91,.14);
  --reload-indigo:#121948;        /* dark hero bg */
  --reload-melon:#F4A893;
  --reload-melon-2:#FFB08C;       /* CTA fill */
  --reload-ivory:#F4ECDD;
  --reload-cream:#FDF4F0;         /* nav + footer bg */
  --reload-sage:#9DBAA9;
  --reload-mauve:#987D9C;
  --reload-border:#B6BDBF;

  /* Type */
  --reload-font-display:'Erstoria','Fraunces',serif;
  --reload-font-ui:'Work Sans','Inter',system-ui,sans-serif;

  /* Layout */
  --reload-container:1280px;
  --reload-pad-x:clamp(20px, 4vw, 80px);
}

/* When pasted in Elementor, ensure our blocks inherit nothing weird */
.reload-section{
  font-family:var(--reload-font-ui);
  color:var(--reload-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.reload-section *,
.reload-section *::before,
.reload-section *::after{ box-sizing:border-box }

.reload-container{
  max-width:var(--reload-container);
  margin:0 auto;
  padding-left:var(--reload-pad-x);
  padding-right:var(--reload-pad-x);
}

/* Display headlines */
.reload-h1,
.reload-h2,
.reload-h3{
  font-family:var(--reload-font-display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0;
}
.reload-h1{ font-size:clamp(44px, 6.4vw, 84px) }
.reload-h2{ font-size:clamp(36px, 4.2vw, 56px) }
.reload-h3{ font-size:clamp(22px, 2.2vw, 32px) }

.reload-eyebrow{
  font-family:var(--reload-font-ui);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--reload-sage);
}

/* Buttons (pill style from Figma) */
.reload-btn,
.reload-btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--reload-font-ui);font-weight:500;
  font-size:16px;line-height:1.5;
  padding:10px 22px;border-radius:999px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease, background-color .25s ease,
             border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.reload-btn{
  background:var(--reload-melon-2);color:var(--reload-ink);
  border-color:var(--reload-melon-2);
}
.reload-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px -16px rgba(255,176,140,.65);
  background:#ffbf9e;border-color:#ffbf9e;
}
.reload-btn-outline{
  background:transparent;color:var(--reload-ink);
  border-color:var(--reload-ink);
}
.reload-btn-outline:hover{
  background:var(--reload-ink);color:var(--reload-cream);
}

/* Scroll reveal — JS adds .is-in when the section enters the viewport */
.reload-reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1) }
.reload-reveal.is-in{ opacity:1; transform:none }
.reload-reveal[data-delay="1"]{ transition-delay:.1s }
.reload-reveal[data-delay="2"]{ transition-delay:.2s }
.reload-reveal[data-delay="3"]{ transition-delay:.3s }
.reload-reveal[data-delay="4"]{ transition-delay:.4s }
.reload-reveal[data-delay="5"]{ transition-delay:.5s }

@media (prefers-reduced-motion: reduce){
  .reload-reveal{ opacity:1; transform:none; transition:none }
}

/* Shared spin keyframe used by the rotating brand icon */
@keyframes reload-spin{ to{ transform:rotate(360deg) } }

/* ============================================================
   Site Nav (rendered by header.php)
   ============================================================ */
.reload-nav{
  position:sticky; top:0; z-index:100;
  background:var(--reload-cream);
  border-bottom:1px solid var(--reload-border);
  transition:box-shadow .35s ease, background-color .35s ease;
}
.reload-nav.is-scrolled{
  box-shadow:0 10px 30px -22px rgba(46,64,91,.18);
}
.reload-nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding-top:18px; padding-bottom:18px;
}
.reload-nav-logo{ display:flex; align-items:center; text-decoration:none }
.reload-nav-logo img{ height:34px; width:auto; display:block }

.reload-nav-links{
  display:flex; gap:32px; align-items:center;
  list-style:none; margin:0; padding:0;
}
.reload-nav-links li{ list-style:none }
.reload-nav-links a{
  color:var(--reload-ink);
  text-decoration:none;
  font-size:16px; font-weight:400; line-height:1.5;
  position:relative; padding:6px 0; display:inline-block;
}
.reload-nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--reload-ink);
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.reload-nav-links a:hover::after,
.reload-nav-links .current-menu-item > a::after{ right:0 }

.reload-nav-actions{ display:flex; gap:14px; align-items:center }

.reload-nav-toggle{
  display:none;
  background:none; border:0; padding:8px;
  color:var(--reload-ink); cursor:pointer;
}
.reload-nav-toggle svg{ width:22px; height:22px; display:block }

@media (max-width: 960px){
  .reload-nav-toggle{ display:inline-flex }
  .reload-nav-links,
  .reload-nav-actions{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:16px;
    background:var(--reload-cream);
    padding:24px var(--reload-pad-x);
    border-bottom:1px solid var(--reload-border);
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease;
  }
  .reload-nav-actions{ top:auto; padding-top:0 }
  .reload-nav.is-open .reload-nav-links,
  .reload-nav.is-open .reload-nav-actions{
    opacity:1; pointer-events:auto; transform:none;
  }
}

/* ============================================================
   Site Footer (rendered by footer.php)
   Background SVG: assets/img/footer-brgnd.svg (cream + bottom-anchored
   RELOAD wordmark in melon, fading from transparent at the top to solid
   at the bottom). Height is fixed to 642px to match the design exactly.
   ============================================================ */
.reload-footer{
  position:relative; isolation:isolate;
  height:642px;
  background:var(--reload-cream) url('../img/footer-brgnd.svg') center bottom / 100% 100% no-repeat;
  overflow:hidden;
}
/* Content sits at the very top of the footer; the rest is the watermark */
.reload-footer > .reload-container{
  position:relative; z-index:1;
  padding-top:60px;
}

.reload-footer-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.reload-footer-brand-row{ display:flex; align-items:center; gap:64px; flex-wrap:wrap }
.reload-footer-mark{ width:36px; height:36px; display:block }
.reload-footer-mark img{
  width:100%; height:100%; display:block;
  animation:reload-spin 90s linear infinite; transform-origin:50% 50%;
}
.reload-footer-links{
  display:flex; gap:40px; list-style:none; margin:0; padding:0;
}
.reload-footer-links li{ list-style:none }
.reload-footer-links a{
  color:var(--reload-ink); font-weight:500; font-size:16px;
  text-decoration:none; position:relative; padding:4px 0; display:inline-block;
}
.reload-footer-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--reload-ink);
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.reload-footer-links a:hover::after{ right:0 }

.reload-footer-social{ display:flex; gap:14px }
.reload-footer-social a{
  width:40px; height:40px; border-radius:50%;
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
  color:var(--reload-ink);
  box-shadow:0 1px 0 rgba(46,64,91,.05);
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.reload-footer-social a:hover{
  background:var(--reload-melon-2); color:var(--reload-ink);
  transform:translateY(-2px);
}
.reload-footer-social svg{ width:18px; height:18px }

.reload-footer-divider{
  height:1px; background:rgba(46,64,91,.16); margin:36px 0 24px;
}
.reload-footer-credits{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap;
  font-size:14px; color:var(--reload-ink);
}
.reload-footer-credits p{ margin:0 }
.reload-footer-credits-links{
  display:flex; gap:32px; list-style:none; margin:0; padding:0;
}
.reload-footer-credits-links li{ list-style:none }
.reload-footer-credits-links a{
  color:var(--reload-ink); text-decoration:none;
}
.reload-footer-credits-links a:hover{ text-decoration:underline }

@media (max-width: 980px){
  .reload-footer{ height:auto; padding-bottom:220px; }    /* watermark still reads */
}
@media (max-width: 720px){
  .reload-footer-brand-row{ gap:24px }
  .reload-footer-links{ gap:24px; flex-wrap:wrap }
  .reload-footer-credits{ flex-direction:column; align-items:flex-start }
  .reload-footer{ padding-bottom:160px }
}


/* ============================================================
   Contact section (rendered site-wide by footer.php)
   ============================================================ */
.reload-contact{
    background:#8EB9B0;
    padding:64px var(--reload-pad-x);
  }
  .reload-contact-card{
    position:relative; isolation:isolate; overflow:hidden;
    max-width:1312px;
    margin:0 auto;
    background:#fff;
    border-radius:32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:602px;
  }

  .reload-contact-body{
    padding:64px 76px;
    display:flex; flex-direction:column; gap:24px;
    color:var(--reload-ink);
    position:relative; z-index:2;
  }
  .reload-contact-body h2{
    color:var(--reload-ink);
    font-size:clamp(32px, 4vw, 48px);
    line-height:1.05; letter-spacing:-.02em;
    margin:0;
  }
  .reload-contact-body p{
    margin:0; font-size:18px; line-height:1.55;
  }
  .reload-contact-body a{ color:var(--reload-ink); text-decoration:underline }

  /* Form */
  .reload-form{
    display:flex; flex-direction:column; gap:16px;
    margin-top:16px;
  }
  .reload-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .reload-field{
    display:flex; flex-direction:column; gap:8px;
  }
  .reload-field label{
    font-size:16px; color:var(--reload-ink);
  }
  .reload-field input{
    height:48px;
    padding:0 18px;
    border:1px solid var(--reload-border);
    border-radius:32px;
    background:#fff; color:var(--reload-ink);
    font:inherit; font-size:16px;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .reload-field input:focus{
    outline:none;
    border-color:var(--reload-ink);
    box-shadow:0 0 0 4px rgba(46,64,91,.12);
  }

  .reload-check{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14px; color:var(--reload-ink);
    margin-top:4px;
  }
  .reload-check input[type="checkbox"]{
    appearance:none; -webkit-appearance:none;
    width:18px; height:18px; border-radius:50%;
    border:1px solid var(--reload-ink);
    cursor:pointer; position:relative;
    transition:background-color .2s ease;
  }
  .reload-check input[type="checkbox"]:checked{ background:var(--reload-ink) }
  .reload-check input[type="checkbox"]:checked::after{
    content:""; position:absolute; left:4px; top:1px;
    width:6px; height:10px;
    border:solid #fff; border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .reload-check a{ color:var(--reload-ink); text-decoration:underline }

  .reload-form button[type="submit"]{
    align-self:flex-start;
    margin-top:12px;
    background:var(--reload-ink); color:#fff;
    border:1px solid var(--reload-ink);
    padding:12px 64px;
    border-radius:100px;
    font:500 16px var(--reload-font-ui);
    cursor:pointer;
    transition:transform .25s ease, background-color .25s ease,
               box-shadow .25s ease, color .25s ease;
  }
  .reload-form button[type="submit"]:hover{
    transform:translateY(-1px);
    background:var(--reload-melon-2); border-color:var(--reload-melon-2);
    color:var(--reload-ink);
    box-shadow:0 14px 28px -16px rgba(255,176,140,.6);
  }

  /* Decorative right side: oversized rotating mark */
  .reload-contact-deco{
    position:absolute;
    right:-160px; top:50%;
    transform:translateY(-50%);
    width:760px; height:760px;
    z-index:1; pointer-events:none;
    opacity:.85;
  }
  .reload-contact-deco img{
    width:100%; height:100%;
    animation:reload-spin 120s linear infinite;
    transform-origin:50% 50%;
    filter:hue-rotate(0deg) saturate(1.1);
  }

  @media (max-width: 980px){
    .reload-contact-card{ grid-template-columns:1fr }
    .reload-contact-body{ padding:48px 32px }
    .reload-contact-deco{ right:-50%; top:auto; bottom:-50%; transform:none; width:560px; height:560px; opacity:.35 }
    .reload-form-row{ grid-template-columns:1fr }
  }

/* ==========================================================
   Site-wide button normalisation.
   The parent theme + Elementor set red-tinted defaults on any bare
   <button> / <input type=submit>.  This rule pulls every button back
   to the brand pill + melon hover unless a component explicitly opts
   out.  Anything with `.reload-btn`, `.reload-btn-outline`, or one of
   the plugin/UI classes we already style is opted out.
   ========================================================== */
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  border-radius:100px;
  transition:transform .2s ease, background-color .2s ease,
             border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Kill the theme's red-family default hovers on any generic button.
   Only applies when the button doesn't carry one of the classes that
   already define their own hover state. */
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):not(
  .reload-btn, .reload-btn-outline,
  .reload-roles-reset,
  .reload-role-apply-close,
  .reload-role-apply-cancel,
  .reload-role-apply-submit,
  .reload-insights-filter *,
  .reload-nav-toggle,
  .elementor-button,
  .wp-block-button__link,
  .ra-btn, .ra-move-up, .ra-move-down, .ra-remove
):hover{
  background-color:var(--reload-melon-2, #FFB08C) !important;
  border-color:var(--reload-melon-2, #FFB08C) !important;
  color:var(--reload-ink, #2E405B) !important;
  box-shadow:0 14px 28px -16px rgba(255,176,140,.55);
}

/* Contact form Submit (theme-native form) — pill already, but also
   pin the outline focus ring to brand instead of the default red. */
.reload-form button[type="submit"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,176,140,.45);
}