/* QuizExpo theme styles. Quiz player styles live in the quiz plugin. */

:root {
  --main: #f23276;
  --accent: #ea0253;
  --cat-cl: #f23276;
  --cat-animals: #B3504C;
  --cat-anime: #fd2db3;
  --cat-cars: #eb4300;
  --cat-fashion: #6f4bd1;
  --cat-food: #FFCC00;
  --cat-games: #007AFF;
  --cat-general: #f23276;
  --cat-health: #00bc1d;
  --cat-love: #cb0000;
  --cat-music: #FFC107;
  --cat-sport: #3C388E;
  --cat-tvandmovie: #F45E0B;
  --card-shadow: 0 0 3px rgba(0, 0, 0, .21);
}

/* ---------- Base ---------- */

* { padding: 0; margin: 0; outline: 0; list-style: none; border: 0 none; }
*, :after, :before { box-sizing: border-box; }
@font-face { font-family: "Adjusted Arial Fallback"; src: local(Arial); size-adjust: 110%; ascent-override: 99%; descent-override: 28%; line-gap-override: 9%; }
::selection { background: var(--accent); color: #fff; }

html { font-family: sans-serif; font-size: 100%; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { font-family: "Poppins", "Adjusted Arial Fallback"; background: #F9F9F9; font-size: 13px; line-height: 19px; font-weight: 400; color: #222; }

a { color: #000; text-decoration: none; transition: color .15s ease-out; }
a:hover { color: #555; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

h1, h2, h3, h4 { font-weight: 400; margin: 36px 0 12px; }
h1 { font-size: 26px; line-height: 1.3846153846; }
h2 { font-size: 24px; line-height: 1; }
h3 { font-size: 22px; line-height: 1.0909090909; }
h4 { font-size: 20px; line-height: 1.2; }
address { font-style: italic; margin-bottom: 24px; }
strong { font-weight: 700; }
em, i { font-style: italic; }
p { margin-bottom: 24px; line-height: 1.8; }
p:last-child { margin: 0; }
small { font-size: 80%; }
ol, ul { margin: 0 0 24px 20px; }
ul { list-style: disc; }
ol { list-style: decimal; }
img { vertical-align: top; max-width: 100%; height: auto; }
th { font-weight: 700; text-transform: uppercase; }

button, input, textarea { font-size: 12px; max-width: 100%; vertical-align: baseline; }
button, input { line-height: normal; }
input[type="search"] { -webkit-appearance: none; }
textarea { overflow: auto; vertical-align: top; }
input, textarea { box-shadow: rgb(85 103 185 / 20%) 0 0 5px 0, rgb(108 0 93) 0 0 1px 0; font-size: 1rem; border-radius: 8px; color: #191919; padding: 10px; }
textarea, input[type="text"], input[type="email"], input[type="url"] { width: 100%; }
input:focus, textarea:focus { box-shadow: rgb(255 0 184 / 53%) 0 0 5px 0, rgb(235 3 203) 0 0 1px 0; }
button, input[type="submit"] { -webkit-appearance: button; cursor: pointer; background-color: var(--main); color: #fff; font-size: 1rem; display: inline-block; padding: .5rem 1.5rem; vertical-align: middle; text-align: center; transition: all .15s ease-in-out; }
button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover { background: #222; color: #fff; }
button:active, input[type="submit"]:active { background-color: var(--main); }

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.aligncenter { margin-top: 7px; margin-bottom: 7px; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* ---------- Page frame ---------- */

.site { position: relative; transition: transform .15s ease-in-out; }
.container { max-width: 1240px; margin-right: auto; margin-left: auto; position: relative; }
.site-main { display: block; position: relative; padding: 30px 0; }
.home .site-main { padding-top: 0; }

.card { display: block; background: #fff; position: relative; padding: 30px; box-shadow: var(--card-shadow); overflow: hidden; border-radius: 1rem; }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 110; background: #fff; border-top: 3px solid var(--accent); padding: 1px 0 4px; box-shadow: inset 0 1px #f0f0f0, 1px 1px 2px rgba(0, 0, 0, .11); }
.site-header__bar { display: flex; gap: 1rem; padding: 10px 0; }
.site-logo { display: block; height: 60px; min-height: 40px; flex: none; }
.site-logo img { height: 100%; width: auto; }

.site-nav { display: flex; }
.site-nav__list { display: flex; flex-flow: row nowrap; align-items: center; height: 100%; margin: 0; padding: 0; }
.site-nav__list a { display: inline-block; padding: 0 16px; line-height: 48px; color: #222; font-size: 15px; }
.site-nav__list li:hover > a, .site-nav__list .current-menu-item > a, .site-nav__list .current-menu-parent > a { box-shadow: 0 1px 1px 0 #00000036; border-radius: 2rem; line-height: 35px; color: #fff; background: #ea0353; }

.site-search { align-self: center; margin-left: auto; position: relative; display: flex; align-items: center; width: 48px; height: 50px; overflow: hidden; background: #fff; border: 3px solid transparent; border-radius: 1.5rem; transition: all .15s linear; }
.site-search.is-open { width: 200px; border-color: var(--main); }
.site-search__toggle { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; background: none; }
.site-search__toggle:hover, .site-search__toggle:focus { background: none; }
.site-search__toggle svg { display: block; width: 30px; height: auto; }
.site-search__toggle path { fill: var(--main); }
.site-search form { display: none; height: 100%; }
.site-search.is-open form { display: block; }
.site-search input { width: 100%; height: 100%; padding: 5px 5px 5px 45px; font-size: 1rem; box-shadow: none; }

.nav-toggle { display: none; position: absolute; left: 0; top: -3px; z-index: 9999; width: 42px; height: 42px; padding: 0; overflow: hidden; background: var(--accent); }
.nav-toggle:hover, .nav-toggle:focus { background: var(--accent); }
.nav-toggle span { margin-top: 10px; left: 9px; }
.nav-toggle span, .nav-toggle span:after, .nav-toggle span:before { top: 0; position: absolute; content: " "; display: block; height: 3px; width: 22px; background: #fff; border-radius: 10px; }
.nav-toggle span:before { top: 8px; }
.nav-toggle span:after { top: 16px; }

/* ---------- Mobile drawer ---------- */

.drawer { position: absolute; left: 0; top: 0; z-index: 222; width: 86%; height: 100%; background: #222; color: #fff; transform: translate3d(-102%, 0, 0); visibility: hidden; transition: .15s ease-in-out; }
.drawer__search { position: relative; margin: 6px 20px 30px; height: 34px; overflow: hidden; background: #f6f6f6; }
.drawer__search .search-field { width: 100%; height: 34px; padding: 0 12px; background: #fff; color: #707070; font-size: 12px; border-radius: 0; box-shadow: none; }
.drawer__search .search-field::placeholder { color: #fff; }
.drawer__search .search-submit { position: absolute; top: 0; right: 0; z-index: 55; height: 34px; padding: 0 12px; background: var(--accent); color: #fff; font-size: 13px; border-radius: 0; box-shadow: none; }
.drawer__search .search-submit:hover { background: #202121; }
.drawer__menu ul { margin: 0; padding: 0; }
.drawer__menu a { display: block; min-height: 34px; padding: 12px 0 12px 20px; color: #fff; font-size: 15px; }

.site:after { content: ""; position: absolute; z-index: 110; top: -10%; left: -50%; width: 0; height: 0; background: rgba(255, 255, 255, .8); opacity: 0; cursor: pointer; transition: opacity .15s ease-in-out; }
.nav-open .site { transform: translate3d(86%, 0, 0); }
.nav-open .site:after { width: 200%; height: 110%; opacity: 1; }
.nav-open .drawer { transform: none; visibility: visible; }
.nav-open .nav-toggle span { top: 8px; transform: rotate(45deg); }
.nav-open .nav-toggle span:after { top: 0; transform: rotate(-90deg); }
.nav-open .nav-toggle span:before { display: none; }

/* ---------- Quiz cards ---------- */

.quiz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-bottom: 1.2rem; }
.quiz-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #eee; border-radius: 10px 10px 10px 0; box-shadow: 5px 5px 0 rgba(25, 53, 62, .1); transform: translateZ(0); }
.quiz-card__media { display: block; }
.quiz-card__img { width: 100%; }
.quiz-card__cat { display: table; margin: 1rem 1rem 4px; padding: 4px 8px; background-color: rgba(0, 0, 0, .7); border-radius: 3px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap; transition: background-color .15s ease-out; }
.quiz-card__cat:hover { color: #fff; }
.quiz-card__title { margin: 0; padding: 0 1rem 1rem; font-size: 1.2rem; font-weight: 600; line-height: 1.5rem; }
.quiz-card__media + .quiz-card__title { padding-top: 1rem; }
.quiz-card__title a { display: inline-block; }

.cat-tvandmovie { background-color: var(--cat-tvandmovie); }
.cat-games { background-color: var(--cat-games); }
.cat-health { background-color: var(--cat-health); }
.cat-food { background-color: var(--cat-food); }
.cat-love { background-color: var(--cat-love); }
.cat-sport { background-color: var(--cat-sport); }
.cat-music { background-color: var(--cat-music); }
.cat-cars { background-color: var(--cat-cars); }
.cat-animals { background-color: var(--cat-animals); }
.cat-fashion { background-color: var(--cat-fashion); }
.cat-general { background-color: var(--cat-general); }
.cat-anime { background-color: var(--cat-anime); }

/* ---------- Home ---------- */

.home-section { position: relative; padding: 2rem 0; }
.home-section--white { background: #fff; }
.home-section__inner { position: relative; max-width: 1240px; margin: 0 auto; }
.section-head { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.0909090909; }
.section-head::after { content: ""; flex-grow: 1; height: 4px; background: var(--cat-cl); border-radius: 5px; }
.section-head svg { width: 2.5rem; height: auto; flex: none; }
.section-head--raised svg { padding-bottom: 10px; }

.quiz-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 1rem; }
.quiz-row .quiz-card { flex: 0 0 auto; width: calc(25% - .75rem); min-width: calc(25% - .75rem); }

.home-section--types { padding: 1rem 0; background-color: #F23276; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='250' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E"); }
.type-links { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.type-link { display: flex; justify-content: center; align-items: center; gap: .5rem; width: 30%; padding: 1rem 1.5rem; background: #fff; border-radius: 1.2rem; font-size: 1.3rem; font-weight: 600; box-shadow: rgba(0, 0, 0, .12) 0 1px 3px, rgba(0, 0, 0, .24) 0 1px 2px; }
.type-link svg { width: 3rem; min-width: 3rem; height: auto; }

.section-more { position: absolute; top: .65rem; right: 0; padding: .5rem 1rem; background: var(--cat-cl); border-radius: 1rem; color: #fff; font-weight: 600; }
.section-more:hover { color: #fff; }
.section-more i { display: inline-block; position: relative; width: .6rem; height: .6rem; margin-left: .3rem; border-top: .15rem solid #fff; border-right: .15rem solid #fff; transform: rotate(45deg); animation: wave .7s infinite; }
@keyframes wave { 0% { opacity: .3; } 50% { opacity: .6; } to { opacity: 1; } }

/* ---------- Archives ---------- */

.listing { margin-top: 1rem; }
.archive-head { display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 1fr; gap: 1rem; justify-items: center; align-items: flex-start; text-align: center; margin: 0 auto 30px; padding: 1rem 2rem 2rem; background: #fff; border-radius: 10px; box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 2px 6px 2px; }
.archive-head__icon { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.archive-head__body { width: 100%; }
.archive-title { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 800; }
.archive-desc { margin-bottom: 1rem; font-size: 1.15rem; font-weight: 400; line-height: 1.65rem; }
.archive-desc p { line-height: 1.65rem; }
.archive-desc form { display: flex; }
.archive-desc form label { flex-grow: 1; }
.archive-desc .search-field { width: 100%; padding: .8rem; font-size: .9rem; line-height: .9rem; border-radius: 1rem 0 0 1rem; box-shadow: rgba(0, 0, 0, .02) 0 1px 3px 0, rgba(27, 31, 35, .15) 0 0 0 1px; }
.archive-desc .search-submit { padding: .8rem 2rem; font-size: 1rem; border-radius: 0 1rem 1rem 0; box-shadow: rgb(150 72 121 / 2%) 0 1px 3px 0, rgb(151 57 108 / 15%) 0 0 0 1px; }
.archive-social { display: flex; margin: 0; }
.archive-subtitle { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -.8px; }
.search-term { color: var(--main); }

.pagination { display: flex; width: fit-content; margin: 30px auto; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 5px 5px 0 rgba(25, 53, 62, .1); }
.pagination > * { display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 1.6rem; font-weight: 400; }
.pagination .current { background: var(--accent); color: #fff; }
.pagination a:hover { background: #a6a6a6; color: #fff; }
.pagination svg { padding: 10px; }
.pagination path { fill: var(--main); }

/* ---------- Posts and pages ---------- */

.post-layout { display: grid; grid-template-columns: 1fr 350px; grid-template-rows: auto 1fr; gap: 1rem; }
.post-layout > .quiz-stage { grid-column: 1 / span 2; }
.post-layout > .post-main, .post-layout > .age-main, .post-layout > .quiz-questions { grid-column: 1; }
.sidebar { grid-column: 2; grid-row: 1 / span 1; position: relative; }

.post-top { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; margin: -30px -30px 10px; background: #f8f8fb; border-bottom: 1px solid #e2e2e2; }
.breadcrumbs { padding-right: 5px; overflow: hidden; font-size: 14px; font-weight: 700; }
.breadcrumbs a { display: inline-block; position: relative; padding: 10px 20px 10px 15px; color: #574048; font-weight: 300; }
.breadcrumbs a:before, .breadcrumbs a:last-child:after { content: ""; position: absolute; top: -.3em; right: 0; bottom: 0; z-index: 1; width: 3em; color: #e2e2e2; border-right: solid; border-top: solid; box-shadow: 1px 0 0 -1px gray; transform: rotate(30deg) skewy(30deg); pointer-events: none; }
.post-meta { display: flex; padding-right: 10px; }
.post-meta__author { margin-left: 3px; }
.post-meta time, .post-meta a { color: var(--accent); padding: 2px 0; }

.entry-title { margin: 0; padding: .5rem 0 1rem; font-size: 40px; font-weight: 600; line-height: 50px; }
.entry-title--page { margin-bottom: 3px; }
.page-layout { padding-bottom: 1rem; }
.entry-intro p { font-size: 17px; line-height: 26px; color: #222; }
.entry-cover { display: block; width: calc(100% + 60px); max-width: none; margin: 0 -30px 26px; }

.entry-content { margin: 21px 0 0; padding: 0 0 40px; }
.page .entry-content { padding-bottom: 0; }
.entry-content p { margin-bottom: 26px; font-size: 17px; line-height: 32px; color: #222; }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content h2, .entry-content h3 { color: #111; font-weight: 700; }
.entry-content a { color: var(--accent); }
.entry-content br { display: block; }
.entry-content ul { margin: 16px 0; padding: 0 0 0 40px; word-wrap: break-word; }
.entry-content ul, .entry-content ul li { list-style: square; }
.entry-content li { font-size: 15px; line-height: 26px; }
.table-wrapper { overflow-x: auto; }
.entry-content table { width: 100%; text-align: center; border-collapse: collapse; background: #fff; box-shadow: 1px 1px 5px #00000026; }
.entry-content table th, .entry-content table thead td { padding: .75rem 2rem; background-color: #df579d; color: #fff; font-size: .9rem; font-weight: 700; letter-spacing: .1rem; text-transform: uppercase; }
.entry-content table td { padding: 1rem 2rem; }
.entry-content table tr:nth-child(2n) { background-color: #fef3fb; }

.section-title { position: relative; z-index: 2; height: 14px; margin: 0 0 26px; background-color: #f0f0f0; font-size: 18px; font-weight: 700; line-height: 15px; text-transform: uppercase; }
.section-title:before { content: ""; display: inline-block; width: 12px; height: 12px; background-color: var(--accent); }
.section-title > span { position: relative; padding: 0 12px 0 24px; background-color: #fff; }

/* ---------- Comments ---------- */

.comments { margin: 0 auto 40px; }
.comment-list, .comment-list ol, .comment-list li { margin: 0; padding: 0; }
.comment-list p { margin: 0; padding: 0; }
.comment-list .comment { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #d9e4e6; }
.comment-list .comment:first-child { margin-top: 0; }
.comment-header .avatar { float: left; margin-right: 20px; border-radius: 50%; box-shadow: rgba(0, 0, 0, .16) 0 1px 4px; }
.comment-author { font-size: 16px; line-height: 22px; }
.comment-header .comment-meta { font-size: 12px; }
.comment-body { clear: both; overflow: hidden; margin-top: 20px; }
.comment-body .comment-reply { margin-top: 15px; line-height: 32.4px; }
.comment-reply-link { font-size: 13px; color: var(--accent); }
.comment-reply-link:hover { color: inherit; }
.comment-list .children { margin-top: 1rem; margin-left: 2rem; border-left: 2px dashed #d9e4e6; }
.comment-list .children .comment { padding-left: 1rem; }
.comment-form p { margin-bottom: 5px; }
.comment-form .form-submit { margin: 20px auto 0; }
.comment-form label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.comment-form-cookies-consent, .comment-form-url { display: none; }

/* ---------- Sidebar ---------- */

.widget { margin: 0 auto 30px; padding: 20px; background: #fff; border-radius: 1rem; box-shadow: var(--card-shadow); }
.widget:last-child { margin-bottom: 0; }
.widget-title { position: relative; z-index: 2; height: 12px; margin: 0 0 20px; background-color: #f0f0f0; font-size: 14px; font-weight: 700; line-height: 13px; text-transform: uppercase; }
.widget-title:before { content: ""; display: inline-block; width: 12px; height: 12px; background-color: var(--accent); }
.widget-title > span { position: relative; padding: 0 12px 0 24px; background-color: #fff; color: var(--accent); }

.mini-list { display: flex; flex-direction: column; gap: .5rem; }
.mini-card { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; }
.mini-card__img { width: 30%; min-width: 30%; border-radius: .7rem; box-shadow: rgba(0, 0, 0, .15) 1.95px 1.95px 2.6px; }
.mini-card--lead { position: relative; display: block; overflow: hidden; border-radius: .7rem; box-shadow: rgba(0, 0, 0, .15) 1.95px 1.95px 2.6px; }
.mini-card--lead .mini-card__img { width: 100%; border-radius: 0; box-shadow: none; }
.mini-card--lead:before { content: ""; position: absolute; bottom: 0; z-index: 1; width: 100%; height: 80%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7) 100%); }
.mini-card--lead span { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; padding: 1rem .9rem; color: #fff; font-size: 1.2rem; line-height: 1.5rem; text-align: center; text-shadow: rgba(0, 0, 0, .6) 0 0 5px; }

/* ---------- 404 ---------- */

.panel { position: relative; margin: 0 auto 30px; padding: 26px; background: #fff; box-shadow: var(--card-shadow); }
.panel:last-child { margin-bottom: 0; }
.panel__title { margin: 36px 0 12px; }
.panel .search-form { position: relative; line-height: 0; }
.panel .search-form label { display: block; overflow: hidden; }
.panel .search-field { width: 100%; min-height: 32px; max-height: 32px; padding: 6px 75px 6px 10px; }
.panel .search-submit { position: absolute; top: 0; right: 0; z-index: 5; min-height: 32px; max-height: 32px; padding: 6px 10px; }
.not-found__message, .not-found__code { margin: 0; line-height: 19px; }
.tile-row { display: flex; gap: 30px; }
.tile { position: relative; flex: 1 1 0; min-width: 0; }
.tile .quiz-card__cat { position: absolute; top: 0; left: 0; z-index: 3; margin: 0 2px 2px 0; border-radius: 3px; }
.tile__media { display: block; margin-bottom: 20px; }
.tile__img { width: 100%; transition: opacity .15s; }
.tile:hover .tile__img { opacity: .8; }
.tile__title { margin: 0; font-size: 17px; font-weight: 400; line-height: 22px; }

/* ---------- Contact ---------- */

.contact { margin-bottom: 25px; }
.contact:after { content: ""; display: block; clear: both; }
.contact__info { float: left; width: 100%; padding-bottom: 50px; text-align: center; }
.contact__info h1 { margin-bottom: 25px; padding-bottom: 1rem; }
.contact__info p { font-size: 1.2rem; font-weight: 600; }
.contact__info address { font-weight: 300; }
.contact__info > a { display: block; width: 32px; margin: 2px auto; line-height: 0; }
.contact__form { float: left; width: 100%; }
.wpcf7-text { width: 100%; max-width: 100%; }

/* ---------- Footer ---------- */

.site-footer { position: relative; background: #0c0c0c; color: #f2f3f5; }
.site-footer a { color: #ccc; }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 40px; }
.site-footer__logo, .site-footer__follow { width: 25%; padding: 0 15px; }
.site-footer__about { width: 50%; padding: 0 15px; }
.site-footer__text { padding: 0 10px; }
.footer-title { height: 14px; margin: 0 0 26px; font-size: 18px; font-weight: 700; line-height: 15px; text-align: center; text-transform: uppercase; }
.footer-title:before { content: ""; display: inline-block; width: 12px; height: 12px; background-color: var(--accent); }
.footer-title > span { padding: 0 12px 0 24px; }
.social-links { display: flex; justify-content: center; align-items: center; gap: .5rem; }
.social-links svg { width: 35px; padding: 5px; border-radius: 10px; }
.social-twitter svg { background: #fff; }
.social-facebook svg { background: #1877f2; }
.social-youtube svg { background: #ff0000; }
.social-instagram svg { background: #d6249f; }
.social-linkedin svg { background: #0a66c2; }
.social-tiktok svg { background: #000; }
.social-pinterest svg { background: #e60023; }
.site-footer__nav { display: flex; justify-content: center; }
.footer-menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem; margin: 2rem .5rem; }
.footer-menu li { padding: .5rem 0; font-size: .9rem; }
.copyright { margin: 0; padding: 1rem .5rem; background: #151515; line-height: 19px; text-align: center; }

/* ---------- Responsive ---------- */

@media (min-width: 480px) {
  .quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .quiz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archive-head { grid-template-columns: 100px 1fr; grid-template-rows: 1fr; text-align: left; }
  .archive-head__icon { width: 100px; height: 100px; }
  .archive-title { margin-bottom: 1rem; font-size: 1.6rem; }
  .site-footer__top { flex-direction: row; }
}

@media (min-width: 1000px) {
  .listing { margin-top: 0; }
  .quiz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact__info { width: 30%; text-align: left; }
  .contact__info > a { margin: 2px; }
  .contact-layout { padding-bottom: 1rem; }
  .contact__form { width: 70%; padding-left: 30px; }
  .site-footer__text { padding: 0; }
}

@media (max-width: 1239px) {
  .section-more { right: 0; }
}

@media (max-width: 991px) {
  .site-main { padding-top: 0; }
  .card { border-radius: 0; }
  .post-layout { display: block; }
  .post-top { margin: 0 -10px 10px; }
  .post-meta { display: none; }
  .breadcrumbs { width: 100%; }
  .entry-content { margin-top: 5px; }
  .entry-title--page { margin-bottom: 0; padding-bottom: calc(1rem + 10px); color: #111; font-size: 24px; font-weight: 700; }
  .page-layout { padding-bottom: 0; }
  .home-section__inner { padding: 0 1rem; }
  .quiz-card__title { padding: 0 .6rem .6rem; font-size: 1rem; line-height: 1.2rem; }
  .quiz-card__media + .quiz-card__title { padding-top: .6rem; }
  .quiz-card__cat { margin: .6rem .6rem 4px; font-size: 10px; font-weight: 600; }
  .tile-row { display: block; }
  .tile { margin-bottom: 30px; }
  .tile:last-child { margin-bottom: 0; }
  .tile__title { font-size: 22px; line-height: 30px; }
}

@media (max-width: 990px) {
  .site-header__bar { display: block; padding: 20px 0; }
  .site-logo { height: 40px; text-align: center; }
}

@media (max-width: 985px) {
  .sidebar { margin-top: 30px; }
  .page-layout { padding-bottom: 30px; }
}

@media (max-width: 985px) and (min-width: 768px) {
  .container { width: 96%; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav, .site-search { display: none; }
}

@media (max-width: 899px) {
  .entry-title { font-size: 27px; line-height: 32px; }
}

@media (max-width: 787px) {
  .site-footer__logo, .site-footer__about, .site-footer__follow { width: 100%; padding: 0; text-align: center; }
  .site-footer__about { padding: 40px 0; }
  .footer-title { display: inline-block; }
}

@media (max-width: 769px) {
  html, body { overflow-x: hidden; }
}

@media (max-width: 767px) {
  .site-header { box-shadow: none; }
  .site-logo img { max-height: 40px; }
  .post-main, .age-main .card, .contact, .page .card.entry { padding: 0 10px; box-shadow: none; }
  .widget, .panel { padding: 0 10px; box-shadow: none; }
  .panel { margin-bottom: 60px; }
  .section-title, .section-title > span, .widget-title, .widget-title > span { background: none; }
}

@media (max-width: 767px) and (min-width: 480px) {
  .container { width: 89%; }
}

@media (max-width: 568px) {
  .entry-title { font-size: 23px; line-height: 28px; }
}

@media (max-width: 480px) {
  .tile__title { font-size: 18px; line-height: 26px; }
}

@media (max-width: 479px) {
  .aligncenter, .alignleft, .alignright { display: block; float: none; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
  .entry-cover { width: calc(100% + 30px); margin-right: -15px; margin-left: -15px; }
  .entry-title--page { font-size: 22px; line-height: 32px; }
  .listing { padding: 0 1rem; }
  .listing--author { padding: 0; }
  .archive-head { padding: 1rem; }
  .archive-desc { margin-bottom: 0; }

  .home-section { padding: 1rem 0; }
  .home-section__inner { width: 100%; max-width: 100%; padding: 0; }
  .section-head { justify-content: center; padding: 0 1rem; font-size: 1.2rem; }
  .section-head::before { content: ""; flex-grow: 1; height: 4px; background: var(--cat-cl); border-radius: 5px; }
  .quiz-row { position: relative; width: 100%; padding: 0 1rem 1rem; overflow-x: scroll; }
  .quiz-row--slide { flex-wrap: nowrap; }
  .quiz-row .quiz-card { flex-basis: 66%; width: 66%; min-width: 66%; }
  .type-links { gap: .5rem; padding: 0 .5rem; }
  .type-link { width: calc(50% - .5rem); font-size: 1rem; }

  .quiz-row--list { padding: 0 .5rem 1rem; }
  .quiz-row--list .quiz-card { display: flex; flex-basis: 100%; align-items: start; width: 100%; }
  .quiz-row--list .quiz-card__media { flex: 1 1 0; }
  .quiz-row--list .quiz-card__img { height: 100%; }
  .quiz-row--list .quiz-card__title { flex: 1 1 0; padding: 1.1rem .5rem .5rem; font-size: .9rem; line-height: 1.1rem; }
  .quiz-row--list .quiz-card__cat { position: absolute; top: 0; right: 0; margin: 0; padding: 2px 8px; border-radius: 0 10px; font-size: .7rem; font-weight: 600; }

  .section-more { display: flex; position: static; justify-content: center; align-items: center; width: fit-content; min-width: 60%; margin: 0 auto; padding: .8rem 1rem; border-radius: 2rem; font-size: 1.2rem; text-align: center; box-shadow: 0 5px rgba(0, 0, 0, .15); }
  .section-more i { width: 1rem; height: 1rem; border-top-width: .25rem; border-right-width: .25rem; }
}