/*  
Theme Name: The Break
Theme URI: https://thebreak.fi/
Description: Theme designed by <a href="https://www.nvl.studio">NVL Studio</a>.
Version: 1.0
Author: Aleksi Partanen
Author URI: https://www.nvl.studio
*/

/* Reset
---------------------------*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.4;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Fluid Type & Space
---------------------------*/

/* @link https://utopia.fyi/type/calculator?c=380,18,1.2,1300,21,1.333,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7387rem, 0.7988rem + -0.0741vi, 0.7813rem);
  --step--1: clamp(0.9375rem, 0.918rem + 0.0819vi, 0.9846rem);
  --step-0: clamp(1.125rem, 1.0476rem + 0.3261vi, 1.3125rem);
  --step-1: clamp(1.35rem, 1.185rem + 0.6949vi, 1.7496rem);
  --step-2: clamp(1.62rem, 1.3258rem + 1.2386vi, 2.3322rem);
  --step-3: clamp(1.944rem, 1.4629rem + 2.0257vi, 3.1088rem);
  --step-4: clamp(2.3328rem, 1.5847rem + 3.1499vi, 4.144rem);
  --step-5: clamp(2.7994rem, 1.674rem + 4.7384vi, 5.524rem);
  --step-6: clamp(3.3592rem, 1.7053rem + 6.9638vi, 7.3634rem);
  --step-7: clamp(4.0311rem, 1.6419rem + 10.0598vi, 9.8155rem);
}

/* @link https://utopia.fyi/space/calculator?c=380,18,1.2,1300,21,1.333,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5109rem + 0.2174vi, 0.6875rem);
  --space-xs: clamp(0.875rem, 0.8234rem + 0.2174vi, 1rem);
  --space-s: clamp(1.125rem, 1.0476rem + 0.3261vi, 1.3125rem);
  --space-m: clamp(1.6875rem, 1.5584rem + 0.5435vi, 2rem);
  --space-l: clamp(2.25rem, 2.0951rem + 0.6522vi, 2.625rem);
  --space-xl: clamp(3.375rem, 3.1427rem + 0.9783vi, 3.9375rem);
  --space-2xl: clamp(4.5rem, 4.1902rem + 1.3043vi, 5.25rem);
  --space-3xl: clamp(6.75rem, 6.2853rem + 1.9565vi, 7.875rem);
  --space-4xl: clamp(9rem, 8.3804rem + 2.6087vi, 10.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1576rem + 0.6522vi, 0.6875rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3818rem + 0.7609vi, 1rem);
  --space-xs-s: clamp(0.875rem, 0.6943rem + 0.7609vi, 1.3125rem);
  --space-s-m: clamp(1.125rem, 0.7636rem + 1.5217vi, 2rem);
  --space-m-l: clamp(1.6875rem, 1.3003rem + 1.6304vi, 2.625rem);
  --space-l-xl: clamp(2.25rem, 1.553rem + 2.9348vi, 3.9375rem);
  --space-xl-2xl: clamp(3.375rem, 2.6005rem + 3.2609vi, 5.25rem);
  --space-2xl-3xl: clamp(4.5rem, 3.106rem + 5.8696vi, 7.875rem);
  --space-3xl-4xl: clamp(6.75rem, 5.2011rem + 6.5217vi, 10.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5054rem + 2.6087vi, 2.625rem);
  --space-s-xl: clamp(1.125rem, -0.0367rem + 4.8913vi, 3.9375rem);
}

/* Base
---------------------------*/

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background-color: #020a0a;
  font-family: garamond-atf-text, serif;
  font-size: var(--step-0);  
  color: #020a0a;  
}

::selection,
::-moz-selection {
  background: #020a0a;
  color: #fbb040;
}

a{
  cursor: pointer;
  color: #fbb040;
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-decoration-width: 0.075em;
  text-decoration-color: #fbb040;
  transition: .25s ease;
}

a:hover, a:active {
  outline: 0;
  color: #fbb040;
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-decoration-width: 0.075em;
}

:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "poster-gothic-excond-atf", sans-serif;
  font-weight: 700;
  margin-top: var(--space-m-l);
  margin-bottom: var(--space-xs-s);
}

h1 {  
  font-size: var(--step-5);
  hyphens: auto;
  overflow-wrap: break-word;
}

h2{
  font-size: var(--step-5);
}

h3{
  font-size: var(--step-2);
  font-family: "poster-gothic-cond-atf", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

h4{
  font-size: var(--step-1);
}

h5 {
  font-size: var(--step-0);
}

h6 {
  font-size: var(--step--1);
}

p {
  margin-bottom: var(--space-xs-s);
}

dfn,
cite,
em,
i {
  font-style: italic;
}

strong,
b {
  font-weight: 600;
}

img {
  height: auto;
}

/* Blockquote 

blockquote {
  margin: var(--space-xl-2xl) auto;
  max-width: calc(38*var(--step-0)) !important;
  
  p{
    font-size: var(--step-1);
    text-align: center;
  }
}*/

/* Formatting */

hr, 
hr.wp-block-separator{
  background: #fff;
  height: 3px;
  border: none;
  display: block;
  margin: var(--space-l-xl) auto;
  width: 2em;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* Lists */

ul,
ol {
  padding: 0;
  margin: 0 0 var(--space-xs-s) var(--space-xs-s);
  list-style-position: inside;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

dl{
  margin: 0 0 var(--space-xs-s) 0;
}

dt {
  font-weight: 600;
}

dd {
  margin: 0 0 var(--space-xs-s) var(--space-xs-s);
}

/* Tables */

table,
.wp-block-table table,
table.wp-block-table{
  width: 100%;
  border-collapse: collapse;

  > tbody > tr > td,
  > tbody > tr > th,
  > tfoot > tr > td,
  > tfoot > tr > th,
  > thead > tr > td,
  > thead > tr > th {
    padding: var(--space-s) var(--space-s);
    vertical-align: top;
    border: none;
    
    &:first-of-type{
      border-top-left-radius: var(--space-xs);
      border-bottom-left-radius: var(--space-xs);
    }
    &:last-of-type{
      border-top-right-radius: var(--space-xs);
      border-bottom-right-radius: var(--space-xs);
    }
  }
  > tbody > tr:nth-child(even) > td{
  }  
  > tbody > tr:nth-child(odd) > td{
    background: #ffffff0d;
  }
} 

/* Forms
---------------------------*/

button, 
.button,
input[type="button"],
input[type="submit"] {
  border: 0;
  cursor: pointer;
  display: inline-block;  
    
  font-family: "poster-gothic-cond-atf", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  
  padding: var(--space-2xs) var(--space-2xs);
  box-shadow: 0px 4px 0 -1px inset, 0px -4px 0 -1px inset;
  text-decoration: none;
  transition: all .25s linear;
  -webkit-appearance: none;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  text-decoration: none;
  box-shadow: 0px 50px 0 0px #fbb040 inset, 0px -50px 0 0px #fbb040 inset;
  color: #020a0a;
}

.button.button-reverse{
  color: #020a0a;
}

.button.button-reverse:hover,
.button.button-reverse:focus {
  box-shadow: 0px 50px 0 0px #020a0a inset, 0px -50px 0 0px #020a0a inset;
  color: #fbb040;
}

/* Content
---------------------------*/

/* Header
---------------------------*/

header{
  background-color: #020a0a;
  padding: var(--space-m-l);
  display: flex;
  flex-direction: column;
}

.logo{
  align-self: center;
  max-width: 73vw;
  width: 17em;
}

.logo img{
  width: 100%;
}

nav{
  width: 100%;
  max-width: 62em;
  margin: 0 auto;
}

nav ul {
  margin: var(--space-m-l) auto 0;
  display: flex;
  justify-content: center;
  gap: var(--space-3xs) var(--space-s-xl);
  flex-wrap: wrap;
  list-style: none;
  color: #fff;
  border-bottom: 5px solid;
  border-top: 5px solid;
  padding-top: var(--space-s-m);
  padding-bottom: var(--space-s-m);
  transform: rotate(-4deg);
}

nav ul a{
  font-family: "poster-gothic-cond-atf", sans-serif;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
}

/* Content
---------------------------*/

main{
  overflow: hidden;
}

section{
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl-4xl) var(--space-m-l) var(--space-xl-2xl);
  text-align: center;
}

section > :is(:first-child) {
  margin-top: 0;
}

section > :is(:last-child) {
  margin-bottom: 0;
}

section > * {
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

h2 + p{
  max-width: 26em;
  font-size: var(--step-1);  
  margin-bottom: var(--space-xl-2xl);
}

/* Arc */

.arc{
  position: absolute;
  top: -2px;
  left: -1%;
  width: 102%;
  overflow: hidden;
  line-height: 0;
  max-width: none;
}

.arc path{
  fill: #020a0a;
}

@media (max-width: 72em) {
  .top-arc{
    height: 10em;
    
    &.top-arc-higher{
      height: 11.5em;    
    }
  }
}

@media (max-width: 40em) {
  .top-arc{
    height: 9.5em;
  }
}

/* Intro
---------------------------*/

.intro{
  font-size: var(--step-3);
  color: #fff;
  font-family: "poster-gothic-excond-atf", sans-serif;
  font-weight: 700;
}

.intro p{
  color: #676767;
}

.intro > * {
  max-width: 25em;
}

/* Services
---------------------------*/

.services{
  background: #fbb040;
}
  
.services h2{
}

.services .container{
  max-width: 62em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  
  gap: var(--space-l-xl);
}

.services .container div{
  flex: 1 1 17em;
  max-width: 18em;
  background: #020a0a;
  border-radius: var(--space-m-l);
  padding: var(--space-xl) var(--space-l-xl);
  color: #fff;
  transform: rotate(-1deg);
  position: relative;
}

.services .container div:before{
  content: "";
  background: #020a0a;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -5;
  border-radius: var(--space-m-l);
  transform: rotate(-5deg);
}

.services .container div:after{
  content: "";
  background: #020a0a;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  border-radius: var(--space-m-l);
  transform: rotate(-2deg);
  border: 3px solid #fbb040;
}

.services .container div:nth-child(even){
  transform: rotate(1.5deg);
}


.services img{
  max-height: 8em;
  margin: 0 auto;
}

.services .container :is(div:last-of-type){
  flex: 1 1 36em;
  max-width: 36em;
}

/* Hours & Price
---------------------------*/

.hours,
.price{
  color: #fff;
}

.hours table,
.price table{
  margin-bottom: var(--space-m-l);
  font-size: var(--step-1);
  max-width: 22em;
  font-family: "poster-gothic-atf", sans-serif;
}

.price table{
  text-align: left;
}

.hours table td:nth-child(1),
.price table td:nth-child(1){
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hours table td:nth-child(2),
.price table td:nth-child(2){
  white-space: nowrap; 
}

.price table span{
  font-weight: 400;
  display: block;
  font-family: garamond-atf-text, serif;
  font-size: var(--step-0);
  margin-top: var(--space-3xs);
}

.price{
  background: #141b1b;
  
  .arc path{
    fill: #020a0a;
  }  
}

/* Location
---------------------------*/

.location{
  background: #fbb040;
  
  .arc path{
    fill: #141b1b;
  }  
}

.iframe-wrapper{
  position: relative;
  margin-top: var(--space-m-l);
  width: 100%;
  max-width: 46em;  
}

.iframe-wrapper:before{
  content: "";
  background: #020a0a;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: -11px;
  position: absolute;
  z-index: 0;
  border-radius: var(--space-m-l);
  transform: rotate(-3deg);
}

.iframe-wrapper:after{
  content: "";
  background: #020a0a;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 10px;
  position: absolute;
  z-index: 0;
  border-radius: var(--space-m-l);
  transform: rotate(2deg);
}

.location iframe{
  position: relative;
  z-index: 10;
  display: block;
  border-radius: var(--space-m-l);
  box-shadow: 0 0 0 4px #020a0a, 0 0 0 8px #fbb040;
}

/* Footer
---------------------------*/

footer{
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl-4xl) var(--space-m-l) var(--space-xl-2xl);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl-2xl);
}

footer > * {
  max-width: 46em;
  margin-left: auto;
  margin-right: auto;
}

footer h3{
  margin-bottom: var(--space-m-l);
}

footer a:not([class]){
  color: #fff;
}

footer p{  
  font-size: var(--step-5);
  font-family: "poster-gothic-excond-atf", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  margin: var(--space-m-l) 0 0;
  color: #777;
  word-break: break-all;
  overflow-wrap: break-word;
}

footer ul{
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-m-l);
  margin: 0;
}

.social{
  display: flex;
  width: 17em;
  height: 17em;
  transform: rotate(2deg);  
}

.social.instagram{
  transform: rotate(-1deg);
}

.social img{
  transition: .25s ease;
}

.social img:hover{
  transform: scale(0.95);
}

.legal{
  font-family: garamond-atf-text, serif;
  font-size: var(--step-0);
  line-height: 1.4;
  color: #555;
}