/*
Theme Name: silvertiger
Theme URI: https://silvertiger.de
Author: D. Beyer
Author URI: https://silvertiger.de
Description: Theme für BKH Silver-Tabby Cattery "Magic Tabby's"
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: silvertiger
Tags: one-column, custom-menu, custom-logo
*/

/*--------------------------------------------------------------
# Design-Tokens (CSS-Variablen)
--------------------------------------------------------------*/
:root {
	--color-bg:         #364450;
	--color-panel:      #172938;
	--color-panel-dark: #0D171F;
	--color-text:       #AFEEEE;
	--color-link:       #FFFFFF;
	--color-accent:     #7A95BE;
	--color-muted:      #56686D;
	--color-highlight:  #D0D0D0;

	--font-base: "Verdana", "Arial", "Helvetica", sans-serif;
	--content-max: 1000px;
	--menu-width: 200px;
	--menu-width-narrow: 160px;
	--radius: 0;
}

/*--------------------------------------------------------------
# Basis
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	font-family: var(--font-base);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--color-text);
}

img {
	max-width: 100%;
	height: auto;
}

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

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

h1, h2, h3, h4, h5, h6 {
	color: var(--color-link);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.main {
	max-width: var(--content-max);
	margin: 0 auto;
	background-color: var(--color-panel);
}

.fixed {
	position: sticky;
	top: 0;
	z-index: 100;
}

.banner {
	background-color: var(--color-panel);
	float: left;
	clear: left;
	text-align: center;
}

.title {
	background-color: var(--color-panel-dark);
	float: left;
	clear: left;
	color: var(--color-muted);
	font-variant: small-caps;
	height: 40px;
	letter-spacing: 10px;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	margin: 0;
	line-height: 40px;
}

.highlight {
	background-color: var(--color-highlight);
}

.page {
	margin-top: 0;
	display: flex;
	flex-wrap: wrap;
}

.menu-wrapper {
	position: sticky;
	top: 0;
	width: var(--menu-width);
	background-image: url(//www.silvertiger.de/wp-content/uploads/Tab-leiste-borte-sequenz.png);
	background-size: 100% auto;
	background-repeat: repeat-y;
	float: left;
	font-style: italic;
	font-weight: bold;
	flex-shrink: 0;
}

.menu-wrapper ul {
	list-style-type: none;
	padding-left: 20px;
	padding-right: 5px;
	margin: 0;
}

.menu-wrapper li {
	width: 142px;
	font-size: 10pt;
	line-height: 1.5;
}

.menu_default a {
	color: var(--color-panel-dark);
}

.menu_default a:hover {
	background-color: var(--color-panel);
	color: var(--color-accent);
}

.menu_current a {
	color: #3c5a70;
	font-weight: bold;
}

.content {
	flex: 1;
	min-width: 0;
	min-height: 500px;
	background-color: var(--color-panel);
	padding: 20px;
	text-align: justify;
	overflow: auto;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
	background-color: var(--color-panel-dark);
	clear: both;
	height: 24px;
	font-size: 0.75rem;
	color: #666666;
	text-align: center;
	line-height: 24px;
}

.powered_by {
	text-align: center;
	font-size: 0.75rem;
	padding: 4px 0;
	background-color: var(--color-bg);
}

/*--------------------------------------------------------------
# Hilfsklassen
--------------------------------------------------------------*/
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-right: 1rem;
}

.alignright {
	float: right;
	margin-left: 1rem;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/* Schmale Viewports: Menü verkleinern, damit Content Platz hat */
@media (max-width: 1050px) {
	.menu-wrapper {
		width: var(--menu-width-narrow);
	}

	.menu-wrapper li {
		width: 100px;
		font-size: 9pt;
	}
}

/* Tablets */
@media (max-width: 768px) {
	.menu-wrapper {
		position: static;
		width: 100%;
		float: none;
	}

	.content {
		padding: 1rem;
	}

	.title {
		letter-spacing: 4px;
		font-size: 0.9rem;
	}

	.page {
		display: block;
	}
}

/* Smartphones */
@media (max-width: 480px) {
	body { font-size: 0.95rem; }

	.title {
		height: auto;
		padding: 0.5rem 0;
		letter-spacing: 2px;
	}

	h1 { font-size: 1.4rem; }
	h2 { font-size: 1.1rem; }

	.menu-wrapper {
		background-image: none;
		background-color: var(--color-panel-dark);
	}

	.menu-wrapper a { color: var(--color-link) !important; }
}

/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/
@media print {
	.fixed,
	.menu-wrapper,
	.footer,
	.powered_by {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}

	.content {
		padding: 0;
	}
}h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}