/*
Theme Name: Vivre Saint-Brieuc Child (Twenty Twenty)
Theme URI: https://example.com/
Description: Child theme for Twenty Twenty.
Author: Vivre Saint-Brieuc
Template: twentytwenty
Version: 1.0.0
Text Domain: vivre-saint-brieuc-twenty-child
*/

/* ==========================================================================
   1. IMPORTS
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

/* ==========================================================================
   2. POLICES LOCALES — CeraPRO
   ========================================================================== */

@font-face {
  font-family: "CeraPRO";
  src: url("assets/fonts/CeraPRO-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CeraPRO";
  src: url("assets/fonts/CeraPRO-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CeraPRO";
  src: url("assets/fonts/CeraPRO-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CeraPRO";
  src: url("assets/fonts/CeraPRO-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CeraPRO";
  src: url("assets/fonts/CeraPRO-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CeraPRO";
  src: url("assets/fonts/CeraPRO-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Dalia";
  src: url("assets/fonts/Dalia.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. VARIABLES CSS (palette de couleurs)
   ========================================================================== */

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #878787; /* gris texte par défaut */
  --color-green: #009b9c; /* vert/sarcelle — accents éditoriaux */
  --color-red: #e83754; /* rouge — boutons et accents forts */
  --color-orange: #ef7d0a; /* orange — icônes sociales, footer, flèches */
}

/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */

/* Applique Manrope sur tous les éléments texte quand les polices variables
   sont supportées par le navigateur */
@supports (font-variation-settings: normal) {
  body,
  input,
  textarea,
  button,
  .button,
  .faux-button,
  .faux-button.more-link,
  .wp-block-button__link,
  .wp-block-file__button,
  .has-drop-cap:not(:focus)::first-letter,
  .entry-content,
  .entry-content .wp-block-archives,
  .entry-content .wp-block-categories,
  .entry-content .wp-block-latest-posts,
  .entry-content .wp-block-latest-comments,
  .entry-content .wp-block-cover-image p,
  .entry-content .wp-block-pullquote,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content cite,
  .entry-content figcaption,
  .entry-content table,
  .entry-content address,
  .entry-content .wp-caption-text,
  .entry-content .wp-block-file,
  .widget-content cite,
  .widget-content figcaption,
  .widget-content .wp-caption-text,
  .widget_text p,
  .widget_text ol,
  .widget_text ul,
  .widget_text dl,
  .widget_text dt,
  .widget-content .rssSummary {
    font-family: "CeraPRO", "Manrope", Verdana, Arial, sans-serif !important;
    font-weight: 400;
  }
}

h1,
.heading-size-1 {
  font-family: "Dalia", "CeraPRO", "Manrope", Verdana, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700 !important;
}

h2 {
  font-weight: 600 !important;

  b,
  strong {
    font-weight: inherit !important;
  }
}

b,
strong {
  font-weight: 500;
}

h3,
h4,
h5,
h6,
.faux-heading {
  font-weight: 500 !important;

  b,
  strong {
    font-weight: inherit !important;
  }
}

@media (min-width: 700px) {
  h1,
  .heading-size-1,
  h2.entry-title {
    font-size: 6rem;
  }
}

@media (min-width: 1220px) {
  h1,
  .heading-size-1,
  h2.entry-title {
    font-size: 7.4rem;
  }
}

/* ==========================================================================
   4. COULEURS — APPLICATION DE LA PALETTE
   ========================================================================== */

.entry-content hr::before,
.entry-content hr::after,
hr.styled-separator::before,
hr.styled-separator::after {
  background: var(--color-primary);
}

/* Couleur principale (gris) sur tous les éléments de texte secondaire */
.entry-content hr:not(.has-background),
hr.styled-separator,
cite,
figcaption,
.wp-caption-text,
.site-description,
.toggle-inner .toggle-text,
.post-meta,
:root .has-secondary-color,
.entry-content .wp-block-archives li,
.entry-content .wp-block-categories li,
.entry-content .wp-block-latest-posts li,
.wp-block-latest-comments__comment-date,
.wp-block-latest-posts__post-date,
.wp-block-embed figcaption,
.wp-block-image figcaption,
.wp-block-pullquote cite,
.comment-metadata,
.comment-respond .comment-notes,
.comment-respond .logged-in-as,
.pagination .dots,
.widget .post-date,
.widget .rss-date,
.widget_archive li,
.widget_categories li,
.widget_pages li,
.widget_meta li,
.widget_nav_menu li,
.footer-credits .privacy-policy,
.powered-by-wordpress,
.to-the-top {
  color: var(--color-primary);
}

:root .has-secondary-background-color {
  background-color: var(--color-primary);
}

/* Couleur rouge sur les accents (fonds, bordures, SVG fill, catégories) */
.bg-accent,
.bg-accent-hover:hover,
.bg-accent-hover:focus {
  background-color: var(--color-red) !important;
}

.border-color-accent,
.border-color-accent-hover:hover,
.border-color-accent-hover:focus {
  border-color: var(--color-red) !important;
}

.fill-children-accent,
.fill-children-accent * {
  fill: var(--color-red) !important;
}

/* Étiquettes de catégorie en rouge */
.entry-categories-inner a {
  color: var(--color-red) !important;
}

/* Le template "Tous les articles" est une page singulière, on neutralise la
   teinte de liens "singular" du thème parent pour retrouver le rendu home. */
.template-tous-les-articles .entry-header .entry-title a,
.template-tous-les-articles .entry-header .entry-title a:visited,
.template-tous-les-articles .entry-header .entry-title a:hover,
.template-tous-les-articles .entry-header .entry-title a:focus {
  color: var(--color-black) !important;
}

.template-tous-les-articles .pagination-single .page-numbers.disabled,
.template-tous-les-articles .pagination-single .previous-post.disabled,
.template-tous-les-articles .pagination-single .next-post.disabled {
  color: var(--color-primary) !important;
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

/* Logo agrandi sur desktop */
@media (min-width: 700px) {
  .site-logo img {
    max-height: 12rem; /* 120px desktop */
  }
}

@media (min-width: 1220px) {
  h1, .heading-size-1, h2.entry-title {
    font-size: 6.8rem;
  }
}

/* ==========================================================================
   6. CONTENU — LARGEUR MAX ET MISE EN PAGE
   ========================================================================== */

/* Largeur maximale du contenu alignée sur 72rem */
.section-inner.thin,
.post-meta-wrapper,
.post-nav-links,
.author-bio,
[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
[class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.alignfull > figcaption,
.alignfull > .wp-caption-text,
.comment-respond p:not(.comment-notes) {
  max-width: 72rem;
}

/* Alignements flottants des images et galeries — petits écrans (≥ 660px) */
@media (min-width: 660px) {
  figure.wp-block-gallery.alignleft {
    margin-left: calc((100vw - 72rem - 8rem) / -2);
  }

  figure.wp-block-gallery.alignright {
    margin-right: calc((100vw - 72rem - 8rem) / -2);
  }

  .entry-content > p .alignleft,
  .entry-content > .wp-block-image .alignleft {
    margin-left: calc((100vw - 72rem - 8rem) / -2);
  }

  .entry-content > p .alignright,
  .entry-content > .wp-block-image .alignright {
    margin-right: calc((100vw - 72rem - 8rem) / -2);
  }
}

/* Alignements flottants — écrans moyens (≥ 1000px) */
@media (min-width: 1000px) {
  .entry-content > .alignleft,
  .entry-content > p .alignleft,
  .entry-content > .wp-block-image .alignleft {
    right: calc((100vw - 72rem) / 2 + 72rem + 2rem);
    max-width: calc((100% - 72rem) / 2 - 6rem);
  }

  [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
  [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    right: calc((100% - 72rem) / 2 + 72rem + 4rem);
    max-width: calc((100% - 72rem) / 2 - 4rem);
  }

  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignleft {
    right: calc((100% - 72rem) / 2 + 72rem);
  }

  .entry-content > .alignright,
  .entry-content > p .alignright,
  .entry-content > .wp-block-image .alignright,
  [class*="__inner-container"] > .alignright {
    left: calc((100vw - 72rem) / 2 + 72rem + 2rem);
    max-width: calc((100% - 72rem) / 2 - 6rem);
  }

  [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
  [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    left: calc((100% - 72rem) / 2 + 72rem + 4rem);
    max-width: calc((100% - 72rem) / 2 - 4rem);
  }

  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignright {
    left: calc((100% - 72rem) / 2 + 72rem + 4rem);
  }
}

/* Alignements flottants — grands écrans (≥ 1220px) */
@media (min-width: 1220px) {
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignleft {
    right: calc((100% - 72rem) / 2 + 72rem - 2rem);
  }

  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignright {
    left: calc((100% - 72rem) / 2 + 72rem + 6rem);
  }
}

/* Alignements flottants — très grands écrans (≥ 1280px) */
@media (min-width: 1280px) {
  .entry-content > .alignleft,
  .entry-content > p .alignleft,
  .entry-content > .wp-block-image .alignleft {
    right: calc((100vw - 72rem) / 2 + 72rem + 4rem);
  }

  .entry-content > .alignright,
  .entry-content > p .alignright,
  .entry-content > .wp-block-image .alignright {
    left: calc((100vw - 72rem) / 2 + 72rem + 4rem);
  }
}

/* ==========================================================================
   7. BLOCS ÉDITORIAUX (blockquote, pullquote)
   ========================================================================== */

/* Blockquote : bordure verte, texte gris, italique */
blockquote {
  border-color: var(--color-green) !important;
  color: var(--color-green);
  font-style: italic;
  font-weight: 700;
}

/* Pullquote : italique, décoratif en vert */
.wp-block-pullquote {
  font-style: italic;
}

.wp-block-pullquote::before {
  color: var(--color-green);
  font-style: normal;
}

/* ==========================================================================
   8. PAGINATION
   ========================================================================== */

/* Taille de la pagination article précédent/suivant sur desktop */
.pagination-single {
  font-size: 1.6rem;
  font-family: "Dalia";
  text-transform: uppercase;

  a {
    font-weight: 500;
  }

  a.all-articles {
    justify-content: center;
  }

  .pagination-numbers {
    display: flex;
    gap: 1rem;
  }
}

@media (min-width: 700px) {
  .pagination-single {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   9. FOOTER & HEADER
   ========================================================================== */

/* Fond orange pour la zone widgets/nav du footer */
.footer-nav-widgets-wrapper {
  background-color: var(--color-green);
}

/* Icônes réseaux sociaux en orange */
.social-icons a {
  background-color: var(--color-white) !important;
  color: var(--color-black);
}

/* Liens du menu footer en blanc pour contraste sur fond orange */
.footer-menu-wrapper,
.footer-menu-wrapper a {
  color: var(--color-white);
  font-family: "Dalia";
  text-transform: uppercase;
  font-size: 1.8rem;
}

.footer-bottom-menu {
  li {
    display: inline-block;
    margin-left: 1.5rem;
  }
}

.primary-menu,
.primary-menu a {
  font-family: "Dalia";
  text-transform: uppercase;
  color: var(--color-black) !important;
  font-weight: 500;
}

.footer-bottom-menu,
.footer-bottom-menu a {
  font-family: "Dalia";
  text-transform: uppercase;
  color: var(--color-primary);
}

.footer-copyright,
.footer-copyright a {
  font-family: "Dalia";
  text-transform: uppercase;
  color: var(--color-dark);
  font-weight: 500;
}

#site-footer {
  font-size: 1.4rem;
}

.archive-header {
  background-color: var(--color-red);
  color: var(--color-white);
}

.archive-header .color-accent {
  color: var(--color-black);
}

.header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 2.8rem 0;
}

.header-navigation-wrapper {
  display: initial;
}

.primary-menu-wrapper {
  display: block;
}

/* ==========================================================================
   10. META
   ========================================================================== */

.meta-text,
.meta-text a {
  color: var(--color-primary) !important;
}

/* ==========================================================================
   11. HOME
   ========================================================================== */
#home-content .home-grid-item {
  margin-bottom: 8rem;
}

#home-content .home-grid-item .entry-title {
  text-wrap: balance;
}

#home-content .home-grid-item .featured-media {
  display: none;
}

.singular #home-content .home-grid-item .entry-header {
  background-color: transparent;
  padding: 0;
}

@media (min-width: 1000px) {
  #home-content .home-grid {
    display: flex;

    .home-grid-item {
      flex: 0 0 auto;
      width: 50%;
    }
  }

  #home-content .home-grid-item {
    margin-bottom: 6rem;
  }
}

@media (min-width: 700px) {
  #home-content .entry-content > * {
    width: calc(100% - 8rem);
  }

  .home-grid-item .heading-size-1 {
    font-size: 4.8rem;
  }

  #home-content .post-inner {
    padding-top: 4rem;
  }
}