@charset "UTF-8";
/*!
Theme Name: Winphar
Author: Winphar
Author URI: 
Description: 
Version: 1.0.0
Requires at least: WordPress 5.3
Tested up to: WordPress 6.7
Requires PHP: 7.0
Text Domain: winphar
Tags: 

*/
@font-face {
    font-family: "Clarity City Next";
    src: url("fnt/ClarityCity-Regular.otf");
}
@font-face {
    font-family: "Clarity City Next";
    src: url("fnt/ClarityCity-RegItalic.otf");
	font-style: italic;
}
@font-face {
    font-family: "Clarity City Next";
    src: url("fnt/ClarityCity-Bold.otf");
	font-weight: bold;
}
@font-face {
    font-family: "Clarity City Next";
    src: url("fnt/ClarityCity-BoldItalic.otf");
	font-weight: bold;
	font-style: italic;
}

:root {
	--white: #ffffff;
	--accent: #22a1db;
	--accent-light: #8CD7F7;
	--gray: #D8DBDB;
	--gray-light: #F4F4F4;
	--black: #2C2E2E;
	--small-padding: 0.5rem;
	--padding: 1rem;
	--padding-small: 0.5rem;
	--transition: all 1s ease;
	--border-radius: 0.5rem;
	--boxshadow: 0px 0.25rem 1rem rgba(0, 0, 0, 0.25);
	--dropshadow: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
	--font: "Clarity City Next", sans-serif;
}

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

::-webkit-scrollbar {
    width: 0.5rem;
    background: var(--accent);
}
::-webkit-scrollbar-track {
    background: var(--accent);
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
}
* {
  scrollbar-color: var(--accent) var(--white);
  scrollbar-width: thin;
}


html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: 18px;
	font-family: var(--font);
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	scroll-behavior: smooth;

	color: var(--black);
	background-color: var(--white);


}
h1,
h2,
h3,
h4,
h5 {
	font-weight: bold;
  font-weight: 600;
	color: var(--accent);
  text-align: center;
}
a,
a:visited {
  color: var(--accent);
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  color: var(--accent);
  text-decoration: underline;
}
strong {
  font-weight: 600;
}

[hidden],
[hidden="true"] { display: none !important; }

body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
main {
	width: calc(100% - 20rem);
	padding: var(--padding);
	transition: var(--transition);
	min-height: calc(100vh - 5rem);
}

body:has(.menu-opener:checked) main {
	width: calc(100% - 5rem);
}
#main-content {
	width: 100%;
}

#header {
	position: relative;
	width: 20rem;
	padding: var(--padding);
	transition: var(--transition);
	background: var(--gray-light);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: var(--padding);
	align-items: flex-start;
}

#header:has(.menu-opener:checked) {
	width: 5rem;
}
#jump-to-content {
	position: fixed;
	top: 0;
	left: 0;
	background: var(--gray-light);
	padding: 1rem;
	border-bottom-right-radius: var(--border-radius);
	z-index: 10000;
	box-shadow: var(--boxshadow);
	opacity: 0;
	pointer-events: none;
	
}
#jump-to-content:focus {
	opacity: 1;
	pointer-events: all;
}
.menu-control {
  position: fixed;
  top: 0;
  left: 20rem;
  width: 2rem;
  height: 2rem;
  background: var(--gray-light);
  border-radius: 0 0 var(--border-radius) 0;
  font-size: 0px;
  color: transparent;
  transition: var(--transition);
  cursor: pointer;
  background-image: url(img/icon-arrow-left.png);
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center center;
}

.menu-control input {
	opacity: 0;
	height: 1.5rem;
	width: 1.5rem;
	cursor: pointer;
}
.menu-control:focus-within {
  outline-style: auto;
}
.menu-control.menu-opener {
	width: 100%;
	height: 100%;
	opacity: 0;
}

.menu-control:has(.menu-opener:checked) {
	left: 5rem;
  background-image: url(img/icon-arrow-right.png);
}
.logo {
	display: block;
	height: 3rem;
	aspect-ratio: 960/289;
	background-image: url(img/logo_manual_winphar.webp);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
	transition: var(--transition);
	font-size: 0px;
	color: transparent;
}
.logo img {
	width: 0rem;
	height: 0rem;
	opacity: 0;
}
#header:has(.menu-opener:checked) .logo {
	aspect-ratio: 244/289;
}

#header-menu ul {
	position: relative;
	padding: var(--padding-small);
	margin: 0;
	width: 19rem;
	overflow: hidden;
	transition: var(--transition);
}

#header-menu ul:hover,
#header-menu ul:active,
#header-menu ul:focus,
#header-menu ul:focus-within {
	overflow: initial;
}

#header:has(.menu-opener:checked) #header-menu > ul{
	width: 0;
	visibility: hidden;
}
#header-menu li {
	position: relative;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 17rem;
	padding: 0;
	border-radius: var(--border-radius);
	
}
#header-menu a {
	padding: var(--padding-small) var(--padding);
	padding-right: calc(3 * var(--padding));
	display: inline-block;
	width: 100%;	
	border-radius: var(--border-radius);
}

#header-menu li:has(ul) > a {
	
  background-image: url(img/icon-arrow-right.png);
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center right;
}
#header-menu ul li > ul {
	display: none;
	position: absolute;
	left: calc(100% - 0rem);
	background: var(--gray);
	top: calc(-1 * var(--padding-small));
	border-radius:var(--border-radius);
	box-shadow: var(--boxshadow);
}
#header-menu ul li > ul {
	width: max-content;
}
#header-menu ul li > ul li {
	width: 100%;
}
#header-menu ul li:hover > ul,
#header-menu ul li:focus > ul,
#header-menu ul li:active > ul,
#header-menu ul li:focus-within > ul {
	display: block;
	z-index: 1000;
}

#header-menu ul li:hover,
#header-menu ul li:focus,
#header-menu ul li:active,
#header-menu ul li:focus-within {
	background: var(--gray);
}
#header-menu > ul li > ul li > ul,
#header-menu > ul li > ul li > ul li,
#header-menu > ul li > ul li > ul li a {
	background: var(--gray-light);
}
#header-menu > ul li > ul li:hover,
#header-menu > ul li > ul li:focus,
#header-menu > ul li > ul li:active,
#header-menu > ul li > ul li:focus-within {
	background: var(--gray-light);
}

footer {
	padding: var(--padding-small) var(--padding);
	background: var(--gray-light);
	width: 100%;
}
footer .copyright {
	font-size: 0.75rem;
	text-align: center;
	width: 100%;
}

.winphar-menu-footer {
	column-count: auto;
	column-width: 20rem;
	column-gap: var(--padding);
}
.winphar-menu-footer > li {
	display: inline-block;
	width: 100%;
}

body.search-results .card-body {
	border: 1px solid var(--accent);	
	border-radius: var(--border-radius);
	padding: 0;
	position: relative;
	width: 15rem;
	min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.search-results .card-body h2 {
	margin: 0;
	width: 100%;
	padding: 0;
	font-size: 1rem;
}
body.search-results .card-body h2 a {
	padding: var(--padding-small) var(--padding);
	display: block;
}
body.search-results .card-body time,
body.search-results .card-body p {
	display: none;	
}

.widget_search {
	width: 100%;
	overflow: hidden;
	transition: var(--transition);
}
.widget_search form {
	width: 100%;
}
#header:has(.menu-opener:checked) .widget_search {
	width: 0rem;
	visibility: hidden;
}

.wp-block-search__inside-wrapper {
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: var(--small-padding);
}

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
	color: var(--black);
	padding: 0;
}
.wp-block-search__button.has-icon {
	border: none;
	border-radius: var(--border-radius);
	background: var(--accent);
	color: var(--white);
}
.wp-block-search__button svg {
	border: none;
	color: var(--white);
}