/*
Theme Name:     Shrewsbury 2023
Theme URI:      
Description:    Twenty Twenty One Child Theme for Tester Number 2
Author:         Grove
Author URI:     
Template:       twentytwentyone
Version:        0.1.0
*/

/************************************************************************************
 * 
 * Adjust parent variables
 *
 ************************************************************************************/

/* 
  *Typography 
  */

:root {
  --global--font-size-base: 1rem;

  --global--font-size-xxs: 0.75rem;
  --global--font-size-xs: calc(var(--global--font-size-base) * 0.8);
  --global--font-size-sm: calc(var(--global--font-size-base) * 0.9);
  --global--font-size-md: calc(var(--global--font-size-base) * 1);
  --global--font-size-lg: calc(var(--global--font-size-base) * 1.4);
  --global--font-size-xl: calc(var(--global--font-size-base) * 2.2);
  --global--font-size-xxl: calc(var(--global--font-size-base) * 3);
  --global--font-size-xxxl: calc(var(--global--font-size-base) * 4);

  --global--font-size-page-title: var(--global--font-size-xxl);
}

@media only screen and (min-width: 822px) {
  :root {
    --global--font-size-base: 1.25rem;
  }
}

/* 
 * Colours 
 */

:root {
  --global--color-red: #a40000;
  --global--color-background: white;

  --primary-nav--color-link: white;
  --primary-nav--color-link-hover: white;
  --primary-nav--color-text: white;

  --wp--style--color--link: var(--global--color-red);
}

/*
 * Archive pages
 */

:root {
  --entry-header--font-size: var(--global--font-size-lg);
}

/*
 * Blocks
 */

:root {
  --quote--font-size: var(--global--font-size-sm);
  --quote--font-size-large: var(--global--font-size-xl);
  --quote--font-weight: 500;
  --quote--font-weight-strong: 700;
  --quote--font-style-large: normal;
  --quote--line-height: var(--global--line-height-body);
  --quote--line-height-large: 1.35;
}

/*
 * Branding
 */

:root {
  --branding--color-text: var(--global--color-red);
  --branding--color-link: var(--global--color-red);
  --branding--color-link-hover: var(--global--color-secondary);
  --branding--title--font-family: var(--global--font-primary);
  --branding--title--font-size: var(--global--font-size-lg);
  --branding--title--font-size-mobile: var(--global--font-size-lg);
  --branding--title--font-weight: 600;
  --branding--title--text-transform: uppercase;

  --latest-posts--title-font-size: var(--heading--font-size-h4);
}

/* 
 * Primary nav
 */

:root {
  --primary-nav--font-size-button: var(--global--font-size-lg);
}

@media screen and (min-width: 482px) {
  :root {
    --branding--title--font-size: var(--global--font-size-md);
    --branding--title--font-size-mobile: var(--global--font-size-md);
  }
}

/************************************************************************************
 * 
 * Global
 *
 ************************************************************************************/

html {
  scroll-behavior: smooth;
}

/************************************************************************************
 * 
 * Block Editor
 *
 ************************************************************************************/
.is-hovered {
  background-color: rgba(230, 230, 230, 0.3);
}

/************************************************************************************
 * 
 * Adjust parent width
 *
 ************************************************************************************/

/* @media only screen and (min-width: 482px) {
  :root {
    --responsive--aligndefault-width: min(
      calc(100vw - 4 * var(--global--spacing-horizontal)),
      680px
    );
  }
}
@media only screen and (min-width: 822px) {
  :root {
    --responsive--aligndefault-width: min(
      calc(100vw - 8 * var(--global--spacing-horizontal)),
      680px
    );
  }
}
 */
/************************************************************************************
 * 
 * Global classes
 *
 ************************************************************************************/

/*
 *  Typography
 */

/* Tiny font sizes added by child */
.has-tiny-font-size {
  font-size: var(--global--font-size-xxs);
}

/* 
 * Colours
 */

.has-light-gray-color[class] {
  color: var(--global--color-light-gray);
}

.has-light-gray-color[class] {
  color: var(--global--color-dark-navy);
}

.has-light-gray-color[class] {
  color: var(--global--color-light-gray);
}

.has-dark-green-background-color[class] {
  background-color: var(--global--color-dark-green);
}

.has-dark-blue-background-color[class] {
  background-color: var(--global--color-dark-blue);
}

.has-light-gray-background-color[class] {
  background-color: var(--global--color-light-gray);
}

/************************************************************************************
 * 
 * Blocks
 *
 ************************************************************************************/

/* spacer */
.wp-block-spacer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/*
  * Image
  */

/* Fix widealign */

figure.wp-block-image.alignwide {
  margin: 0 auto;
}

/* 
 * Pull quote 
 */

.wp-block-pullquote blockquote::before {
  left: -50%;
}

.wp-block-pullquote blockquote::after {
  color: currentColor;
  content: "“";
  display: inline-block;
  position: relative;
  right: -50%;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}

.wp-block-pullquote {
  padding: 1em 0;
}

.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0 10px;
}

.wp-block-pullquote blockquote p {
  font-size: var(--global--font-size-lg);
}

/* 
 * Quote
 */

.wp-block-quote {
  padding-left: 2em;
  border-left: 1px solid darkred;
}

.wp-block-quote cite {
  text-align: right;
  display: block;
}

.wp-block-quote:before {
  content: "";
}

.wp-block-quote:after {
  content: "";
}

/************************************************************************************
 * 
 * Masthead. Site title and primary menu.
 *
 ************************************************************************************/

#masthead {
  padding: 10px 5%;
  background: #a40000;
  color: white;
  max-width: 100%;
  width: 100%;
  row-gap: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--global--color-light-gray);
}

/* Needed to make space-between work on #masthead */
#masthead::before,
#masthead::after {
  content: unset;
  display: unset;
  table-layout: unset;
}

@media only screen and (min-width: 482px) {
  .primary-navigation {
    margin-left: 0px;
  }
}

.site-branding {
  margin-right: 10px;
}

.site-title {
  font-variant: small-caps;
  text-transform: unset;
  font-weight: var(--branding--title--font-weight);
  color: white;
}

.site-title a {
  color: white;
}

.site-title a:hover,
.site-title a:focus {
  color: #e0e0e0;
}

.site-description {
  display: none;
}

/* Stick masthead to the top of the screen */
@media only screen and (min-width: 822px) {
  #masthead {
    position: fixed;
    top: 0;
    z-index: 10;
    transition: 0.8s;
  }
}

/* Shrink header in scroll. Child JS adds class. */
#masthead.scrolled-header {
  padding-top: 0;
  padding-bottom: 0;
}

#masthead.scrolled-header .site-branding {
  margin-top: 0;
}

@media only screen and (min-width: 482px) {
  body:not(.home) .site-content {
    margin-top: calc(5 * var(--global--spacing-vertical));
  }
}

/*
 * Primary nav
 */

#masthead .primary-navigation a {
  font-size: var(--global--font-size-xs);
}

ul#primary-menu-list li.menu-item-has-children > a {
  padding-right: 5px;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
  height: initial;
  width: initial;
}

#masthead .primary-navigation a {
  padding-top: 5px;
  padding-bottom: 5px;
}

.menu-button-container {
  padding-top: 0;
  padding-bottom: 0;
}

.menu-button-container .button.button {
  display: flex;
}

/************************************************************************************
 * 
 * Footer
 *
 ************************************************************************************/

.widget-area {
  border-top: 3px solid var(--global--color-border);
}

#colophon {
  position: relative;
  padding-bottom: 0;
}

#colophon .site-info {
  padding-bottom: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--global--color-border);
}

#colophon .powered-by {
  display: none;
}

.footer-navigation {
  margin: 0;
}

.twitter-follow-button {
  margin-top: 10px;
}

#footer-logos {
  text-align: center;
}

div#footer-logos img {
  margin: 10px;
  display: inline-block;
}

/************************************************************************************
 * 
 * Front page
 *
 ************************************************************************************/

.home .site-main {
  padding: 0;
}

/*
 * Alt Hero
 */
#alt-hero {
  margin-top: 0;
}

#alt-hero h1,
#alt-hero h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#alt-hero h2 {
  padding-top: 0;
}

#alt-hero-text {
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 20px;
}

#alt-hero-text h1 {
  padding-top: 0;
}

#alt-hero-image {
  margin-top: 3px;
}

@media only screen and (max-width: 516px) {
  #alt-hero {
    padding: ;
  }
}

/* 
 * Hero
 */

#hero {
  display: none;
}

.wp-block-cover__gradient-background {
  mix-blend-mode: color-burn;
}

/* --vh is set in js/head-scripts.js */
#hero.wp-block-cover {
  padding-bottom: 0;
  /* height: 100vh; */
  /* min-height: calc(var(--vh, 1vh) * 100) !important; */
  height: auto;
  /* align-items: center; */
}

/* Stick masthead to the top of the screen */
@media only screen and (min-width: 822px) {
  #hero.wp-block-cover {
    padding-bottom: 0;
    /* height: 100vh; */
    min-height: 100vh !important;
    align-items: flex-end;
  }
}

#hero.wp-block-cover {
  background-color: white;
  /* opacity: 0; */
}

/* Switch hero background image to a smaller file for smaller screens. Mobile first: smallest (<822px) is set as default in the editor */
/* @media only screen and (min-width: 822px) {
  #hero.wp-block-cover {
    background-image: url(https://tester.stuffnting.com/testsite2/wp-content/themes/twentytwentyonetesternumber2/pics/hero-3-1400.jpg) !important;
    background-position: 50% 50% !important;
  }
}

@media only screen and (min-width: 1400px) {
  #hero.wp-block-cover {
    background-image: url(https://tester.stuffnting.com/testsite2/wp-content/themes/twentytwentyonetesternumber2/pics/hero-3-1920.jpg) !important;
    background-position: 50% 50% !important;
  }
} */

#hero .wp-block-cover__inner-container {
  width: 100%;
}

/* Titles */

#hero-title {
  font-variant: small-caps;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  max-width: 90%;
  margin-bottom: 0 !important;
  line-height: 0.9;
}

#proper-title {
  text-shadow: 0px 0px 10px #330000;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#proper-title br {
  display: none;
}

/* Hero button */

#hero .hero-more-button {
  display: none;
  margin-top: 0;
  margin-bottom: 0;
}

@media only screen and (min-width: 822px) {
  #hero .hero-more-button {
    display: block;
  }
}

.more-arrow {
  display: inline-block;
  width: 50px;
  height: 50px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #a50000;
  position: relative;
  border: 4px solid white;
  cursor: pointer;
}

.more-arrow::before {
  content: "";
  display: block;
  border-top: solid 12px transparent;
  border-left: solid 12px #fff;
  border-bottom: solid 12px transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -6px;
  transform: rotate(90deg);
  box-sizing: content-box;
  transition: top 0.5s;
}

.more-arrow:hover::before {
  top: 60%;
}

#hero-bottom {
  border: none;
}

.hero-picture-credit {
  color: black;
  position: initial;
  margin: 0;
  padding: 10px 10px 0 0;
  text-shadow: none;
}

@media only screen and (min-width: 482px) {
  .hero-picture-credit {
    color: white;
    position: relative;
    top: -23px;
    margin: 0;
    padding: 0 20px 0 0;
    text-shadow: 0 0 5px black;
  }
}

/* Hero animations */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.title-animate {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.hero-button-animate {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* 3 Col Intro */

#intro-3-cols {
  display: block;
  flex-wrap: wrap;
}

#intro-3-cols .intro-col {
  max-width: 500px;
  margin: 0 auto 50px;
}

.intro-col h2 {
  background-color: var(--global--color-red);
  color: white;
  text-align: center;
  font-size: var(--global--font-size-md);
  font-weight: 700;
  padding: 0.2em;
}

.intro-col p {
  font-size: var(--global--font-size-sm);
}

@media only screen and (min-width: 822px) {
  #intro-3-cols {
    display: flex;
  }

  .intro-col {
    width: 30vw;
    max-width: 350px;
  }

  .intro-col p {
    font-size: 1.5vw;
  }
}

@media only screen and (min-width: 1150px) {
  .intro-col p {
    font-size: var(--global--font-size-sm);
  }
}

/* Official Statement */
.important-info {
  border: 6px dotted var(--global--color-red) !important;
  text-align: justify;
  margin: 0 auto;
}

#official-statement p {
  margin: 0 auto;
}

@media only screen and (min-width: 1240px) {
  #official-statement p {
    max-width: 75%;
  }
}

/* History + Campaign */
#history-campaign-section {
  display: block;
  padding: 5px;
}

#history-campaign-section .history-campaign {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  min-height: auto;
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto 50px;
  padding: 0;
}

.history-campaign .wp-block-cover__inner-container {
  width: 100%;
  height: 100%;
  margin: 0;
}

.history-campaign:hover .wp-block-cover__background.has-background-dim {
  opacity: 0.3;
  background: var(--global--color-red);
  mix-blend-mode: hard-light;
  transition: all 1s ease;
}

.history-campaign .wp-block-cover__background,
.history-campaign img {
  border-radius: 20px;
}

.history-campaign .wp-block-cover__inner-container p {
  white-space: nowrap;
  line-height: 0.9;
  text-shadow: 0 0 5px black;
  font-size: 10vw;
  width: 100%;
  height: 100%;
  display: flex;
}

.history-campaign .wp-block-cover__inner-container p a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 900;
}

@media only screen and (min-width: 822px) {
  #history-campaign-section {
    display: flex;
    justify-content: space-around;
  }

  #history-campaign-section .history-campaign {
    margin: 0;
  }

  .history-campaign .wp-block-cover__inner-container p {
    font-size: 4vw;
  }
}

/* Book */

#book-section {
  border: 3px solid #e0e0e0;
  border-radius: 20px;
  padding: 3%;
  max-width: min(740px, 90%);
}

#book-section .wp-block-media-text__content {
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#book-section .wp-block-media-text__media {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

#book-section .wp-block-media-text__media img {
  max-height: 500px;
  width: auto;
  height: auto;
}

@media only screen and (min-width: 600px) {
  #book-section .wp-block-media-text__media {
    margin-bottom: 0;
  }
}

/* Eight Pickets */

#eight-pickets figcaption.wp-element-caption {
  font-size: var(--global--font-size-md);
}

/* Carousel */

.owl-carousel-front-page-2023 {
  max-width: var(--responsive--alignwide-width) !important;
}

@media only screen and (min-width: 1200px) {
  .owl-carousel-front-page-2023 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Videos */

.video-2-up-group {
  min-height: 422px;
  background-color: pink;
}

/************************************************************************************
 * 
 * Single pages
 *
 ************************************************************************************/

.single-title-prefix {
  font-variant: small-caps;
  font-size: 0.8em;
}

/* Section Menu Top */
#section-menu-top .wp-block-navigation-item {
  width: 100%;
  background-color: var(--global--color-red);
  color: white;
  padding: 5px;
}

#section-menu-top .wp-block-navigation-item {
  padding: 5px;
}

#section-menu-top .wp-block-navigation__submenu-icon {
  margin-left: auto;
  padding-right: 20px;
  background-color: var(--global--color-red) !important;
}

#section-menu-top .wp-block-navigation__submenu-container {
  width: 100%;
}

/* Section Menu Bottom */

#section-menu {
  margin-top: 100px;
}

#section-menu a {
  color: var(--global--color-red);
}

#section-menu .wp-block-separator {
  width: 100%;
  border-bottom: 3px dotted var(--global--color-red);
}

/* Section Menu Top and Bottom Common */
#section-menu .current-menu-item,
#section-menu-top .current-menu-item {
  font-weight: bold;
}

#section-menu .current-menu-item::before,
#section-menu-top .current-menu-item .wp-block-navigation-item__label::before {
  content: ">>";
  font-weight: bold;
}

#section-menu .current-menu-item::after,
#section-menu-top .current-menu-item .wp-block-navigation-item__label::after {
  content: "<<";
  font-weight: bold;
}

/************************************************************************************
 * 
 * Archive pages
 *
 ************************************************************************************/

h1.entry-title {
  line-height: var(--global--line-height-heading);
}

/************************************************************************************
 * 
 * Contact US Page
 *
 ************************************************************************************/
#wpcf7-f259-p15-o1 .wpcf7-captcha-captcha-888 {
  margin-bottom: 10px;
}

#wpcf7-f259-p15-o1 .wpcf7-submit {
  margin-top: 10px;
}

/************************************************************************************
 * 
 * Trade union list
 *
 ************************************************************************************/

#union-list .wp-block-columns {
  margin-bottom: 80px;
}