/**
 * Eric Sadin subtheme styling, matching the original ericsadin.org design.
 * Built on the Bootstrap Barrio base theme.
 */

body {
  font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Site branding / logo (Bootstrap navbar-brand). */
.navbar-brand {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: lowercase;
  color: #000;
  font-size: 5rem;
  letter-spacing: 0;
}

.navbar-brand:hover {
  color: #000;
  text-decoration: none;
}

/* Primary navigation links. */
.navbar-nav .nav-link {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Headings */
h2 {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  color: #53798b;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
}

h3 {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  color: #53798b;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2;
}

/* Article page title (node full view): big, dark blue-grey, underlined. */
.path-node h1,
.path-node .page-title {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  color: #30393d;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  border-bottom: 2px solid #30393d;
  padding-bottom: 10px;
  text-transform: none;
  text-align: left;
}

/* Listing/view page title ("Calendrier Événements", taxonomy pages, etc.):
   small, uppercase, left-aligned, with a full-width rule above it. */
body:not(.path-node) h1,
body:not(.path-node) .page-title {
  display: block;
  width: 100%;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  color: #000;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
  border-top: 2px solid #30393d;
  border-bottom: none;
  padding-top: 15px;
  margin-top: 0;
  margin-bottom: 0;
}

/* Body/content copy */
.node__content,
.field--name-body {
  font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/**
 * Teaser card styling matching the original ericsadin.org design:
 * title, separator, then a grey box with date / image / excerpt / read more.
 */

.es-card {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.es-card__title-wrapper {
  border-bottom: 1px solid #333;
  margin: 0 0 18px 0;
  padding-bottom: 10px;
  min-height: 4.875rem; /* room for up to 3 lines, so grey boxes line up */
}

.es-card__title {
  margin: 0;
  padding: 0;
}

.es-card__title a {
  display: inline-block;
  color: rgb(0, 0, 0);
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 0.9135rem;
  font-weight: bold;
  letter-spacing: 0.64px;
  line-height: 19.2px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.es-card__title a:hover {
  text-decoration: underline;
}

.es-card__inner {
  background-color: #c6c6c6;
  border: 1px solid #ddd;
  flex: 1 1 auto;
  min-height: 360px;
  max-height: 360px;
  overflow: hidden;
}

.es-card__padding {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.es-card__date {
  font-weight: bold;
  margin-bottom: 15px;
}

.es-card__image {
  margin-bottom: 15px;
}

.es-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

.es-card__excerpt {
  font-size: 0.8rem;
  line-height: 1.2em;
}

.es-card__excerpt p {
  margin: 0 0 0.5em 0;
}

.es-card__links {
  text-align: right;
  padding: 8px 0 0 0;
  margin-top: auto; /* pin "read more" to the bottom of the card */
}

.es-card__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.es-card__links a {
  font-style: italic;
}

/* Homepage slideshow. */
.view-slideshow {
  text-align: center;
}

.view-slideshow img {
  display: block;
  margin: 0 auto;
}

/* Keep the slideshow centered once jQuery Cycle takes over positioning
   (it applies absolute positioning to slides, so centering needs to live
   on the teaser section container itself, not just the images). */
[id^="views_slideshow_cycle_teaser_section_"] {
  margin: 0 auto;
}

/* Reserve a stable height for the slideshow up front, so jQuery Cycle's
   own height auto-measurement (taken once at init, before images/title
   have settled) doesn't cause a visible jump/overlap on first load. */
.views_slideshow_main {
  max-width: 100%;
}

/* jQuery Cycle sizes each slide to its own image's natural dimensions
   (fixed_height doesn't fully normalize this), so cross-fading between
   differently-sized slides causes visible ghosting/overlap. Force every
   slide to one consistent box instead, cropping images to fit. */
.views_slideshow_cycle_slide {
  width: 100% !important;
  aspect-ratio: 1039 / 275;
  height: auto !important;
  border: 8px solid #c6c6c6;
  box-sizing: border-box;
}

.views_slideshow_cycle_slide .views-row {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.views_slideshow_cycle_slide .views-field-field-image {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.views_slideshow_cycle_slide .views-field-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.views_slideshow_cycle_slide .views-field-title {
  flex: 0 0 auto;
}

/* The header navbar has no side padding out of the box (no .container
   wrapper around it), so the brand text runs to the very edge. */
.navbar {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Gap between cards in the front page grid (core's classic float grid:
   .views-col columns have a fixed inline width with no built-in gutter). */
.views-view-grid.horizontal {
  margin-left: -15px;
  margin-right: -15px;
}

.views-view-grid .views-col {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Space above/below the page title block, on every page. */
#block-ericsadin-theme-page-title {
  margin: 1rem 0 3rem;
}

/* Side margins on the whole page, like the original site's #main-wrapper. */
#page {
  padding: 0 30px;
  box-sizing: border-box;
}

/* Header layout: brand on its own row, primary menu below it (not beside). */
#navbar-main {
  flex-direction: column;
  align-items: flex-start;
}

#navbar-main .navbar-collapse {
  width: 100%;
}

/* Secondary menu (À propos / Contact) in the upper right, with a top
   border, like the original site's header-top block. */
.region-secondary-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: 100%;
}

.region-secondary-menu > nav {
  width: auto;
  flex: 0 0 auto;
}

#block-ericsadin-theme-secondarylinks {
  border-top: 2px solid #000;
  padding-top: 4px;
  margin-top: 30px;
}

/* Primary menu to the left, not pushed right. */
#navbar-main .navbar-collapse {
  justify-content: flex-start !important;
}