/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Template: blocksy
 * Text Domain: blocksy
 */

/*
   || LAYOUT
   -----------------------------------------------------------------------------
*/

/* Make sure #main isn't hidden behind the site header */
body:not(.search-results) #main .hero-section {
  padding-top: 60px;
}

@media screen and (min-width: 1000px) {
  body:not(.search-results) #main .hero-section {
    padding-top: 120px;
  }
}


/*
   || FONTS
   -----------------------------------------------------------------------------
*/

/* Use a large font for (page) headers */
.entry-header .page-title {
  font-size: var(--wp--preset--font-size--x-large);
}

/* Headers for single posts shouldn't use white text on a white background 
 * (the theme assumes a feature image is used as a background cover in the 
 * header).*/
.single-post .page-title {
  color: var(--theme-palette-color-4);
}

.single-post .entry-header .ct-meta-element-date {
  color: var(--theme-palette-color-3);
}

/* Text rendered by the custom "Meta Data" block (used for "Writings" posts) */
.meta-data-content {
  font-style: italic;
}

/* Text inside the "teaser columns" on the home page (that is, the three 
 * vertical blocks under the hero section) */
.home .stk-b8705d3 .stk-block-content h3 {
  margin-bottom: 0;
}

.home .stk-b8705d3 .stk-block-content a {
  color: var(--theme-palette-color-8);
  text-decoration: none;
}

.home .stk-b8705d3 .stk-block-content a:hover {
  color: var(--theme-palette-color-6);
}

/* Text and links in the footer should not use grey on black */
#footer .ct-footer-copyright,
#footer ul.widget-menu li a {
  color: var(--theme-palette-color-6);
}

#footer ul.widget-menu li a:hover {
  color: var(--theme-palette-color-2);
}

/* Use title case for search result headers */
.search-results .page-title {
  text-transform: lowercase;
}

.search-results .page-title:first-letter {
  text-transform: uppercase;
}


/*
   || BLOCKS
   -----------------------------------------------------------------------------
*/

/* Hide background cover on small displays */
@media screen and (max-width: 999px) {
  .page.page-id-2695 .stk-2b10ff5 {
	background-color: #d9dacb !important;
	background-image: none !important;
  }
  .stk-row.stk--block-align-2b10ff5 {
    flex-direction: column;
  }
}

/* Endorsements block
 * - Make images round
 */
.stk-caab465 img.stk-img {
  border-radius: 50%;
}

/* Teaser columns block on home page
 * - On mobiles and tablets only two teaser colums are shown, so we need to 
 *   correct the column width
 */
@media screen and (min-width: 690px) and (max-width: 1000px) {
  .home .stk-block-column {
    flex: 1 1 calc(50% - var(--stk-column-gap, 0px)) !important;
  }
}

/* Teaser columns block on home page
 * - Make the bottom less tall on small displays
 */
@media screen and (max-width: 999px) {
  .home .stk-26cee96 {
    height: 60px !important
  }
}

/* Events block on home page
 * - Add a top border and top padding to the content area rather than the 
 *   header. The layout breaks if you add a bottom border to the heading 
 *   (for reasons).
 */
.home .stk-2abf948 .wp-block-group .wp-block-query {
  border-top: 1px solid var(--theme-palette-color-8);
  padding-top: 1.5rem;
}

/* Climate Majority Project block on the about page
 * - Header links should use a dark font
 */
.stk-block.stk-65228ce h5 a {
  color: var(--theme-pallete-color-4);
}

/* Book image blocks (for "Books" posts)
 * - Alignment of buttons
 */
.wp-block-image + .wp-block-stackable-button-group {
  margin-top: 1rem;
  margin-left: auto;
}


/*
   || CUSTOM CLASSES
   -----------------------------------------------------------------------------
*/

/* The column layout adds a margin. That makes sense for grids but it doesn't 
 * work for other elements, such as headers that use a column layout to show a
 * heading to the left and a button to the right. To fix this the left column
 * can be given the class fix-header-column-margins.
 */

/* Remove the left margin from the first column */
.wp-block-stackable-column.fix-header-column-margins .stk-column-wrapper {
  margin-left: 0 !important;
}

/* Remove the right margin from the second column */
.wp-block-stackable-column.fix-header-column-margins ~ .wp-block-stackable-column .stk-column-wrapper {
  margin-right: 0 !important;
}

/* Vertically align the columns */
.wp-block-stackable-column.fix-header-column-margins ~ .wp-block-stackable-column {
  align-items: center;
}

/* Right align any buttons in the second column */
.wp-block-stackable-column.fix-header-column-margins ~ .wp-block-stackable-column .stk-column-wrapper .stk-block-button {
  margin-left: auto !important;
}


/*
   || FOOTER
   -----------------------------------------------------------------------------
*/
#footer .ct-container {
  padding: 0 0 40px;
}

/* The newsletter subscribe form is a pattern. It is included in widget area 4 
 * using a HTML block (as you can't include a pattern as block in a widget).
 *
 * To make the top row take up the full width we need to make sure the widget 
 * area doesn't use flex and fix the margins on the parent.
 */
#footer [data-column*=widget-area-4] {
  display: block;
}

#footer [data-row*="top"] .ct-container-fluid {
  width: 100%;
  margin: 0;
}

/* The newsletter subscribe form itself uses a flexbox layout */
.mc4wp-form-fields {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mc4wp-form-fields label {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.mc4wp-form-fields input::placeholder {
  color: var(--theme-palette-color-6);
}

.mc4wp-form-fields label input[type="email"] {
  width: 100%;
  box-sizing: border-box;
}

.mc4wp-form-fields input[type="submit"] {
  flex-shrink: 0;
}

/* Make social media icons smaller */
#footer .ct-icon-container {
    width: 36px;
    height: 36px;
}

/*
   || FORMS
   -----------------------------------------------------------------------------
*/

/* Fix width of Formidable forms */
.frm_forms.frm_style_formidable-style.with_frm_style {
  max-width: 1290px;
}


/* Make labels of Formidable forms bold */
.with_frm_style .frm_primary_label {
  font-weight: bold;
}

/* Hide labels on MailChimp forms */
.mc4wp-form-fields .label-name {
  display: none;
}

figure.alignleft {
  float: none;
}

@media screen and (min-width: 690px) {
  figure.alignleft {
    float: left;
    width: 50%;
    max-width: 640px;
  }
}

/* Paypal donate form */
.paypal-wrapper {
  display: inline-block;
}

form.paypal {
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

form.paypal img.paypal-cards {
  width: 100%;
  height: auto;
}

form.paypal input.pp-KTUB29RJW42MC {
  width: 100%;
}


/*
   || IN THE MEDIA POSTS
   -----------------------------------------------------------------------------
*/

/* Play button size on archive page and posts */
.post-type-archive-media_appearance .entry-card .stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon),
.media_appearance-template-default.stk--anim-init .stk--svg-wrapper .stk--inner-svg svg:last-child {
  width: 80px;
  height: auto;
}

/* Play button colour on archive page and posts */
.post-type-archive-media_appearance .entry-card .stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon),
.post-type-archive-media_appearance .entry-card .stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon) :is(g, path, rect, polygon, ellipse),
.media_appearance-template-default.stk--anim-init .stk--svg-wrapper .stk--inner-svg svg:last-child,
.media_appearance-template-default.stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon), .stk--inner-svg svg:last-child:not(.ugb-custom-icon):not(.stk-custom-icon) :is(g, path, rect, polygon, ellipse) {
  fill: var(--theme-palette-color-1);
}