/**
 * TDC 11 — Port of the Drupal 7 "tdc_theme" visual design onto Olivero (D11).
 *
 * Source palette (from D7 css/colors.css + style.css):
 *   body text          #3b3b3b
 *   links              #0071B3  (hover #018fe2, active #23aeff)
 *   header background  #c7dce1 + images/inset-banner.jpg no-repeat center top
 *   page/content bg    #ffffff
 *   footer/page bg     #292929 (dark) with light text #fffeff / rgba(255,255,255,.65)
 *   sidebar blocks bg  #f6f6f2
 *   headings           Tahoma, sans-serif
 *   .alaune featured   bg rgba(211,230,236,.3), title #02576b ~23px
 */

/* ===================================================================
 * CSS custom-property overrides — recolor Olivero at the source.
 * Olivero exposes design tokens via :root custom properties.
 * =================================================================== */
:root {
  /* Olivero derives every "primary" blue from these three HSL tokens.
   * TDC blue #0071B3 == hsl(201, 100%, 35%). Overriding the hue/
   * saturation/lightness recolours the entire theme in one place:
   * links, buttons, focus rings, the primary-nav underline, etc. */
  --color--primary-hue: 201;
  --color--primary-saturation: 100%;
  --color--primary-lightness: 35;

  /* Neutral body text to match D7 #3b3b3b. */
  --color-text-neutral-loud: #3b3b3b;
  --color-text-neutral-medium: #3b3b3b;
}

/* ===================================================================
 * Base typography — body text colour + heading font (Tahoma).
 * =================================================================== */
body {
  color: #3b3b3b;
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6,
.site-header,
.primary-nav__menu-item,
.site-title,
.block__title,
.views-view-grid__title {
  font-family: Tahoma, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #222;
}

/* ===================================================================
 * Links — TDC blue.
 * =================================================================== */
a,
.text-content a,
.node__content a {
  color: #0071B3;
}
a:hover,
.text-content a:hover,
.node__content a:hover {
  color: #018fe2;
}
a:active {
  color: #23aeff;
}

/* ===================================================================
 * Header — light blue band with the inset banner image centered top.
 * Olivero markup: <header class="site-header"> ... .site-header__inner
 * The banner is 1057x150. We give the header a soft blue backdrop and
 * place the banner centered at the top, matching the D7 #header rule:
 *   #header { background: #c7dce1 url('../images/inset-banner.jpg') no-repeat 50% 0; }
 * =================================================================== */
.site-header,
.site-header__inner,
header.site-header {
  background-color: #c7dce1;
  background-image: url('../images/inset-banner.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: auto;
}

/* Ensure the banner band has enough height to show the 150px image. */
.site-header__inner-wrapper,
.site-header__inner {
  min-height: 150px;
}

/* Site name / slogan + header links in light colour over the blue band. */
.site-header .site-branding__name a,
.site-header .site-branding__slogan,
.site-header a.site-branding__name-link {
  color: #02576b;
  text-decoration: none;
}

/* Logo sizing to echo the D7 500x71 logo. */
.site-branding__logo img,
.site-logo img {
  max-height: 71px;
  width: auto;
}

/* ===================================================================
 * Primary navigation — TDC main-menu feel.
 * Olivero markup: .primary-nav__menu-item / .primary-nav__menu-link
 * =================================================================== */
.primary-nav__menu-link,
.primary-nav__menu-link-inner {
  font-family: Tahoma, "Segoe UI", sans-serif;
  color: #0071B3;
}
.primary-nav__menu-item--active-trail > .primary-nav__menu-link,
.primary-nav__menu-link.is-active {
  color: #02576b;
  font-weight: 700;
}
.primary-nav__menu-link:hover {
  color: #018fe2;
}

/* ===================================================================
 * Content area background white; constrain line length like Bartik.
 * =================================================================== */
.layout-main-wrapper,
.main-content,
.region--content {
  background-color: #ffffff;
}

/* ===================================================================
 * Sidebar blocks — light beige background (#f6f6f2) from D7.
 * =================================================================== */
.region--sidebar .block,
.sidebar .block,
aside .block {
  background-color: #f6f6f2;
  border: 1px solid #f9f9f9;
  padding: 1em;
  margin-bottom: 1.5em;
  border-radius: 3px;
}
.region--sidebar .block__title,
.sidebar .block__title {
  color: #02576b;
  border-bottom: 2px solid #ddd;
  padding-bottom: .25em;
}

/* ===================================================================
 * Footer — dark (#292929) with light text, matching D7 #footer-wrapper.
 * Olivero markup: .site-footer, .site-footer__top, .site-footer__bottom
 * =================================================================== */
.site-footer,
.site-footer__inner,
.region--footer-top,
.region--footer-bottom {
  background-color: #292929;
  color: rgba(255, 255, 255, 0.65);
}
.site-footer a,
.region--footer-top a,
.region--footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
}
.site-footer a:hover,
.region--footer-top a:hover,
.region--footer-bottom a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.site-footer .block {
  margin: 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  background-color: transparent;
}
.site-footer .block__title {
  color: #fffeff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* ===================================================================
 * .alaune — the "à la une" featured content box from D7.
 * =================================================================== */
.alaune {
  background-color: rgba(211, 230, 236, 0.3);
  margin-bottom: 2em;
  padding: 1em 1em 0 1em;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.alaune .nodeimage { margin-left: 10px; }
.alaune .title {
  font-size: 1.2em;
  border-bottom: #ddd 2px solid;
}
.alaune .title a,
.alaune h2 a,
.alaune h3 a {
  text-decoration: none;
  color: #02576b;
  font-size: 23px;
  line-height: 30px;
  font-family: Tahoma, sans-serif;
  font-weight: lighter;
}
.alaune .submitted {
  position: relative;
  bottom: 3px;
  color: #777;
}

/* ===================================================================
 * Blockquotes — the D7 italic quote style with large quote marks.
 * =================================================================== */
blockquote {
  background: #f7f7f7;
  border-left: 3px solid #0071B3;
  font-style: italic;
  margin: 1.5em 10px;
  padding: 0.5em 1em;
  color: #3b3b3b;
}

/* ===================================================================
 * Teaser / article listing tweaks for the rebuilt Views pages.
 * =================================================================== */
.view-content .views-row {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #e5e5e5;
}
.view-content h2 a,
.view-content h3 a {
  color: #02576b;
  font-family: Tahoma, sans-serif;
  text-decoration: none;
}

/* Odd table rows, echoing D7. */
tr.odd,
tr:nth-child(odd) {
  background-color: #f4f4f4;
}

/* ===================================================================
 * TDC 11 — Homepage composition components (added for the rebuilt
 * Views-driven magazine homepage). Uses real class names verified
 * from the rendered output.
 * =================================================================== */

/* --- Front-page region rhythm: alternating bands + spacing --- */
.path-frontpage .region--hero {
  margin: 0 0 2rem;
}
.path-frontpage .region--content-above {
  margin-bottom: 2.5rem;
}
.path-frontpage .region--content-below {
  margin-top: 2.5rem;
}
.path-frontpage .block {
  margin-bottom: 2.5rem;
}
.path-frontpage .block > h2,
.path-frontpage .block > .block__title {
  font-family: Tahoma, sans-serif;
  font-weight: lighter;
  color: #02576b;
  font-size: 1.6rem;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #c7dce1;
}

/* ===================================================================
 * Hero slideshow (slick) — full-width hero with sized imagery.
 * =================================================================== */
.view-slideshow-accueil,
.view-id-slideshow_accueil {
  position: relative;
  background: #292929;
}
.view-id-slideshow_accueil .slick__slide {
  position: relative;
}
.view-id-slideshow_accueil .slick__slide img {
  width: 100%;
  height: clamp(260px, 42vw, 520px);
  object-fit: cover;
  display: block;
}
/* Title overlay on each slide */
.view-id-slideshow_accueil .slick__slide .views-field-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.view-id-slideshow_accueil .slick__slide .views-field-title a {
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: lighter;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Slick arrows / dots in TDC blue */
.view-id-slideshow_accueil .slick__arrow button,
.view-id-slideshow_accueil .slick-dots li button:before {
  color: #fff;
}
.view-id-slideshow_accueil .slick-dots li.slick-active button:before {
  color: #0071B3;
}

/* ===================================================================
 * À la Une — featured box.
 * =================================================================== */
.view-id-a_la_une .alaune {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 1.5rem;
  align-items: start;
  background: rgba(211, 230, 236, 0.3);
  border: 1px solid #c7dce1;
  border-radius: 6px;
  padding: 1.5rem;
}
.view-id-a_la_une .alaune .views-field-field-artimage img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.view-id-a_la_une .alaune .views-field-title a {
  color: #02576b;
  font-family: Tahoma, sans-serif;
  font-size: 1.6rem;
  font-weight: lighter;
  text-decoration: none;
  line-height: 1.3;
}
.view-id-a_la_une .alaune .views-field-body {
  margin-top: 0.75rem;
  color: #3b3b3b;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .view-id-a_la_une .alaune {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
 * Categories grid + Ressources grid — card layout.
 * =================================================================== */
.view-id-categories .views-view-grid,
.view-id-ressources_accueil .views-view-grid,
.view-id-tdc_blog .views-view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  width: 100%;
}
.view-id-ressources_accueil .views-view-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.view-id-tdc_blog .views-view-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* neutralise core grid table-ish rows */
.view-id-categories .views-view-grid__row,
.view-id-ressources_accueil .views-view-grid__row,
.view-id-tdc_blog .views-view-grid__row {
  display: contents;
}
.view-id-categories .views-view-grid__item,
.view-id-ressources_accueil .views-view-grid__item,
.view-id-tdc_blog .views-view-grid__item {
  width: auto;
  padding: 0;
}
.view-id-categories .views-view-grid__item-inner,
.view-id-ressources_accueil .views-view-grid__item-inner,
.view-id-tdc_blog .views-view-grid__item-inner {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.view-id-categories .views-view-grid__item-inner:hover,
.view-id-ressources_accueil .views-view-grid__item-inner:hover,
.view-id-tdc_blog .views-view-grid__item-inner:hover {
  box-shadow: 0 6px 18px rgba(2, 87, 107, 0.18);
  transform: translateY(-3px);
}
.view-id-categories .views-view-grid__item-inner img,
.view-id-ressources_accueil .views-view-grid__item-inner img,
.view-id-tdc_blog .views-view-grid__item-inner img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.view-id-categories .views-field-title,
.view-id-ressources_accueil .views-field-title,
.view-id-tdc_blog .views-field-title {
  padding: 0.75rem 0.9rem;
}
.view-id-categories .views-field-title a,
.view-id-ressources_accueil .views-field-title a,
.view-id-tdc_blog .views-field-title a {
  color: #02576b;
  font-family: Tahoma, sans-serif;
  font-size: 1.02rem;
  line-height: 1.35;
  text-decoration: none;
  font-weight: normal;
}
.view-id-tdc_blog .views-field-body {
  padding: 0 0.9rem 0.9rem;
  color: #3b3b3b;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ===================================================================
 * Random quote block — pull-quote aesthetic.
 * =================================================================== */
.view-id-random_quote .tdc-quote {
  position: relative;
  background: rgba(211, 230, 236, 0.3);
  border-left: 4px solid #0071B3;
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.25rem 2.75rem;
  font-style: italic;
  color: #02576b;
  line-height: 1.6;
}
.view-id-random_quote .tdc-quote:before {
  content: "\201C";
  position: absolute;
  left: 0.6rem;
  top: 0.1rem;
  font-size: 3.2rem;
  line-height: 1;
  color: #0071B3;
  opacity: 0.4;
  font-family: Georgia, serif;
}
.view-id-random_quote .tdc-quote .views-field-title {
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.9rem;
  text-align: right;
  color: #02576b;
}
.view-id-random_quote .tdc-quote .views-field-title a {
  color: #02576b;
  text-decoration: none;
}

/* ===================================================================
 * News items strip — compact horizontal cards.
 * =================================================================== */
.view-id-news_items .views-view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.view-id-news_items .views-view-grid__row {
  display: contents;
}
.view-id-news_items .views-view-grid__item {
  width: auto;
  padding: 0;
}
.view-id-news_items .views-view-grid__item-inner {
  background: #f6f6f2;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
}
.view-id-news_items .views-view-grid__item-inner img {
  width: 100%;
  height: 110px;
  object-fit: cover;
}
.view-id-news_items .views-field-title a {
  display: block;
  padding: 0.5rem;
  color: #02576b;
  font-size: 0.9rem;
  text-decoration: none;
}
.view-id-news_items .views-field-field-slide-text {
  padding: 0 0.5rem 0.6rem;
  font-size: 0.8rem;
  color: #555;
}

/* ===================================================================
 * Podcast page — audio rows.
 * =================================================================== */
.view-id-catecheses_podcast .tdc-podcast-row {
  padding: 0.9rem 0;
  border-bottom: 1px solid #e5e5e5;
}
.view-id-catecheses_podcast .views-field-title a {
  color: #02576b;
  font-family: Tahoma, sans-serif;
  font-size: 1.1rem;
  text-decoration: none;
}
.view-id-catecheses_podcast audio {
  width: 100%;
  margin-top: 0.5rem;
}

/* --- Sidebar block framing on all pages --- */
.region--sidebar .block {
  background: #f6f6f2;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* ===== TDC dependency-free hero carousel ===== */
.view-slideshow-accueil{position:relative;}
.tdc-carousel{position:relative;overflow:hidden;border-radius:6px;background:#c7dce1;box-shadow:0 2px 10px rgba(0,0,0,.15);margin:0 0 2em;}
.tdc-carousel-track{display:flex;transition:transform .6s ease;will-change:transform;}
.tdc-carousel-track > *{flex:0 0 100%;min-width:100%;margin:0;}
.tdc-carousel-track img{display:block;width:100%;height:auto;object-fit:cover;max-height:460px;}
.tdc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;background:rgba(2,87,107,.55);color:#fff;font-size:28px;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;transition:background .2s;}
.tdc-nav:hover{background:rgba(2,87,107,.9);}
.tdc-prev{left:12px;} .tdc-next{right:12px;}
.tdc-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3;}
.tdc-dot{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;}
.tdc-dot.is-active{background:#fff;}
@media(max-width:600px){.tdc-carousel-track img{max-height:260px;}.tdc-nav{width:36px;height:36px;font-size:22px;}}