/*!
Theme Name: Bajhovec
Theme URI: https://bajhovec.si/
Author: Gašper Sinur
Author URI: https://bajhovec.si/
Description: TK Bajhovec
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
Text Domain: bajhovec
*/

/* BAREBONES */
html {line-height: 1.15; -webkit-text-size-adjust: 100%; box-sizing: border-box;}
body {margin: 0;}
main {display: block;}
h1 {font-size: 2em;	margin: 0.67em 0;}
hr {box-sizing: content-box; height: 0;	overflow: visible;}
pre {font-family: monospace, monospace;	font-size: 1em;}
a {background-color: transparent; text-decoration: none;}
abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace;	font-size: 1em;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box;	color: inherit;	display: table;	max-width: 100%; padding: 0; white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}
*, *::before, *::after {box-sizing: inherit;}
/* BAREBONES */

/* MISC */
:root{
    font-size: 62.5%;
    --color-white: #ffffff;
    --color-light-black: #222222;
    --color-navy: #050522;
    --color-accent: #77c510;
}
html {overflow-x: hidden;}
body {background-color: var(--color-white); overflow-x: hidden; min-height: 100vh; color: var(--color-light-black); font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; font-size: 1.5rem; line-height: 1.7;}
body:after {content: ''; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; position: fixed; transition: all 0.3s ease-out; opacity: 0; visibility: hidden; z-index: 9;}
body.header-menu-active:after {visibility: visible; opacity: 1;}
.container-fluid {padding: 0 20px; max-width: 1200px; width: 100%; margin: 0 auto;}

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

p {margin: 0 0 20px;}

ul {padding: 0 0 0 17px; margin: 0;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {color: var(--color-light-black); text-transform: uppercase; font-weight: 700; line-height: 1.2; padding-bottom: 15px; margin: 0 0 30px; position: relative; display: block;}
h1:after, .h1:after, h2:after, .h2:after, h3:after, .h3:after, h4:after, .h4:after, h5:after, .h5:after, h6:after, .h6:after {content: ''; width: 80px; height: 3px; bottom: 0; background-color: var(--color-navy); display: block; position: absolute;}
h1, .h1 {font-size: 35px;}
h2 ,.h2 {font-size: 30px;}
h3, .h3 {font-size: 25px;}
h4, .h4 {font-size: 20px;}
h5, .h5 {font-size: 18px;}
h6, .h6 {font-size: 15px;}

.button, input[type="submit"] {display: inline-block; text-decoration: none; background-color: var(--color-navy); border: 2px solid var(--color-navy); font-weight: 700; text-transform: uppercase; padding: 20px 40px; color: var(--color-white); transition: all 0.3s ease-out;}
.button:hover,
.button:focus,
.button:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {color: var(--color-navy); background-color: var(--color-white); border: 2px solid var(--color-navy);}

#intro-section {padding: 150px 0; background-image: url("/wp-content/uploads/2026/03/naslovna-pomlad-2026.jpg"); text-align: center; margin-bottom: 70px; background-position: center 52%; background-repeat: no-repeat; background-size: cover; position: relative;}
#intro-section:before {content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: block; z-index: 1; position: absolute;}
#intro-section .container-fluid {z-index: 1; position: relative;}
#intro-section h1 {color: var(--color-white); text-align: center;}
#intro-section h1:after {background-color: var(--color-white); left: 50%; transform: translateX(-50%);}

input[type="text"], input[type="email"], textarea {width: 100%; padding: 15px; border: 2px solid var(--color-navy); margin-bottom: 10px;}
input::placeholder, textarea::placeholder {color: #aaa;}
textarea {height: 150px; resize: none;}

.coming-soon-text {font-size: 3rem; font-weight: 700; margin-bottom: 20px;}
/* MISC */

/* HEADER */
header {height: 69px; position: relative; z-index: 10; background-color: var(--color-white);}
.header-wrap {max-width: 1400px; padding: 0 20px; width: 100%; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative;}
.menu-header-menu-container {}
.header-logo {display: flex; flex: 0 0 auto;}
.header-logo a {display: inline-flex;}
.header-logo a img {width: 180px; height: auto;}
.hamburger {cursor: pointer; z-index: 10; width: 27px; height: 16px; flex: 0 0 27px;}
.hamburger .bar {width: 27px; height: 2px; background-color: #333; margin: 5px 0; transition: 0.4s;}
.hamburger .bar:first-child {margin: 0 0 5px 0;}
.hamburger .bar:last-child {margin: 5px 0 0 0;}
.hamburger.active .bar:nth-child(1) {transform: rotate(-45deg) translate(-5px, 5px);}
.hamburger.active .bar:nth-child(2) {opacity: 0;}
.hamburger.active .bar:nth-child(3) {transform: rotate(45deg) translate(-5px, -5px);}
.main-navigation {position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; transition: all 0.3s ease-out; width: 100%; background-color: var(--color-white); transform: translateX(100%); padding: 0 20px;}
.main-navigation.active {visibility: visible; opacity: 1; transform: translateX(0%);}
#header-menu {padding: 0; margin: 0; padding: 20px 0 40px;}
#header-menu li {list-style: none; display: block;}
#header-menu li a {display: block; padding: 10px 0; border-bottom: 1px solid #e3e3e3; text-transform: uppercase; text-decoration: none; color: var(--color-light-black); font-weight: 500; transition: all 0.3s ease-out;}
#header-menu li a:hover,
#header-menu li a:focus,
#header-menu li a:active {color: var(--color-accent);}
#header-menu li:last-child a {border-bottom: none}

footer {background-color: var(--color-navy); color: var(--color-white); margin-top: 100px;}
.upper-footer {padding: 80px 0 50px; display: grid; grid-template-columns: repeat(1, 1fr); grid-template-areas: "logo" "description" "menu"; gap: 30px; position: relative;}
.upper-footer:after {content: ''; position: absolute; left: -20px; bottom: 0; width: calc(100% + 40px); height: 1px; display: block; background-color: rgba(150, 150, 150, 0.2);}
.footer-logo {display: flex; grid-area: logo;}
.footer-logo a {display: inline-flex;}
.footer-logo a img {display: block; width: 160px; height: auto;}
.footer-description {grid-area: description; max-width: 500px;}
.footer-description-slogan {text-transform: uppercase; font-weight: 700;}
.menu-footer-menu-container {grid-area: menu;}
#footer-menu {margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, 1fr);}
#footer-menu li {list-style: none;}
#footer-menu li a {text-decoration: none; text-transform: uppercase; color: var(--color-white); margin-bottom: 10px; display: inline-block; transition: all 0.3s ease-out;}
#footer-menu li a:hover,
#footer-menu li a:focus,
#footer-menu li a:active {color: var(--color-accent);}
#footer-menu li:last-child a {margin-bottom: 0;}
.lower-footer {padding: 25px 0; font-size: 1.5rem;}

/* front page */
#front-slider {margin-bottom: 100px; margin: 0 auto 100px;}
.front-swiper .swiper-slide {position: relative; width: 100%; max-height: calc(90vh - 69px); height: auto; aspect-ratio: 6 / 4; /*max-height: 1100px;*/ display: flex; align-items: center;}
.front-swiper .front-swiper-background-image {width: 100%; height: 100%; /*position: absolute; top: 0; left: 0;*/ z-index: -1;}
.front-swiper .front-swiper-background-image:after {width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ''; background: black; opacity: 0.1; display: block;}
.front-swiper .front-swiper-background-image img {width: 100%; height: 100%; object-fit: cover; object-position: center 30%;}
.front-swiper .front-swiper-background-content {color: white; padding: 20px 45px; max-width: 1400px; width: 100%; margin: 0 auto; text-align: center;}
.front-swiper .front-swiper-background-content-title {text-transform: uppercase; font-size: 4rem; font-weight: 700; margin-bottom: 10px; padding: 0; color: white;}
.front-swiper .front-swiper-background-content-title:after {display: none;}
.front-swiper .front-swiper-background-content-description p {margin: 0 0 15px; font-size: 1.6rem;}
.front-swiper .front-swiper-background-content-link {margin-top: 53px; position: relative;}
.front-swiper .front-swiper-background-content-link:before {content: ''; display: block; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background-color: var(--color-white); width: 120px; height: 3px;}
#front-slider  .swiper-button-next, #front-slider  .swiper-button-prev {display: block; width: 25px; text-align: center; height: auto;}
#front-slider .swiper-button-next:after, #front-slider  .swiper-button-prev:after {color: var(--color-white); font-size: 30px;}

#front-intro {margin-bottom: 100px;}
.front-intro-wrap {display: grid; grid-template-columns: repeat(1, 1fr); gap: 50px;}
.front-intro-image {height: 300px; display: block;}
.front-intro-image img {object-fit: cover; width: 100%; height: 100%;}

#front-events {margin-bottom: 100px;}
.front-event-list {display: grid; grid-template-columns: repeat(1, 1fr); gap: 50px 30px; margin-bottom: 30px;}
.front-event-list-single {text-decoration: none;}
.front-event-list-single-image {aspect-ratio: 4 / 3; overflow: hidden; position: relative;}
.front-event-list-single-image img {object-fit: cover; object-position: center; width: 100%; height: 100%;}
.front-event-list-single-image:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); transition: all 0.3s ease-out;}
.front-event-list-single:hover .front-event-list-single-image:after,
.front-event-list-single:focus .front-event-list-single-image:after,
.front-event-list-single:active .front-event-list-single-image:after {background-color: rgba(0, 0, 0, 0.1);}
div.front-event-list-single:hover .front-event-list-single-image:after,
div.front-event-list-single:focus .front-event-list-single-image:after,
div.front-event-list-single:active .front-event-list-single-image:after {background-color: rgba(0, 0, 0, 0.3);}
.front-event-list-single-date {margin: 10px 0; padding: 0 3px; font-weight: 500; color: var(--color-navy); font-size: 1.8rem;}

.front-event-list-single-title {font-size: 2.6rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--color-light-black); transition: all 0.3s ease-out;}
.front-event-list-single:hover .front-event-list-single-title,
.front-event-list-single:focus .front-event-list-single-title,
.front-event-list-single:active .front-event-list-single-title {color: var(--color-accent)}
div.front-event-list-single:hover .front-event-list-single-title,
div.front-event-list-single:focus .front-event-list-single-title,
div.front-event-list-single:active .front-event-list-single-title {color: inherit;}

#front-cta {margin-bottom: 100px;}
.front-cta-description p {margin-bottom: 30px;}

#front-runs {margin-bottom: 100px;}

#front-news {margin-bottom: 100px;}
/* front page */

/* archive */
.events-list {display: grid; grid-template-columns: repeat(1, 1fr); gap: 50px 30px;}

.upcoming-events-wrap {margin-bottom: 80px;}
/* archive */

/* single event */
.event-gallery {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 50px;}
.event-gallery-item {margin: 0; display: block;}
.event-gallery-image-link {display: block; width: 100%; height: 100%;}
.event-gallery-image, .wp-block-image .event-gallery-image {width: 100%; height: 100%; object-fit: cover;}
/* single event */

.contact-wrap {display: grid; grid-template-columns: repeat(1, 1fr); gap: 50px 30px;}
.contact-email-link {font-size: 2rem; margin-bottom: 20px; display: block;}
.contact-email-link a {color: var(--color-navy); text-transform: none;}

.pokal-intro {margin-bottom: 40px;}

.pokal-rezultati {display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px;}
.pokal-rezultati h4 {padding: 0; margin-bottom: 20px;}
.pokal-rezultati h4:after {display: none;}


/* Styling for the grid container to mimic a table */
.runners-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.grid-header, .grid-row {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 5fr;
    align-items: center;
    border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.grid-header {
    background-color: var(--color-navy);
    color: var(--color-white);
    font-weight: 700;
}

.grid-header > div {padding: 10px; min-width: 0; text-align: center;}
.grid-header > div:last-child {text-align: left;}

.grid-row {
    background-color: #fff;
}

.grid-row:last-child {
    background-color: #fff;
	border-bottom: 1px solid #ddd;
}

.grid-row:hover {
    background-color: #f2f2f2;
}

.grid-cell {
    padding: 8px 10px;
    border-right: 1px solid #ddd;
	height: 100%;
	min-width: 0; display: flex; align-items: center;
}

.grid-cell:last-child {
    border-right: none;
}

.runner-points {font-weight: 700; justify-content: center;}

.runner-position {font-weight: 700; justify-content: center;}
.runner-position-1 .runner-position {background-color: #c9b037;}
.runner-position-2 .runner-position {background-color: #b4b4b4;}
.runner-position-3 .runner-position {background-color: #ad8a56;}

.runner-name {
    font-weight: 700; justify-content: center;
}

.race-details ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.race-details li {
    display: flex;
    justify-content: space-between;
	border-bottom: 1px solid #ddd;
	gap: 10px;
    
}

.runner-comps .race-details {width: 100%;}

.race-details li:last-child {
	border-bottom: none;
}

a.race-name {
	color: var(--color-navy);
	text-decoration: underline;
}

.race-points {
    font-weight: 700;
    text-align: right;
}

.pokal-bajhovec {
    margin-bottom: 50px;
}

@media (max-width: 380.98px) {
	.runners-grid {font-size: 12px;}
	.grid-header > div {padding: 10px 5px;}
	.grid-cell {padding: 8px 5px;}
}

@media (max-width: 575.98px) {
	#intro-section {background-size: 400%;}
}

@media (min-width: 381px) and (max-width: 490.98px) {
	.runners-grid {font-size: 13px;}
	.grid-header > div {padding: 10px 5px;}
	.grid-cell {padding: 8px 5px;}
}

@media (min-width: 576px) {
	.front-event-list {grid-template-columns: repeat(2, 1fr);}

    /* archive */
    .events-list {grid-template-columns: repeat(2, 1fr);}
    /* archive */

    /* single event */
    .event-gallery {grid-template-columns: repeat(3, 1fr); gap: 20px;}
    /* single event */
}

@media (min-width: 768px) {
	.front-event-list {grid-template-columns: repeat(3, 1fr);}

    .front-intro-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px;}
    .front-intro-image {height: 100%; max-height: 400px;}

    /* archive */
    .events-list {grid-template-columns: repeat(3, 1fr);}
    /* archive */

    .contact-wrap {grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 992px) {
    header {height: 90px;}
    .hamburger {display: none;}
    .main-navigation {position: relative; top: unset; visibility: visible; opacity: 1; transition: all 0.3s ease-out; width: auto; background-color: transparent; transform: translateX(0); padding: 0;}
    #header-menu {padding: 0; display: flex; flex-wrap: nowrap;}
    #header-menu li a {padding: 0; border-bottom: none; color: var(--color-light-black); margin-left: 20px; font-weight: 700;}
    #header-menu li:first-child a {margin: 0;}

    .upper-footer {grid-template-columns: 1fr 2fr; gap: 20px 100px; grid-template-areas: "logo menu" "description menu";}
    #footer-menu {grid-template-columns: repeat(2, 1fr); gap: 0 50px; justify-self: flex-end;}
    #footer-menu ul {grid-template-columns: repeat(2, 200px);}

    /* single event */
    .event-gallery {grid-template-columns: repeat(4, 1fr); gap: 20px;}
    /* single event */

    /*.pokal-rezultati {grid-template-columns: repeat(2, 1fr);}*/
}

@media (min-width: 1200px) {
    #header-menu li a {margin-left: 30px;}
}