/*!
Theme Name: Jurajska Szkoła z TUSem
Theme URI: https://them.es/starter
Author: North by Design
Author URI: https://northbydesign.pl
Description: 
Version: 3.6.1
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: szkola-z-tusem
*/

/* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */

/* From http://codex.wordpress.org/CSS */

.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
	display: inline-block;
	max-width: 100%;
}

.gallery-item a img {
	display: block;
	-webkit-transition: -webkit-filter 0.2s ease-in;
	transition: -webkit-filter 0.2s ease-in;
	transition: filter 0.2s ease-in;
	transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}

.gallery-caption {
	display: block;
	text-align: left;
	padding: 0 10px 0 0;
	margin-bottom: 0;
}

.gallery-columns-1 .gallery-item {
	max-width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

.bypostauthor {
	font-weight: bold;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
/* Typografia i baza */
:root{
  /* Paleta marki */
  --brand-primary: #B60BCA;       /* fioletowy (primary) */
  --brand-primary-600: #5740CD;   /* ciemniejszy akcent fioletowy */
  --brand-secondary: #2b2f36;     /* grafit na nagłówki i nav */
  --brand-muted: #6c757d;         /* tekst pomocniczy */
  --brand-border: rgba(0,0,0,.08);
  --brand-bg: rgba(87, 64, 205, 0.04);  /* tło sekcji jasnych */

  /* Cienie i zaokrąglenia */
  --radius: .75rem;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
}

html, body{
  font-family: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #414141;
  background-color: #fff;
}
h1, h2, h3, .btn {
  font-family: 'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* Nawigacja */
.navbar{
  background: #fff;
  padding: 20px 0;
  font-family: 'Rajdhani';
  font-size: 1.2rem;
}

.navbar-brand{
  letter-spacing: .5px;
  color: var(--brand-secondary);
}

.navbar-brand .text-primary{
  color: var(--brand-primary) !important;
}

.nav-link{
  font-weight: 500;
  color: var(--brand-secondary);
}

.nav-link:hover{
  color: var(--brand-primary);
}

.navbar .btn{
  border-radius: .5rem;
  font-size: 1.2rem;
}
.logo {
  min-width: 150px;
  max-width: 250px;
  padding: 0 2rem;
}

/* Hero i tła sekcji */

/* HERO: pełna szerokość obrazu + ramka treści 50% odsunięta od prawej */
.hero-full-bleed{
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: stretch;     /* ważne: pełna wysokość kontenera */
  overflow: visible;        /* musi być widoczne, aby ramka mogła wyjść poza hero */
  background: #000;
}

.hero-full-bleed .hero-bg{
  position: absolute;
  inset: 0;
  background-image: url('img/hero.jpg');
  background-size: cover;
  background-position: center 25%;
}

/* Gradient czytelności – opcjonalnie */
.hero-full-bleed::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.hero-content{
  position: relative;
  width: 100%;
  z-index: 1;
  /* odsuwamy zawartość od krawędzi jeśli trzeba: */
  padding-inline: 1rem;
}

/* RAMKA: zaczyna się w połowie szerokości i wystaje połową wysokości */
.hero-frame{
  position: absolute;
  bottom: 0;
  right: 4vw;               /* odstęp od prawej krawędzi okna */
  transform: translateY(30%);
  left: 1%; 
  width: 50vw;              /* ramka ma 50% szerokości okna */
  max-width: 880px;
  min-width: 320px;
  color: #fff;
  padding: 2rem 2rem 2.25rem;
  backdrop-filter: blur(2px);
  background:  #B60BCA;
  border: 3px solid #B60BCA;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Tekst i przyciski w ramce */
.hero-frame h1{ color: #fff; letter-spacing: .2px; }
.hero-frame .lead{ color: #e9ecef; max-width: 60ch; }

.hero-frame .btn-primary{
  --bs-btn-bg: #5740CD;
  --bs-btn-border-color: #5740CD;
  --bs-btn-hover-bg: #5740CD;
  --bs-btn-hover-border-color: #5740CD;
  font-weight: 600; border-radius: .6rem;
}
.hero-frame .btn-outline-secondary{
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-hover-color: #2b2f36;
  font-weight: 600; border-radius: .6rem;
}


/* Kontrast przycisków na obrazie */
.hero-frame .btn-primary{
  --bs-btn-bg: #5740CD;
  --bs-btn-border-color: #5740CD;
  --bs-btn-hover-bg: #5740CD;
  --bs-btn-hover-border-color: #5740CD;
  font-weight: 600;
  border-radius: .6rem;
}

.hero-frame .btn-outline-secondary{
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-bg: #
}

header{
  background: linear-gradient(180deg, var(--brand-primary-100), #ffffff 65%);
}

.bg-light{
  background-color: #fff!important;
}

.placeholder-hero{
  background-color: #fff;
  background-image: linear-gradient(135deg, rgba(13,110,253,0.10) 25%, transparent 25%, transparent 50%, rgba(13,110,253,0.10) 50%, rgba(13,110,253,0.10) 75%, transparent 75%, transparent);
  background-size: 24px 24px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.placeholder-block{
  background-image: linear-gradient(180deg, rgba(13,110,253,0.06), rgba(13,110,253,0.015));
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
}

/* Karty */
.card{
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-title{
  font-weight: 700;
  color: var(--brand-primary);
}

.card {
  margin-bottom: 2vh;
  border: 0;
  border-radius: 0;
}

/* Nagłówki sekcji */
section h2{
  font-weight: 800;
  color: var(--brand-secondary);
}

section .text-muted{
  color: var(--brand-muted) !important;
  letter-spacing: .06em;
}

/* Przyciski – brandowe warianty */
.btn-primary{
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
  --bs-btn-focus-shadow-rgb: 13,110,253;
  border-radius: .6rem;
  font-weight: 600;
}
.btn-primary-600{
  --bs-btn-bg: var(--brand-primary-600);
  --bs-btn-border-color: var(--brand-primary-600);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: 13,110,253;
  color: #fff;
  border-radius: .6rem;
  font-weight: 600;
}
.btn-primary-600:hover, .wp-block-button .wp-block-button__link:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: #fff;
}

.btn-outline-secondary{
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: var(--brand-secondary);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-hover-color: #fff;
  border-radius: .6rem;
  font-weight: 600;
}

.wart-subtitle {
  color: var(--brand-primary); 
  padding: 1vh 0;
}
.mb-3 {
   color: var(--brand-primary-600); 
}
.p-4 {
   align-content: center;
}
.row>* {
  align-content: center;
}

/* Linki w treści */
a{
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover{
  color: var(--brand-primary-600);
  text-decoration: underline;
}

/* Domyślnie (duże ekrany) – ramka szeroka i wysoka */
.section-filar{
  margin-top: 10rem; /* odpowiada ~połowie ramki na desktopie */
}
.section-galeria {
    margin-top: 0rem;
}

/* <= 1400px */
@media (max-width: 1399.98px){
  .section-filar{ margin-top: 10rem; }
}

/* <= 1200px */
@media (max-width: 1199.98px){
  .section-filar{ margin-top: 10rem; }
}

/* <= 992px */
@media (max-width: 991.98px){
  .section-filar{ margin-top: 10rem; }
}

/* <= 768px – ramka mniejsza, mniejsza kompensacja */
@media (max-width: 767.98px){
  .section-filar{ margin-top: 10rem; }
}

/* <= 576px – jeszcze mniejsza ramka */
@media (max-width: 575.98px){
  .section-filar{ margin-top: 9rem; }
}


/* Listy w stopce i linki */
footer{
  background: #111317;
  color: #e9ecef;
}

footer .footer-link{
  color: #111317;
  text-decoration: none;
}

footer .footer-link:hover{
  color: #ffffff;
  text-decoration: underline;
}

footer hr{
  border-color: rgba(255,255,255,.12);
}

/* Obrysy/ramki */
.border{
  border-color: var(--brand-border) !important;
}

/* Drobne typograficzne akcenty */
.lead{
  color: #374151;
}

h1, .display-5{
  letter-spacing: .2px;
}

.sloneczko {
  position: absolute;
    right: 25vw;
    top: 70vh;
    height: 30vh;
    z-index: 1;
}

/* Responsywność */
@media (min-width: 992px){
  header .lead{
    max-width: 58ch;
  }
}
@media (max-width: 992px){
  .sloneczko{
    display: none;
  }
}

/* Utility – subtelne tło brandowe */
.bg-primary-subtle{
  background-color: var(--brand-primary-100) !important;
}

/* Utility – akcentowe poziome reguły */
.hr-accent{
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, var(--brand-primary), transparent 70%);
  opacity: 1;
  margin: 1.25rem 0;
}