/* Put your custom CSS here.
   This file loads AFTER Tailwind (so it can override it). */

/* Force Jost everywhere (front + editor). */
:root,
body,
.editor-styles-wrapper {
  font-family: "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

html,
body {
  height: 100%;
}
body > .wp-site-blocks {
  height: 100%;
}

/* Footer theming */
:root {
  /* Global typography */
  --sf-base-font-size: 0.95rem;

  /* Fixed layout heights (for 100vh calculations) */
  --sf-header-height: 96px;
  --sf-footer-height: 70px;

  /* Background color as "R G B" (space-separated) */
  --sf-footer-bg-rgb: 0 0 0;
  /* Background opacity (0..1) */
  --sf-footer-bg-alpha: 0.02;

  /* Text color as "R G B" (space-separated) */
  --sf-footer-text-rgb: 0 0 0;
  /* Text opacity (0..1) */
  --sf-footer-text-alpha: 0.5;
}

/* Apply smaller font size everywhere (front + editor). */
body,
.editor-styles-wrapper {
  font-size: var(--sf-base-font-size);
}

/** Navigation theming */
.wp-block-pages-list__item,
.wp-block-navigation-item {
  color: #666;
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s ease;
}

.wp-block-pages-list__item.current-menu-item,
.wp-block-navigation-item.current-menu-item {
  border-bottom: 1px solid #333;
  color: #000;
}

.wp-block-pages-list__item:hover,
.wp-block-navigation-item:hover {
  text-decoration: none;
  border-bottom: 1px solid #333;
}

.wp-block-navigation-item__content:hover,
.wp-block-pages-list__item__link:hover {
  text-decoration: none;
}

/* Layout wrapper (example) */
.sf-home {
  padding: 0 0 2rem 0;
}

/* Home header stays centered even if posts are full-width. */
.sf-home__header {
  max-width: 72rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* Make the posts area full viewport width. */
.sf-query {
  max-width: 90%;
}

.sf-home__posts {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
  margin: 0;
}

/* Article: mobile keeps stacked (image then text). */
.sf-home__post {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  max-height: 100vh;
  margin-bottom: 1.5rem;
}
.sf-home__posts li:not(:last-child) {
  margin-bottom: 3rem;
}

.sf-home__post-excerpt {
  margin-top: 0;
  color: #aaa;
  font-weight: 300;
}

.sf-home__post-title {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.sf-home__post-image {
  margin-top: 0;
}

.sf-home__post-image:not(.sf-has-second-image) img {
  margin: 0 auto;
}

.sf-home__post-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.sf-home__post-image.sf-has-second-image {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.sf-home__post-image.sf-has-second-image > a {
  flex: 1 1 0;
  display: block;
  overflow: hidden;
}

.sf-home__post-image img.sf-lazy {
  opacity: 0;
  transition: opacity 320ms ease;
}

.sf-home__post-image img.sf-lazy.is-loaded {
  opacity: 1;
}

/* Single: show 2 featured images side-by-side when present. */
.sf-single__featured-image.sf-has-second-image {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.sf-single__featured-image.sf-has-second-image img {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Desktop: text left, image right, image takes space. */
@media (min-width: 1024px) {
  .sf-home__post-image img {
    height: 100%;
  }
}

.sf-home__post-image img {
  border-radius: 0;
}

/* Single post: remove rounding on featured image (overrides theme.json). */

.sf-single {
  max-width: 90%;
  margin: 0 auto;
}

/* same as `.sf-home__post-title` */
.sf-single .wp-block-post-title {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

/* same as `.sf-home__post-excerpt` */
.sf-single .wp-block-post-content {
  color: #aaa;
  font-weight: 300;
  margin-top: 0;
}

.sf-single__featured-image img {
  border-radius: 0 !important;
}

/* Header: remove bold font weight. */
.sf-header,
.sf-header a,
.sf-header .wp-block-navigation-item__label {
  font-weight: 400 !important;
}

/* Fixed header height (override WP block inline padding). */
.sf-header {
  height: var(--sf-header-height);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}

/* Pages: vertically + horizontally center content area. */
.sf-page {
  min-height: calc(100% - var(--sf-header-height) - var(--sf-footer-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
  margin: 0;
}
@media (max-width: 781px) {
  .sf-page {
  }
}
.sf-page .is-layout-flex {
  margin: 0 !important;
}

.sf-page__content {
  width: 100%;
}

.sf-page--full {
  min-height: calc(100% - var(--sf-header-height) - var(--sf-footer-height));
  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 1200px;
  margin: 0 auto;

  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}

/* 
Stack on mobile (when a row must become a column on mobile)
Use this custom class ".stack-on-mobile" on the block that should stack on mobile : 
*/
@media (max-width: 781px) {
  .stack-on-mobile.is-layout-flex {
    flex-direction: column;
    align-items: stretch;
  }
}

/** Footer theming */

.sf-footer {
  background-color: rgb(var(--sf-footer-bg-rgb) / var(--sf-footer-bg-alpha));
  color: rgb(var(--sf-footer-text-rgb) / var(--sf-footer-text-alpha));
  font-size: 0.875rem;
  height: var(--sf-footer-height);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-footer p {
  margin: 0;
}

.sf-footer a {
  color: inherit;
}

/* Remove default padding on the footer template-part wrapper. */
footer.wp-block-template-part {
  padding: 0 !important;
  margin: 0 !important;
}