/*
Theme Name: For Christ
Author: Brett Donald
*/

:root {
  --clr-orange: #f48121;
  --clr-teal: #448ab3;
  --clr-sky: #cddfe5;

  --clr-burgundy: #300909;
  --clr-gold: #a7764e;
  --clr-gold-50: #a7764e80;
  --clr-cream: #ebe5d9;
  --clr-french-blue: #1e3888;
/*
  --clr-magenta-bloom: #db2763;
  --clr-bitter-chocolate: #692f2c;
  --clr-chestnut: #903331;
  --gra-sidebar: linear-gradient(90deg,#300909ff 0%, #300909cc 100%);
*/

  --normal-width: 900px;
  --wide-width: 1300px;
  --tra-short: 250ms;
  --tra-long: 1s;
}

html, body {
  height: 100%;
}

html {
  font-family: Inter, sans-serif;
  font-size: clamp(16px, 12px + 0.75vw, 20px);              /* 16px below about 530px, 20px above about 1066px */
}

/* generic elements */

button, .button, .wp-block-button__link, .wpcf7-submit {
  font-family: inherit;
  font-size: inherit;
  background-color: var(--clr-teal);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid var(--clr-teal);
  border-radius: 99em;
  padding: 0.25em 1em;
  transition: var(--tra-short);
  letter-spacing: 1px;
  &:hover, &:focus-visible {
    background-color: transparent;
    color: var(--clr-teal);
    outline: none;
  }
}

input[type="text"], input[type="email"], textarea, select {
  font-family: inherit;
  font-size: inherit;
  border: 0;
  padding: 3px;
/*
  margin: 0 -3px 2px;
  border-bottom: 1px solid var(--clr-gold-50);
  background-color: transparent;
  color: var(--clr-gold);
*/
  width: 100%;
  box-sizing: border-box;
/*
  &::placeholder {color: var(--clr-gold-50);}
  &:focus-visible {
    outline: none;
    border-bottom: 3px dashed var(--clr-french-blue);
    margin-bottom: 0;
  }
*/
}

select {
  appearance: none;
  &:has(option[value=""]:checked) {color: var(--clr-gold-50);}      /* placeholder for select */
}

details {
  cursor: pointer;
  margin-bottom: 1em;
}

details::details-content {                                  /* smooth opening of content */
  interpolate-size: allow-keywords;
  transition: var(--tra-short) allow-discrete;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

details[open]::details-content {                            /* smooth opening of content */
  height: auto;
  padding-top: 1em;
}

summary::-webkit-details-marker {display: none;}            /* hide the arrow - safari */
summary {
  background: var(--clr-sky);
  border: 0;
  padding: 0.4em 1em;
  border-radius: 5px;
  transition: var(--tra-short);
  display: flex;                                            /* layout for custom arrow */
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  &::after {                                                /* custom arrow */
    content: '';
    width: 0.75em;
    height: 0.75em;
    background-image: url(/wp-content/themes/for-christ/img/chevron-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    transition: var(--tra-short);
  }
  &:hover, &:focus-visible {                                /* hover and focus */
    background-color: var(--clr-teal);
    color: white;
    outline: none;
    &::after {
      background-image: url(/wp-content/themes/for-christ/img/chevron-white.svg);
    }
  }
}

details[open] summary::after {                              /* rotate arrow on open */
  transform: rotate(-180deg);
}

/* contact form 7 */

.wpcf7 form {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}
/*
.wpcf7 label {
  color: rgb(255 255 255 / 0.75);
}
*/
input[type=text], input[type=email], select, textarea {
  border: 1px solid rgb(0 0 0 / 0.2);
  padding: 3px 10px;
  border-radius: 6px;
  background: white;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 0.25em;
}

input[type=text], input[type=email], select {
  width: 300px;
}

select[name="territory"] {
  width: 120px;
}

select[name="enquiry-type"] {
  width: 400px;
}

textarea {
  width: 600px;
}

select {
  appearance: none;
  cursor: pointer;
}

.wpcf7-turnstile > div {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
}

.location-list {
  display: block;
  overflow: auto;
  th, td {
    white-space: nowrap;
    padding: 0 1em 0 0;
  }
  th {
    font-size: smaller;
    text-align: left;
    text-transform: uppercase;
    color: var(--clr-teal);
    padding-bottom: 0.5em;
  }
}

/* contact form 7 messages */

.wpcf7 form .wpcf7-response-output {
  margin: 2em 0 1em;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1em;
}
.wpcf7 form.init .wpcf7-response-output {
  display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
  border: 0;
}
.wpcf7 form.sent .wpcf7-response-output::before {
  content: ' ';
  background-image: url(img/icon-ok.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 3em;
  height: 3em;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output {
  border: 0;
}
.wpcf7 form.failed .wpcf7-response-output::before, .wpcf7 form.aborted .wpcf7-response-output::before, .wpcf7 form.spam .wpcf7-response-output::before {
  content: ' ';
  background-image: url(img/icon-error.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 3em;
  height: 3em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
  border: 0;
}
.wpcf7 form.invalid .wpcf7-response-output::before, .wpcf7 form.unaccepted .wpcf7-response-output::before {
  content: ' ';
  background-image: url(img/icon-warn.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 3em;
  height: 3em;
}
.wpcf7-not-valid-tip {
  color: #d70000;
  margin-top: 2px;
}

/* generic layout */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 0.5em 1em;
  background: black;
  color: white;
  font-weight; bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4vw;
  /*
  .custom-logo {width: 300px; max-width: 100%;}
  .hamburger {width: 1em;}
  @media (min-width: 740px) {
    .hamburger {display: none;}
  }
  */
  .logo img {width: 3em;}
  .language img {width: 1.5em; opacity: 0;}
}

.translation-available header .language img {
  opacity: 1;  
}

section.countries {
  padding: 1em;
  background: black;
  color: white;
  font-weight; bold;
}

section.join-us {
  text-wrap: balance;
}

header nav, .countries nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw 4vw;
  flex-wrap: wrap;
  a {
    color: inherit;
    text-decoration: underline black;
    text-underline-offset: 5px;
    transition: var(--tra-short);
    &:hover {text-decoration-color: var(--clr-orange);}
  }
}

main {
  container-type: inline-size;
  flex-grow: 1;                                             /* grow so that the footer goes to the bottom */
}

main-inner {
  display: block;
  --side-padding: max(5cqw, (100cqw - var(--normal-width)) / 2);
  --side-padding-negate: min(-5cqw, (100cqw - var(--normal-width)) / -2);
  --side-padding-wide: max(min((100cqw - var(--normal-width)) / 4, (var(--wide-width) - var(--normal-width)) / 2), 5cqw);
  --side-padding-negate-wide: min(max((100cqw - var(--normal-width)) / -4, (var(--wide-width) - var(--normal-width)) / -2), 0cqw);
  --side-padding-narrow: min(5cqw, 2.375em);
  padding: 0 var(--side-padding) 2em;
}

footer {
  text-align: center;
  font-size: small;
  padding: 1.5em;
  background-color: black;
  color: white;
}

.hero > .wp-block-cover__inner-container > :last-child {
  text-shadow: 0 0 5px rgb(0 0 0 / 0.5);
  text-wrap: balance;
}

.intro-and-photos {
  gap: 2em;
  flex-direction: column;
  > * {gap: 1em;}
  > :nth-child(1) {display: none;}
  img {border-radius: 1em; width: 100%; height: 330px; object-fit: cover;}
  @media (min-width: 1000px) {
    flex-direction: row;
    > :nth-child(1) {flex-basis: 30%; display: flex;}
    > :nth-child(2) {flex-basis: 40%;}
    > :nth-child(3) {flex-basis: 30%;}
    figure:first-child, figure:last-child {margin-bottom: 3em;}
    figure:nth-child(2) {margin-top: 3em;}
  }
}

.shorts {
  margin-left: calc(-1 * var(--side-padding-narrow));
  margin-right: calc(-1 * var(--side-padding-narrow));
  display: flex;
  gap: 1em;
  overflow: auto;
  padding: 0.5em 1em 1em;
  scroll-snap-type: x mandatory;
  &::-webkit-scrollbar {display: none;}
  scrollbar-width: none;  /* firefox */
  > :first-child {margin-left: auto;}
  > :last-child {margin-right: auto;}
  video {
    display: block;
    width: 250px;
    border-radius: 1em;
    scroll-snap-align: center;
    box-shadow: 0 0 5px rgb(255 255 255 / 0.3);
    cursor: pointer;
  }
}

.shorts figure {
	position: relative;
  transition: var(--tra-long);
  &.resetting {opacity: 0;}
  &::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 0;
    bottom: 0;
    width: 100%;
    /* generated using non-boring-gradients.netlify.app using black with opacity 0.3 to black with opacity 0, zero degrees rotation, easeInOutSine, sRGB */
    background-image: linear-gradient(0deg, rgb(0% 0% 0% / 0.3) 0%, rgb(0% 0% 0% / 0.29711779206048455) 6.25%, rgb(0% 0% 0% / 0.288581929876693) 12.5%, rgb(0% 0% 0% / 0.2747204418453818) 18.75%, rgb(0% 0% 0% / 0.2560660171779821) 25%, rgb(0% 0% 0% / 0.23333553495294035) 31.25%, rgb(0% 0% 0% / 0.20740251485476346) 37.5%, rgb(0% 0% 0% / 0.17926354830241925) 43.75%, rgb(0% 0% 0% / 0.15000000000000002) 50%, rgb(0% 0% 0% / 0.12073645169758077) 56.25%, rgb(0% 0% 0% / 0.09259748514523655) 62.5%, rgb(0% 0% 0% / 0.0666644650470597) 68.75%, rgb(0% 0% 0% / 0.04393398282201788) 75%, rgb(0% 0% 0% / 0.025279558154618187) 81.25%, rgb(0% 0% 0% / 0.011418070123306978) 87.5%, rgb(0% 0% 0% / 0.0028822079395154354) 93.75%, rgb(0% 0% 0% / 0) 100% );
    pointer-events: none;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 1em;
    right: 1em;
    width: 1.5em;
    height: 1.5em;
/*    opacity: 0.8; */
    background-image: url(/wp-content/themes/for-christ/img/play.svg);
    background-size: contain;
    pointer-events: none;
    transition: var(--tra-short);
  }
  &.playing::after {
	  background-image: url(/wp-content/themes/for-christ/img/pause.svg);
  }
  figcaption {
    position: absolute;
    bottom: 1em;
    left: 1em;
/*    opacity: 0.8; */
  }
}

.social-links {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

[data-wpcf7-id="348"] form {
  width: auto;
  p:has(input.wpcf7-submit) {display: flex; flex-wrap: wrap; align-items: start; gap: 0.75em;}
  input[type="text"], input[type="email"] {background: #f8f8f8; margin: 0;}
  input[name="your-email"] {width: 300px;}
  input[name="first-name"], input[name="last-name"] {width: 160px;}
  .wpcf7-turnstile:has(input[name="_wpcf7_turnstile_response"][value]) {display: none;}
}

.home-page-locations table {
  display: block;
  td {
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
  }
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1em;
  align-items: start;
  .notes-item {
    background-color: #eee;
    color: #bbb;
    padding: 1em;
    border-radius: 0.5em;
    /* text-decoration: none; */
    overflow: hidden;
    /* for items without a language select */
    &[href] {background-color: #a1a96a; color: white; text-decoration: none;}
    &[href]:hover {background: #8b9455;}
    /* for items with a language select */
    &:has(.language-select) {
      background-color: #a1a96a;
      color: white;
      &:not(.clicked) {
        cursor: pointer;
        &:hover {background-color: #8b9455;}
      }
      &.clicked {background: #e77e2d;}
    }
  }
  .language-select {display: flex; flex-wrap: wrap; gap: 0.5em 1em; height: 0; opacity: 0; interpolate-size: allow-keywords; transition: 500ms;}
  .clicked .language-select {margin-top: 1em; height: auto; opacity: 1;}
  .language-select a {
    font-size: smaller;
    background-color: rgb(255 255 255 / 0.9);
    color: #e77e2d;
    text-decoration: none;
    padding: 0.2em 0.5em;
    border-radius: 5px;
    transition: 250ms;
    pointer-events: none;
    text-indent: 1.35em hanging;
    &:hover {background-color: white;}
  }
  .clicked .language-select a {pointer-events: initial;}
}

/* augment block css */

.alignwide {
  margin-left: var(--side-padding-negate-wide);
  margin-right: var(--side-padding-negate-wide);
}

.alignfull {
  margin-left: var(--side-padding-negate);
  margin-right: var(--side-padding-negate);
}

.wp-block-cover, .wp-block-cover-image, :where(.wp-block-group.has-background), :root :where(p.has-background) {
  padding: 1.25em var(--side-padding-narrow);
}

.wp-block-cover.alignwide.boxed {
  padding-left: var(--side-padding-wide);
  padding-right: var(--side-padding-wide);
}

.wp-block-cover.alignfull.boxed {
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.wp-block-embed__wrapper {
	width: 100%;
}

.aspect-16-9, .wp-embed-aspect-16-9>.wp-block-embed__wrapper {
	aspect-ratio: 16/9;
}

.wp-block-embed__wrapper>iframe {
  width: 100%;
  height: 100%;
}

/* global overrides */

/*
.has-burgundy-color, .has-burgundy-color.wp-block-button__link, .has-burgundy-color.wp-block-button__link:active, .has-burgundy-color.wp-block-button__link:focus, .has-burgundy-color.wp-block-button__link:hover, .has-burgundy-color.wp-block-button__link:visited {
	color: var(--clr-burgundy);
}
.has-burgundy-background-color, .is-style-outline .has-burgundy-background-color.wp-block-button__link, .has-burgundy-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-burgundy);
}
.has-gold-color, .has-gold-color.wp-block-button__link, .has-gold-color.wp-block-button__link:active, .has-gold-color.wp-block-button__link:focus, .has-gold-color.wp-block-button__link:hover, .has-gold-color.wp-block-button__link:visited {
	color: var(--clr-gold);
}
.has-gold-background-color, .is-style-outline .has-gold-background-color.wp-block-button__link, .has-gold-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-gold);
}
.has-cream-color, .has-cream-color.wp-block-button__link, .has-cream-color.wp-block-button__link:active, .has-cream-color.wp-block-button__link:focus, .has-cream-color.wp-block-button__link:hover, .has-cream-color.wp-block-button__link:visited {
	color: var(--clr-cream);
}
.has-cream-background-color, .is-style-outline .has-cream-background-color.wp-block-button__link, .has-cream-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-cream);
}
.has-french-blue-color, .has-french-blue-color.wp-block-button__link, .has-french-blue-color.wp-block-button__link:active, .has-french-blue-color.wp-block-button__link:focus, .has-french-blue-color.wp-block-button__link:hover, .has-french-blue-color.wp-block-button__link:visited {
	color: var(--clr-french-blue);
}
.has-french-blue-background-color, .is-style-outline .has-french-blue-background-color.wp-block-button__link, .has-french-blue-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-french-blue);
}
.has-bitter-chocolate-color, .has-bitter-chocolate-color.wp-block-button__link, .has-bitter-chocolate-color.wp-block-button__link:active, .has-bitter-chocolate-color.wp-block-button__link:focus, .has-bitter-chocolate-color.wp-block-button__link:hover, .has-bitter-chocolate-color.wp-block-button__link:visited {
	color: var(--clr-bitter-chocolate);
}
.has-bitter-chocolate-background-color, .is-style-outline .has-bitter-chocolate-background-color.wp-block-button__link, .has-bitter-chocolate-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-bitter-chocolate);
}
.has-chestnut-color, .has-chestnut-color.wp-block-button__link, .has-chestnut-color.wp-block-button__link:active, .has-chestnut-color.wp-block-button__link:focus, .has-chestnut-color.wp-block-button__link:hover, .has-chestnut-color.wp-block-button__link:visited {
	color: var(--clr-chestnut);
}
.has-chestnut-background-color, .is-style-outline .has-chestnut-background-color.wp-block-button__link, .has-chestnut-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-chestnut);
}
.has-magenta-bloom-color, .has-magenta-bloom-color.wp-block-button__link, .has-magenta-bloom-color.wp-block-button__link:active, .has-magenta-bloom-color.wp-block-button__link:focus, .has-magenta-bloom-color.wp-block-button__link:hover, .has-magenta-bloom-color.wp-block-button__link:visited {
	color: var(--clr-magenta-bloom);
}
.has-magenta-bloom-background-color, .is-style-outline .has-magenta-bloom-background-color.wp-block-button__link, .has-magenta-bloom-background-color.wp-block-button__link.is-style-outline {
	background-color: var(--clr-magenta-bloom);
}
.is-style-outline .has-black-color.wp-block-button__link, .has-black-color.wp-block-button__link.is-style-outline {
	color: black;
}
.is-style-outline .has-white-color.wp-block-button__link, .has-white-color.wp-block-button__link.is-style-outline {
	color: white;
}
*/

.mt0 {margin-top: 0;}
.mb0 {margin-bottom: 0;}
.mt1 {margin-top: 1em;}
.mb1 {margin-bottom: 1em;}
.pt0 {padding-top: 0;}
.pb0 {padding-bottom: 0;}
.pt1 {padding-top: 1em;}
.pb1 {padding-bottom: 1em;}
.pt2 {padding-top: 2em;}
.title-font {font-family: Cormorant, serif;}
.avoid-edge {padding-left: var(--side-padding-narrow); padding-right: var(--side-padding-narrow);}
.hidden {display: none;}