/*
Theme Name:     Karolina V5
Text Domain:    karolina-v5
Author:         Johanna Muckenhirn
Author URI:     https://johanna.muckenhirn.de
Description:    Responsive Theme für Johannas Design und Illustration Portfolio mit Bootstrap 5 und WordPress
Tags:           responsive
Version:        5.0
*/

/* Global colors*/

:root {
  /* Generic / Base Colors */
  --base: #fff;          /* primary background / card background */
  --neutral: #333;       /* generic neutral color */
  --text: #335e89;       /* body text, currently same as --main */
  --text-light: #fff;
  
  /* Core Design Colors */
  --main: #335e89;       /* headings, major elements */
  --light: #90b5e0;      /* light blue, backgrounds, footer */
  --creme: #f9f3e8;      /* creme, background/footer accents */
  --accent: #86995e;     /* green, links, buttons */
  
  /* Accent Pairs */
  --accent1: #e09d8e;
  --accent2: #c64b65;
  
  /* Black RGB for semi-transparent text */
  --black: 0,0,0;
  
  /* Links */
  --link: var(--accent);
  --link-hover: var(--accent1);
  
  /* Navigation */
  --nav-hover: #a7bc6d;
  
  /* Pagination */
  --pg-bg: #f8fcef;
  --pg-border: #f8fcef;
  --pg-hover: #333;
  
  /* Portfolio */
  --pf-card-bg: #fff;
  --pf-card-link: #333;
  --pf-overlay-bg: rgba(72, 59, 106, 0.9);
  --pf-overlay-text: #fff;
  
  /* Buttons */
  --btn-text: #fff;
  --btn-focus-shadow: rgba(171, 209, 153, 0.25);
  --btn-jmain: var(--main);
  --btn-jmain-hover: var(--border-color);
  --btn-jorange: #e2985a;
  --btn-jorange-hover: #e07322;
  --btn-jgreen: #a7bc6d;
  --btn-jgreen-hover: #7a8950;
  
  /* Polka Dot */
  --polka: #fff;
  
  /* Footer */
  --footer-bg: var(--creme);
  --footer-bg2: var(--light);
  --footer-text: #000;
  --footer-text-inv: #fff;
  --border-color: #483B6A;
  
  /* Languages */
  --lang: #636363;
  --lang-current: var(--main);
}

/* === GLOBAL === */
@media (min-width: 576px) {
    .container-sm, .container {
      max-width: 540px;
    }
}

@media (max-width: 767.98px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    padding-left: 8vw;
    padding-right: 8vw;
  }
}
   
@media (min-width: 768px) {
    .container-md, .container-sm, .container {
      max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
      max-width: 720px;
    }
}
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 960px;
    }
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1040px;
    }
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--text);
    /*font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 14px;*/
}

.main-content {
    min-height: 500px;
}

.full-width {
  width: 100vw;          /* volle Viewport-Breite */
  position: relative;
  left: 50%;             
  margin-left: -50vw;
}


.h1, .h2, .h5, .h6, h1, h2, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /*letter-spacing: 0.15rem;*/
}

.h3, .h4, h3, h4, .btn-jmain, .btn-jorange, .btn-jorange-line, .btn-jgreen, .btn-jgreen-line {
    font-family: 'BaksoSapi Pro', sans-serif;
    font-weight: 300;
}


.h1, h1 {
    font-size: 40px;
    color: var(--main);
    margin-top: 15px;
    margin-bottom: 15px;
}

.h2, h2 {
    font-size: 30px;
    color: var(--main);
    margin-top: 28px;
    margin-bottom: 15px;
    text-align:center;
}
@media (min-width: 768px) {
    .h2, h2 {
      text-align: left;
    }
}


.btn-jmain .btn-jorange, .btn-jorange-line, .btn-jgreen, .btn-jgreen-line {
    text-transform: uppercase; 
}


.h3, h3 {
    font-size: 16px;
    color: rgba(0,0,0,.55) !important;
}

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

.h6, h6 {
    font-size: 16px;
    color: rgba(0,0,0,.55)
}

a {
    color: var(--link);
    text-decoration: none;
}

a:focus, a:hover {
    color: var(--link-hover);
}

b, strong {
    font-weight:bold;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Navigation */

.navbar {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.nav-cat {
    text-transform: unset;
    padding-bottom: 0px;
}

.nav-cat .navbar-collapse {
    font-size: 11px;
    letter-spacing: 2px;
}

.navbar-collapse {
    font-size: 12px;
    letter-spacing: 3px;
}
 
.navbar-expand-sm .navbar-nav .nav-link {
    padding-right: .8rem;
    padding-left: .8rem;
}

.nav-item.current-menu-item > a {
    font-weight: 700 !important;
    color: var(--main) !important;
}
 
.nav-link:focus, .nav-link:hover {
    color: var(--nav-hover) !important;
}

.navbar-toggler {
    color: black !important;
    margin-top: -.5rem;
    border: none;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}


/* Back Link */

.back-link {
    font-size: 12px;
}

/* Pagination Nav*/

span.page-numbers {
    background-color: var(--pg-bg);
    padding: .5rem 1rem;
    border-radius: .15rem;
}

a.page-numbers {
    padding: .5rem 1rem;
    border-radius: .15rem;
    border: 1px solid var(--pg-border);
}

a.page-numbers:hover {
    color: var(--pg-hover);
    background-color: var(--pg-bg);
    border: 1px solid transparent;
}


/* Feature */
.header-img {
    padding: 0px;
    /*opacity: 65%;*/
}
.header-img img {
    display: block;
    width: 100%;
    height: auto;
}

.feature-container {
    background-color:#837ca6;
    margin-top: 20px;
}
 
.feature {
    margin: 0 auto;
    padding: 1em;
    position: relative;
    max-width:720px !important;
}

.feature-icon {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-light);
}

.feature-title {
    color: var(--text-light) !important;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}

/* Service Cards */
.services {
    padding: 60px 8vw 300px;
}

.services + .wp-block-group {
    margin-top: -250px;
    position:relative;
    z-index: 2;
}

.service-card {
    position: relative; /* for image placement */
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    max-width: 350px;
    min-height: 400px;
}

.service-card h2, .service-card p {
    color: var(--text-light);
    text-align: left;
    flex-grow: 1;
}

.service-card a {
    font-family: 'BaksoSapi Pro', sans-serif;
    font-weight: 300;
    font-size: 22px;
    color: var(--main);
    z-index: 2;
}

.service-card figure img {
    position: absolute;
    bottom: -50px; /* pushes it down a bit */
    right: -30px;  /* pushes it right over the edge */
    width: 200px; /* adjust size */
    height: auto;
    z-index: 1;
}

/* Portfolio Cards */

.portfolio .card {
    text-align: center;
    background-color:var(--pf-card-bg);
    border: none;
}

.portfolio .card a{
    color:var(--pf-card-link);
}

.card-body {
    font-size: 12px;
}

.project {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.project:hover .p-overlay, .project:focus .p-overlay, .project:active .p-overlay  {
    opacity: 1;
}

.project img {
    width: 100%;
}

.p-overlay {
    width: 100%;
    height: 100%;
    background: var(--pf-overlay-bg);
    position: absolute;
    top: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    padding:25px;
}

.p-overlay p, .p-overlay h3 {
    color:var(--pf-overlay-text) !important;
    text-align: center;
}

.p-overlay p {
    font-size: 12px;
}

/* Project Page Tools or Detail Section*/
.project-tags {
    background-color: var(--creme);
    border-radius: 15px;
    padding: 30px 30px 30px 30px;
}

.project-tags h2 {
    margin: auto !important;
}

/* Category Description */

.cat-description {
    content:'';
}

/* Custom Buttons */
.btn {
    font-size: 14px !important;
    border-radius: .15rem;
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--btn-focus-shadow);
}

.btn-jmain {
    color: var(--btn-text);
    background-color: var(--main);
}

.btn-jmain:hover {
    color: var(--btn-text);
    background-color: var(--btn-jmain-hover);
}

.btn-jorange {
    color: var(--btn-text);
    background-color: var(--btn-jorange);
}

.btn-jorange:hover {
    color: var(--btn-text);
    background-color: var(--btn-jorange-hover);
}

.btn-jorange-line {
    background-color: var(--btn-text);
    border:1px solid var(--btn-jorange);
}
.btn-jorange-line:hover {
    color: var(--btn-text);
    background-color: var(--btn-jorange-hover);
    border:1px solid transparent;
}
 
.btn-jgreen {
    color: var(--btn-text);
    background-color: var(--btn-jgreen);
}

.btn-jgreen:hover {
    color: var(--btn-text);
    background-color: var(--btn-jgreen-hover);
}

.btn-jgreen-line {
    background-color: var(--btn-text);
    border:1px solid var(--btn-jgreen);
    
}
.btn-jgreen-line:hover {
    color: var(--btn-text);
    background-color: var(--btn-jgreen-hover);
    border:1px solid transparent;
}

.btn-addition {
    font-size: 11px;
    text-transform:none;
    letter-spacing:0;
}

/* Waves */
.wavy {
    content: '';
}

/* Pattern */

.polka {
  background-image: 
    radial-gradient(rgb(255, 255, 255, 1) 22.8%, transparent 22.8%),
    radial-gradient(rgb(255, 255, 255, 1) 22.8%, transparent 22.8%);
  background-position: 0px 0px, 84px 84px;
  background-size: 168px 168px;

}

/* Footer */

.page-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    margin-top: 30px;
}

.footer-bottom {
    background: var(--light);
    padding-top: 6rem;
    padding-bottom: 4rem;
    --mask:
        radial-gradient(111.8px at 50% 150px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
        radial-gradient(111.8px at 50% -100px,#0000 99%,#000 101%) 50% 50px/200px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.footer-copyright {
    color: var(--footer-text-inv);
    font-size: 12px;
}

.footer-copyright a {
    color:var(--footer-text-inv);
}

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

.page-footer svg {
    height: 40px;
    margin-top:-10px;
    padding-bottom:6px;
    color:var(--footer-text-inv) !important;
}

.page-footer i.social {
    font-size: 30px;
    color:var(--footer-text-inv) !important;
}

/* Languages */
.languages__item {
    text-transform: lowercase;
    color: var(--lang);

}
.languages__item--current {
    color: var(--lang-current);
}
.languages__item:before {
    content: ' | ';
    color: var(--lang);
}
.languages__item:first-child:before {
    content: '';
}
.languages a.languages__item:hover {
    color: var(--lang-current);
}