/*
Theme Name: Quermovo
Theme URI: https://quermovo.be
Author: Quermovo
Description: Custom theme for Quermovo - Driving Quality with Purpose. Quality & Compliance consulting for clinical development and pharmaceutical manufacturing.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: quermovo
*/

/* -----------------------------------------
   CSS Custom Properties
----------------------------------------- */
:root {
  --teal-dark: #0b6659;
  --teal: #14877a;
  --teal-light: #1ea593;
  --blue-dark: #17395c;
  --blue: #2c5f8a;
  --blue-light: #4f86b8;
  --bg-page: #e9f1f8;
  --bg-card: #dfeaf5;
  --bg-card-alt: #d3e4f2;
  --text-main: #1c3a56;
  --text-muted: #4a6b85;
  --white: #ffffff;
  --radius: 6px;
  --max-width: 1200px;
  --font-heading: 'Poppins', 'Open Sans', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -----------------------------------------
   Reset / Base
----------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--bg-page);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { color: var(--teal); }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--blue-dark);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; letter-spacing: .5px; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 18px; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 70px 0; }
.section--tight { padding: 40px 0; }
.text-center { text-align: center; }

/* -----------------------------------------
   Header
----------------------------------------- */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 14px rgba(23, 57, 92, .18);
}
.site-header-graphic {
  position: absolute;
  top: 0;
  left: 0;
  height: 293px;
  width: auto;
  z-index: 1;
  pointer-events: none;
}
.header-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  padding: 14px 32px 4px;
  font-size: 14px;
  color: var(--blue-dark);
}
.header-top a { color: var(--blue-dark); }
.header-top .top-item { display: flex; align-items: center; gap: 8px; }
.header-top svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-dark); }

.main-nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 8px 32px 18px;
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 42px;
}
.main-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-dark);
  letter-spacing: .5px;
}
.main-nav a.active,
.main-nav a:hover { color: var(--teal); }

.nav-toggle {
  display: none;
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: 2px solid var(--blue-dark);
  border-radius: 4px;
  width: 42px;
  height: 38px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blue-dark);
  margin: 4px auto;
}

/* -----------------------------------------
   Page content wrapper (for the_content())
----------------------------------------- */
.entry-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 32px 70px;
}
.entry-content > * { max-width: 100%; }
/* Guarantee a minimum gap between every top-level block on a page, so a
   block that only declares its own margin-top (or none at all) can never
   collapse flush against the block before it. Margins still collapse to
   the larger of the two, so this only raises gaps that were too small —
   it never stacks on top of an existing bigger margin. The doubled class
   bumps specificity so this reliably wins regardless of stylesheet order,
   without having to remember to add spacing to every new block by hand. */
.entry-content.entry-content > * + * {
  margin-top: 30px;
}

/* -----------------------------------------
   Hero (Home) — core/cover block
----------------------------------------- */
.quermovo-hero {
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 50px;
  padding-left: 0;
}
.quermovo-hero .wp-block-cover__inner-container {
  width: 100%;
  padding: 20px 20px 20px 0;
}
/* Lighten the compass photo: swap the default dark navy dim overlay for a
   soft white wash instead, rather than darkening it further. */
.quermovo-hero .wp-block-cover__background {
  background-color: #ffffff !important;
  opacity: .35 !important;
}
.hero-quote-text {
  display: block;
  max-width: 780px;
  margin: 0 !important;
  background: transparent;
  border-left: 6px solid var(--teal);
  padding: 32px 40px;
  border-radius: var(--radius);
  font-size: 1.2rem;
  font-style: italic;
  color: #0b1f33 !important;
  text-align: center;
}

/* -----------------------------------------
   Section band (core/group) — alternating background
----------------------------------------- */
.band {
  padding: 40px 32px;
  border-radius: var(--radius);
  margin: 0 0 30px;
}
.band > :last-child { margin-bottom: 0; }
.band--shaded { background: var(--bg-card); }
.band h2 { text-align: center; margin-bottom: 24px; }
.cta-highlight {
  display: block;
  margin-top: 30px;
}

/* -----------------------------------------
   Page header banner (non-home pages)
----------------------------------------- */
.page-title-row {
  padding-top: 40px;
  padding-bottom: 10px;
}
.page-title-row h1 {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  overflow-wrap: break-word;
}

/* -----------------------------------------
   Intro / generic content sections
----------------------------------------- */
.intro-text {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.08rem;
}
.compass-figure {
  max-width: 420px;
  height: 260px;
  margin: 36px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(23, 57, 92, .18);
}
.compass-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------
   About page sections
----------------------------------------- */
.about-block.wp-block-columns {
  gap: 48px;
  align-items: center;
}
.wordcloud-figure img { border-radius: var(--radius); }
.about-block .lede { font-size: 1.1rem; color: var(--blue-dark); }

.path-block { margin-top: 20px; }
.path-item {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 18px;
}
.path-item h3 { margin-bottom: 8px; }
.path-item h3 a { border-bottom: 1px dotted var(--blue); }

.values-quote {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--teal-dark);
  font-size: 1.15rem;
  margin: 24px 0;
}

.name-heritage {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  margin-top: 30px;
}
.name-heritage .letterhead-figure {
  max-width: 480px;
  margin: 28px auto 0;
}

/* -----------------------------------------
   Testimonials
----------------------------------------- */
.testimonials-grid.wp-block-columns {
  gap: 22px;
  margin-top: 20px;
}
.testimonial-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 18px;
  font-size: .97rem;
  color: var(--blue-dark);
}
.testimonial-card--alt { background: var(--bg-card-alt); }

/* -----------------------------------------
   Licenses
----------------------------------------- */
.license-block {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-top: 20px;
}
.license-block h3 { color: var(--teal-dark); margin-bottom: 6px; }
.license-block > div { margin-bottom: 26px; }
.license-block > div:last-child { margin-bottom: 0; }

/* -----------------------------------------
   Services
----------------------------------------- */
.services-group { margin-bottom: 60px; }
.services-group h2 { text-align: center; margin-bottom: 30px; }
.services-columns.wp-block-columns { gap: 28px; }
.service-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.service-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--teal-dark);
  font-size: 1.15rem;
}
.service-card h3::before {
  content: '';
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at 30% 30%, #cfe3f4, var(--blue-light));
  border-radius: 50%;
}
.service-card ul { margin-top: 16px; }
.service-card li {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 12px;
}
.service-card li strong { color: var(--blue-dark); }

/* -----------------------------------------
   Contact
----------------------------------------- */
.contact-wrap.wp-block-columns {
  gap: 48px;
  align-items: start;
}
.contact-info {
  border-left: 5px solid var(--teal);
  padding-left: 24px;
}
.contact-info a { display: block; margin-top: 10px; font-weight: 600; }
.contact-form-panel {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 32px;
}
/* The hCaptcha plugin lazy-loads its widget until the visitor interacts with
   the page, and shows a "failed to load" placeholder message via ::after if
   the widget hasn't appeared within 2s of page load. That's a false alarm
   (the widget is only delayed, not broken) and it visually stacks on top of
   the ::before logo placeholder, looking like a doubled/glitched widget.
   Suppress just that misleading message; the plain logo placeholder remains
   as a normal, unremarkable loading state until the real widget swaps in. */
.contact-form-panel .h-captcha::after {
  content: none !important;
  animation: none !important;
  opacity: 0 !important;
}
.contact-form-panel h3 {
  text-decoration: underline;
  margin-bottom: 20px;
}
.contact-form-panel label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--blue-dark);
}
.contact-form-panel .wpcf7-form br { display: none; }
.contact-form-panel .wpcf7-form p { margin-bottom: 0; }
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel textarea,
.contact-form-panel .wpcf7-form-control:not(.h-captcha) {
  width: 100%;
  border: none;
  border-radius: 4px;
  background: #cfe3d9;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 20px;
  resize: vertical;
}
/* Let hCaptcha fully control its own box (fixed 302x76/158x138 size, its own
   background/placeholder graphics) instead of inheriting our input styling —
   forcing width:100% + padding + background onto it stretched the container
   away from the fixed-size widget rendered inside, producing a visible
   "double box" / offset effect once the real widget swapped in. */
.contact-form-panel .h-captcha {
  margin-bottom: 20px;
}
.contact-form-panel textarea,
.contact-form-panel textarea.wpcf7-form-control { min-height: 140px; }
.contact-form-panel button,
.contact-form-panel input.wpcf7-submit {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 14px 36px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease;
}
.contact-form-panel button:hover,
.contact-form-panel input.wpcf7-submit:hover { background: var(--teal-dark); }
.contact-form-panel .wpcf7-spinner { margin-left: 12px; }
.contact-form-panel .wpcf7-not-valid-tip {
  display: block;
  color: #b3261e;
  font-size: .85rem;
  font-weight: 600;
  margin: -14px 0 16px;
}
.contact-form-panel .wpcf7-response-output {
  padding: 14px 18px;
  border-radius: 4px;
  margin: 0 0 20px;
  font-weight: 600;
  border: none !important;
}
.contact-form-panel form.sent .wpcf7-response-output {
  background: #d6f0e3;
  color: #0b6659;
}
.contact-form-panel form.failed .wpcf7-response-output,
.contact-form-panel form.aborted .wpcf7-response-output,
.contact-form-panel form.spam .wpcf7-response-output {
  background: #f8d7da;
  color: #842029;
}
.contact-form-panel form.invalid .wpcf7-response-output {
  background: #fff3cd;
  color: #7a5c00;
}
.form-message {
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-weight: 600;
}
.form-message.success { background: #d6f0e3; color: #0b6659; }
.form-message.error { background: #f8d7da; color: #842029; }

/* -----------------------------------------
   Footer
----------------------------------------- */
.site-footer {
  background: var(--blue-dark);
  color: #cfe0ee;
  padding: 34px 0;
  margin-top: 40px;
  font-size: .92rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.site-footer a { color: #cfe0ee; }
.site-footer a:hover { color: var(--teal-light); }

/* -----------------------------------------
   Responsive
----------------------------------------- */
@media (max-width: 680px) {
  body { font-size: 16px; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .site-header { padding-top: 196px; box-shadow: 0 2px 10px rgba(23,57,92,.15); }
  .site-header-graphic { height: 188px; }
  .header-top { justify-content: center; gap: 16px; padding: 0 16px; flex-wrap: wrap; font-size: 12px; }
  .nav-toggle { display: block; top: 32px; }
  .main-nav { justify-content: center; padding: 14px 16px 18px; }
  .main-nav ul { display: none; gap: 14px; flex-direction: column; text-align: center; width: 100%; }
  .main-nav ul.is-open { display: flex; }
  .container { padding: 0 20px; }
  .entry-content { padding: 30px 20px 50px; }
  .section { padding: 44px 0; }
  .hero-quote-text { padding: 24px; }
  .page-title-row h1 { text-align: left; }
  .name-heritage { padding: 24px; }
}