/*
Theme Name: JPC Argent Compact
Description: Variante réversible du thème Argent pour le site Juvisy Poker Club.
Template: argent
Version: 0.1.0
Text Domain: jpc-argent-child
*/

:root {
  --jpc-ink: #252525;
  --jpc-muted: #595959;
  --jpc-accent: #c91d3a;
  --jpc-header: #101010;
  --jpc-content-width: 860px;
}

/* En-tête commun à toutes les pages. */
.site-header {
  align-items: center;
  background: var(--jpc-header);
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  justify-content: space-between;
  min-height: 76px;
  padding: 8px clamp(16px, 3vw, 40px);
  position: relative;
}
.site-header .site-branding,
.home .site-header .site-branding,
body:not(.home) .site-header .site-branding {
  align-items: center;
  background-color: transparent;
  background-image: none !important;
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
  overflow: visible;
  padding: 0;
  text-align: left;
}
.site-header .site-branding::before { display: none !important; }
.site-header .site-title,
body:not(.home) .site-header .site-title {
  clip: auto;
  display: block;
  height: auto;
  margin: 0;
  max-width: none;
  overflow: visible;
  position: static;
  width: auto;
}
.site-header .site-title a {
  align-items: center;
  border: 0;
  color: #fff;
  display: inline-flex;
  line-height: 1;
  background: #f7f7f7;
  border-radius: 4px;
  padding: 4px;
}
.site-header .jpc-brand-logo { display: block; height: 60px; width: 60px; }
.site-header .site-description { display: none; }
.site-header .main-navigation {
  background: transparent;
  clear: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  width: auto;
}
.site-header .main-navigation > div > ul {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(9px, 1.2vw, 20px);
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.site-header .main-navigation > div > ul > li {
  border: 0;
  display: block;
  flex: 0 0 auto;
  padding: 0;
}
.site-header .main-navigation > div > ul > li > a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  padding: 12px 0;
}
.site-header .nav-menu > li > a::after { display: none; }
.site-header .main-navigation ul ul { top: 100%; }
.site-header .main-navigation ul ul a { font-size: 14px; line-height: 1.35; }
.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus-visible,
.site-header .main-navigation .current-menu-item > a { color: #fff; text-decoration: underline; text-decoration-color: var(--jpc-accent); text-underline-offset: 6px; }
.site-header .menu-toggle,
.site-header a:focus-visible,
.site-header button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Typographie et rythme des pages du thème. */
body { color: var(--jpc-ink); font-family: Cabin, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6,
.single .entry-title, .page-title, .comments-title, .comment-reply-title {
  font-family: Cabin, Helvetica, Arial, sans-serif;
  font-style: normal;
  line-height: 1.2;
}
.page-title, .single .entry-title { font-size: clamp(28px, 3.2vw, 40px); margin: 0; }
.page-header, .single .entry-header { margin-bottom: clamp(24px, 3vw, 40px); }
.page-content, .entry-content, .entry-summary { margin-top: 0; }
.site-main { margin-top: clamp(20px, 3vw, 40px); }
.page-content p, .entry-content p { margin-bottom: 1.2em; }
.page-content a, .entry-content a { text-underline-offset: 3px; }
.page-content a:focus-visible, .entry-content a:focus-visible,
.page-content button:focus-visible, .entry-content button:focus-visible,
.page-content input:focus-visible, .entry-content input:focus-visible,
.page-content textarea:focus-visible, .entry-content textarea:focus-visible {
  outline: 3px solid var(--jpc-accent);
  outline-offset: 3px;
}

/* Argent impose 860 px dès 768 px, ce qui crée un débordement à 800 px. */
@media (min-width: 768px) {
  .single-jetpack-portfolio .entry-header,
  .page-header,
  .single-jetpack-portfolio .entry-content,
  .page-content,
  .page .entry-meta,
  .single-jetpack-portfolio .entry-meta,
  .comments-area,
  .post-navigation,
  .posts-navigation {
    max-width: var(--jpc-content-width);
    width: calc(100% - 48px);
  }
}

/* L'intégration du calendrier possède actuellement une largeur fixe de 420 px. */
.wp-block-jetpack-google-calendar { box-sizing: border-box; max-width: 100%; width: 100%; }
.wp-block-jetpack-google-calendar iframe { display: block; max-width: 100%; width: 100% !important; }

/* Le menu compact se déclenche avant que huit liens ne se chevauchent. */
@media (max-width: 1199px) {
  .site-header { min-height: 68px; }
  .site-header .jpc-brand-logo { height: 52px; width: 52px; }
  .site-header .main-navigation { flex: 0 0 auto; }
  .site-header .menu-toggle { display: block; margin: 0; }
  .site-header .main-navigation > div > ul { display: none; }
  .site-header .main-navigation.toggled .nav-menu {
    background: var(--jpc-header);
    box-shadow: 0 12px 20px #0004;
    display: block;
    left: 0;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 8px 20px 16px;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 1000;
  }
  .site-header .main-navigation .nav-menu li { border-bottom: 1px solid #ffffff33; display: block; padding: 0; }
  .site-header .main-navigation .nav-menu li:last-child { border-bottom: 0; }
  .site-header .main-navigation .nav-menu a { font-size: 15px; padding: 10px 12px; }
  .site-header .main-navigation .nav-menu ul {
    background: transparent;
    display: block;
    float: none;
    left: auto;
    margin: 0 0 4px 16px;
    position: static;
    width: auto;
  }
  .site-header .main-navigation .nav-menu ul::before { display: none; }
  .site-header .main-navigation .nav-menu ul a { color: #ddd; font-size: 14px; width: auto; }
}
@media (max-width: 600px) {
  .site-header { padding: 8px 16px; }
  .site-header .jpc-brand-logo { height: 48px; width: 48px; }
  .page-title, .single .entry-title { font-size: clamp(27px, 8vw, 34px); }
  .page:not(.home) .hentry, .home .page-content { margin-left: 20px; margin-right: 20px; }
}