/*
Theme Name: SRM
Theme URI:
Description:
Author: Krzysiek Dróżdż (WPmagus.pl)
Author URI: http://wpmagus.pl/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: srm
*/


/* =Fonts
-------------------------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Exo:400,500,600,700,800&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700&subset=latin,latin-ext);

/* font-family: 'Open Sans', sans-serif; */
/* font-family: 'Exo', sans-serif; */


/* =Images
-------------------------------------------------------------- */

img,
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {max-width: 100%; height: auto;}

.alignleft,
img.alignleft {display: inline; float: left; margin-right: 24px; margin-top: 4px;}
.alignright,
img.alignright {display: inline; float: right; margin-left: 24px; margin-top: 4px;}
.aligncenter,
img.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}
img.alignleft,
img.alignright,
img.aligncenter {margin-bottom: 12px;}

.wp-caption {background: #f1f1f1; line-height: 18px; margin-bottom: 20px; max-width: 632px !important; padding: 4px; text-align: center;}
.wp-caption img {margin: 5px 5px 0; max-width: 622px;}
.wp-caption p.wp-caption-text {color: #777; font-size: 12px; margin: 5px;}
.wp-smiley {margin: 0;}

.gallery {margin: 0 auto 18px;}
.gallery .gallery-item {float: left; margin-top: 0; text-align: center; width: 33%;}
.gallery-columns-2 .gallery-item {width: 50%;}
.gallery-columns-4 .gallery-item {width: 25%;}
.gallery img {border: 2px solid #cfcfcf;}
.gallery-columns-2 .attachment-medium {max-width: 92%; height: auto;}
.gallery-columns-4 .attachment-thumbnail {max-width: 84%; height: auto;}
.gallery .gallery-caption {color: #777; font-size: 12px; margin: 0 0 12px;}
.gallery dl {margin: 0;}
.gallery img {border: 10px solid #f1f1f1;}
.gallery br+br {display: none;}

/* =Styles
-------------------------------------------------------------- */

a {color: #38b4e7;}
    a:hover {color: #0581b4;}

.clearfix {*zoom: 1;}
    .clearfix:before, .clearfix:after {display: table; content: ""; line-height: 0;}
    .clearfix:after {clear: both;}

#header {position: relative;}
    #header a {color: #000;}
        #header a:hover {text-decoration: none;}
    #header #site-title {font-size: 24px; font-weight: 500; margin: 10px 0; padding: 0; line-height: 100%; font-family: Exo, sans-serif;}
        #header #site-title a {display: block; padding-left: 144px; background: url(images/logo-black.png) no-repeat left top; line-height: 55px; padding-top: 20px;}
    #header .menu {padding-left: 0; list-style: none; padding: 0 15px; border-bottom: 2px solid #000; font-weight: 600;}
        #header .menu li {display: inline-block; margin-right: 15px; position: relative;}
            #header .menu li a {display: inline-block; padding: 6px 0 12px 0; margin-bottom: -8px;}
        #header .menu > .current-menu-item > a, #header .menu .current-menu-ancestor > a, #header .menu li:hover > a {background: url(images/arrow-menu.png) no-repeat 50% bottom;}
        #header .menu ul {display: none; position: absolute; top: 30px; left: -15px; right: -15px; min-width: 180px; padding: 15px 0 0 0; border: 1px solid #000; border-top: 0; z-index: 999;}
            #header .menu ul li {width: 100%; background: #fff; padding: 0; margin: 0; display: block; height: auto;}
            #header .menu ul li:last-child {padding-bottom: 15px;}
                #header .menu ul li a {padding: 6px 15px; font-weight: normal; display: block; margin: 0; font-size: 14px;}
                #header .menu ul .current-menu-item > a {background: #eee;}
                #header .menu ul li:hover a {background: #eee;}
        #header .menu li:hover ul {display: block;}
    #header .header-top {position: absolute; top: 0; right: 0; color: #666; font-size: 13px;}
        #header .header-top ul {list-style: none; padding: 0;}
        #header .header-top li {display: inline-block; padding: 6px 6px; margin-left: 10px; }
        #header .header-top a {color: #666;}
            #header .header-top .contact a {padding-left: 30px; background: url(images/icons.png) no-repeat -120px -20px;}
                #header .header-top .contact:hover a {background-position: -140px 0;}
            #header .header-top .login {padding-left: 30px; background: url(images/icons.png) no-repeat -80px -60px;}
                #header .header-top .login:hover {background-position: -100px -40px;}
            #header .header-top .search-container {border-left: 1px solid #666;}
            #header .header-top .search-container input[type="text"] {margin-right: 4px; width: 60px;
                -webkit-transition: width .4s ease-in-out;
                -moz-transition: width .4s ease-in-out;
                -o-transition: width .4s ease-in-out;
                transition: width .4s ease-in-out;
                }
                #header .header-top .search-container:hover input[type="text"],
                #header .header-top .search-container input[type="text"]:focus {width: 160px;}
            #header .header-top .search-toggle {padding-left: 20px; margin-top: 2px; border: 0; background: url(images/icons.png) no-repeat -40px -100px; text-indent: -9999px; display: block; float: right;}
                #header .header-top .search-toggle:hover {background-position: -60px -80px;}

.slider {position: relative;}
    .slider .slide {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .slider .slider-overlay {margin: 0; height: 120px; position: absolute; bottom: 0; list-style: none; padding: 0; z-index: 300; background: url(images/slider-shadow.png) repeat-x left bottom;}
        .slider .slider-overlay li {display: block; height: 120px; float: left; width: 25%; color: #fff;}
            .slider .slider-overlay li a {color: #fff;}
                .slider .slider-overlay li a:hover {text-decoration: none;}
            .slider .slider-overlay li span {display: block; font-size: 20px; border-bottom: 2px solid #fff; padding: 8px 0; margin-bottom: 8px;}
        .slider .slider-overlay .so-1 {background: url(images/bg-blue-50.png) repeat left top;}
        .slider .slider-overlay .so-2 {background: url(images/bg-blue-40.png) repeat left top;}
        .slider .slider-overlay .so-3 {background: url(images/bg-blue-30.png) repeat left top;}
        .slider .slider-overlay .so-4 {background: url(images/bg-blue-20.png) repeat left top;}

.home #slider-main {height: 420px;}
#slider-main {height: 120px;}

/* Non-home pages: overlay 1 rząd (60px) z solidnym tłem + slider trochę wyżej */
body:not(.home) #slider-main { height: 180px; }
body:not(.home) .slider .slider-overlay { height: 60px; }
body:not(.home) .slider .slider-overlay li {
    height: 60px;
    overflow: hidden;
    background-image: none !important;
    background-color: rgba(5, 129, 180, 0.92) !important;
}
body:not(.home) .slider .slider-overlay li:nth-child(even) {
    background-color: rgba(4, 109, 153, 0.92) !important;
}
body:not(.home) .slider .slider-overlay li span {
    font-size: 14px;
    padding: 4px 0;
    margin-bottom: 2px;
}

#main {}
    #main h1, #main h2, #main h3 {font-weight: 600;}
    #main h2 {font-size: 20px;}
    #main h3 {font-size: 16px;}
    #main .section-title {border-bottom: 2px solid #000; font-size: 14px; text-transform: uppercase; font-weight: 800; padding-bottom: 10px; letter-spacing: 3px; margin-bottom: 24px;}
        #main .breadcrumbs {height: 47px; border-bottom: 2px solid #000; font-size: 14px; text-transform: uppercase; font-weight: 800; padding-bottom: 10px; letter-spacing: 3px; margin-bottom: 24px;}
    #main .entry-title {color: #000; margin: 0; font-size: 25px; margin-bottom: 10px;}
        #main .entry-title a {color: #000;}
            #main .entry-title a:hover {color: #0581b4; text-decoration: none;}
    #main .entry-meta {margin-bottom: 10px; font-size: 13px; color: #999;}
    #main .entries {margin-bottom: 36px;}
    #main .entry {margin-bottom: 24px; padding-top: 24px; border-top: 1px solid #ddd;}
        #main .entry:first-child {padding-top: 0; border-top: none;}
    #main .entry table {margin: 1em auto;}

    .experts-filter-container {background: #dfdfdf; padding: 8px; margin-bottom: 24px;}
        .experts-letter-nav {list-style: none; padding: 0; float: left; margin-bottom: 0;}
            .experts-letter-nav li {display: inline-block; text-transform: uppercase; padding: 4px; margin: 0 1px;}
            .experts-letter-nav li a {color: #000;}
            .experts-letter-nav .current-letter a {font-weight: 700;}
        .experts-filter-form {float: right; position: relative;}
            .experts-filter-form input[type="text"] {width: 160px; padding-right: 20px;}
            .experts-filter-form input[type="submit"] {position: absolute; top: 4px; right: 3px; width: 20px; height: 20px; background: url(images/icons.png) no-repeat -40px -100px; text-indent: -9999px; display: block; border: 0;}
                .experts-filter-form input[type="submit"]:hover {background-position: -60px -80px;}

    .entry.expert ul.meta {list-style: none; padding: 0;}
    .entry.expert .expert-thumbnail-placeholder {float: left; display: block; width: 140px; height: 160px; background: #eee; margin-right: 24px; }

    .entry.event ul.meta {list-style: none; padding: 0;}
    .entry.event form {background: #f5f5f5; padding: 1em; margin: 0 5%;}
        .entry.event form table {}
        .entry.event form table td {padding-bottom: 6px; vertical-align: top;}
        .entry.event form table label {width: 200px; font-weight: normal;}
        .entry.event form table input[type="text"], .entry.event form table textarea {width: 300px;}
        .entry.event form table input[type="submit"] {margin-top: 10px; background: red; padding: 4px 8px; border: 0; color: #fff; background: #0581b4;}
            .entry.event form table input[type="submit"]:hover {background: #38b4e7; text-decoration: underline;}
        .entry.event form .req {color: #ee0000;}
        .entry.event form .form-error {font-size: 80%; color: #ee0000;}
        .entry.event .event-participants .cancelled {color: #aaa;}
        .entry.event .event-participants li {margin: 0 auto; max-width: 480px;}
            .entry.event .event-participants li:hover {background: #f0f0f0;}

        table.srm-event-participants {width: 480px;}
            table.srm-event-participants th {text-align: left;}

        .entry.event form.srm-event-participant-actions {display: inline; padding: 0; background: transparent; margin: 0 .5em; float: right;}
            .entry.event form.srm-event-participant-actions input {padding: 0; margin: 0; border: 0; background: transparent; display: inline; color: #38b4e7;}
            .entry.event form.srm-event-participant-actions input:hover {border: 0; background: transparent; display: inline; color: #0581b4; text-decoration: underline;}
            .entry.event form.srm-event-participant-actions input, .entry.event form.srm-event-participant-actions a {margin: 0 .2em;}

         
    .expert-info dl {}
    .expert-info dt { float:left; clear:left; width: 100px; font-weight: normal;}
    .expert-info dd { margin-left: 100px }

    .expert-completed-trainings {width: 100%;}
        .expert-completed-trainings th {text-align: left;}
        .expert-completed-trainings td {text-align: left;}
        .entry form.srm-expert-completed-training-actions {display: inline; padding: 0; background: transparent; margin: 0 .5em; float: right;}
            .entry form.srm-expert-completed-training-actions input {padding: 0; margin: 0; border: 0; background: transparent; display: inline; color: #38b4e7;}
            .entry form.srm-expert-completed-training-actions input:hover {border: 0; background: transparent; display: inline; color: #0581b4; text-decoration: underline;}
            .entry form.srm-expert-completed-training-actions input, .entry.event form.srm-expert-completed-training-actions a {margin: 0 .2em;}
            
            
    .category-subcategories-container {background: #dfdfdf; padding: 8px; margin-bottom: 24px;}
        .category-subcategories-container select {margin-left: 1em;}
        .category-subcategories-container label {font-weight: normal;}

        
    #main .wp-pagenavi {clear: both; padding-top: 2em; text-align: center; font-size: 90%;}
    #main .wp-pagenavi a, #main .wp-pagenavi span {text-decoration: none; border: 0; background: #999; color: #fff; margin: 2px; display: inline-block; width: 32px; line-height: 28px; text-align: center;}
    #main .wp-pagenavi a:hover, #main .wp-pagenavi span.current {background: #0581b4; color: #fff;}
    #main .wp-pagenavi span.current {font-weight: bold;}
    #main .wp-pagenavi span.pages {width: auto; background: transparent; color: #000;}

    
#sidebar {}
    #sidebar h3 {font-size: 20px;}
    #sidebar h4 {font-size: 20px;}

    #sidebar .calendar-container {position: relative;}
        #sidebar .calendar-container .calendar-nav {position: absolute; top: 0; display: block; width: 32px; height: 32px; line-height: 32px; background: #999; color: #fff; text-align: center; font-weight: 900;}
            #sidebar .calendar-container .calendar-nav:hover {text-decoration: none; background: #0581b4;}
            #sidebar .calendar-container .calendar-prev {right: 36px;}
            #sidebar .calendar-container .calendar-next {right: 0;}
        #sidebar .calendar-container .calendar {width: 100%;}
        #sidebar .calendar-container .calendar td, #sidebar .calendar-container .calendar th {text-align: center; padding: 0;}
        #sidebar .calendar-container .calendar .other-month {color: #cfcfcf;}
        #sidebar .calendar-container table td a, .calendar-container table td span {display: block; padding: 4px 0;}
        #sidebar .calendar-container table .event-link {background: #0581b4; color: #fff; text-decoration: none;}
            #sidebar .calendar-container table .event-link.mouse-over {background: #38b4e7; color: #fff; text-decoration: none;}

#footer {background: #595959; font-size: 13px; color: #fff; margin-top: 30px;}
    #footer a {color: #fff;}
    #footer .widget {height: 172px; margin-top: 15px; margin-bottom: 15px;}
    #footer .widget:nth-child(2), #footer .widget:nth-child(3) {border-left: 1px solid #777;}
    #footer ul {list-style: none; padding-left: 0;}

    #footer .facebook {display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url(images/icons.png) no-repeat -20px -120px; text-indent: -9999px;}
    #footer .rss {display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url(images/icons.png) no-repeat 0 -140px; text-indent: -9999px;}

    #footer .copyright {border-top: 1px solid #777; color: #777; padding: 15px 0; margin: 0; font-weight: 600;}
        #footer .copyright a {color: #777;}


#fancybox-wrap, #fancybox-wrap * {-moz-box-sizing: content-box; box-sizing: content-box;}


.entry-content #loginform {width: 400px; margin: 1em auto; background: #f5f5f5; padding: 1em;}
    .entry-content #loginform label {width: 160px; font-weight: normal;}
    .entry-content #loginform input[type="text"], .entry-content #loginform input[type="password"] {width: 200px;}
    .entry-content #loginform input[type="submit"] {display: block; margin: 1em auto 0 auto; background: red; padding: 4px 8px; border: 0; color: #fff; background: #0581b4;}

/* Googlemaps image fix */
.maps img{
    max-width:none !important;
}
.maps label{
    width: auto; display:inline !important;
}


/* =RWD
-------------------------------------------------------------- */

/* Kontener responsywny — zastępuje blokujące @media (min-width:0px) */
.container {width: 100%; max-width: 970px; padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
@media (min-width: 768px) {
    .container {width: 750px;}
}
@media (min-width: 992px) {
    .container {width: 970px;}
}

/* ---------------------------------------------------------------
   HAMBURGER MENU — mobile nav toggle
--------------------------------------------------------------- */

#menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    font-size: 24px;
    line-height: 1;
    float: right;
    margin-top: 14px;
    color: #000;
}

/* ---------------------------------------------------------------
   SLIDER — responsywny
   Rozwiązanie: padding-bottom trick (aspect ratio) zamiast height stałej.
   Na desktop strona główna: proporcja ~970:420 = 43.3%
   Na desktop pozostałe strony: proporcja ~970:120 = 12.4%
   Slider cycle.js nadal działa — .slide ustawione absolute fill.
--------------------------------------------------------------- */

.home #slider-main {height: 0; padding-bottom: 43.3%; min-height: 0;}
/* Non-home: obraz 12.4% + 60px na rząd kafelków */
#slider-main {height: 0; padding-bottom: calc(12.4% + 60px); min-height: 0;}

/* Slide wypełnia cały obszar kontenera padding-bottom */
.slider .slide {width: 100%;}
.slider .slide img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* Overlay kafelki — skaluje się z sliderem */
.slider .slider-overlay {
    height: 30%;      /* 30% wysokości slidera (~120/420) */
    width: 100%;
}
.slider .slider-overlay li {
    height: 100%;
    font-size: clamp(11px, 1.3vw, 14px);
    padding: 6px 8px;
    box-sizing: border-box;
    overflow: hidden;
}
.slider .slider-overlay li span {
    font-size: clamp(13px, 1.6vw, 20px);
    padding: 4px 0;
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------
   MEDIA QUERIES — mobile first (<768px)
--------------------------------------------------------------- */

@media (max-width: 767px) {

    /* -- Header -- */
    #header {padding-bottom: 0;}

    #header #site-title a {
        padding-left: 60px;
        background-size: auto 38px;
        line-height: 44px;
        padding-top: 4px;
    }

    /* header-top (kontakt/login) — nie absolute na mobile */
    #header .header-top {
        position: static;
        border-top: 1px solid #eee;
        padding: 4px 0;
        font-size: 12px;
    }
    #header .header-top li {
        margin-left: 0;
        margin-right: 8px;
        padding: 4px 2px;
    }

    /* Hamburger */
    #menu-toggle {display: block;}

    /* Menu główne — zwinięte domyślnie */
    #header .menu {
        display: none;
        padding: 0;
        border-bottom: none;
        border-top: 2px solid #000;
    }
    #header .menu.menu-open {display: block;}

    #header .menu li {
        display: block;
        margin-right: 0;
        border-bottom: 1px solid #eee;
    }
    #header .menu li a {
        display: block;
        padding: 10px 15px;
        margin-bottom: 0;
    }
    /* Submenu — zawsze widoczne (nie hover) */
    #header .menu ul {
        position: static;
        display: block;
        border: none;
        padding: 0;
        min-width: 0;
    }
    #header .menu ul li {
        background: #f5f5f5;
    }
    #header .menu ul li a {
        padding-left: 30px;
    }
    /* Wyłącz hover-show submenu na mobile */
    #header .menu li:hover ul {display: block;}

    /* -- Slider — mobile: proporcja + 130px na 2 rzędy overlay kafelków -- */
    .home #slider-main {padding-bottom: calc(56% + 130px);}
    #slider-main {padding-bottom: calc(28% + 130px);}

    /* Overlay kafelki: position:absolute bottom:0, 2×2 grid, solidne tła */
    .slider .slider-overlay {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 130px;
        display: flex;
        flex-wrap: wrap;
        background: none;
    }
    .slider .slider-overlay li {
        width: 50%;
        height: 65px;
        font-size: 12px;
        padding: 6px 10px;
        box-sizing: border-box;
        overflow: hidden;
        background: #0581b4 !important;
        color: #fff;
    }
    .slider .slider-overlay li:nth-child(even) {background: #046d99 !important;}
    .slider .slider-overlay li a {color: #fff;}
    .slider .slider-overlay li span {
        font-size: 13px;
        padding: 3px 0;
        margin-bottom: 3px;
        border-color: rgba(255,255,255,0.5);
    }

    /* -- Expert info DL/DT -- */
    .expert-info dt {float: none; width: auto; font-weight: 600;}
    .expert-info dd {margin-left: 0; padding-left: 1em; margin-bottom: 6px;}

    /* -- Mapa -- */
    #map-canvas {width: 100% !important; max-width: 100% !important;}

    /* -- Formularz zapisu -- */
    .entry.event form {margin: 0;}
    .entry.event form table {width: 100%;}
    .entry.event form table tr {display: block; margin-bottom: 8px;}
    .entry.event form table td {display: block; padding-bottom: 2px;}
    .entry.event form table label {width: auto; display: block;}
    .entry.event form table input[type="text"],
    .entry.event form table textarea {width: 100%; max-width: 100%; box-sizing: border-box;}

    /* -- Tabela uczestników -- */
    table.srm-event-participants {width: 100%;}

    /* -- Formularz logowania -- */
    .entry-content #loginform {width: 100%; max-width: 400px; box-sizing: border-box;}
    .entry-content #loginform input[type="text"],
    .entry-content #loginform input[type="password"] {width: 100%; max-width: 200px; box-sizing: border-box;}

    /* -- Filtr rzeczoznawców -- */
    .experts-filter-container {display: flex; flex-direction: column; gap: 8px;}
    .experts-letter-nav {float: none;}
    .experts-filter-form {float: none; margin-top: 4px;}
    .experts-filter-form input[type="text"] {width: 100%; max-width: 200px;}

    /* -- Footer widgets -- */
    #footer .widget {height: auto; min-height: 0;}
    #footer .widget:nth-child(2),
    #footer .widget:nth-child(3) {border-left: none; border-top: 1px solid #777;}
}

/* ---------------------------------------------------------------
   TABLET (768px – 991px)
--------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
    .container {padding-left: 20px; padding-right: 20px;}

    /* Overlay kafelki na tablecie: 2 kolumny, nieco więcej miejsca */
    .slider .slider-overlay li {font-size: 12px; padding: 6px 8px;}
    .slider .slider-overlay li span {font-size: 15px;}

    /* Formularz zapisu — węższe pole, ale nie blokujące */
    .entry.event form table input[type="text"],
    .entry.event form table textarea {width: 200px;}
    .entry.event form table label {width: 160px;}
}

/* =Accessibility
-------------------------------------------------------------- */

/* Focus visible — nawigacja klawiaturą */
*:focus { outline: 2px solid #0581b4; outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 2px solid #0581b4; outline-offset: 2px; }

/* Skip to content */
.skip-link {
    position: absolute; top: -40px; left: 0; z-index: 9999;
    background: #0581b4; color: #fff; padding: 6px 12px;
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Screen-reader only utility */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Zapobiega auto-zoom iOS Safari przy focusie na input < 16px */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, select { font-size: 16px; }