/*
Theme Name: Contrast
Theme URI: https://disruptivepatterns.net
Author: JD Waring
Author URI: https://disruptivepatterns.net
Description: A minimal block theme
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: Contrast
*/

:root { --site-bg: rgb(8, 8, 8); } 

html,
body,
.wp-site-blocks {
  background: var(--site-bg) !important;
}

/* push page content down so it’s not hidden behind the header */
body {
  padding-top: 100px; /* adjust to match header height */
  color: #fff; /* default text color */
}


h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #FFFFFF;
    margin-bottom: 8px!important;
}

p {
    margin-top: 8px!important;
}


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; 
  background: rgb(8, 8, 8); 
  padding: 1rem;
}

.wp-block-site-title {
    text-transform: uppercase;
    font-weight: 300;
    color: #FFFFFF;
}

.wp-block-post-title {
    margin: 32px 0 16px 0;
}

.hero .wp-block-cover__image-background {
  background-position: center center;
  background-size: contain;   /* or cover, depending on preference */
  background-repeat: no-repeat;
  background-attachment: scroll !important; /* disable fixed/parallax effect */
}


/* Keep embeds tidy and 16:9 */
.video-card iframe,
.video-card .wp-block-embed__wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-card  {
  margin: 36px auto;
}

/* Minor spacing polish */
.video-card h3 { margin: .5rem 0 .25rem; }
.video-card p  { margin: 0 0 .75rem; }


/* Responsive grid */
.grid-container {
  display: grid;
  gap: 24px;
  padding-block: 12px;
}

/* Mobile (default): 1 column */
.grid-container { grid-template-columns: 1fr; }

/* ≥ 700px: 2 columns */
@media (min-width: 700px) {
  .grid-container { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 1100px: 3 columns */
@media (min-width: 1100px) {
  .grid-container { grid-template-columns: repeat(3, 1fr); }
}

/* ≥ 1500px: 4 columns */
@media (min-width: 1500px) {
  .grid-container { grid-template-columns: repeat(4, 1fr); }
}

.wp-site-blocks {
  min-height: 100dvh;   /* viewport height, mobile-safe */
  display: flex;
  flex-direction: column;
}

.site-footer,
footer.wp-block-template-part {
  margin: 48px auto;
}
.footer-copy {
    font-size: 0.8rem;
}

.footer-social-links .wp-block-social-link a {
  color: #bbb !important;   /* light grey */
  fill: #bbb !important;    /* for SVGs */
}

.footer-social-links .wp-block-social-link a:hover {
  color: #fff !important;   /* brighter on hover */
  fill: #fff !important;
}