/*
Theme Name: Web Theme
Theme URI: https://www.speedyweb.pl/strona-internetowa-wordpress/
Author: Speedyweb
Author URI: https://www.speedyweb.pl/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
Text Domain: speedyweb
Domain Path: /languages

*/

.main_btn {
	  display: inline-block;
    padding: 17px 34px;
    border-radius: var(--border-radius-btn);
    background-color: var(--color-primary); 
    color: var(--color-white); 
    text-decoration: none; 
	text-transform: uppercase;
    white-space: nowrap; 
    line-height: 1; 
	font-weight: 600;
	font-family: var(--font-family-headline);
	font-size: 16px; 
}
.main_btn:hover {
    background-color: var(--color-secondary); 
/*     color: var(--color-text);  */
}

.consultation-button {
    padding: 12px 24px;
    background-color: var(--color-primary); 
/*     color: var(--color-text);  */
	font-weight: 700;
	font-size: 14px; 
}
.consultation-button:hover {
    background-color: var(--color-secondary); 
/*     color: var(--color-text);  */
}

@media (max-width: 768px) {
    .consultation-button {
    	padding: 10px 18px;
    
    }
}
@media (max-width: 370px) {
    .consultation-button {
    	display: none;
    
    }
}

.footer-top {
    background-color: #f9f9f9;
    padding: 20px 0;
}

.footer-columns {
    display: grid; /* Ustawienie siatki CSS */
    grid-template-columns: 100%; /* Jeden kolumna na małych ekranach */
    gap: 1.5%; /* Odstęp między kolumnami */
}

.footer-column {
    margin-bottom: 20px;
}

.contact-info h3 {
    margin-top: 0;
}

.seo-city {
    display: grid; /* Ustawienie siatki CSS dla elementu seo-city */
    grid-template-columns: 50% 50%; /* Dwukolumnowy układ */
    gap: 10px; /* Odstęp między elementami */
}

.map iframe {
    width: 100%;
    height: 300px;
}

.copyright {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

.container {
    width: 100%;
    max-width: 1200px; /* Maksymalna szerokość kontenera */
    margin: 0 auto; /* Wyśrodkowanie kontenera */
    padding: 0 20px; /* Odstęp wewnątrz kontenera */
}

/* Zapytanie media dla małych ekranów */
@media screen and (min-width: 768px) {
    .footer-columns {
        grid-template-columns: 25% 30% 42%; /* Trzy kolumny na większych ekranach */
    }
}

/* Zapytanie media dla małych ekranów */
@media screen and (max-width: 767px) {
    .footer-columns {
        justify-content: center; 
    }
	.footer-column {
	    text-align: center; 
	}	
	footer .footer-column p {
	    text-align: center!important; 
	}	
	footer .footer-column .social-icons {
	    justify-content: center;
	}	
}

/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */

/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */

/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */
/* CCZ gr - Michał  */


/* HEADER menu - prevent from clicking  */

/* #menu-item-1393 a,
#menu-item-1419 a,
#menu-item-1050 a {
    pointer-events: none;
    cursor: default;
} */


a {
	cursor: pointer!important;
}
img {
	border-radius: var(--border-radius-img);
	box-shadow: var(--box-shadow-sm-elem);
}
.text_justify {
  	text-align: justify;
}
.page p {
	text-align: justify;
}
.page .cta-content p {
	text-align: center;
}
.wp-block-gallery img {
	box-shadow: none!important;
}

/* REVIEWS section  */
/* REVIEWS  */

@media screen and (max-width: 768px){
	.reviews .ti-footer.ti-footer-grid.source-Google {
		margin-top: 30px!important;
	}
}


/* END of REVIEWS  */
/* END of  REVIEWS section  */


/* SUBPAGES  */

.media_text_first .wp-block-media-text__content {
	padding: 0 10% 0 0;
}
.media_text_second .wp-block-media-text__content {
	padding: 0 0 0 10%;
}
.media_text_first .wp-block-media-text__media, 
.media_text_second .wp-block-media-text__media {
	display: flex;
 	justify-content: center;
	align-items: center;
	min-width: 0;

}
.media_text_first img,
.media_text_second img {
	margin: 0 auto;
	max-width: 100%;  
    max-height: 80vh; 
    width: auto;      
    height: auto;     
    object-fit: contain; 
}

.media_text_first img {
	margin-left: auto;
}
.media_text_second img {
	margin-right: auto;
}
 {
	
}
@media (max-width: 600px) {
	.media_text_first .wp-block-media-text__content {
		margin-top: 25px;
		padding: 0;
	}
	.media_text_second .wp-block-media-text__content {
		margin-top: 25px;
		padding: 0;
	}
}

/* FAQ  */
.rank-math-list-item {
	padding: 0 40px 30px;
}
@media (max-width: 768px) {
	.rank-math-list-item {
		padding: 0 20px 20px;
	}
}

/* O NAS - podstrona  */

/* CONTAINER LAYOUT */
.specializations_about_us {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to new rows */
    justify-content: center; /* Centers items in the last row */
    gap: 4em;
    width: 100%;
}

.spec_card, 
.spec_card * {
    cursor: pointer !important;
}

.spec_card {
    position: relative; 
    z-index: 8;
    /* 4 Columns: 100% minus 3 gaps of 4em, divided by 4 */
    width: calc((100% - 12em) / 4); 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

/* Optional: Slight hover animation */
.spec_card:hover {
    transform: translateY(-10px);
}

/* IMAGE RESET & FIX */
.spec_card figure {
    margin: 0;
    width: 100%;
}

.spec_card img {
    width: 100%;
    /* Forces all images to have the exact same portrait proportions */
    aspect-ratio: 4 / 5; 
    /* Stretches the image safely to fill the new uniform box */
    object-fit: cover; 
    /* Ensures the top of the photo (faces) is prioritized if it crops */
    object-position: center top; 
    display: block;
    border-radius: 16px; /* Matches the rounded corners from your mockup */
    box-shadow: var(--box-shadow-smaller-elem);
}

/* YOUR EXISTING TYPOGRAPHY STYLES */
.specializations_about_us h3 {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: var(--color-text, #333);
}

.specializations_about_us h4 {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    color: #808080;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .specializations_about_us {
        gap: 3rem;
    }
    .spec_card {
        /* 2 Columns: 100% minus 1 gap of 3rem, divided by 2 */
        width: calc((100% - 3rem) / 2); 
    }
}

@media (max-width: 768px) {
    .specializations_about_us {
        gap: 3rem;
    }
    .spec_card {
        /* 1 Column: Full width */
        width: 100%; 
    }
    .specializations_about_us h3 {
        margin-top: 10px !important;
        font-size: 22px;
    }
    .specializations_about_us h4 {
        font-size: 16px;
    }
}

/* END of O NAS - podstrona  */

/* KONTAKT - podstrona  */

/* udogodnienia  */

/* MAIN CONTAINER */
.home_attributes {
    padding: 40px;
    border: 2px solid var(--color-primary, #0EAC99);
    border-radius: 16px;
    background-color: #fff;
}

.home_attributes .attributes-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

/* INDIVIDUAL ITEM */
.attr-item {
    display: flex;
    align-items: center;
    width: calc(33.333% - 14px); 
    box-sizing: border-box;
}

/* NEW ICON STYLING (The Mask Trick) */
.attr-icon {
    width: 28px;
    height: 28px;
    margin-right: 12px;
    flex-shrink: 0;
    
    /* 1. Set the color using your variable */
    background-color: var(--color-primary, #0EAC99);
    
    /* 2. Use the inline CSS variable (--url) as the mask */
    -webkit-mask-image: var(--url);
    mask-image: var(--url);
    
    /* 3. Center and contain the mask */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.attr-text {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--color-text, #333);
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 991px) {
    .attr-item { width: calc(50% - 10px); }
}

/* MOBILE VIEW (2 Items per row) */
@media (max-width: 767px) {
    .home_attributes {
        padding: 25px 15px; /* Slightly tighter padding */
    }
    
    .home_attributes .attributes-wrap {
        row-gap: 20px; /* More vertical space between rows for readability */
        gap: 10px;     /* Smaller horizontal gap */
    }

    /* 2 columns on Mobile */
    .attr-item {
        /* 50% width minus half of the gap (5px) */
        width: calc(50% - 5px); 
        align-items: flex-start; /* Aligns icon to top if text breaks into 2 lines */
    }

    .attr-icon {
        width: 20px; 
        height: 20px;
        margin-right: 8px;
/*         margin-top: 2px;  */
    }

    .attr-text {
        font-size: 13px; /* Slightly smaller to prevent too many line breaks */
    }
}
@media (max-width: 420px) {
    .home_attributes { padding: 30px 20px; }
    .home_attributes .attributes-wrap { row-gap: 15px; }
    .attr-item { width: 100%; }
    
    .attr-icon {
        width: 22px; 
        height: 22px;
        margin-right: 10px;
    }
    .attr-text { font-size: 14px; }
}

/* END of udogodnienia  */

/* END of KONTAKT - podstrona  */


/* CENNIK - podstrona  */

/* Section & Container Wrapper */
.section-payments {
    padding: 40px 0;
    width: 100%;
}

/* The Beige Box */
.payments-box {
    background-color: var(--color-primary); 
    border-radius: var(--border-radius-img);       /* Smooth rounded corners */
    padding: 60px 40px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;    /* Ensures padding doesn't break width */
}
.payments-box h2 {
	margin-top: 0;
	color: #000;
}

/* Heading */
.payments-title {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 50px;
    color: #000; /* Or your theme's dark text color */
}

/* Grid Layout for Icons */
.payments-grid {
    display: flex;
    justify-content: center; /* Center items horizontally */
    gap: 80px;               /* Space between items on desktop */
    align-items: flex-end;   /* Aligns icons nicely if they have different heights */
    flex-wrap: wrap;         /* Safety wrap for smaller tablets */
}

/* Individual Item */
.payment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between icon and text */
}

/* Icon Styling */
.section-payments .payment-icon {
    display: block;
    height: 50px; /* Fixed height for consistency */
    width: auto;  /* Maintain aspect ratio */
    object-fit: contain;
    margin-bottom: 10px;
	box-shadow: none;
	border-radius: 0!important;
}
.section-payments .payment-icon.blik {
    height: 42px;
	margin-bottom: 15px;
    
}

/* Label Text */
.payment-label {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: #111;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
	.section-payments  {
		padding-bottom: 10px;
	}
	.section-payments .container {
		padding: 0;
	}
    .payments-box {
        padding: 40px 20px; /* Smaller padding on mobile */
    }

    .payments-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .payments-grid {
        flex-direction: column; 
		align-items: center;
        gap: 28px;
    }
	.payment-item {
		gap: 0; /* Space between icon and text */
	}
	.section-payments .payment-icon {
		margin-bottom: 2px;
	}
}


/* NEW TABLE  */

/* Selects an H2 ONLY if the very next element is .new_table */
h2:has(+ .wp-block-table.new_table) {
    margin: 40px 0 20px;
}

/* 1. Container Styling (Modern Rounded Look) */
.new_table {
    border-radius: var(--border-radius-img);
    overflow: hidden; /* Clips the corners for the first/last rows */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    margin-bottom: 30px;
    border: none;
}

.new_table table {
    width: 100%;
    border-collapse: collapse; /* Removes default gaps */
    border-spacing: 0;
    border: none;
    font-family: inherit;
}

/* 2. Global Cell Styling */
.new_table td {
    padding: 16px 24px; /* More padding = Modern look */
    border: none; /* No border lines as requested */
    font-size: 0.95rem;
    color: #333; /* Dark text for readability */
}

/* 3. The Header Row (First Row) */
/* We target the first row specifically since you don't use <thead> */
.new_table tbody tr:first-child {
    background-color: var(--color-primary);
    font-weight: 600;
}

.new_table tbody tr:first-child td {
    color: #fff; /* White text on primary background */
    text-transform: uppercase; /* Optional: Makes it look more like a header */
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* 4. Column Widths & Alignment */

/* First Column: 70% | Left */
.new_table tr td:first-child {
    width: 70%;
    text-align: left;
}

/* Second & Third Column: 15% | Center */
.new_table tr td:nth-child(2),
.new_table tr td:nth-child(3) {
    width: 15%;
    text-align: center;
}

/* 5. Zebra Striping (Alternating Colors) */

/* Logic: 
   Row 1 is Primary (handled above).
   Row 2 is Even (White).
   Row 3 is Odd (Gray).
*/

/* Default background for all rows */
.new_table tbody tr {
    background-color: #fff;
    transition: background-color 0.2s ease;
}

/* Apply Gray to Odd rows (3, 5, 7...) */
/* We skip the first-child because it has the Primary color */
.new_table tbody tr:nth-child(odd):not(:first-child) {
    background-color: #f9f9f9; /* Very light modern gray */
}

/* 6. Hover Effect (Optional but recommended) */
.new_table tbody tr:not(:first-child):hover {
    background-color: #f1f1f1;
}

/* 7. Mobile Fix */
@media (max-width: 768px) {
	
    h2:has(+ .wp-block-table.new_table) {
		margin: 40px 0 12px;
	}
    .new_table {
        overflow-x: visible;
        width: 100%;
    }

    /* 2. Force Table to Fit Screen Width */
    .new_table table {
        min-width: 0; /* Allow shrinking below 600px */
        width: 100%;
        table-layout: fixed; /* CRITICAL: Forces table to stay exactly 100% width */
    }

    /* 3. Reduce Size & Spacing for Mobile */
    .new_table td {
        padding: 10px 10px; /* Very small side padding */
        font-size: 12px;   /* Smaller text */
        line-height: 1.4;
        word-wrap: break-word; /* Prevents long words from stretching the table */
    }

    /* 4. Adjust Header Text specifically */
    .new_table tbody tr:first-child td {
        font-size: 11px; /* Even smaller for headers to prevent wrap */
        letter-spacing: 0;
        padding-inline: 10px;
    }
    
    /* 5. Optional: Adjust widths slightly for mobile balance */
    /* Often 70% is too wide on mobile. 60/20/20 is usually safer */
    .new_table tr td:first-child {
        width: 60%; 
    }
    .new_table tr td:nth-child(2),
    .new_table tr td:nth-child(3) {
        width: 20%;
    }
}

/* END of CENNIK - podstrona  */