/*
Projekt       : Vet Vertretung
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwentyfive" für die Website "vet-vertretung.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentytwentyfive
Version:        1.0
Historie
   19.07.22  Gernot Daum  Beginn der Implementierung
   29.08.25  Gernot Daum  Transfer zum Theme twentytwentyfive-vet-vertretung
*/


/* Fonts */
@font-face {
  font-family: 'Raleway Regular';
  font-style: normal;
  src: url('assets/fonts/Raleway-Regular.woff2') format('woff2'),
       url('assets/fonts/Raleway-Regular.woff') format('woff'),
       url('assets/fonts/Raleway-Regular.ttf') format('truetype'),
       url('assets/fonts/Raleway-Regular.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Raleway Regular Italic';
  font-style: normal;
  src: url('assets/fonts/Raleway-Italic.woff2') format('woff2'),
       url('assets/fonts/Raleway-Italic.woff') format('woff'),
       url('assets/fonts/Raleway-Italic.ttf') format('truetype'),
       url('assets/fonts/Raleway-Italic.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  src: url('assets/fonts/Raleway-Bold.woff2') format('woff2'),
       url('assets/fonts/Raleway-Bold.woff') format('woff'),
       url('assets/fonts/Raleway-Bold.ttf') format('truetype'),
       url('assets/fonts/Raleway-Bold.eot') format('embedded-opentype');
}
strong {font-family:'Raleway Bold', sans; font-weight: normal}
em {font-family:'Raleway Regular Italic', sans}

/* Konstanten */
body {
	/*   Farben */
	--wp--custom--color--text-dark: var(--wp--preset--color--contrast);
	--wp--custom--color--text: var(--wp--preset--color--accent-4);
	--wp--custom--color--light-grey: var(--wp--preset--color--accent-5);
	--wp--custom--color--light-grey-light: var(--wp--preset--color--accent-6);
	--wp--custom--color--red: var(--wp--preset--color--accent-1);

	/*   Schriften */
	--wp--preset--font-family--body: 'Raleway Regular', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--preset--font-family--heading: 'Raleway Regular',  -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--preset--font-size--x-small: clamp(9pt, 0.7vw, 12pt);
	--wp--preset--font-size--small: clamp(10pt, 0.8vw, 13pt);
	--wp--preset--font-size--medium: clamp(12pt, 1vw, 15pt);
  --wp--preset--font-size--x-large: clamp(15pt, 1.4vw, 24pt);
  --wp--custom--typography--font-size--huge: clamp(20pt, 2vw, 30pt);
  --wp--custom--typography--font-size--gigantic: clamp(25pt, 4vw, 40pt);
  --heading--font-size-h1: var(--wp--custom--typography--font-size--huge);
  --heading--font-size-h2: var(--wp--preset--font-size--x-large);
  --heading--font-size-h3: var(--wp--preset--font-size--medium);

	 /*   Breiten und Abstände */
  --global--single-track-width: 880px;
  --global--spacing-unit: 15px;
  --global--spacing-horizontal: var(--global--spacing-unit);
  --global--spacing-vertical: calc(2 * var(--global--spacing-unit));
  --global-seam: 4px;

/* Theme Reset */
:where(.wp-block-button__link) {border-radius: 0}
.wp-block-button__link:hover {opacity: 0.90}

/* Allgemein */
body {
  font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--text)
}
.centred, h1, h2, h3 {text-align: center}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--custom--color--text-dark)
}
h2 {
  font-size: var(--wp--custom--typography--font-size--huge)
}
.wp-site-blocks h3 {
	margin-block-start: calc(var(--wp--style--block-gap) / 2);
  font-size: var(--wp--preset--font-size--x-large)
}
p.new-section {margin-block-start: calc(2 * var(--wp--style--block-gap))}
a {
	color: var(--wp--custom--color--light-grey);
	font-family:'Raleway Bold', sans;
	text-decoration: none
}
a:hover {text-decoration: underline}
.wp-block-separator {
  border-bottom: 1px solid var(--wp--custom--color--light-grey)
}
.wp-block-buttons > .wp-block-button {
	margin-left: auto;
	margin-right: auto;
}
.wp-block-button__link {background: var(--wp--preset--color--accent-1)}
.red {color: var(--wp--preset--color--accent-1)}
.listcaption {margin-bottom: 4px}
.listcaption + * {margin-top: 4px; margin-block-start: 4px}
.higlighted {
	color: white;
	background: var(--wp--preset--color--accent-1)
}


/* Kopf */
.header-container {row-gap: 0}
header .wp-block-site-logo {
	margin-top:  40px;
	margin-left: auto;
	margin-right: auto
}
header > .wp-block-group > :last-child {
	padding-bottom: var(--global--spacing-vertical);
  border-bottom: 1px solid var(--wp--custom--color--light-grey);
}

/* Fuß */
#footer > * { /* Überschreibt eijen "heimlich" eingefügte "alignfull" Klasse */
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto
}
#footer .site-info {font-size: var(--wp--preset--font-size--medium)}

/* Navigation */
:root :where(.wp-block-navigation) {font-size: var(--wp--preset--font-size--small)}
header .wp-block-navigation, footer .wp-block-navigation {gap: 0}
.wp-block-navigation .wp-block-navigation-item__content {
	padding-left: var(--global--spacing-horizontal);
	padding-right: var(--global--spacing-horizontal);
  border-right: 1px solid var(--wp--custom--color--text-dark);
  font-family: var(--wp--preset--font-family--system-font);
  line-height: 1.3
}
.wp-block-navigation-item:last-child .wp-block-navigation-item__content {
  border-right: none
}
.wp-block-navigation  span {
  color: var(--wp--custom--color--text-dark) !important
}
.wp-block-navigation .current-menu-item a,
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	background: var(--wp--preset--color--accent-6);
  text-decoration: none;
}

/*   Bildnavigation auf Startseite */
.pic-navigation figure {
	position: relative;
	max-width: 260px;
	margin-left: auto;
	margin-right: auto
}
.pic-navigation figcaption {
	opacity: 0;
	position: absolute;
	margin: 0;
	padding: 2rem 0;
	width: 100%;
	bottom: 0;
	background: rgba(255, 255, 255, 0.75);
	text-align: center;
	transition: all 0.5s;
}
.pic-navigation figure:hover figcaption {
	opacity: 1;
	font-size: var(--wp--preset--font-size--x-large)
}


/* Inhalt */

/*   Abschnitte */
#content section {
	margin-top: calc(3 * var(--global--spacing-vertical));
	margin-bottom: calc(3 * var(--global--spacing-vertical))
}
#content article {
	margin-top: calc(1.5 * var(--global--spacing-vertical));
	margin-bottom: calc(1.5 * var(--global--spacing-vertical))
}
#content section:first-child, #content article:first-child {margin-top: 0}
#content section:last-child, #content article:last-child {margin-bottom: 0}

/*   Terminkalender */
#content .ssa_booking_iframe {border: 2px solid var(--wp--preset--color--accent-6)}

/*   Verschiedenes */
.wp-block-file a {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	text-align: center
}

/*   Rechtliche Seiten */
.legal h1 {font-size: var(--wp--custom--typography--font-size--huge)}


/* Responsive */

/*   Kleiner Bildschirm */
@media only screen and (max-width: 1120px) {
}

/*   Tablett Landscape */
@media only screen and (max-width: 960px) {
	#content .wide1 {display: none}
	#content .small1 {display: initial}
	#content div.small1 {display: block}
}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
	.pic-navigation figure figcaption {
	  opacity: 1;
	  font-size: var(--wp--preset--font-size--x-large)
  }
  #footer .site-info {margin-bottom: var(--global--spacing-vertical)}
}

/*   Smartphone groß */
@media only screen and (max-width: 599px) {
	.wp-block-navigation .wp-block-navigation-item__content {
		margin-bottom: var(--global--spacing-unit);
    border-right: none
  }
}

/*   Smartphone */
@media only screen and (max-width: 480px) {
}

/*   Smartphone klein */
@media only screen and (max-width: 400px) {
	#footer .wp-block-navigation .wp-block-navigation-item__content {
	  padding-left: var(--global-seam);
	  padding-right: var(--global-seam);
	}
}