/*
Theme Name: Nanolight Terra
Template: generatepress
Version: 1.0.0
Description: Custom theme for Le Technicien Indépendant
*/

/* GP gap fixes below — option-key-first, CSS only for gaps */

/* ===========================================================
   Palette: terracotta-warm — CSS custom properties
   =========================================================== */
:root {
  --nlt-primary: #B45309;
  --nlt-secondary: #D97706;
  --nlt-accent: #CA8A04;
  --nlt-accent-warm: #FAF0E6;
  --nlt-surface: #FFFBEB;
  --nlt-background: #FFFFFF;
  --nlt-text: #1C1917;
  --nlt-text-secondary: #57534E;
  --nlt-border: #F5E6D0;
}

/* ===========================================================
   Typography — geometric-literary pairing
   Heading: Space Grotesk (700) / Body: Libre Baskerville (400/italic/700)
   Fallback stacks vary per site for footprint avoidance.
   =========================================================== */
body,
p,
li,
input,
textarea,
select {
  font-family: 'Libre Baskerville', Charter, serif;
  font-weight: 400;
  color: var(--nlt-text);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title,
.page-title {
  font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  color: var(--nlt-text);
}

em, i, blockquote {
  font-style: italic;
}

a {
  color: var(--nlt-primary);
}

a:hover {
  color: var(--nlt-secondary);
}

/* ===========================================================
   Body signature: sig-C (no-sidebar, one-container, nav-below-header)
   GP option keys carry the structural behaviour; this CSS only
   reinforces the single-column, unified-container visual result.
   =========================================================== */
.site-content,
.content-area {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

body.no-sidebar .content-area,
body.no-sidebar .site-content {
  width: 100%;
  float: none;
}

/* ===========================================================
   Mobile tagline rule (mandatory — Class M2-1 prevention)
   Variance phrase: "Trait de marque mobile affiché" (fresh, pool dictionary #45)
   =========================================================== */
@media (max-width: 767px) {
  .inside-navigation::before {
    content: "Infrastructure robuste, solutions pragmatiques, expertise terrain";
    font-style: italic;
    position: absolute;
    left: var(--gap-small, 8px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--nlt-text-secondary);
  }
  .inside-navigation { position: relative; }
}

/* ===========================================================
   Front-page visible H1 (sr-homepage-h1 convention)
   =========================================================== */
.sr-homepage-h1 {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 1.15rem;
  font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  color: var(--nlt-text);
  margin: 0;
  background: var(--nlt-surface);
}

/* ===========================================================
   Form submit button — palette primary (mandatory, GP Form gap)
   =========================================================== */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit,
body .search-form .search-submit,
body .wp-block-search__button {
  background-color: var(--nlt-primary) !important;
  color: #ffffff !important;
  border-radius: 4px;
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover,
body .search-form .search-submit:hover,
body .wp-block-search__button:hover {
  filter: brightness(0.88) !important;
}

/* Search input styling (classic + block) */
.search-field,
.wp-block-search__input {
  border: 1px solid var(--nlt-border);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95em;
  width: 100%;
  background: var(--nlt-background);
  color: var(--nlt-text);
}

/* ===========================================================
   Homepage composition: blog-1 minus hero ("no-hero" token)
   Section 1 (post grid, "Les nouveautés") + Section 2 (category cards)
   =========================================================== */
.nlt-recent-section,
.nlt-categories-section {
  max-width: 900px;
  margin: 0 auto 2.2em;
  padding: 0 1em;
}

.nlt-recent-section h2,
.nlt-categories-section h2 {
  font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  font-size: 1.4em;
  color: var(--nlt-primary);
  border-bottom: 2px solid var(--nlt-border);
  padding-bottom: 0.3em;
  margin-bottom: 1.2em;
}

.nlt-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2em;
}

.nlt-post-card {
  background: var(--nlt-background);
  border: 1px solid var(--nlt-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.nlt-post-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.nlt-post-card .nlt-card-content { padding: 1em; }
.nlt-post-card .nlt-card-content h3 {
  margin: 0 0 0.4em;
  font-size: 1.05em;
}
.nlt-post-card .nlt-card-content h3 a { color: var(--nlt-text); text-decoration: none; }
.nlt-post-card .nlt-card-content h3 a:hover { color: var(--nlt-primary); }
.nlt-post-card .nlt-excerpt { font-size: 0.9em; color: var(--nlt-text-secondary); margin-bottom: 0.6em; }
.nlt-post-card .nlt-read-more {
  font-size: 0.85em;
  color: var(--nlt-primary);
  text-decoration: none;
  font-weight: 700;
}
.nlt-post-card .nlt-read-more:hover { color: var(--nlt-secondary); }

.nlt-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
}

.nlt-cat-card {
  background: var(--nlt-surface);
  border: 1px solid var(--nlt-border);
  border-radius: 6px;
  padding: 0.8em 1.2em;
  flex: 1;
  min-width: 160px;
  text-align: center;
}

.nlt-cat-card a {
  color: var(--nlt-primary);
  text-decoration: none;
  font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 0.95em;
  display: block;
}
.nlt-cat-card a:hover { color: var(--nlt-secondary); }
.nlt-cat-card .nlt-cat-count { font-size: 0.8em; color: var(--nlt-text-secondary); }

@media (max-width: 600px) {
  .nlt-posts-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   About page — avatar-centered layout
   =========================================================== */
.avatar-centered {
  display: block;
  margin: 0 auto 1.5em;
  text-align: center;
}

.avatar-centered img {
  max-width: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.nlt-about-name {
  text-align: center;
  font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--nlt-primary);
  margin: 0 0 1.5em;
}

/* ===========================================================
   404 page
   =========================================================== */
.nlt-404-wrap {
  max-width: 700px;
  margin: 3em auto;
  text-align: center;
  padding: 0 1em;
}

.nlt-404-wrap h1 {
  font-size: 2.6em;
  color: var(--nlt-primary);
}

.nlt-404-wrap p {
  color: var(--nlt-text-secondary);
  font-size: 1.05em;
}

/* ===========================================================
   Footer — centered-light, no headings
   =========================================================== */
.site-footer,
.footer-bar-wrap {
  background: var(--nlt-background);
  border-top: 1px solid var(--nlt-border);
}

.site-footer .inside-top-bar,
.footer-widgets {
  text-align: center;
}

.footer-widgets .widget-title,
.site-footer .widget-title {
  display: none; /* footer headings: none */
}

.footer-widgets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  padding: 1.5em 1em;
}

.site-info,
.copyright-bar {
  text-align: center;
  color: var(--nlt-text-secondary);
  font-size: 0.9em;
  padding: 0.8em 0;
}

/* Scroll-to-top button — palette accent */
.generate-back-to-top {
  background-color: var(--nlt-primary) !important;
  color: #fff !important;
}