/* ============================================
   BRAND GUIDELINES — DISPENSAIRE FRANÇAIS
   Colours: #176B85 (teal) / #87C1CD (light)
   Fonts: Myriad Pro (body) / Mangal (headings)
   ============================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Myriad Pro is not available on Google Fonts — using Noto Sans as a close substitute */
  --font-body: 'Noto Sans', 'Myriad Pro', system-ui, sans-serif;
  --font-headings: 'Noto Sans', 'Mangal', system-ui, sans-serif;
}

/* --- Primary accent colour --- */
/* Ghost uses --ghost-accent-color for buttons and links.
   The colour is configured in Admin > Design & Branding > Accent color.
   Setting #176B85 in the Ghost interface is enough for the buttons. */

/* --- Hero CTA button colour (override purple → teal) --- */
.bg-brand,
[class*="bg-brand"] {
  background-color: #176B85 !important;
}

.text-brand,
[class*="text-brand"] {
  color: #176B85 !important;
}

.border-brand,
[class*="border-brand"] {
  border-color: #176B85 !important;
}

.hover\:bg-brand:hover {
  background-color: #176B85 !important;
}

.hover\:text-brand:hover {
  color: #176B85 !important;
}

.focus-within\:border-brand:focus-within {
  border-color: #176B85 !important;
}

/* --- Links within content --- */
.ghost-content a:not([class*=kg-],[class*=btn]) {
  text-decoration-color: #176B85;
}

.ghost-content a:not([class*=kg-],[class*=btn]):hover {
  color: #176B85;
}

/* --- Headings in teal --- */
h1, h2, h3 {
  color: #176B85;
}

/* --- Accent colour on blockquotes --- */
.ghost-content blockquote {
  border-inline-start-color: #176B85;
}

/* --- "View all news" button --- */
.bg-bgr-reverse {
  background-color: #176B85;
}
.text-typ-reverse {
  color: #ffffff;
}

/* --- Footer: dark background (also set inline in footer.hbs) --- */
[data-footer] {
  background-color: #0D3D52;
}

/* --- Progress bar --- */
[data-progress-bar]::-webkit-progress-value,
[data-progress-bar]::-moz-progress-bar {
  background: #176B85;
}

/* --- Active slider bullets --- */
.glide__bullet--active[data-glide-dir] {
  background-color: #176B85;
}

/* --- Hero button text --- */
.bg-brand,
.bg-brand span,
a.bg-brand,
a.bg-brand span,
[class*="bg-brand"],
[class*="bg-brand"] span {
  color: #ffffff !important;
}

/* --- Hero outline button: teal text, white text on hover --- */
.border-brand.bg-transparent {
  color: #176B85 !important;
}
.border-brand.bg-transparent:hover {
  color: #ffffff !important;
  background-color: #176B85 !important;
}

/* --- Force text colour on all teal links/buttons --- */
a[class*="bg-brand"],
a[class*="bg-brand"] * {
  color: #ffffff !important;
}

/* ============================================
   BUTTONS — FORCED WHITE TEXT
   ============================================ */

/* Solid teal button — white text */
a.bg-brand,
button.bg-brand,
.bg-brand {
  color: #ffffff !important;
  background-color: #176B85 !important;
}

a.bg-brand span,
button.bg-brand span,
.bg-brand span {
  color: #ffffff !important;
}

/* Outline button — teal text by default, white on hover */
a[style*="border"],
.border-2.border-brand {
  color: #176B85 !important;
}

/* Override Ghost accent color everywhere */
[style*="--ghost-accent-color"] a,
.text-brand-contrast {
  color: #ffffff !important;
}

/* Direct targeting of hero CTA */
[data-hero] a[class*="bg-brand"],
[data-hero] a[class*="bg-brand"] span {
  color: #ffffff !important;
}

[data-hero] a[class*="border-brand"] {
  color: #176B85 !important;
}

[data-hero] a[class*="border-brand"]:hover {
  color: #ffffff !important;
}

/* ============================================
   NATIVE GHOST BUTTONS — TEAL + WHITE TEXT
   ============================================ */

/* Native Ghost button (kg-btn) */
.kg-btn,
.kg-btn-accent,
a.kg-btn,
a.kg-btn-accent {
  background-color: #176B85 !important;
  color: #ffffff !important;
  border-color: #176B85 !important;
}

.kg-btn *,
.kg-btn-accent * {
  color: #ffffff !important;
}

/* Button inside callout blocks */
.kg-callout-card .kg-btn {
  background-color: #176B85 !important;
  color: #ffffff !important;
}

/* All buttons with inline teal background style */
a[style*="background:#176B85"],
a[style*="background: #176B85"] {
  color: #ffffff !important;
}

a[style*="background:#176B85"] *,
a[style*="background: #176B85"] * {
  color: #ffffff !important;
}

/* Remove empty About section space on homepage */
[data-about] {
  display: none !important;
}

/* --- Pulse animation for "Donate" CTA --- */
@keyframes pulse-don {
  0%   { box-shadow: 0 0 0 0 rgba(235,183,12,0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(235,183,12,0); }
  100% { box-shadow: 0 0 0 0 rgba(235,183,12,0); }
}

/* ============================================
   FOOTER — RESPONSIVE GRID
   (replaces the non-responsive inline grid)
   ============================================ */
.df-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1.8fr;
  gap: 24px;
  padding: 2.5rem 0;
}
@media (max-width: 900px) {
  .df-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 560px) {
  .df-footer-grid { grid-template-columns: 1fr; gap: 24px; padding: 2rem 0; }
}

/* ============================================
   FOOTER NEWSLETTER — visual feedback
   Ghost sets .loading / .success / .error on the <form data-members-form>
   ============================================ */
.df-newsletter-form .df-nl-msg { display: none; }
.df-newsletter-form.success .df-nl-ok { display: block; }
.df-newsletter-form.error .df-nl-err { display: block; }
.df-newsletter-form .df-nl-loading { display: none; }
.df-newsletter-form.loading .df-nl-loading { display: inline; }
.df-newsletter-form.loading .df-nl-label { display: none; }