/*
Theme Name: Thème Le garage toulousain
Theme URI: https://velcomeseo.fr
Author: Velcome SEO
Author URI: https://velcomeseo.fr/
Description: Thème du site Le garage toulousain
Version: 1.0.0
License: 
Text Domain: Velcome
*/

@import "./assets/css/cardNumber.css";

:root {
  --orange: #ff4819;
  --green-light: #8fff01;
  --green-darker: #7ddf00;
  --dark: #202124;
  --darker: #191919;
  --grey-dark: #303134;
  --grey: #c8c8c8;
  --grey-light: #f6f6f6;
  --grey-light-ultra: #fcfcfc;
  --white: #fff;
  --standard-padding: 12%;
}

* {
  box-sizing: border-box;
  font-family: Barlow;
}

h1,
h2,
h3,
h4,
h5,
p,
a,
div,
span,
ul,
ol {
  color: var(--white);
}

*::selection {
  background: var(--orange);
  color: white;
}

h1,
h2,
h3 {
  text-transform: uppercase;
}

.h2 {
  font-size: 1.5em;
  font-weight: bold;
}

a {
  text-decoration: none;
}

body {
  background: var(--darker);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
}

ol {
  padding-left: 1rem;
}

button,
.button,
.wp-block-button__link {
  background: var(--green-light);
  color: var(--darker);
  font-size: 18px;
  font-weight: bold;
  padding: 12px 18px;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover,
button:hover,
.button:hover {
  cursor: pointer;
}

.has-white-color a {
  color: var(--green-light);
}

.has-green-light-background-color {
  color: var(--darker) !important;
}

.background-image-group {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 3rem;
  margin: 2rem 0;
}

.background-image-group h2,
.background-image-group p {
  margin: 0;
}

.background-image-group .wp-block-column:first-child {
  gap: 5px;
}

.is-style-check {
  color: var(--white);
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  gap: 10px;
}

.is-style-check li {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.is-style-check li::before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 28.4 28.4' style='enable-background:new 0 0 28.4 28.4%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%238FFF01%3B%7D%3C/style%3E%3Cpath class='st0' d='M14.2 0C6.4 0 0 6.4 0 14.2s6.4 14.2 14.2 14.2S28.4 22 28.4 14.2S22 0 14.2 0z M21.5 11.4l-9.1 8.7l-5.5-5.5c-0.6-0.6-0.6-1.5 0-2.1s1.5-0.6 2.1 0l3.5 3.4l7-6.7c0.6-0.6 1.5-0.6 2.1 0C22.1 9.9 22.1 10.8 21.5 11.4z'/%3E%3C/svg%3E");
  margin-top: 3px;
  min-width: 24px;
}

iframe {
  margin: 18px 0;
}

#home-video {
  align-self: center;
}

@media only screen and (max-width: 980px) {
  :root {
    --standard-padding: 5%;
  }

  button,
  .button {
    font-size: 14px;
  }

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  div:has(iframe) {
    position: relative;
    padding-bottom: 56.25%;
    /* height: 0;
    overflow: hidden; */
  }

  #home-video {
    align-self: auto;
    margin-bottom: 24px;
  }

}