/*
	Theme Name: Bestpet custom theme
	Description: Custom WordPress Theme
	Version: 1.0.0
	Author: nikolic.win
	Tags: Blank, HTML5, CSS3
	License: MIT
*/
/* VARIABLES */
:root {
    --cta-color: #2a5084;
    --cta-color2: rgb(121 61 62);
    --base-color: #2a5084;
    --black-color:#212529;
    --beige:rgb(253, 252, 240);
    --light-grey: #E9E9E9;
    --grey: #616161;
    --error: #ba1a1a;
    --secondary-color2: #fdacac;
    --secondary-color:#fdfcf0;
    --color-muted:#6c757d;
    --primary-font: "Nunito", sans-serif;
    --alt-font: 'Caveat', cursive;
    --container:114rem;
    --radius:4px;
    font-size: 62.5%;
}

/* =========================
   BASE
========================= */

:root {
  --font-heading: 'Caveat', cursive;
  --font-body: 'Nunito', sans-serif;

  --color-text: #222;
  --color-muted: #555;
--baseline: 32px;
  --max-width: 800px;
}

/* =========================
   BODY
========================= */

body {
  font-family: var( --primary-font);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text);
  background-color: rgb(250 250 243);
  letter-spacing: 0.2px;
      background-image: linear-gradient(to bottom, transparent calc(var(--baseline) - 1px), #e3e3dc calc(var(--baseline) - 1px), #e3e3dc var(--baseline)), linear-gradient(to right, transparent 79px, #fdacac 79px, #fdacac 81px, transparent 81px);
      background-size: 100% var(--baseline), 100% 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background-color 0.4s ease, background-image 0.4s ease;
}


.main-wrapper {
    display: flex;
    gap: 2.4rem;
    flex: 1 1 auto;
    padding-top: 2rem;
    padding-bottom: 4.8rem;
}

.page-content {
    max-width: var(--container);
    margin: 0 auto;
    width: 100%;
}

main {
    flex: 1;
}
/* =========================
   HEADINGS
========================= */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: 1px;
}

h1 {
  font-size: 5rem;
  color: var(--base-color);
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 20px;
}

/* ✏️ rukom podvučeno */
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #000;
  margin-top: 4px;
  transform: rotate(-2deg);
}

/* =========================
   PARAGRAPH
========================= */

p {
  margin-bottom: 16px;
  max-width: var(--max-width);
}

/* =========================
   LINKS
========================= */

a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

/* marker efekat */
/*a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 0, 0.4);
  z-index: -1;
  transition: 0.2s;
}*/

a:hover::after {
  height: 10px;
}

/* =========================
   MENU
========================= */
/* Osnovni stil za ikonicu u meniju */
li.home a::before {
    font-family: 'Material Symbols Outlined';
    content: "home"; /* Naziv ikonice */
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease; /* transition-transform */
    font-size: 2.3rem;
    /* Zamena za text-stone-400 (siva boja) */
    color: #a8a29e; 
}

/* Efekat rotacije kada se pređe mišem preko celog <li> elementa */
li.home:hover a::before {
    transform: rotate(3deg); /* group-hover:rotate-3 */
}

/* Osnovni stil za ikonicu u meniju sa klasom .school */
li.school a::before {
    font-family: 'Material Symbols Outlined';
    content: "school"; /* Naziv ikonice iz Material seta */
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 2.3rem;
    
    /* Zamena za text-stone-400 */
    color: #a8a29e; 
}

/* Efekat rotacije na hover za stavku .school */
li.school:hover a::before {
    transform: rotate(3deg);
}


/* Osnovni stil za ikonicu u meniju sa klasom .doc */
.doc a::before {
    font-family: 'Material Symbols Outlined';
    content: "description"; /* Možeš koristiti i "article" ako ti se više sviđa */
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 2.3rem;
    
    /* Zamena za text-stone-400 */
    color: #a8a29e; 
}

/* Efekat rotacije na hover za stavku .doc */
.doc:hover a::before {
    transform: rotate(3deg);
}


/* Osnovni stil za ikonicu u meniju sa klasom .team */
.team a::before {
    font-family: 'Material Symbols Outlined';
    content: "group"; /* Alternativa: "badge" za službeniji izgled */
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 2.3rem;
    
    /* Boja stone-400 */
    color: #a8a29e; 
}

/* Efekat rotacije na hover za stavku .team */
.team:hover a::before {
    transform: rotate(3deg);
}


aside ul {
    display: flex;
    flex-direction: column;
    padding: 7px;
    list-style: none;
    gap: 1.2rem;
    position: sticky;
    top: 2.4rem;
}

aside ul li a {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none!important;
    text-decoration-line:none!important;
    text-align: center;
    color: var(--color-muted);
}
aside ul li.current-menu-item a {
    text-decoration: none!important;
    text-decoration-line:none!important;
}
/* =========================
   SMALL TEXT
========================= */

small {
  font-size: 14px;
  color: var(--color-muted);
}

/* =========================
   BLOCKQUOTE
========================= */

blockquote {
  font-family: var(--font-heading);
  font-size: 22px;
  padding-left: 15px;
  border-left: 3px solid #000;
  transform: rotate(-1deg);
}

/* =========================
   IMAGE CAPTION
========================= */

figcaption {
  font-family: var(--font-heading);
  font-size: 16px;
  margin-top: 5px;
  color: #444;
}

/* =========================
   LOGO
========================= */

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo .title {
  font-family: var(--font-heading);
  font-size: 36px;
  letter-spacing: 2px;
}

.logo .subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  margin-top: 2px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }


  .footer ul{
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .school-posts-grid {
    grid-template-columns: 1fr!important;
  }
  aside {
    display: none;
  }
  .page-content {
    padding-left: 30px;
    padding-right: 10px;
  }

  body {
    background-image: 
            linear-gradient(to bottom, transparent calc(var(--baseline) - 1px), #e3e3dc calc(var(--baseline) - 1px), #e3e3dc var(--baseline)), 
            linear-gradient(to right, transparent 14px, #fdacac 14px, #fdacac 16px, transparent 16px);
  }

  .single-post-content {
    flex-direction: column!important;
  }
}






/* =========================
   HEADER
========================= */
/* Hamburger dugme */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--base-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}

/* Animacija za hamburger (X ikonica) */
.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobilni meni */
.main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 99;
    transition: right 0.4s ease-in-out;
    padding-top: 100px;
}

.main-nav.active {
    right: 0;
}

.main-nav ul {
    list-style: none;
    padding: 0 30px;
}

.main-nav ul li {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.3s ease;
}

.main-nav.active ul li {
    opacity: 1;
    transform: translateX(0);
}

.main-nav .menu-item-has-children {
    position: relative;
}
.main-nav .menu-item-has-children .sub-menu a {
    white-space: nowrap;
    font-size: 2rem;
}
@media only screen and (min-width: 1025px) {
    .main-nav .menu-item-has-children svg {
        position: relative;
        top: 6px;
        width: 1.8rem;
        right: -3px;
    }
    .main-nav .menu-item-has-children .sub-menu {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        left: -3.2rem;
        list-style: none;
        opacity: 0;
        padding: 1rem 2rem;
        position: absolute;
        top: calc(100% + 2rem);
        transform: translateY(-1rem);
        transition: all .23s ease;
        visibility: hidden;
        z-index: -1;
    }
    .main-nav .menu-item-has-children:hover .sub-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        z-index: 2;
    }
}

/* Mobilni podmeni - osnovni stilovi */
@media screen and (max-width: 1024px) {
    .dark .main-nav {
    background-color: #25282c;
    color: #fff;
}
.dark .main-nav {
        background-image: linear-gradient(to bottom, transparent calc(var(--baseline) - 1px), #2d3135 calc(var(--baseline) - 1px), #2d3135 var(--baseline)) !important;
}


  .main-nav .menu-item-has-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .main-nav .menu-item-has-children > a {
    flex-grow: 1;
  }

  /* Стилови за SVG стрелицу */
  .main-nav .menu-item-has-children > svg {
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  /* Ротација стрелице када је подмени отворен */
  .main-nav .menu-item-has-children.open > svg {
    transform: rotate(180deg);
  }

  /* Подмени (скривен по дефалту са скривеном висином ради анимације) */
  .main-nav .sub-menu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: var(--beige);
    transition: max-height 0.35s ease-in-out;
  }
    .main-nav .sub-menu li {
        margin-bottom: 0;
    }

  /* Класа коју додаје JS када се подмени отвори */
  .main-nav .menu-item-has-children.open > .sub-menu {
    max-height: 300px; /* Прилагодите ако имате више ставки у подменију */
  }

  /* Ставке унутар подменија */
  .main-nav .sub-menu li a {
    display: block;
    padding: 10px 16px 10px 32px; /* Додат индент с лева */
    text-decoration: none;
    color: #555;
    font-size: 15px;
    border-top: 1px solid #eee;
  }
}
    
/* Stagger animacija za linkove */
.main-nav.active > ul li:nth-child(1) { transition-delay: 0.1s; }
.main-nav.active > ul li:nth-child(2) { transition-delay: 0.2s; }
.main-nav.active > ul li:nth-child(3) { transition-delay: 0.3s; }
.main-nav.active > ul li:nth-child(4) { transition-delay: 0.4s; }
.main-nav.active > ul li:nth-child(5) { transition-delay: 0.5s; }
.main-nav.active > ul li:nth-child(6) { transition-delay: 0.6s; }
.main-nav.active > ul li:nth-child(7) { transition-delay: 0.7s; }



/* Overlay (tamna pozadina kada je meni otvoren) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 98;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1025px) {
    .hamburger {
        display: none;
    }
    
    .main-nav {
        background-color: transparent;
        position: relative;
        right: 0;
        height: auto;
        box-shadow: none;
        max-width: 100%;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    
    .main-nav ul {
        display: flex;
        gap: 30px;
        padding: 0;
    }
    
    .main-nav ul li {
        margin-bottom: 0;
        opacity: 1;
        transform: translateX(0);
    }

    .main-nav ul li a{
        font-size: 23px;
    }

}

/* Mobile prikaz */
@media (max-width: 1024px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .hamburger {
        display: flex;
        margin-left: auto;
    }

    .main-nav {
            background-image: linear-gradient(to bottom, transparent calc(var(--baseline) - 1px), #e3e3dc calc(var(--baseline) - 1px), #e3e3dc var(--baseline));
    background-size: 100% var(--baseline), 100% 100%;

    }

    .main-nav ul {
        flex-direction: column;
    }

    .main-nav ul li a{
        font-size: 23px;
    }


    .main-nav .menu-item-has-children svg {
            width: 2rem;
            height: 2rem;
            position: relative;
            right: 0;
            top: 1px;
    }
   /* .main-nav .sub-menu a {
        font-weight: 400;
        font-size: 1.4rem;
    }
    .main-nav .sub-menu {
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            transition:
            max-height .35s ease,
            opacity .25s ease,
            visibility .25s ease;
            padding: 0;

            li  {
                a {
                   font-size: 1.4rem!important;
                    font-weight: 300!important;
                }
                
            }

            li:first-child {
                margin-top: 1.6rem;
            }

            
        }

    .main-nav .menu-item-has-children.is-open > .sub-menu {
        opacity: 1;
        visibility: visible;
    }*/

    .main-nav .menu-item-has-children > svg {
        transition: transform .25s ease;
    }


}
/* =========================
   LOGO
========================= */

.logo .title {
  font-family: var(--font-heading);
  font-size: 32px;
}

.logo .subtitle {
  font-size: 14px;
  opacity: 0.7;
}

/* =========================
   CONTROLS
========================= */

.header-controls {
  display: flex;
  gap: 10px;
}

/* =========================
   TOGGLE BASE
========================= */

.toggle {
  border: 2px solid #000;
  background: #fff;
  padding: 5px 10px;
  font-family: var(--font-heading);
  cursor: pointer;
  position: relative;
  transform: rotate(-1deg);
  transition: 0.2s;
}

.toggle span {
    animation: fadeIn 0.7s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

.toggle:hover {
  transform: rotate(1deg) scale(1.05);
}


aside ul {
    animation: fadeIn 0.7s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
}
/* =========================
   LANGUAGE SWITCH
========================= */

.lang-toggle {
  display: flex;
  gap: 8px;
}

.lang-toggle span {
  opacity: 0.5;
}

.lang-toggle .active {
  opacity: 1;
  text-decoration: underline;
}

/* =========================
   DARK MODE BUTTON
========================= */
/* Stil za dugme */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color); /* Koristi boju tvog teksta */
    transition: transform 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.theme-toggle:hover {
    transform: scale(1.1);
}

/* Rešenje za FOIT (Flash of Unstyled Text) */
.theme-toggle .material-symbols-outlined {
    font-display: block;
    font-size: 24px;
}

/* Logika za prikazivanje ikonica */
/* Podrazumevano sakrivamo jednu, pokazujemo drugu */
.theme-icon-light { display: none; }

/* Kada je na body-u aktivna tamna tema, menjamo ikonice */
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: inline-block; }

/* Ako želiš onu tvoju rotaciju od 3 stepena i ovde */
.theme-toggle:hover .material-symbols-outlined {
    transform: rotate(3deg);
}


.theme-toggle {
  font-size: 16px;
}


.dark,
.dark header,
.dark footer {
    background-color: #1a1c1e!important;
}
.dark .school-post-card,
.dark .team-card,
.dark .sub-menu {
    background-color: #25282c!important;
    color: #fff;
}


.dark .team-name,
.dark .team-description {
    color: #fff!important;
}
.dark .njegos-quote-box {
    background-color: #25282c;
    color: #fff;
}
.dark .njegos-quote-label {
    color: #fff!important;
}
.dark .school-post-card .school-post-title {
    color: #fff;
}
.dark .school-post-excerpt,
.dark .school-post-date,
.dark .logo .subtitle,
.dark .njegos-quote-source {
    color: #e2e2e2;
}
.dark h1,
.dark .logo .title,
.dark .footer a,
.dark .header ul li a,
.dark .njegos-quote,
.dark .all-cats a{
    color: #8ab4f8!important;
}

.dark .all-cats a.current-cat,
.dark ul.wp-block-list li::before {
    color: rgb(255, 218, 217)!important;
}

.dark .boxes > div:first-child {
    background-color: #1e252b;
}
.dark .boxes > div:first-child .has-medium-font-size {
    color: #a5c7ff!important;
}
.dark .boxes > div:nth-child(2) {
    background-color: #2b1e1e;
}
.dark .boxes > div:nth-child(2) .has-medium-font-size {
    color: #ffada5;
}
.dark .boxes > div:nth-child(3) {
    background-color: #1e2b29;
}
.dark .boxes > div:nth-child(3) .has-medium-font-size {
    color: #a5ffed;
}

.dark .dotted-box {
        background-color: rgba(255, 255, 255, 0.7);
}

body.dark {
    /* Tamna pozadina koju smo ranije dogovorili */
    background-color: #1a1c1e; 
    
    /* Horizontalne linije postaju tamno sive, a vertikalna "margina" tamno crvena */
    background-image: 
        linear-gradient(
            to bottom, 
            transparent calc(var(--baseline) - 1px), 
            #2d3135 calc(var(--baseline) - 1px), 
            #2d3135 var(--baseline)
        ), 
        linear-gradient(
            to right, 
            transparent 79px, 
            #5a2a2a 79px, 
            #5a2a2a 81px, 
            transparent 81px
        )!important;
        
    background-size: 100% var(--baseline), 100% 100%!important;
}
/* =========================
   DARK MODE
========================= */
body:not(.dark) .theme-icon-light {
    display: none;
}
body.dark {
  background: #1a1a1a;
  color: #eee;
}

body.dark .theme-icon-dark {
    display: none;
}

body.dark .toggle {
  border-color: #fff;
  background: #333;
}

/* global box-sizing */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}



body::-webkit-scrollbar-track,
.modal-inner::-webkit-scrollbar-track {
    background-color: var(--secondary-color);
}

body::-webkit-scrollbar,
.modal-inner::-webkit-scrollbar {
    width: 6px;
    background-color: var(--black-color);
}

body::-webkit-scrollbar-thumb,
.modal-inner::-webkit-scrollbar-thumb {
    background-color: var(--cta-color2);
}

/* wrapper */
.wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    position: relative;
}



.progress-wrap {
    display: none;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2.4rem;
}

.container-wide {
    max-width: 100vw;
    padding: 0 2.4rem;
}

a {
    transition: all .23s ease;
    color: var(--base-color);
}

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

}

.wp-block-image img {
     background: #fff;
  padding: 10px;
  transform: rotate(-1deg);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.highlight {
  background: #fff8a6;
  padding: 10px;
  transform: rotate(1deg);
}

h2 {
  font-family: 'Caveat', cursive;
  position: relative;
  display: inline-block;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: #000;
  transform: rotate(-1deg);
}





.logo .title {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 2px;
}

.logo .subtitle {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: #444;
}

.logo .line {
  height: 2px;
  background: #2b6cb0; /* plava kao sveska */
  margin: 5px 0;
}

/*************
* HEADER
*************/
.header {
    position: relative;
    top: 0;
    padding: 1.2rem 2.4rem;
    z-index: 2015;
    background-color: var(--beige);
    border-bottom: 1px solid rgb(231, 229, 228);
    display: flex;
    gap: 3.2rem;
    align-items: center;
    font-family: var(--alt-font);
    transition: background-color 0.4s ease, background-image 0.4s ease;
}
.header > ul {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 3.2rem;
    font-size: 2.4rem;
}




.current-menu-item > a {
    color: var(--cta-color2)!important;
    -webkit-text-decoration-style: wavy;
    text-decoration-style: wavy!important;
    text-decoration-color: var(--cta-color2);
    -webkit-text-decoration-color:var(--cta-color2);
    text-decoration-line: underline!important;
    text-decoration-thickness: 0.1px;
}

.header .cta a:hover {
    background-color: #c72324;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(234, 65, 66, 0.3);
}
.header .cta::before {
    display: none;
}
.header li:not(.cta) > a:hover {
    color: var(--cta-color2)!important;
}

.header ul {
    list-style: none;
    display: flex;
}

.header a {
    text-decoration: none;
    color: var(--base-color);
}

/*************
* end of - HEADER
*************/


.footer {
    /*background-color: var(--secondary-color);*/
    background-color: rgb(253, 252, 240);
    font-size: 1.4rem;
    position: relative;
    padding: 2.4rem 3.2rem;
}
.footer a {
    text-decoration: none;
}

.footer ul {
    display: flex;
    justify-content: center;
    list-style: none;
    font-family: var(--alt-font);
    gap: 2.4rem;
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
}

.footer .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
}

.copyright {
   color: var(--grey);
   text-align: center;
}


/*************
* end of - FOOTER
*************/

/*************
* GUTENBERG
*************/
.wp-block-quote {
    text-align: center;
    color: var(--grey);
}
.wp-block-quote::before {
    content: "";
    display: block;
    margin: 3.2rem auto;
    width: 42px;
    height: 42px;
    background: var(--cta-color2);
    opacity: 0.4; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M96 280C96 213.7 149.7 160 216 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L216 224C185.1 224 160 249.1 160 280L160 288L224 288C259.3 288 288 316.7 288 352L288 416C288 451.3 259.3 480 224 480L160 480C124.7 480 96 451.3 96 416L96 280zM352 280C352 213.7 405.7 160 472 160L480 160C497.7 160 512 174.3 512 192C512 209.7 497.7 224 480 224L472 224C441.1 224 416 249.1 416 280L416 288L480 288C515.3 288 544 316.7 544 352L544 416C544 451.3 515.3 480 480 480L416 480C380.7 480 352 451.3 352 416L352 280z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M96 280C96 213.7 149.7 160 216 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L216 224C185.1 224 160 249.1 160 280L160 288L224 288C259.3 288 288 316.7 288 352L288 416C288 451.3 259.3 480 224 480L160 480C124.7 480 96 451.3 96 416L96 280zM352 280C352 213.7 405.7 160 472 160L480 160C497.7 160 512 174.3 512 192C512 209.7 497.7 224 480 224L472 224C441.1 224 416 249.1 416 280L416 288L480 288C515.3 288 544 316.7 544 352L544 416C544 451.3 515.3 480 480 480L416 480C380.7 480 352 451.3 352 416L352 280z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}
.wp-block-quote p {
    font-size: 2.4rem;
    font-style: italic;
    margin:0 auto 3.6rem!important;
    max-width: 84rem;
}
.wp-block-quote cite {
    font-style: normal;
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--base-color);
    letter-spacing: 3px;
}
.has-text-align-center {
    text-align: center;
}
.wp-block-columns {
    display: flex;
    gap: 2.4rem;
}
.wp-block-group {
    padding-top: 8.6rem;
    padding-bottom: 8.6rem;
}
.wp-block-group__inner-container {
    margin: 0 auto;
    max-width: var(--container);
}

.wp-block-buttons {
    display: flex;
    gap: 1.6rem;
}
.wp-block-buttons a {
    text-decoration: none;
    font-weight: 600;
    font-size: 1.6rem;
}
.wp-block-buttons a[href*="wa.me"]::before {
    display: inline-block;
    position: relative;
    top: 17px;
    width: 23px;
    height: 23px;
    margin-right: 5px;
}

.wp-block-buttons a[href*="tel"]::before {
    display: inline-block;
    position: relative;
    top: 14px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}


.is-style-btn-white > a {
    background-color: #fff;
    color: var(--cta-color2);
}
.is-style-btn-red > a {
    background-color: var(--cta-color2);
    color: #fff;
}
.wp-block-buttons a:hover {
    opacity: .84;
}
/*************
* end of - GUTENBERG
*************/

/*************
* BUTTONS
*************/
.wp-block-button__link {
    border-radius: var(--radius);
    padding: 1.2rem 3rem;
    background-color: var(--base-color);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
   text-transform: uppercase;
   font-size: 1.4rem!important;
   letter-spacing: 0.05em;
}

.wp-block-file {
    border: 1px dashed var(--base-color);
    border-radius: var(--radius);
    margin-bottom: 1.6rem;
    background-color: #fff;
    padding: 1.6rem;
}
.wp-block-file a {
    display: flex;
}

/*************
* end of - BUTTONS
*************/

/*************
* end of - TYPOGRAPHY
*************/

p:not(:last-child) {
    margin-bottom: 1.6rem;
}
.heading {
    color: var(--cta-color2);
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 2.4rem;
}

.has-medium-font-size {
    font-size: 2rem;
}

/* Zajednički stilovi za sve ikonice */
a[href^="mailto:"]::before, 
a[href*="google.com/maps"]::before, 
a[href*="maps.app.goo.gl"]::before, 
a[href^="tel:"]::before {
    font-family: 'Material Symbols Outlined';
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
    text-transform: none;
    line-height: 1;
    font-weight: normal;
    /* Ako ne koristiš Bootstrap var, ovde stavi npr. #007bff */
    color: var(--bs-primary); 
}

/* Specifične ikonice */
a[href^="mailto:"]::before { content: "alternate_email"; }
a[href*="maps"]::before { content: "location_on"; }
a[href^="tel:"]::before { content: "call"; }


/*************
* end of - TYPOGRAPHY
*************/








body .wpcf7-not-valid-tip {
    font-size: 1.4rem;
    color: var(--error);
}

/* Kontejner forme */
.njegos-kontakt-forma {
    font-family: var(--alt-font);
    color: #333;
    line-height: 1.8;
    max-width: 600px;
    font-size: 2.4rem;
}

/* Stil za sva tekstualna polja */
.njegos-kontakt-forma input[type="text"],
.njegos-kontakt-forma input[type="email"],
.njegos-kontakt-forma textarea {
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    border-radius: 0;
    padding: 2px 5px;
    outline: none;
    font-style: italic; /* Da podseća na placeholder sa slike */
    color: #555;
    font-family: var(--primary-font);
    font-size: 1.6rem;
}

/* Polja koja idu u istom redu sa tekstom */
.njegos-kontakt-forma input[type="text"] {
    display: inline-block;
    width: auto;
    min-width: 200px;
}

/* Širina polja za email i poruku */
.njegos-kontakt-forma input[type="email"],
.njegos-kontakt-forma textarea {
    width: 100%;
    display: block;
    margin-top: 10px;
}

/* Uklanjanje okvira oko textarea */
.njegos-kontakt-forma textarea {
    border-bottom: 1px solid #eee;
    height: 100px;
}

/* Stil za placeholder (ono što piše unutar polja) */
.njegos-kontakt-forma ::placeholder {
    color: #99aab5;
    /*font-family: 'Dancing Script', cursive, serif;*/ /* Opciono ako želiš rukopisni font */
    opacity: 0.7;
}

/* Stil za dugme (skroz desno, uokvireno) */
.njegos-kontakt-forma .dugme-desno {
    text-align: right;
    margin-top: 20px;
}

.njegos-kontakt-forma input[type="submit"] {
    background: transparent;
    border: 2px solid #2b4c7e; /* Tamno plava kao na slici */
    color: #2b4c7e;
    padding: 10px 30px;
    font-style: italic;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--radius);
}

.njegos-kontakt-forma input[type="submit"]:hover {
    background: #2b4c7e;
    color: #fff;
}



.white-box {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgb(195 198 209);
    padding: 3.2rem;
    border-radius: .4rem;
}



.dotted-box {
    padding: 3.2rem;
    border-radius: .4rem;
    border: 1px dashed rgb(195, 198, 209);
    background-color: rgba(255, 255, 255, 0.4);
    transition: all .23s ease-in;
    font-family: var(--alt-font);
    font-size: 2.4rem;
}
.dotted-box:hover {
    border-color: rgb(58, 95, 148);
    
}
.dotted-box p:last-child {
    margin-bottom: 0;
}
#kontakt {
    gap: 3.2rem;
    align-items: flex-start;
}
#kontakt .wp-block-column:nth-child(2) {
    flex: 1;
}
#kontakt .dotted-box {
    min-width: 33%;
}
#kontakt .has-medium-font-size {
    font-size: 2.4rem;
    font-style: italic;
    font-family: var(--primary-font);
    color: var(--cta-color2);
    font-weight: 700;
}


.boxes {
    gap: 3.2rem;
}
.boxes > div {
    padding: 2.4rem;
    border-radius: var(--radius);
    flex: 1;
}
.boxes > div p:last-child {
    margin: 0;
}
.boxes > div:first-child {
    background-color: rgba(160, 196, 255, 0.2);
    transform:matrix(0.999848, -0.0174524, 0.0174524, 0.999848, 0, 0);
}
.boxes > div:first-child .has-medium-font-size {
    color: var(--base-color);
}
.boxes > div:nth-child(2) {
    background-color: rgba(253, 172, 235, 0.2);
    transform:matrix(0.999848, 0.0174524, -0.0174524, 0.999848, 0, 0);
}
.boxes > div:nth-child(2) {
    color: var(--cta-color2);
}
.boxes > div:nth-child(3) {
    background-color: rgba(0, 214, 238, 0.2);
    transform:matrix(0.999391, -0.0348995, 0.0348995, 0.999391, 0, 0);
}
.boxes .has-medium-font-size {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}








.school-posts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:3.2rem;
    grid-template-columns: repeat(3, 1fr);
}

.school-post-card {
    display:flex;
    flex-direction:column;
    background:#fff;
    text-decoration:none;
    border-radius: var(--radius);
    transition:0.3s ease;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    overflow:hidden;
    position:relative;
    min-height:100%;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.school-post-card:nth-child(odd) {
    transform: matrix(0.999848, -0.0174524, 0.0174524, 0.999848, 0, 0);
}

.school-post-card:nth-child(even) {
    transform: matrix(0.999848, 0.0174524, -0.0174524, 0.999848, 0, 0);
}

.school-post-card:hover{
    transform:matrix(1, 0, 0, 1, 0, 0);
    box-shadow:0 8px 24px rgba(0,0,0,0.1);
}

.school-post-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    object-position: top;
    display:block;
}

.school-post-content{
    padding:2.4rem;
    display:flex;
    flex-direction:column;
    flex:1;
}

.school-post-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.school-post-category{
    background:#bdeff6;
    color:#17627a;
    font-size:1.2rem;
    padding:4px 10px;
    font-weight:600;
    line-height:1;
    border-radius: var(--radius);
    display: inline-flex;
}

.school-post-category.cat-5 {
    color: rgb(58, 95, 148);
    background: rgb(213, 227, 255);
}

.school-post-category.cat-4 {
    color: rgb(140, 76, 77);
    background: rgb(255, 218, 217);
}

.school-post-date{
    font-size:14px;
    color:var(--grey);
    font-weight:600;
}

.school-post-title{
    font-size:3rem;
    line-height:1.1;
    margin:0 0 18px;
    color: var(--black-color);
    font-family:var(--alt-font);
    font-weight:500;
    border-bottom: 1px solid var(--light-grey);
    padding-bottom: 1.2rem;
}

.school-post-excerpt{
    font-size:1.6rem;
    flex:1;
    color: var(--color-muted);
}

.school-post-readmore{
    margin-top:35px;
    font-family: var(--alt-font);
    font-size:22px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
}

.school-post-readmore .arrow{
    transition:0.3s;
}

.school-post-card:hover .arrow{
    transform:translateX(5px);
}

            @media(max-width:768px){

                .school-post-title{
                    font-size:34px;
                }

                .school-post-excerpt{
                    font-size:18px;
                    line-height:1.7;
                }

                .school-post-readmore{
                    font-size:18px;
                }

            }
.all-cats {
    display: flex;
    align-items: center;
    gap: 3.2rem;
   /* font-family: var(--alt-font);*/
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1.6rem 0;
}

.all-cats a:not(.current-cat):hover {
    color: var(--cta-color2);
}

.current-cat {
    pointer-events: none;
    color: var(--cta-color2);
}

.related-block {
    margin-top: 4.8rem;
}

.related-block .section-title {
    border-bottom: 2px solid var(--black-color);
    padding-bottom: 1rem;
    margin-bottom: 2.4rem;
}

.single-post-content {
    display: flex;
    padding-top: 2.4rem;
    flex-direction: row-reverse;
    gap: 3.2rem;
}


ul.wp-block-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}
ul.wp-block-list li {
    position: relative;
    padding-left: 2.4rem;
}
ul.wp-block-list li::before {
    font-family: 'Material Symbols Outlined';
    content: "check_circle"; /* Ovde menjaš ikonicu */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0;
    color: var(--cta-color2);;

    animation: fadeInIcons 0.5s ease forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInIcons {
    from { opacity: 0; transform: translateY(-50%) translateX(-5px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}



.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 4.8rem;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--black-color);
    opacity: .6;
}
.pagination .page-numbers:hover {
    opacity: 1;
}
.pagination .page-numbers.current {
    background-color: #bdeff6;
    color: #17627a;
    border-radius: var(--radius);
    aspect-ratio: 1;
    width: 3rem;
    height: 3rem;
    opacity: 1;
}

.school-posts-grid-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    margin-bottom: 3.2rem;
}
.school-posts-grid-heading h2::after {
    display: none;
}
.school-posts-grid-heading h2 {
    line-height: 1;
    margin: 0;
}
.school-posts-grid-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: #000;
    transform: rotate(-0.5deg);
}
.school-posts-grid-heading a {
        display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .6rem;
    letter-spacing: 0.05em;
    font-size: 2rem;
    font-weight: 600;
    font-family: var(--alt-font);
}
.school-posts-grid-heading a:hover span {
    transition: 0.3s;
}
.school-posts-grid-heading a:hover span {
    transform: translateX(7px);
}

.team-results {
    margin-top: 1.6rem;
    margin-bottom: 4.8rem;
}
.team-subjects {
    margin-bottom: .6rem!important;
}

.team-subject-filter button.active, .team-subject-filter button:hover {
    background: var(--base-color)!important;
    color: #fff;
}
body .team-subject-filter button {
    background: #e8eefc;
    color: #3659a7;
    border-radius: var(--radius);
}
.team-subject {
    color: rgb(58, 95, 148);
    background: rgb(213, 227, 255); 
        font-size: 1.2rem;
    padding: 4px 10px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius);
    display: inline-flex;
}
.team-card {
    border-radius: var(--radius);
        display: flex;
    flex-direction: column;
    background: #fff;
    text-decoration: none;
    border-radius: var(--radius);
    transition: 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    position: relative;
    min-height: 100%;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    max-width: 46rem;
}

.team-card .team-image img {
        width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 7 / 8;
    object-position: top;
}
.team-card .team-description {
    color: var(--color-muted);
    font-size: 1.4rem;
    padding-top: 1.6rem;
}
.team-card .team-name {
    border-bottom: 1px solid var(--light-grey);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.team-card .team-groups {
    font-size: 1.4rem;
}




.wp-block-gallery ul,
figure.wp-block-gallery {
    list-style: none;
    display: grid!important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem!important;
}
figure.wp-block-gallery .wp-block-image {
    width: 100%!important;
}
figure.wp-block-gallery .wp-block-image img,
.wp-block-gallery ul li img {
    aspect-ratio: 1;
}