/*
Theme Name: Stowarzyszenie Miłośników Owińsk i okolic
Theme URI: http://sm-owinska.pl
Author: Iron Brand Piotr Kostrzewski
Author URI: https://ironbrand.pl
Description: Motyw WordPress dla SM Owińsk i okolic
Version: 1.0
Text Domain: Stowarzyszenie Miłośników Owińsk i okolic
*/

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;300;400;600&family=PT+Serif:wght@400;700&display=swap');

header {z-index: 999; position: fixed; top: 0; left: 0; right: 0; }
header > .wrapper {height: auto; background-color: #f5f5f5; min-height: 79px; display: flex; align-items: center; border-radius: 0 0 1.5rem 1.5rem; flex-direction: row; flex-wrap: nowrap; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); padding: 0 3%; z-index: 998 !important; position: relative; justify-content: space-between; }

/* style dla menu */
  header > .wrapper .menu {display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 2.3rem; min-height: inherit; background-color: inherit; }
  header > .wrapper .menu ul {display: flex; list-style: none; margin: 0; padding: 0; } 
  header > .wrapper .menu li {margin-left: 1.8rem; }
  header > .wrapper .menu li:hover {cursor: pointer;}
  header > .wrapper .menu li:first-child {margin-left: 0; }
  header > .wrapper .menu li a {color: #000; font-size: 1rem; text-decoration: none; position: relative; transition: all 0.3s ease-out; }
  header > .wrapper .menu li a:hover, header > .wrapper .menu li.current_page_item a, header > .wrapper .menu li.current_page_item ul.sub-menu > li a:hover {color: #296359; }
  header > .wrapper .menu li.for-members a {background-color: #eaac3d; font-family: 'Kanit', sans-serif; color: #333333; padding: 1rem 1.2rem; border-radius: 2rem; border: none; text-align: center; text-transform: uppercase; transition: 0.3s ease; font-weight: 600; letter-spacing: 0.05rem;text-wrap: nowrap; }
  header > .wrapper .menu li.for-members a:hover {background-color: #245d54; color: #f5f5f5;}
  header > .wrapper .menu .mobile-menu-switch {display: none;}
  header > .wrapper .menu ul.sub-menu {transition: .2s ease; transform: translateY(-200%); top: 79px; display: flex; flex-direction: column; align-items: flex-start; position: absolute; background-color: #f5f5f5; padding: 1.4rem 3rem 2.2rem 2rem; gap: 0.8rem; border-radius: 0 0 8px 8px; margin-left: -2rem; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); z-index: -14 !important; height: auto; }
  header > .wrapper .menu ul.sub-menu.active { transform: translateY(0); z-index: -1 !important;}
  header > .wrapper .menu ul.sub-menu > li {margin: 0; }
  header > .wrapper .menu li.current_page_item ul.sub-menu > li a {color: inherit;}
  header > .wrapper .menu ul.sub-menu li > ul.sub-menu {visibility: hidden; transform: none; opacity: 0; top: auto; left: 100%; margin: -20px 0 0 0; width: auto; border-radius: 0 8px 8px 8px;min-width: 360px;box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.1); }
  header > .wrapper .menu ul.sub-menu li > ul.sub-menu.active {opacity: 1; visibility: visible;}
/* Dodaj strzałkę tylko dla <li>, które mają podrzędne elementy */
header > .wrapper .menu ul > li.menu-item-has-children::after {
    content: "\276F"; /* Unicode dla strzałki w dół */
    display: inline-block;
    margin-left: 5px; /* Dodaj odstęp między tekstem a strzałką */
    transition: 0.2s ease;
    transform: rotate(90deg);
    color: inherit;
}
header > .wrapper .menu ul > li.menu-item-has-children.active::after {
    transform: rotate(270deg);
    color: #eaac3d;
}
header > .wrapper .menu ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children::after {
    transform: rotate(0);
}
header > .wrapper .menu ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children.active:after {
    transform: rotate(0) translateX(4px);
    color: #eaac3d;
}

/* Resetowanie stylów */
* {margin: 0; padding: 0; box-sizing: border-box; }

/* Ustawienia podstawowe */
  body {font-family: 'PT Serif', serif; font-size: 16px; line-height: 1.4; background-color: #f5f5f5; color: #333;min-height: 100vh;display: flex;flex-direction: column;}
  h1, h2, h3, h4, h5, h6 {font-family: 'PT Serif', serif; font-weight: bold; margin-bottom: 10px; }
  p, section ol {padding: 0.5rem 0; font-size: 1rem; letter-spacing: 0.015rem; line-height: 1.6rem; }
  p span {font-weight: bold;}
  section ol, section ul {margin: 0.6rem 0; padding: 0 0 0 1.5rem; }
  section ol li, section ul li {padding: 0 0 0.5rem 0; }
  a {color: #333333; text-decoration: none; transition: 0.3s ease-in-out; }
  a:hover {text-decoration: none; }

/* Style dla nagłówków */
  h1 {font-size: 36px; }
  h2 {font-size: 1.2rem; } 
  h3 {font-size: 24px; }
  h4 {font-size: 18px; }
  h5 {font-size: 16px; }
  h6 {font-size: 14px; } 

  .wrapper {width: 100%; margin: 0 auto; padding: 0 6%; max-width: 1366px;}

  main {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; flex-grow: 1;} 
  .logo {z-index: 999; max-width: 70%; }
  .logo svg {width: 100%; } 
  .bg-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./assets/img/welcome.jpg'); background-size: cover; background-position: center; z-index: -1; transform: scale(1); transition: transform 9s ease-in-out; } 
  .active-welcome {transform: scale(1.12); } 
  .overlay {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; border-radius: 0 0 2.5rem 2.5rem; z-index: 1; } 
  .overlay span {font-size: 3.5rem; text-align: center; max-width: 90%; margin: 0 auto; text-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.4); font-family: 'Kanit', sans-serif; font-weight: 500; } 

/* Style dla sekcji */
  section {width: 100%; height: 100%; padding: 6rem 0;margin: -3rem 0;}
  section:first-child {margin: 0; z-index: 9; }
  section h1 {position: relative; }
  section h1::before {content: ""; position: absolute; width: 3rem; height: 0.15rem; bottom: -1.2rem; background-color: #eaac3d; transition: all 0.3s ease-out; }
  section.powitalnie {background: linear-gradient(to bottom right, #f3bc4d, white); height: 101vh; width: 100%; margin: 0; padding: 0; }
  section.powitalnie > .welcome-image {position: relative; height: 100%; width: 100vw; overflow: hidden; z-index: 10; }
  section#o-stowarzyszeniu, section#projekty-i-inicjatywy, section#kontakt {background: linear-gradient(90deg, #167369 0%, #0b564e 100%); color: #f5f5f5; border-radius: 2.5rem 2.5rem 0 0; z-index: 11; position: relative; }
  section#projekty-i-inicjatywy.transparent .container {display: flex; align-items: center; }
  section#projekty-i-inicjatywy.transparent {background: transparent; padding: 2rem 0 8rem 0; }
  section.single-page {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 10rem 10% 0 10%; max-width: 1000px; }
section.single-page h1 {position: relative; text-align: center; padding: 0; }
  section.single-page h1::before {content: ""; position: absolute; width: 3rem; height: 0.15rem; bottom: -0.7rem; left: 50%; transform: translateX(-50%); background-color: #eaac3d; transition: all 0.3s ease-out; }
  section.single-page p {margin: 1.2rem 0; width: 100%;}
  section.single-page > .content > p,section.single-page > .content > h1,section.single-page > .content > h2,section.single-page > .content > h3,section.single-page > .content > h4,section.single-page > .content > h5,section.single-page > .content > h6 {width: 100%; }
  section.single-page > .content > p {margin: 0; padding: 0.3rem 0;}
  section.single-page > .content > h1 {margin: 0 0 3rem; }
  section.single-page > .content > p > img, section.single-page > .content > img {display: block; margin: 0 auto 1rem; width: 75%; height: auto; border: 12px solid #f6f6f6; -webkit-box-shadow: 0px 0px 14px -5px rgba(191, 191, 191, 1); -moz-box-shadow: 0px 0px 14px -5px rgba(191, 191, 191, 1); box-shadow: 0px 0px 14px -5px rgba(191, 191, 191, 1); }
  section.single-page > .content > img {margin: 2rem auto;}
  section.page-header {padding: 10rem 0 4.5rem; }
  section#dokumenty-czlonkostwo {margin: 0;}
  section#sponsors {padding: 0 0 8rem 0; }

  .container {display: flex; }
  .container.vertical {flex-direction: column; }
  .container.horizontal {flex-direction: row; justify-content: space-between; flex-wrap: wrap; column-gap: 6rem; }
  .container-level-one {padding: 2rem 0; flex: 1; min-width: 255px; }

  .split-layout {display: flex; justify-content: space-between; column-gap: 6rem; flex-wrap: wrap; }
  .split-layout-box {flex: 1 0 45%; display: flex; justify-content: center; align-items: flex-start; }
  section#o-stowarzyszeniu .split-layout-box > img {width: auto; height: auto; max-height: 550px; object-fit: contain; border-radius: 20px; }

.remaining-time {
    margin: 0 0 1rem 0;
}
.remaining-time span#time-left {
    font-weight: 700;
}

img.single-thumbnail.wp-post-image {
    width: 100%;
    height: auto;
}
/* Style dla stopki */
footer {
    position: relative;
    display: flex;
    flex-direction: column;
}
footer section#kontakt .info-recaptcha  {
    margin: 1rem 0 0;
}
footer section#kontakt .info-recaptcha p, section#kontakt footer .info-recaptcha a {
    font-size: 12px;
    color: #c2c2c2;
}
footer section#kontakt .info-recaptcha a {
    font-weight: bold;
}
footer section#kontakt .info-recaptcha a:hover {
    color: #ffffff;
}
.copyright-author {
    background-color: #eaac3f;
    color: #333333;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.address {
    padding: 2rem 0;
}
#kontakt ul {
    list-style: none;
    font-size: 1.2rem;
    letter-spacing: 0.03rem;
    font-weight: 300;
    font-family: 'Kanit', sans-serif;
    line-height: 1.6rem;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
footer > section#kontakt ul li {
    color: #ffffff;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
#kontakt p {
  padding: 1rem 0;
  margin: 0;
}
section#kontakt .logo {
    margin: 0 0 1rem 0;
    max-width: 350px;
}
section#kontakt.short {
  padding: 3rem 0;
}
section#kontakt.page-contact {
    background: transparent;
    color: #333;
    border-radius: initial;
    padding: 0 0 8rem 0;
}
section#kontakt.page-contact input[type="text"], section#kontakt.page-contact input[type="email"], section#kontakt.page-contact textarea {
    border-bottom: 1px solid #245c54;
    color: #245b52;
    border: none;
    background-color: #e9e9e9;
}
section#kontakt.page-contact h2 {
    color: #235a51;
    text-transform: uppercase;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}
section#kontakt.footer-contact {
    padding: 1rem 0 0 0;
}
section#kontakt.page-contact input::placeholder, section#kontakt.page-contact textarea::placeholder {
  color: #333333;
}
section#kontakt.page-contact input[type="submit"] {
    background-color: #eaac3f;
}
section#kontakt.page-contact input[type="submit"]:hover {    
  background-color: #245b52;
  color: #ffffff
}
section#kontakt.page-contact .address {
    padding: 2rem 0 2rem 2rem;
    border-left: 2px dotted #eaac3f;
    margin: 2rem 0 0 1rem;
}
section#kontakt.page-contact form {
    padding: 1.2rem 0 0;
}
section#kontakt.page-contact .container.horizontal {
    column-gap: 2rem;
}
section#kontakt .info-recaptcha  {
    margin: 2rem 0 0;
}
section#kontakt .info-recaptcha p, section#kontakt .info-recaptcha a {
    font-size: 12px;
    color: #c2c2c2;
    margin: 0;
    padding: 0;
    display: contents;
}
section#kontakt .info-recaptcha a {
    font-weight: bold;
}
section#kontakt .info-recaptcha a:hover {
    color: #000000;
}
div.grecaptcha-badge {
  display: none;
}
/* style dla sekcji aktualnosci */
section#aktualnosci {position: relative; margin: 0; margin: 2rem 0 0 0; }
#aktualnosci .container, #projekty-i-inicjatywy .container {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; position: relative; }
#aktualnosci .container > .news {margin: 0.5rem; padding: 1rem; border-radius: 0.5rem; transition: transform 0.3s ease-out; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: flex-end; }
#aktualnosci .container > .news > img {width: 100%; height: auto; border-radius: 0.5rem; }
#aktualnosci .container > .news > h2 {margin-top: 1rem; margin-bottom: 0.5rem; }
#aktualnosci .container > .news > p {margin-bottom: 1rem; }
section#aktualnosci.arch {margin: 0; padding: 0 0 2% 0; }
.news-items {width:100%;display: flex; flex-wrap: wrap; column-gap: 3%; row-gap: 2rem; margin: 6rem 0; justify-content: flex-start; align-items: stretch; }
.news-item {flex: 0 0 calc(33.33% - 2%); position: relative; overflow: hidden; padding: 0rem; border-radius: 20px; background-color: #f2f2f2; }
@media (max-width: 1150px) {.news-item {flex: 1 0 40%; } }
@media (max-width: 768px) {.news-item {flex: 1 0 50%; } }
.news-item > a > p.news-item-date {left: -100%; position: absolute; top: 10px; z-index: 2; background: #f5f5f5; border-radius: 0 12px 12px 0; margin: 0; padding: 0.5rem 1rem 0.5rem 0.5rem; color: #9a9a9a; font-size: 0.8rem; display: flex; text-align: left; align-items: center; transition: 0.3s ease-in-out; }
.news-item > a:hover > p.news-item-date {left: 0; }
p.news-item-excerpt {margin: 0; padding: 0 1.5rem 1.5rem; }
.news-item h2 {letter-spacing: 0.02rem; color: #333333; font-size: 1.2rem; padding: 1rem 1.5rem 0; }
.news-item a h2 {transition: all 0.2s ease-in-out; }
.news-item a:hover h2{color: #235a51; }
.news-item > a > .img-post-thumb > img {width: 100%; min-height: 250px; max-height: 250px; object-fit: cover; opacity: 0.5; transition: 0.3s ease-in-out; }
.news-item > a:hover > .img-post-thumb > img {opacity: 1; }
.img-post-thumb {position: relative; width: 100%; }
.img-post-thumb > p.only-logged-news {position: absolute; bottom: 20px; right: 0; background-color: #eaac3f; font-size: 11px; padding: 0.1rem 1rem; border-radius: 8px 0 0 8px; }
.news-item > a > .img-post-thumb > img.imglogo {position: absolute; width: 50% !important; min-height: inherit !important; top: 10%; right: 5%; opacity: 1; }
.news-item > a:hover > .img-post-thumb > img.imglogo {opacity: 0; }
.button-news {position: absolute; top: 3.5rem; right: 0; }
@media (max-width: 800px) {.button-news {position: relative; margin: -6rem 2rem 4rem; width: -webkit-fill-available; } 
.news-items {
    margin: 6rem 0;
}
section > .wrapper > .container a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section > .wrapper > .container a > button {
    width: 100%;
}
.projects-items {
    margin: 6rem 0 !important;
}
section > .wrapper > .container > .news-items a {
    align-items: flex-start;
}

}

/* style dla sekcji projektów i inicjatyw */
.projects-items {display: flex; flex-wrap: wrap; gap: 2rem; margin: 6rem 2rem; justify-content: flex-start; align-items: stretch; width: -webkit-fill-available;}
.project-item {background: #f5f5f5; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; color: #333; border-radius: 2.5rem; padding: 1.5rem; justify-content: space-between; flex: 1 48.5%; column-gap: 1.5rem; row-gap: 2rem; }
.project-item > p {flex: 0 1 50%; text-align: right; }
section#projekty-i-inicjatywy.transparent .project-item {background: #e8e8e8; color: #333; }
.details {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; flex: 1; }
p.project-item-date {margin: 0; color: #9a9a9a; }

.documents-items {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
    padding: 4rem 0;
}
.documents-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    background-color: #ededed;
    color: #333333;
    padding: 0.5rem 2rem;
    border-radius: 2rem;
    margin: 0 0 1rem 0;
}
.documents-item h2 {
    padding: 0 2rem 0 0;
    margin: 0;
}

img.stowarzyszenie-image.wp-post-image {
    width: auto;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 2rem;
}
img.news-item-thumbnail, img.news-item-thumbnail.wp-post-image {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    border-radius: 1rem;
}
section#dokumenty-czlonkowstwo, section#kontakt {
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}
.content-text {
    padding: 3rem 0;
}
.content {
    padding: 2rem 0;
}
p.alert-logged {
    background-color: #ffe6b9;
    padding: 1rem 2rem;
    border-radius: 12px;
    width: 100%;
}
p.alert-logged > span {
    font-weight: bold;
}
/* Style dla przycisków */
.primary, .primary-two {
    background-color: #eaac3d;
    font-family: 'Kanit', sans-serif;
    color: #333333;
    padding: 1.2rem 1.4rem;
    border-radius: 2rem;
    border: none;
    text-align: center;
    text-transform: uppercase;
    transition: 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.05rem;
}
.doc-button, .logg-out {
    background-color: #eaac3d;
    font-family: 'Kanit', sans-serif;
    color: #333333;
    padding: 0.6rem 1.8rem;
    border-radius: 2rem;
    border: none;
    text-align: center;
    text-transform: uppercase;
    transition: 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.05rem;
    min-height: 44px;
}
.primary:hover, .primary-two:hover, .doc-button:hover, .logg-out:hover {
    background-color: #245d54;
    color: #f5f5f5;
    cursor: pointer;
}
.primary-two:hover {
    background-color: #f5f5f5;
    color: #333333;
}

input[type="text"], input[type="email"], textarea {
    display: block;
    width: 100%;
    padding: 0.6rem;
    border-radius: 4px;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    background: transparent;
    font-size: 16px;
    color: #f5f5f5;
}
input::placeholder, textarea::placeholder {
  color: #f5f5f5;
  font-family: 'Kanit', sans-serif;
}
#kontakt textarea{
    height: 7rem;
}
#kontakt h1 {
  margin: 0 0 4rem 0;
}
input[type="submit"] {
    background-color: #f5f5f5;
    font-family: 'Kanit', sans-serif;
    color: #333333;
    padding: 1.2rem 1.7rem;
    border-radius: 1rem;
    border: none;
    text-align: center;
    text-transform: uppercase;
    transition: 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.05rem;
}

input[type="submit"]:hover {    
  background-color: #eaac3d;
    color: #333333;
    cursor: pointer;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.login-form form#loginform {
    max-width: 400px;
    width: 100%;
}
.login-form label {
    padding: 0 1rem;
    font-size: 0.9rem;
    font-family: 'Kanit', sans-serif;
}
.login-form p.login-remember {
    display: none;
}
.login-form input[type="text"], .login-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    background: #e6e6e6;
    font-size: 16px;
    color: #000000;
    font-weight: bold;
}
.login-form input::placeholder{
  color: #f5f5f5;
  font-family: 'Kanit', sans-serif;
}
.login-form input[type="submit"] {
    background-color: #2c6c63;
    font-family: 'Kanit', sans-serif;
    color: #ffffff;
    padding: 1.2rem 1.7rem;
    border-radius: 2rem;
    border: none;
    text-align: center;
    text-transform: uppercase;
    transition: 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.05rem;
}
.login-form input[type="submit"]:hover {    
  background-color: #eaac3d;
    color: #333333;
    cursor: pointer;
}






.columns {
    display: flex;
    justify-content: center;
}
.column {
    flex: 1;
    padding: 2rem 5rem 0;
    border-right: 1px solid #255e54;
}
.column:last-child {
    border: none;
}

.member-details > ul {
    margin: 0;
}
.member-details > ul > li {
    list-style: none;
    padding: 0.4rem 1rem;
}
.member-details > ul > li > span {
  font-weight: bold;
}
.config-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}