/*
Theme Name: Corde Oblique
Template: generatepress
Version: 1.0.0
Description: Custom theme for Le Carnet du Mécanicien
*/

:root {
  --cmc-radius: 8px;
  --cmc-shadow: 0 8px 30px rgba(0,0,0,0.12);
  --cmc-section-gap: 2rem;
  --cmc-block-gap: 1rem;
  --cmc-container-padding: 1rem;
  --cmc-primary: #334155;
  --cmc-secondary: #64748B;
  --cmc-accent: #475569;
  --cmc-accent-warm: #EFF1F5;
  --cmc-surface: #F8FAFC;
  --cmc-background: #FFFFFF;
  --cmc-text: #0F172A;
  --cmc-text-secondary: #64748B;
  --cmc-border: #E2E8F0;
}

/* Logo — SVG wordmark, max-height 60px per §10 logo type */
.site-logo img,
.header-image img {
  max-height: 60px;
  width: auto;
}

/* Front-page H1 — visible editorial tagline (mandatory, GP gap fix) */
.site-tagline-heading {
  display: block;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  color: var(--cmc-text);
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* Signature typographic rhythm across sections — geometric-literary variance token */
.cmc-section {
  padding: var(--cmc-section-gap) var(--cmc-container-padding);
}
.cmc-section + .cmc-section {
  border-top: 1px solid var(--cmc-border);
}
.cmc-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* Rounded corners + dramatic shadow on cards — moderate radius token */
.cmc-card,
.cmc-hero-card {
  border-radius: var(--cmc-radius);
  box-shadow: var(--cmc-shadow);
  background: var(--cmc-background);
}

/* Search widget styling — classic + block (APPENDIX-E §8) */
.search-field,
.wp-block-search__input {
  border: 1px solid var(--cmc-border);
  border-radius: var(--cmc-radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95em;
  width: 100%;
  background: var(--cmc-background);
  color: var(--cmc-text);
}
.search-submit,
.wp-block-search__button {
  background: var(--cmc-primary);
  color: #fff;
  border: none;
  border-radius: var(--cmc-radius);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.95em;
  cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover {
  opacity: 0.85;
}

/* Mobile tagline rule — mandatory, Class M2-1 prevention.
   Variance comment: "Ancrage de ligne éditoriale" (dictionary #44) */
@media (max-width: 767px) {
  .inside-navigation::before {
    content: "La mécanique, ça se comprend. Encore faut-il qu'on vous l'explique vraiment.";
    font-style: italic;
    position: absolute;
    left: var(--gap-small, 8px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--cmc-text);
  }
  .inside-navigation { position: relative; }
}

/* Submit-button palette rule (mandatory — gated by contact-form-render.cjs form_button_palette_match) */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
  background-color: #334155 !important;
  color: #ffffff !important;
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
  filter: brightness(0.88) !important;
}

/* Avatar circle helper (About page layout — avatar-left, kept generic for future use) */
.avatar-left img {
  object-fit: cover;
}

/* Nav overflow fix — tighten spacing for 5-item category-only nav under compact container_width */
.main-navigation .main-nav ul.menu > li > a,
.main-navigation .inside-navigation .main-nav ul.menu > li > a,
nav#site-navigation ul.menu > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.82em !important;
    letter-spacing: normal !important;
}