/**
 * Theme Name:  Hausarzt Wurzen
 * Author:      Christian Weiske
 * Author URI:  https://cweiske.de/
 * License:     GNU General Public License v2.0 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * Requires at least: 6.5
 */

.apricot-bg, .has-apricot-background-color,
div.info.has-apricot-background-color {
    background-color: #fbb88c;
}
.yellow-bg, .has-yellow-background-color,
div.info.has-yellow-background-color {
    background-color: #fff4b9;
}
.blue-bg, .has-blue-background-color,
div.info.has-blue-background-color {
    background-color: #a1e1e6;
}
.grey-bg, .has-grey-background-color,
div.info.has-grey-background-color {
    background-color: #DDD;
}

* {
    box-sizing: border-box;
}

html {
    background-color: #eee;
}
body {
    max-width: 50em;
    margin-top: 0;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
    background-color: white;
}

h1, h2, h3 {
    font-family: Caveat;
    font-weight: bold;
}
h1 {
    font-size: 4rem;
    margin-bottom: 0;
}
h2 {
    font-size: 3rem;
    margin-top: 4rem;
    margin-bottom: 1rem;
    /*text-shadow: #fa8538 2px 2px 5px;*/
    /*
    text-decoration: underline;
    text-decoration-color: #fa8538;
    text-decoration-style: double;
   */
}
/*
h2:target {
    animation-duration: 3s;
    animation-name: target-highlight;
}
*/
h3 {
    font-size: 2rem;
    margin-bottom: 0;
}

p.has-text-align-center {
    text-align: center;
}
p.has-text-align-right {
    text-align: right;
}

@keyframes target-highlight {
  from {
      background-color: yellow;
  }

  to {
      background-color: inherit;
  }
}

div.info {
    background-color: #fbb88c;
    padding: 0.2rem 1rem;
    border-radius: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.team,
.team-wpeditor > .block-editor-inner-blocks > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-gap: 1rem;
    padding: 1rem;
}
.member.width-100,
.member.is-style-width-100 {
    flex: 1 1 calc(100% - 1rem);
}
.member.width-50,
.member.is-style-width-50 {
    flex: 1 1 calc(50% - 1rem);
    max-width: 50%;
}
.member.width-33,
.member.is-style-width-33 {
    flex: 1 1 calc(33% - 1rem);
    max-width: 33%;
}

.member {
    margin-left: auto;
    margin-right: auto;
    background-color: #ddd;

    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;

    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.member p {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    overflow-wrap: break-word;
}
.member img,
.member button {
    padding: 0.5rem;
    max-height: 80vw;
    max-width: 100%;
    height: auto;
    width: auto;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;

    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.member button {
    cursor: pointer;
}
.member button img {
    padding: 0;
}
@media screen and (max-width: 400px) {
    .member.width-50,
    .member.is-style-width-50,
    .member.width-33,
    .member.is-style-width-33 {
        flex: 1 1 calc(100% - 1rem);
        max-width: unset;
    }

    .member img {
        max-height: unset;
    }
}


.imagewall,
.wp-block-gallery.has-nested-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 1rem;
    gap: 0.5rem;
}
.imagewall a,
.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex: 0 1 auto;
    max-width: 100%;
    height: 10rem;
    width: auto;
}
.wp-block-gallery.has-nested-images figure.wp-block-image > div,
.wp-block-gallery.has-nested-images figure.wp-block-image > a {
    height: 10rem;
}
.imagewall a img,
.wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: auto;
    height: 100%;
}
/* override wordpress editor styles */
.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image.size-hausarztgallery:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image),

.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image.size-hausarztgallery:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image),

.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image.size-hausarztgallery:not(#individual-image),

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image.size-hausarztgallery:not(#individual-image):first-child:last-child,

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image.size-hausarztgallery:not(#individual-image):first-child:nth-last-child(2),

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image.size-hausarztgallery:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image.size-hausarztgallery:not(#individual-image) {
    width: auto;
}
/* remove default figure browser styles */
figure {
    margin-inline-start: 0;
    margin-inline-end:  0;
}

.hero {
    /* position needed for z-index */
    position: relative;
    z-index: 100;
    background-color: white;

    text-align: center;
    margin-bottom: 3rem;
    padding-top: 1rem;
}
.hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%;

    border-bottom: 3rem solid;
    border-image: linear-gradient(#FFFF, #FFF0) 100;
}
.herologo {
    display: block;
    max-height: 70vh;
    max-height: min(70vh, 15rem);
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.hero-wpeditor .herologo {
    cursor: pointer;
}
.hero h1 {
    margin-top: 0.5rem;
}
.hero h3 {
    margin-top: 0.0rem;
}
@media screen and (max-width: 768px) {
    .herologo {
        max-width: 90vw;
        height: auto;
    }
    .hero h1 {
        font-size: 10vw;
    }
    .hero h3 {
        font-size: 6vw;
    }
}

header {
    display: block;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 3rem;
    background-color: #fa8538;
    border-bottom: 3px solid grey;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media screen and (min-width: 769px) {
    header {
        max-width: 50rem;
        left: 50%;
        transform: translate(-50%, 0);
    }
}
body.admin-bar header {
    top: 32px;
}

header {
    /* to be above gallery images */
    z-index: 10;
}
header .logo {
    margin-left: 1rem;
}
header img {
    margin-top: 0.25rem;
    height: 2.5rem;
    width: auto;
}
header.scrollheader-wpeditor img {
    cursor: pointer;
}
header span {
    font-family: Caveat;
    font-weight: bold;
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
header #tomenu {
    display: block;
    padding: 1rem;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1.5rem;
    color: black;
}

.h2bg, h2.has-background {
    border-top-left-radius: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    border-bottom-right-radius: 0rem;
}
h2.has-background {
    padding: 0;
    padding-left: 1rem;
}

h2 {
    /* fix scroll position because of fixed header */
    scroll-margin-top: 4rem;
}

.wp-block-post-content > address,
.wp-block-post-content > h2, .wp-block-post-content > div > h2,
.wp-block-post-content > p, .wp-block-post-content > div > p,
.wp-block-post-content > ol {
    padding-left: 1rem;
}
.wp-block-post-content > ul {
    padding-left: 3rem;
}
.wp-block-post-content > p {
    padding-right: 1rem;
}
.wp-block-post-content > div.halbhalb,
.wp-block-post-content > div.halbhalb-wpeditor,
.wp-block-post-content > div.info,
.wp-block-post-content > hr,
.wp-block-post-content > table {
    margin-left: 1rem;
    margin-right: 1rem;
}

.bg {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0.2rem 1rem;
    border-radius: 1rem;
    margin-top: 4rem;
    margin-bottom: 1rem;
}
.bg > h2 {
    margin-top: 0;
}

table {
    border-collapse: collapse;
    empty-cells: show;
    min-width: 45%;
}
table caption,
figure.wp-block-table > figcaption {
    background-color: #DDD;
    padding: 0.5em 2em;
    border-top-left-radius: 1rem;
}
figure.wp-block-table {
    display: flex;
    flex-direction: column-reverse;
    margin: 1rem;
}
.halbhalb figure.wp-block-table {
    margin-left: 0;
    margin-right: 0;
}

table tr {
    border-bottom: 1px solid grey;
}
table td, table th,
.wp-block-table td, .wp-block-table th {
    vertical-align: top;
    padding: 0.5em 1em;
    border: none;
}
@media screen and (max-width: 768px) {
    .wp-block-post-content > table {
        margin-left: 0rem;
    }
    table {
        width: 100%;
    }
}


div.halbhalb,
div.halbhalb-wpeditor > .block-editor-inner-blocks > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-gap: 1rem;
}
div.halbhalb > *,
div.halbhalb-wpeditor > .block-editor-inner-blocks > div > .wp-block-column {
    flex: 1 1 calc(50% - 1rem);
}
@media screen and (max-width: 768px) {
    div.halbhalb,
    div.halbhalb-wpeditor > .block-editor-inner-blocks > div {
        flex-direction: column;
    }
    div.halbhalb > *,
    div.halbhalb-wpeditor > .block-editor-inner-blocks > div > .wp-block-column {
        flex: 1 1 100%;
    }
}

nav.main ul,
nav.main.nav-wpeditor ul > .block-editor-inner-blocks > .block-editor-block-list__layout {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
nav.main.nav-wpeditor ul,
nav.main.nav-wpeditor ul > .block-editor-inner-blocks {
    width: 100%;
}
nav.main li {
    display: list-item;
    flex: 1 1 content;
}
nav.main li a {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 0rem;

    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: black;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
}
nav.main.nav-wpeditor a {
    color: black !important;
}
nav.main li:last-child, nav.main li:last-child a {
    border-top-right-radius: 1rem;
}

nav.main a:hover {
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    nav.main li {
        flex: 1 1 100%;
    }
    nav.main li:last-child, nav.main li:last-child a {
        border-top-right-radius: 0;
    }
}


nav.menu ul {
    list-style: none;
}
nav.menu a {
    display: inline-block;
    padding: 0.7em 0;
}


ul.biglist {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 0.5rem;
}
ul.biglist li,
ul.biglist-wpeditor details {
    flex: 1 1 50%;
}
ul.biglist-wpeditor summary {
    margin-bottom: 1em;
}
ul.biglist-wpeditor summary * {
    white-space: nowrap;
    vertical-align: middle;
}

ul.biglist-wpeditor > .block-editor-inner-blocks {
    flex: 0 0  100%;
}
ul.biglist-wpeditor details > div {
    padding: 1em;
    margin: 1em;
    border: 1px dashed gray;
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
}

@media screen and (max-width: 768px) {
    ul.biglist li,
    ul.biglist-wpeditor details {
        flex: 0 0  100%;
    }
}

ul.biglist > li > a {
    display: flex;
    align-items: center;
}
ul.biglist > li > a > img {
    flex: 0 0 auto;
}
ul.biglist > li > a > span {
    flex: 1 1 auto;
}
@media screen and (max-width: 768px) {
    ul.biglist > li > a > span {
        overflow-wrap: anywhere;
    }
}

ul.biglist-wpeditor summary img {
    cursor: pointer;
}
ul.biglist-wpeditor summary span {
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    ul.biglist li a * {
        white-space: normal;
    }
}

ul.biglist img {
    height: 4rem;
    width: 4rem;
    background-color: #fbb88c;
    border-radius: 2rem;
    padding: 0.5rem;
    margin-right: 1em;
}
ul.biglist a,
ul.biglist a span {
    text-decoration: underline;
    color: inherit;
}
ul.biglist a:hover img,
ul.biglist-wpeditor details[open] summary img {
    background-color: #a1e1e6;
}

dialog {
    border-radius: 1rem;
    padding: 2rem;
    background-color: #fff4b9;
    border: none;
    box-shadow: 0px 0px 2em grey;
    min-width: 20em;
    max-width: 48em;
}
dialog form {
    text-align: right;
}
dialog button {
    float: right;
    font-size: 1.2em;
    padding: 0.5em 1em;
    color: white;
    background-color: #fbb88c;
    border: none;
    border-radius: 1em;
    cursor: pointer;
}
dialog button:hover {
    background-color: #a1e1e6;
}
dialog h2,
details h2 {
    margin-top: 0;
    margin-bottom: 0;
}
dialog ul {
    padding: 1em;
}