/*!
Theme Name: euno-starter
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Euno starter theme — header and footer chrome only
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: euno
Tags: custom-logo, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

euno is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ============================================
   EUNO — Main Stylesheet
   ============================================ */

/* 1. CSS Reset
   -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* 2. Custom Properties (Design Tokens)
   -------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #7032DC;
  --color-secondary: #FDECA9;
  --color-error: #D10216;
  --color-neutral: #F2DCC6;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-grey: #C7C7CC;
  --color-neutral-dark: #D4B896;

  /* Gradients */
  --gradient-footer: linear-gradient(180deg, #F2DCC6 0%, #7032DC 100%);

  /* Typography */
  --font-family: 'Roboto', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Container */
  --container-max: 1120px;
  --container-padding: 1.25rem;
}

/* 3. Base Typography
   -------------------------------------------- */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.0625rem;
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h2 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-md);
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

strong { font-weight: 700; }

a:hover { opacity: 0.85; }

/* 4. Layout
   -------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.page-main {
  min-height: 60vh;
  padding-bottom: var(--space-3xl);
}

.text-center { text-align: center; }

/* Block content vertical rhythm */
.entry-content > * + * {
  margin-top: var(--space-xl);
}

/* Restore list styles in content */
.entry-content ul {
  list-style: disc;
  padding-left: var(--space-lg);
}

.entry-content ol {
  list-style: decimal;
  padding-left: var(--space-lg);
}

.entry-content li {
  margin-bottom: var(--space-xs);
}

/* 5. Buttons
   -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  text-align: center;
  white-space: nowrap;
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary: purple bg / white text (large) or yellow bg / black text (small) */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.875rem 2rem;
  font-size: 1.125rem;
}

.btn--primary-yellow {
  background: var(--color-secondary);
  color: var(--color-black);
  padding: 0.75rem 1.5rem;
  font-size: 1.0625rem;
}

/* Secondary: neutral bg / purple text */
.btn--secondary {
  background: var(--color-neutral);
  color: var(--color-primary);
  padding: 0.875rem 2rem;
  font-size: 1.125rem;
}

.btn--secondary-yellow {
  background: var(--color-secondary);
  color: var(--color-primary);
  padding: 0.875rem 2rem;
  font-size: 1.125rem;
}

/* Sizes */
.btn--large {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.1875rem;
}

.btn--medium {
  padding: 0.75rem 1.5rem;
  font-size: 1.0625rem;
}

.btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

/* Icon button (for email icon in newsletter) */
.btn--icon {
  width: 64px;
  height: 52px;
  padding: 0;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

/* 6. Header
   -------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--container-padding);
  position: sticky;
  top: 0;
  background: var(--color-neutral);
  z-index: 100;
}

.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.header-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.header-logo .custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo .custom-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-neutral-dark);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-black);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-neutral);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: var(--space-md) var(--container-padding);
  z-index: 99;
}

.main-nav.is-open { display: block; }

.main-nav ul { display: flex; flex-direction: column; gap: var(--space-sm); }

.main-nav a {
  display: block;
  padding: var(--space-sm) 0;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--color-black);
}
.main-nav a:hover { color: var(--color-primary); }

/* 7. Footer
   -------------------------------------------- */
.site-footer {
  background: var(--gradient-footer);
  padding: var(--space-2xl) var(--container-padding) var(--space-xl);
  color: var(--color-white);
  text-align: center;
}

.footer-newsletter { margin-bottom: var(--space-xl); }

.footer-newsletter h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-black);
}

.newsletter-form {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  max-width: 400px;
  margin: 0 auto var(--space-md);
}

.newsletter-form input {
  flex: 1;
  padding: 0.875rem;
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-black);
  font-size: 0.875rem;
}
.newsletter-form input::placeholder { color: var(--color-grey); }

.footer-social {
  margin-bottom: var(--space-xl);
}

.footer-social .btn {
  border: none;
  width: 100%;
  max-width: 400px;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xl);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.site-footer .footer-links a {
  font-size: 1.0625rem;
  color: var(--color-white);
  opacity: 1;
}
.site-footer .footer-links a:hover { opacity: 0.85; text-decoration: underline; }

.footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.footer-logo-euno {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  font-weight: 800;
  font-size: 1.375rem;
}

.footer-logo-euno img {
  width: 120px;
  height: 40px;
}

.footer-logo-mundai {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.5rem;
}

.footer-logo-mundai svg {
  width: 72px;
  height: auto;
}

/* Mundai logo heartbeat animation */
.footer-logo-mundai #mundai-logo {
  fill: var(--color-white);
  stroke: none;
}

.footer-logo-mundai .symbol {
  fill: none;
  stroke: var(--color-white);
  stroke-linejoin: round;
  stroke-width: 7px;
}

.footer-logo-mundai .word {
  fill: var(--color-white);
}

.footer-logo-mundai:hover .symbol path {
  animation: heartbeat 1.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(0.9); }
  14% { transform: scale(1); }
  28% { transform: scale(0.9); }
  42% { transform: scale(1); }
  70% { transform: scale(0.9); }
}

/* 8. Forms
   -------------------------------------------- */
.form-group {
  margin-bottom: var(--space-lg);
}

.form__label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  font-size: 0.9375rem;
}

.form__required { color: var(--color-error); }

.form__input {
  width: 100%;
  padding: 0.625rem 0;
  border: none;
  border-bottom: 2px solid var(--color-black);
  background: transparent;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.form__input:focus { border-bottom-color: var(--color-primary); }
.form__input::placeholder { color: var(--color-grey); }

/* Boxed variant (used on contact page email field) */
.form__input--boxed {
  border: 2px solid var(--color-black);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
}
.form__input--boxed:focus { border-color: var(--color-primary); }

.form__select {
  width: 100%;
  padding: 0.625rem 2rem 0.625rem 0;
  border: none;
  border-bottom: 2px solid var(--color-black);
  background: transparent;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("img/Arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0 center;
  cursor: pointer;
  outline: none;
}
.form__select:focus { border-bottom-color: var(--color-primary); }

.form__textarea {
  width: 100%;
  padding: 0.625rem 0;
  border: none;
  border-bottom: 2px solid var(--color-black);
  background: transparent;
  font-size: 1rem;
  resize: vertical;
  min-height: 80px;
  outline: none;
}
.form__textarea:focus { border-bottom-color: var(--color-primary); }

/* Checkbox group */
.form__checkbox-group {
  margin-bottom: var(--space-lg);
}

.form__checkbox-group-label {
  font-weight: 700;
  margin-bottom: var(--space-sm);
  display: block;
  font-size: 0.9375rem;
}

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.form__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}

.form__checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form__checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form__consent {
  font-size: 0.875rem;
  line-height: 1.5;
}

.form__consent strong {
  font-weight: 700;
}

/* Simple page (merci, erreur, 404) */
.simple-page {
  text-align: center;
  padding: var(--space-3xl) 0;
}

.simple-page .emoji {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: block;
}

.simple-page h1 {
  margin-bottom: var(--space-md);
}

.simple-page p {
  font-size: 1.0625rem;
  color: #333;
  margin-bottom: var(--space-xl);
}

/* Back to home button wrapper */
.back-home {
  margin-top: var(--space-xl);
  text-align: center;
}

/* 9. Collapsible Sections
   -------------------------------------------- */
.section-collapsible {
  border: 1px solid var(--color-black);
  border-bottom: 3px solid var(--color-black);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  overflow: hidden;
  padding: 0;
}

.section-collapsible > h2,
.section-collapsible > .wp-block-group__inner-container > h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--container-padding);
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  gap: var(--space-sm);
}

.section-collapsible > h2::after,
.section-collapsible > .wp-block-group__inner-container > h2::after {
  content: '';
  display: block;
  width: 26px;
  height: 20px;
  flex-shrink: 0;
  background: url(img/Arrow-up.svg) no-repeat center / contain;
}

.section-collapsible.is-collapsed > h2::after,
.section-collapsible.is-collapsed > .wp-block-group__inner-container > h2::after {
  background-image: url(img/Arrow-down.svg);
}

.section-collapsible__body {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.section-collapsible__body > .wp-block-group__inner-container {
  padding: 0 var(--container-padding) var(--space-md);
}

/* 10. Responsive Overrides
   -------------------------------------------- */

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }

  /* Header: show nav inline, hide hamburger */
  .hamburger { display: none; }

  .main-nav {
    display: flex;
    position: static;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .main-nav ul {
    flex-direction: row;
    gap: var(--space-lg);
  }

  .main-nav a { padding: 0; font-size: 1.2rem; }

  /* Buttons: don't force full width */
  .btn--large { width: auto; }
  .footer-social .btn--large { width: 100%; }
}

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }

  .container { padding: 0 var(--space-xl); }

  /* Footer links wider */
  .footer-links { max-width: 500px; }
}