/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/
/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

/* === Import Space Grotesk from Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* === Apply the font to site content === */
body,
button,
input,
select,
textarea {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: normal; /* Space Grotesk doesn't have italic, use weight variation instead */
  font-weight: 500;
}

/* Optional: headings slightly bolder */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

/* Make content wider - 80% of page width */
.wrap {
  max-width: 90% !important;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure consistent width across all pages and posts */
.site-content .wrap,
.site-header .wrap,
.navigation-top .wrap {
  max-width: 90% !important;
}

/* Override the one-column page restriction */
@media screen and (min-width: 30em) {
  .page-one-column .panel-content .wrap {
      max-width: 90% !important;
  }
}

/* Make images fill the wider content area with height cap */
.entry-content img,
.entry-content video {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
}

/* For images with alignment classes */
.entry-content .aligncenter img,
.entry-content .alignnone img {
  width: 100% !important;
  max-height: 600px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
}

/* Override WordPress inline styles for resized images */
/* Ensure all figure containers are full width */
.entry-content .wp-block-image,
.entry-content .wp-block-video,
.entry-content figure {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure all figure containers are full width */
.entry-content .wp-block-image,
.entry-content figure {
  width: 100% !important;
  max-width: 100% !important;
}

/* YouTube video embeds - center and make responsive */
.entry-content iframe,
.entry-content video {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 12px !important;
}



/* Custom class for images that keep full proportions */
.entry-content img.ImageKeepProportions,
.entry-content .ImageKeepProportions img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
}

/* Rounded border class for blocks */
.wp-block-bordered {
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 1rem;
}