/*
Theme Name: 25
Author: blazicek.net
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html, body, div, p, ul, ol, li, h1, h2, h3, h4, pre, form, p, button, img, a img, figure { border: 0 none; margin: 0; padding: 0; }
ul, li { list-style-type: none; }
* { box-sizing: border-box; }
mark { background: transparent; }

:root 
	{
	--red1: #b7292f;
	--black: #222222;
	--pink: #ff3b99;
	--pink_background: #f5e5ed;
	--width1: 1200px;
	--width2: 860px;
	}

html { font-size: 16px; transition: font-size 0.5s; }
body { font-family: "Roboto Flex", sans-serif; font-optical-sizing: auto;  font-weight: 400; font-style: normal; serif; background: #fff; color: #222; line-height: 1.5em; }
a { color: inherit; text-decoration: none; }

/* zero outline on focus */
a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; }
a:visited { outline: none; }
a:active, a:focus { box-shadow: none; }
a, .link_button { text-underline-offset: 3px; text-decoration-thickness: 1.2px; }

img { color: #aaa; font-size: 10px; }
::selection { background: #222; color: #fff; }

/* no higlight on selection */
.link_button::selection, .wp-block-gallery::selection, img::selection { background: transparent; color: #222; }

h1, h2, h3, h4 { font-size: 1em; }
a { text-underline-offset: 3px;  }
h2, h3, h4 { margin-bottom: 0.25em; line-height: 1.75em; }

h1 { display: none; }

.menu_switch { display: none; }

main { display: flex; flex-wrap: wrap; gap: 2rem; }

header { width: 100%; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 1.5rem 2rem }
header a { color: var(--red1); }
header .current-menu-item a { color: var(--black); text-decoration-thickness: 1.25px }
header a:hover { color: var(--black);  }
header #menu-navigace { display: flex; gap: 1rem; white-space: nowrap;}
header .logo { width: 6rem; }

article { width: 100%; text-align: left; margin: auto;}
article p a, .content ul a, .content ol a { text-decoration: underline; text-decoration-thickness: 1.2px; }
article ul li { list-style-type: disc; margin-left: 2em; }

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

/* claim */

.claim {  margin: 3rem auto 5rem auto; padding: 0 3rem; max-width: 70rem }
.claim h2 { color: var(--red1); font-size: 3.75rem; letter-spacing: -0.02em; line-height: 1.1em; font-weight: 600; text-align: center; }
.claim p { margin: 2rem auto; font-size: 2rem; color: var(--red1); line-height: 1.2em; font-weight: 600; text-align: center; width: 75%; min-width: 12em;}

/* main image */

.main_image { width: 50%; margin: auto; }
.main_image img { border-radius: 250px; width: 100%; height: auto; }
.wp-block-image.size-large { justify-self: center; }

.section1 { background: var(--pink_background); justify-content: center; justify-items: center; display: flex; width: 100%; padding: 3em 0; margin: 3rem 0; }

/* large text */

.section2 { justify-items: center; justify-content: center; display: flex; margin: 2rem auto; font-size: 2rem; color: var(--red1); line-height: 1.2em; font-weight: 600 }
.section2 p { max-width: var(--width2); padding: 0 4rem; margin: 0 0 1em 0; }

/* textblock */

.section3 { justify-items: center; justify-content: center; display: flex; margin: 2rem auto; line-height: 1.2em; text-align: left; }
.section3 h2 { font-size: 1.5em; font-weight: 600; color: var(--red1); padding: 0 4rem; width: 100%; }
.section3 p { max-width: var(--width2); padding: 0 4rem; line-height: 1.5em; }
.section3 { p, ul, ol { margin-bottom: 1rem; width: 100%  } }
.section3 .wp-block-group__inner-container { max-width: var(--width2); width: 100%; }

/* col 2 */

.col2 { justify-content: center; justify-items: center; display: flex; width: 100%; margin: 3rem 0; }
.col2 .col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; justify-content: space-between; max-width: var(--width1); margin: 0 4em; text-align: left;  max-width: var(--width2); }
.col2+.col2 { padding-top: 0rem; margin-top: 0; }
.col2 h2 { color: var(--red1); font-size: 1.5rem; margin-bottom: 0.75em; line-height: 1.1em; }
.col2 .wp-block-column { margin-bottom: 2rem }

/* col 3 */

.col3 { justify-content: center; justify-items: center; display: flex; width: 100%; padding: 3em 0; margin: 3rem 0; }
.col3 .col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; justify-content: space-between; max-width: var(--width1); margin: 0 4em; text-align: center; }
.col3+.col3 { padding-top: 0rem; margin-top: 0; }
.col3 h2 { color: var(--red1); font-size: 1.5rem; margin-bottom: 0.75em; line-height: 1.1em; }
.col3 .wp-block-column { margin-bottom: 2rem }
.col3 figure { margin-bottom: 1rem }
.col3 img { width: 80%; height: auto; }
.col3.bio img { height: 12rem; object-fit: cover; }

/* embed */

.wp-block-embed { max-width: var(--width2); width: 80%; margin: 2rem auto; }

/* button */

.button_container { display: flex; justify-content: center; margin-top: 2rem; }
.button { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 50px; border: 1px solid var(--red1); color: var(--red1); text-align: center; font-size: 0.8rem; cursor: pointer; }
.button:hover { color: var(--black); border-color: var(--black); }

/* news */

.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 3rem; justify-content: space-between; max-width: var(--width1); margin: 0 4em; }
.news li { list-style-type: none; margin: 0; }
.news li a { color: var(--red1); font-size: 1.3rem; display: block; margin-bottom: 0.5rem; line-height: 1.25em; text-decoration: underline; text-decoration-thickness: 1px; }
.news li a:hover { color: var(--black); }
.news .wp-block-latest-posts__read-more { display: none; }

/* post */

.post_body { max-width: var(--width2); width: 80%; margin: 2rem auto }
.post_body h2 { margin: 2rem auto; font-size: 2rem; color: var(--red1); line-height: 1.2em; font-weight: 600; }
.post_body { p, ul, ol { margin-bottom: 1rem; width: 100%  } }
.post_body .wp-block-image { margin: 2rem 0 }
.post_body .wp-block-image img { max-height: 60vh; width: auto; height: auto; max-width: 100%; object-fit: contain; }

/* archvies */

.archives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-content: space-between; max-width: var(--width1); margin: auto; padding: 0 4rem }
.archives li { list-style-type: none; margin: 0; background: var(--pink_background); padding: 2rem }
.archives li a { color: var(--red1); display: block; margin-bottom: 0.25rem; line-height: 1.3em; text-decoration: underline; text-decoration-thickness: 1px; }
.archives li time { opacity: 0.5; font-size: 0.8em }
.archives li a:hover { color: var(--black); }
.archives .wp-block-latest-posts__read-more { display: none; }

/* footer */

footer { justify-content: center; justify-items: center; display: flex; width: 100%; padding: 3em 0; margin-top: 4rem; border-top: 1px dotted var(--pink); font-size:  0.8rem; line-height: 1.5em; }
footer .footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; justify-content: space-between; max-width: var(--width1); margin: 0 4em; width: 100%; align-items: center; }
footer .wp-block-column { max-width: 25rem; }
footer .social figure { display: block; float: right; }
footer .social figure img { height: 1.75rem !important; width: auto !important; padding: 0 1rem 0 0; }

@media screen and (max-width: 1200px) 
	{
	html { font-size: 14px; }
	}

@media screen and (max-width: 800px) 
	{
	header { align-items: center; }
	header nav { margin-top: -0.5rem; }
	.news { display: grid; grid-template-columns: 100%; }
	.col2 .col { display: grid; grid-template-columns: 100%; margin: 0 4em; }
	.col2 { margin-bottom: 0 }
	.col3 .col { display: grid; grid-template-columns: 100%; width: 65%; margin: auto; margin-bottom: 3rem; }
	.col3 { margin-bottom: 0 }
	.col3 .wp-block-column { margin-bottom: 0rem }
	.archives { grid-template-columns: 100%; }
	.archives li { padding: 1rem }
	.main_image { width: 80vw; margin: auto; }
	header .logo { width: 3.5rem; }
	.article_body .wp-block-group-is-layout-flex { display: initial; gap: 0rem }
	.wp-block-embed { width: 100%; padding: 0 4rem }
	.news { gap: 2rem 0; }
	}