/*
Theme Name: Sarah
Template: blockundstift
Version: 1.0.0
Description: Custom WordPress Theme for Sarah Mahl
Author: blockundstift.de
Author URI: https://blockundstift.de
Text Domain: srh
*/

/*
## Variables
## Basic HTML Settings
## Type & Colors
  ### Type
  ### Colors
## Header & Navigation
  ### Header
  ### Navigation
  ### Search
  ### Off Canvas Navigation
  ### Hamburger Menu
## Layout
  ### Basic Layout
  ### Flexbox
  ### Cover & Slider
  ### Independent Layout Elements
## Footer
## Input & Buttons
## Cookies
## Galleries & Images
## Gutenberg Blocks
## Playground
## Layout Grid

----------------------------------------------------------------
## Variables
--------------------------------------------------------------*/

:root {
  --text-color: #323231;
  --primary-color: #972119;
  --secondary-color: #f3c6b6;
  --tertiary-color: #ededed;

  --icon-color: var(--text-color);
  --icon-hover-color: var(--secondary-color);

  --button-color: var(--primary-color);
  --button-hover-color: var(--secondary-color);
  --button-border-width: 1px;
  /* --button-border: var(--button-border-width) solid var(--primary-color); */
  --button-border: unset;
  --button-hover-border: var(--button-border-width) solid var(--secondary-color);
  --button-hover-border: unset;
  --button-background: var(--secondary-color);
  --button-hover-background: var(--primary-color);

  --input-border-width: 1px;
  /* --input-border: var(--input-border-width) solid var(--primary-color); */
  --input-border: unset;
  /* --input-hover-border: var(--input-border-width) solid var(--secondary-color); */
  --input-hover-border: unset;
  --input-background: transparent;
  --input-hover-background: transparent;

  --navigation-color: var(--text-color);
  --navigation-hover-color: var(--secondary-color);
  --navigation-active-color: var(--primary-color);

  --link-color: var(--primary-color);
  --link-hover-color: var(--secondary-color);

  --arrow-color: var(--text-color);
  --arrow-hover-color: var(--primary-color);
  --arrow-background: rgb(255 255 255 / 20%);
  --arrow-hover-background: rgb(255 255 255 / 50%);

  --admin-bar-color: #972119;
  --admin-bar-active-color:#f3c6b6;
}

:root {
  --global-padding: clamp(0.9375rem, calc(1.875 / 75 * 100vw), 1.875rem);
  --global-margin: clamp(2rem, calc(5 / 75 * 100vw), 5rem);
}

:root {
  --container-width: 90vw;
  --container-max-width: 1200px;
  --container-narrow-max-width: 750px;
}

:root {
  --header-top: 0px;
  --header-max-top: 0px;
  --header-mobile-top: 0px;
}

:root {
  --font-size-p: clamp(1rem, calc(1.125 / 112.5 * 100vw), 1.125rem);
  --font-size-h1: clamp(1.5rem, calc(2.625 / 112.5 * 100vw), 2.625rem);
  /* --font-size-h2: clamp(1.25rem, calc(1.875 / 112.5 * 100vw), 1.875rem); */
  --font-size-h2: clamp(1.25rem, calc(1.5625 / 112.5 * 100vw), 1.5625rem);
  --font-size-h3: clamp(1.25rem, calc(1.5625 / 112.5 * 100vw), 1.5625rem);
  --font-size-h4: clamp(1.125rem, calc(1.40625 / 112.5 * 100vw), 1.40625rem);
  --font-size-big-faktor: 1.5;
  --font-size-huge-faktor: 2.2;
}

:root {
  --cursor: pointer;
}

/*--------------------------------------------------------------
## Basic HTML Settings
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Type & Colors
--------------------------------------------------------------*/
/*--------------------------
### Type
---------------------------*/


h2, .h2, 
h4, .h4 {
  /* font-weight: 400; */
}
h2, .h2 {
  font-weight: 400;
}
h2:not(.h1), .h2 {
  text-transform: uppercase;
}
.button,
h3, .h3 {
  font-weight: 700;
}

/*--------------------------
### Colors
---------------------------*/

.has-background a:hover,
.pb-block-contact a:hover {
  color: var(--text-color);
}
.has-background a:hover {
  border-bottom-color: var(--text-color) !important;
}

/*--------------------------------------------------------------
## Header & Navigation
--------------------------------------------------------------*/
/*--------------------------
### Header
---------------------------*/

.main-header,
.main-header.header-minified {
  transition: all 2s ease;
}
.header-minified {
  background: var(--secondary-color);
}
.header-hashtag {
  transition: all 2s ease;
}
@media (max-width: 991.98px) {
  .header-hashtag {
    margin-left: calc(var(--global-padding) * -2);
  }
}
.header-minified .header-hashtag {
  color: var(--primary-color);
}
.header-logo-svg, 
.logo-image {
  transition: all 1s ease;
}
.header-minified .header-logo {
  padding: 15px 0;
}
.header-minified .header-logo-svg, 
.header-minified .footer-logo-svg, 
.header-minified .logo-image {
  max-width: 50px;
}
header .social-media-row {
  width: auto;
}

/*--------------------------
### Navigation
---------------------------*/

.header-minified  a:hover, 
.header-minified  .current-menu-item > a:hover, 
.header-minified  .current-menu-ancestor > a:hover, 
.header-minified .word-menu:hover, .link-pagename:hover {
  color: #fff;
}
.header-minified .social-media-icon svg:hover {
  fill: #fff;
}

/*--------------------------
### Search
---------------------------*/
/*--------------------------
### Off Canvas Navigation
---------------------------*/
/*--------------------------
### Hamburger Menu
---------------------------*/

/*--------------------------------------------------------------
## Layout
--------------------------------------------------------------*/
/*--------------------------
### Basic Layout
---------------------------*/
/*--------------------------
### Flexbox
---------------------------*/
/*--------------------------
### Cover & Slider
---------------------------*/

.single .cover-no-image {
  height: 10vh;
}
.single .cover-no-image,
.cover-title-hidden:not(.blog) .cover-no-image {
  min-height: 200px;
}
.blog .cover-no-image,
.archive .cover-no-image {
  min-height: 400px;
}
.cover-no-image .cover-intro {
  bottom: var(--global-padding);
}
.blog .cover-no-image, 
.archive .cover-no-image {
  min-height: 450px;
}


/*--------------------------
### Independent Layout Elements
---------------------------*/

@media (min-width: 768px) {
  .pb-row-margin {
    margin-bottom: var(--global-padding);
  }
}
.bloglist,
.blog-section {
  padding: var(--global-padding) 0;
}
.blog-meta:last-of-type:before {
  content: '–';
  margin: 0 8px;
}
.blog-section {
  border-bottom: unset;
}
.blog-info, 
.blog-thumbnail {
  margin: unset;
}
.portfolio-image {
  opacity: .2;
  transition: all .75s ease;
}
.portfolio-thumbnail:hover .portfolio-image {
  opacity: .5;
}
.portfolio-headline {
  position: absolute !important;
  bottom: 0;
}
main a[target="_blank"]:not(.arrows):not(.no-target)::after {
  content: unset;
}
.rounded-corners .pb-block-content-inner {
  border-radius: 6px;
}

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

.footer-spaced {
  padding: var(--global-margin) 0;
}
.footer-logo-svg {
  margin-bottom: var(--global-padding);
}

/*--------------------------------------------------------------
## Input & Buttons
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Cookies
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Galleries & Images
--------------------------------------------------------------*/

img.full-width-image,
img.full-width,
.full-width-image img:not(.emoji):not(.not-full-width),
.wp-block-image figure:not(.size-thumbnail):not(.size-medium):not(.size-large):not(.size-full):not(.is-resized) img,
.header-logo-svg svg,
.header-logo img,
.footer-logo-svg svg,
.footer-logo img,
p.attachment img {
  width: 100%;
  height: auto;
}
@media (max-width: 991.98px) {
  .gallery-columns-6 .gallery-item {
    max-width: 33.333333%;
  }
  .gallery-columns-4 .gallery-item,
  .gallery-columns-8 .gallery-item {
    max-width: 25%;
  }
}
@media (max-width: 575.98px) {
  .gallery-columns-4 .gallery-item,
  .gallery-columns-6 .gallery-item,
  .gallery-columns-8 .gallery-item {
    max-width: 50%;
  }
}
@media (max-width: 991.98px) {
  .gallery-columns-9 .gallery-item {
    max-width: 33.333333%;
  }
  .gallery-columns-5 .gallery-item,
  .gallery-columns-7 .gallery-item {
    max-width: 25%;
  }
}
@media (max-width: 575.98px) {
  .gallery-columns-5 .gallery-item,
  .gallery-columns-7 .gallery-item {
    max-width: 50%;
  }
}

/*--------------------------------------------------------------
## Gutenberg Blocks
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Playground
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Layout Grid
--------------------------------------------------------------*/