/*
Theme Name: Manuel Harlan
*/

:root {

  /* Structure */
  --header-height:220px;
  --container: 1380px;
  --container-padding:130px;
  --container-narrow: 1120px;
  --padding-inset:92px;
  --logo-width:217px;
  --logo-height:84px;
  --grid-gap:50px;
  --margin-bottom:60px;
  --button-icon-width: 30px;
  --button-icon-height: 13px;

  /* Font Sizes */
  --font-x-large: 100px;
  --font-large: 40px;
  --font-regular:22px;
  --font-small: 18.5px;
  --font-x-small: 16.5px;

  /* Fonts */
  --font-serif: 'Marble Arch SubHead Trial Regular', serif;
  --font-sans-serif: "aktiv-grotesk", sans-serif;

  /* Colours */
  --black: #000000;
  --pink: #fc4773;
  --light-grey: #f2f2f2;
  --grey:#d9d9d9;
  --dark-grey:#808080;
  --white:#FFF;
  --purple:#491142;

  /* Transitions */
  --transition-height: 1s ease-out max-height;
  --transition-transform: 0.3s ease-out transform, 0.3s ease-out visibility;
  --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-color: 0.3s ease-out color;
  --transition-background: 0.3s ease-out background-color;
  --transition-header: 0.3s ease-out box-shadow, 0.3s ease-out background-color;
  --transition-roundel: 0.3s ease-out background-color, 0.3s ease-out color, 0.3s ease-out border-radius;
  --transition-button:0.3s ease-out background-color, 0.3s ease-out color;

  /* Cookie Banner */
  --cc-btn-primary-bg: var(--pink);
  --cc-btn-primary-border-color: var(--pink);
  --cc-btn-secondary-hover-bg: var(--light-grey);
}

/* Fonts */
@font-face {
  font-family: 'Marble Arch SubHead Trial Regular';
  src: url('../fonts/MarbleArchSubHead_Trial_Rg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Marble Arch SubHead Trial Regular';
  src: url('../fonts/MarbleArchSubHead_Trial_Bd.woff2') format('woff2');
  font-weight: bold;
  font-style: normal; 
}


/* Colours */
.pink { color: var(--pink); }
.black { color: var(--black); }
.grey { color: var(--grey); }
.light-grey { color: var(--light-grey); }
.white { color: var(--white); }
.purple { color: var(--purple); }

.bg-white { background-color:var(--white); }
.bg-black { background-color:var(--black); }
.bg-pink { background-color:var(--pink); }
.bg-grey { background-color:var(--grey); }
.bg-light-grey { background-color:var(--light-grey); }

/* Structure */
html, body { height: 100%; }
.container { margin-left:auto; margin-right:auto; width: 100%; padding:0 var(--container-padding); max-width: var(--container); }
.grid { grid-gap:var(--grid-gap); }
.margin-bottom { margin-bottom: var(--margin-bottom); }
.padding-inset { padding-left: var(--padding-inset); }
.button svg { width: var(--button-icon-width); height: var(--button-icon-height); margin: auto 0 auto 10px; }
.reveal { visibility: hidden; will-change: opacity, transform; transform: translateY(20px); opacity:0 }

/* Typography */
body { padding-top:var(--header-height); color: var(--black); background: var(--white); line-height: 1.45; font-size: var(--font-regular); font-family: var(--font-serif); text-wrap: balance;}
a { transition: var(--transition-fade); }
p { margin-bottom: 0.5lh; }
ul { margin: 1lh 0; }
ul:first-of-type { margin-top: 0;}
li { margin-bottom: 1lh; list-style-position: outside; margin-left: 20px; text-wrap: auto; }
li::marker { color: var(--green); }
p:last-of-type { margin-bottom:0; }
button { font-family: inherit; }
.font-x-large { font-size: var(--font-x-large); line-height: 1.2; }
.font-large { font-size: var(--font-large); line-height: 1.25; }
.font-regular { font-size: var(--font-regular); }
.font-small { font-size: var(--font-small); }
.font-x-small { font-size: var(--font-x-small); }
.font-sans-serif { font-family: var(--font-sans-serif); letter-spacing: 0.2em;  }


/* Header */
.header { height:var(--header-height); top:0; left: 0; right: 0; padding-top:60px; }
.header-logo { width:var(--logo-width); height:var(--logo-height); display: block; z-index: 2; }
.header-menu { grid-row-gap: 0; margin-bottom: auto; }
.header-menu-item { border-bottom: 1px solid var(--black); height: 34px; line-height: 34px; }
.header-menu-item.is-active { color:var(--pink); }
.button-menu { display: none; }
.menu-mask { display: none; }

/* Hero */
.layout-hero { z-index: 0; } 
.hero-caption { top:0; left:var(--container-padding); right:var(--container-padding); z-index: 1; width: auto; }
.hero-image { width: 100%;}

/* Standfirst */
/* .layout-standfirst h1 { max-width:880px; } */

/* Links */
.links-item:last-child { margin-bottom: 0; }

/* List */
.list-item-number span:after { content:''; width: 1px; background-color: currentColor; transform: rotate(45deg); position: absolute; top: 8px; transform-origin: top left; right: 0;}
.list-item-content h3 { margin-bottom: 16px; }

/* Image */
.layout-image { width: 100%; }

/* Form */
.layout-form h2 { margin-bottom: 20px; }
input, textarea, select { font-family: var(--font-serif); color:var(--black); width: 100%; outline: none;}
input { height: 50px; line-height: 50px; border-bottom: 1px solid var(--dark-grey); font-size: var(--font-regular); }
textarea {  border-bottom: 1px solid var(--dark-grey); height: 150px; appearance: none; border-radius: 0; }
.button-submit { text-transform: uppercase; letter-spacing: 0.2em; font-family: var(--font-sans-serif); overflow: visible; }
::placeholder { color:var(--dark-grey); }
input:focus, textarea:focus { border-color: var(--pink);}
.form-field, .cf-turnstile { margin-bottom: 16px; }
.form-field span { font-size: var(--font-x-small); color: var(--pink); padding: 10px 0 ;}
.form-field:last-child { margin-bottom: 0; }
.form-link { margin-bottom: 20px; }
.form-link:first-of-type { margin-top:var(--margin-bottom); }
.form-link:last-of-type { margin-bottom: 0; }
.form-quote span { top:0; left: 0; }
.form-quote blockquote p { display: inline; }

/* Banner */
.banner h2 { margin-bottom: 16px; }

/* Text */
.layout-text strong { font-weight: normal; color:var(--pink); }
.layout-text p { margin-bottom: 1lh; }
.layout-banner + .layout-text { margin-top: calc( -1 * var(--margin-bottom)); }

/* Footer */
.footer-menu { margin-bottom: 20px; width: 100%; }
.footer-menu-item { margin-right: 30px; }
.footer-menu-item-privacy { margin-left: auto; margin-right: 0; }
.footer-credits { opacity: 0.5; margin-left: auto; }

@media (hover: hover) {
  .header-menu-item { transition: var(--transition-fade); }
  .header-menu-item:hover { opacity: 0.5; }
  .button svg { transition: var(--transition-transform); }
  .button:hover svg { transform: translateX(10px);}
  .links-item:hover svg { transform: translateX(10px);}

}

/* Desktop */
@media  (min-width: 768px) and ( max-width: 1240px ) {
  .hero-caption { padding-left: 0; padding-right: 0; }
  .hero-caption h1 { grid-column: 1/-1; }
}

@media (min-width: 768px) {

  /* Structure */
  .d\:grid-cols-2	{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d\:grid-cols-5	{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .d\:col-span-2 { grid-column: span 2 / span 2; }
  .d\:col-span-3 { grid-column: span 3 / span 3; }
  .d\:col-span-4 { grid-column: span 4 / span 4; }
  .d\:col-span-all { grid-column: 1/-1; }
  .d\:col-start-2 { grid-column-start: 2; }
  .m-show { display: none; }

  /* Header */
  .header-menu { margin-top: -9px; }
  .button-menu { display: none; }
  
  /* Menu */
  .header-menu-item:nth-child(2) { grid-column: 1; }
  .header-menu-item:nth-child(3) { border-top: 1px solid var(--black); line-height: 33px;  }

  /* Hero */
  .hero-caption { padding-top:56px; }

  /* Banner */
  .layout-banner { margin-bottom: 108px;}
  .layout-banner.is-image_left .banner-image { margin-left: calc( -1 * var(--container-padding)); }
  .layout-banner.is-image_right .banner-image { margin-right: calc( -1 * var(--container-padding)); }
  .banner .button { margin-top: 30px; }

  /* Form */
  .layout-form form { margin-top: 30px; margin-bottom: 68px; }
  .form-quote blockquote { margin-top: auto; margin-bottom: 112px; padding-left: 20px; }

  /* Text */
  .text-title { margin-bottom: 48px; }
  .text-title span { margin-left: calc( -1 * calc(calc( calc( 100% - 150px) / 4) + 50px)); }

  /* List */
  .layout-list { padding-top:55px; padding-bottom: 125px; }
  .layout-list h2 { margin-bottom: 80px; }
  .list-items { row-gap:120px; }
  .list-item-number span { width: 90px; margin-left: auto; }
  .list-item-number span:after { height: 126px; }
  .list-item-image { margin-right: calc( -1 * var(--container-padding)); }

  /* Links */
  .layout-links { padding-top:100px; padding-bottom:100px; }
  .layout-links h2 { margin-bottom: 18px; }
  .links-cta { margin-top:30px; }

  /* Footer */
  .footer { padding-top:42px; padding-bottom: 150px; }

}

/* Tablet */
@media (min-width: 768px) and (max-width:1024px) {
  :root {

    /* Structure */
    --container-padding:60px;
    --grid-gap:40px;
  }
}

/* Mobile */
@media (max-width: 768px) {

  :root {

    /* Structure */
    --header-height:82px;
    --container-padding:35px;
    --logo-width:96px;
    --logo-height:38px;
    --padding-inset:0;
    --button-icon-width: 19px;
    --button-icon-height: 8px;
    --margin-bottom:30px;
    --grid-gap:35px;

    /* Font Sizes */
    --font-x-large: 50px;
    --font-large: 19px;
    --font-regular:14px;
    --font-small: 12px;
    --font-x-small: 10.5px;
  }

  /* Structure */
  .m-show { display: block;}
  p { text-wrap: auto; }
  p br { display: none; }

  /* Header */
  .header { padding-top:25px; position: fixed; z-index: 2; }
  .header-logo { transition: var(--transition-color);}
  .button-menu { position: absolute; width: 44px; height: 44px; padding: 12px 9px; display: flex; flex-direction: column; justify-content: space-between; right:25px; top:0; bottom:0; margin: auto; }
  .button-menu span { height: 1px; width: 100%; background-color: var(--pink); }
  
  /* Menu */
  .header-menu { padding: 128px 64px 44px 112px; height: 100dvh; position: fixed; display: flex; flex-direction: column; top:0; left: 0; right: 0; bottom: 0; background-color: var(--black); color:var(--white); transform: translateX(100%); transition: var(--transition-transform); }
  .header-menu-item { font-size: 18px; border-color: var(--white);}
  .header-menu-item-email { margin-top: auto;}
  .header-menu-item-linkedin, .header-menu-item-email { font-size: 14px; }
  .button-menu span { transition: var(--transition-transform), var(--transition-fade);}
  .show-menu .header-menu { transform: translateX(0); }
  .show-menu .header-logo { color:var(--white); }
  .show-menu .button-menu span:nth-of-type(1) { transform-origin: top left; transform: rotate(45deg) translate(3px,-2.5px);}
  .show-menu .button-menu span:nth-of-type(2) { opacity: 0; }
  .show-menu .button-menu span:nth-of-type(3) { transform-origin: bottom left; transform: rotate(-45deg) translate(3px,2.5px);}

  /* Banner */
  .layout-banner { margin-bottom: 30px; }
  .banner .button { margin-top: 20px;}

  /* Hero */
  .hero-image.has-mobile-image { aspect-ratio: 375/203 !important; }
  .hero-caption { position: static; padding-top:25px; padding-bottom: 25px; }

  /* Form */
  .layout-form form { margin-top: 6px; margin-bottom: var(--margin-bottom); }
  .layout-form .form-link { margin-top: 20px; }
  .form-quote blockquote { padding-left: 10px; }
  .form-quote blockquote br { display: none; }

  /* Text */
  .text-title { margin-bottom: 20px; }
  .text-mobile-title { margin-top:16px; margin-bottom: 22px; } 

  /* List */
  .layout-list { padding-top: 30px; padding-bottom: 62px; }
  .layout-list h2 { margin-bottom: 44px; }
  .list-items { grid-template-columns: 68px auto; column-gap: 0; row-gap: 42px; }
  .list-item-number span { width: 44px; }
  .list-item-number span:after { height: 62px; }

  /* Links */
  .layout-links { padding-top:36px; padding-bottom: 60px; }
  .layout-links h2 { margin-bottom: 8px; }
  .links-cta { margin-top:20px; }

  /* Image */
  .layout-image.has-mobile-image { aspect-ratio: 375/203 !important; }
  .image-mobile-title { margin-top:14px; }

  /* Footer */
  .footer { padding-top:22px; padding-bottom: 45px; }
  .footer-menu { flex-wrap: wrap; font-size: var(--font-small); }
  .footer-menu-item-linkedin { order: 3; width: 100%; margin-top: 5px; }
  .footer-menu-item-privacy { order: 2; margin-right: 0; }
  .footer-credits { text-align: left; margin: 0 0 0 0;}
}

@media (hover: hover) and (max-width: 768px) {
  .button:hover svg { transform: translateX(6px);}
  .links-item:hover svg { transform: translateX(6px);}
}