/**
Theme Name: Moja_Astra_Tema
Theme Author: Marko Škugor
Author URI: https://mskugor.com
Description: Stranica koja pomaže korisniku da na jednostavan način pronađe restorane na Jadranskoj obali sa pogledom na more
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moja_astra_tema
Template: astra
*/

/* 1. GRUPA KOJA DRŽI SVE STUPCE (Skuplja gumbe prema sredini) */
.wp-block-columns.zlatni-gumb-kontejner,
.wp-block-columns {
    max-width: 900px !important; /* Ukupna širine svih triju gumba zajedno */
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 15px !important; /* Razmak između gumba */
}

/* 2. POJEDINAČNI ZLATNI GUMB (Povećanje dimenzija) */
.wp-block-column.zlatni-gumb,
.zlatni-gumb .wp-block-media-text {
    background: linear-gradient(180deg, #d4af37 0%, #aa7c11 100%) !important;
    border: 2px solid #fff8dc !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* 3. LAYOUT UNUTAR GUMBA (Vertikalno centriranje ikone i teksta) */
.zlatni-gumb.wp-block-media-text,
.zlatni-gumb .wp-block-media-text {
    grid-template-columns: auto 1fr !important;
    gap: 20px !important;
    align-items: center !important; /* Poravnava sve unutar gumba po vertikalnoj sredini */
}

/* 4. KONTEJNER IKONE (Sprečava propadanje na dno) */
.zlatni-gumb .wp-block-media-text__media {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. VELIČINA I POZICIONIRANJE IKONE */
.zlatni-gumb img,
.zlatni-gumb figure,
.zlatni-gumb .wp-block-media-text__media img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    vertical-align: middle !important;
}

/* 6. TEKST UNUTAR GUMBA */
.zlatni-gumb h3, 
.zlatni-gumb p,
.zlatni-gumb .wp-block-media-text__content,
.zlatni-gumb .wp-block-media-text__content h3 {
    color: #111111 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
}

/* 7. TAMNA SJENA NA H1 I PARAGRAFU ZA BOLJU ČITLJIVOST */
.sjena-slova {
    text-shadow: 10px 10px 10px rgba(0, 0, 0, 1), 
                 0px 0px 15px rgba(0, 0, 0, 0.8) !important;
}

/* Podizanje kartica preko Hero sekcije */
.wp-block-columns.preklopljene-kartice {
    margin-top: -120px !important; /* Negativna margina podiže blok prema gore */
    position: relative !important;
    z-index: 10 !important; /* Osigurava da su kartice IZNAD Hero slike */
}

/* Prilagodba za mobitele (da se na malim ekranima ne preklapa agresivno) */
@media (max-width: 768px) {
    .wp-block-columns.preklopljene-kartice {
        margin-top: -60px !important;
    }
}

/* 1. PROŠIRIVANJE SVA 3 STUPCA ZAJEDNO */
.wp-block-columns.preklopljene-kartice {
    max-width: 1200px !important; /* Širi cijelu grupu kartica na stranici */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 25px !important; /* Razmak između samih kartica */
}

/* 2. PROŠIRIVANJE POJEDINAČNE KARTICE (STUPCA) */
.preklopljene-kartice .wp-block-column {
    flex-grow: 1 !important;
    padding: 0 !important; /* Uklanja prazninu oko same slike */
    overflow: hidden !important; /* Čuva obrub na vrhu slike */
}

/* 3. STISKANJE BIJELOG POLJA ISPOD SLIKE (Uklanjanje viška praznog prostora) */
.preklopljene-kartice .wp-block-column > *:not(figure):not(img) {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 4. SMANJIVANJE RAZMAKA I VISINE TEKSTA */
/* Smanjuje prazninu iznad i ispod H2 naslova */
.preklopljene-kartice h2 {
    margin-top: 12px !important;
    margin-bottom: 5px !important;
    font-size: 20px !important; /* Blago smanjena slova da stane u red */
    line-height: 1.2 !important;
}

/* Smanjuje prazninu oko odlomka (Istra & Kvarner...) */
.preklopljene-kartice p {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
}

/* Smanjuje razmak oko plavog gumba na dnu */
.preklopljene-kartice .wp-block-button,
.preklopljene-kartice .wp-block-buttons {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Proširivanje Hero sekcije prema dolje */
.wp-block-cover {
    min-height: 600px !important; /* Prilagodi visinu (npr. 600px, 700px, ili 80vh) */
    padding-bottom: 60px !important; /* Dodatni prostor na dnu za bolji preklop */
}

/* ZLATNI STIL ZA OBIČNE GUTENBERG GUMBOVE */
.wp-block-button.zlatni-gumb .wp-block-button__link,
.wp-block-button__link.zlatni-gumb {
    background: linear-gradient(180deg, #d4af37 0%, #aa7c11 100%) !important;
    color: #111111 !important;
    border: 2px solid #fff8dc !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: bold !important;
    font-size: 15px !important;
    min-width: 180px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    display: inline-block !important;
    transition: all 0.2s ease-in-out !important;
}

/* EFEKT KAD SE MIŠEM PRIJEĐE PREKO GUMBA (HOVER) */
.wp-block-button.zlatni-gumb .wp-block-button__link:hover,
.wp-block-button__link.zlatni-gumb:hover {
    background: linear-gradient(180deg, #aa7c11 0%, #8a640d 100%) !important;
    color: #ffffff !important;
}

/* 1. POZADINA PODMENIJA (PADUJUĆEG IZBORNIKA) */
.main-header-menu .sub-menu,
.ast-builder-menu .sub-menu,
.main-header-menu .sub-menu .menu-item {
    background-color: #d4af37 !important; /* Zlatna pozadina - promijeni po želji (npr. #111111 za tamnu) */
}

/* 2. BOJA SLOVA U PODMENIJU */
.main-header-menu .sub-menu a,
.ast-builder-menu .sub-menu a {
    color: #111111 !important; /* Tamno siva/crna slova radi boljeg kontrasta */
    font-weight: normal !important;
}

/* 3. EFEKT KAD SE MIŠEM PRIJEĐE PREKO STAVKE (HOVER) */
.main-header-menu .sub-menu a:hover,
.ast-builder-menu .sub-menu a:hover,
.main-header-menu .sub-menu .menu-item:hover > a {
    background-color: #aa7c11 !important; /* Tamnije zlatna pri prelasku mišem */
    color: #ffffff !important; /* Slova postaju bijela na hover */
}

/* HOVER EFEKT ZA MEDIJI I TEKST ZLATNE GUMBOVE */
.zlatni-gumb.wp-block-media-text:hover,
.zlatni-gumb .wp-block-media-text:hover {
    background: linear-gradient(180deg, #aa7c11 0%, #8a640d 100%) !important;
    transform: translateY(-3px) !important; /* Lagano podiže gumb prema gore za 3px */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5) !important; /* Pojačava sjenu */
    cursor: pointer !important;
}

/* Promjena boje teksta u bijelu na hover */
.zlatni-gumb.wp-block-media-text:hover *,
.zlatni-gumb .wp-block-media-text:hover * {
    color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

/* RASTEZANJE CRNE TRAKE OD RUBA DO RUBA */
.puna-sirina-traka {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: 10 !important;
    margin-right: 10 !important;
}

/* ZA OBLJENJE I SJENA SLIKE UNUTAR MEDIA & TEXT BLOKA */
.okusi-slika-stil .wp-block-media-text__media img {
    border-radius: 12px !important; /* Zaobljenost rubova */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; /* Elegantna tamna sjena */
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Suptilni zlatni rub */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Opcionalno: Lagani hover efekt na sliku */
.okusi-slika-stil .wp-block-media-text__media img:hover {
    transform: scale(1.02) !important; /* Lagano povećanje na prelazak mišem */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important;
}

/* STIL ZA KARTICE NA PODSTRANICI O NAMA */
.wp-block-column.o-nama-kartica {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Suptilni zlatni rub */
    border-radius: 12px !important;
    padding: 24px !important;
    backdrop-filter: blur(5px) !important;
    transition: all 0.3s ease-in-out !important;
}

/* HOVER EFEKT ZA KARTICE */
.wp-block-column.o-nama-kartica:hover {
    border-color: #d4af37 !important; /* Sjajniji zlatni rub */
    transform: translateY(-5px) !important; /* Lagani podizaj */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.2) !important;
}

/* STIL NASLOVA UNUTAR KARTICA */
.wp-block-column.o-nama-kartica h3 {
    color: #d4af37 !important;
    margin-bottom: 12px !important;
    font-size: 20px !important;
}

/* STILIZIRANJE KONTAKT OBRASCA (INPUT POLJA) */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* FOKUS NA POLJE ZA UNOS (KAD KORISNIK PIŠE) */
.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form textarea:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
    outline: none !important;
}

/* GUMB ZA SLANJE PORUKE */
.wpforms-form button[type="submit"] {
    background: linear-gradient(180deg, #d4af37 0%, #aa7c11 100%) !important;
    color: #111111 !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 12px 30px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
}

.wpforms-form button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4) !important;
}

/* PREKLAPANJE STUPCA PREKO HERO SEKCIJE */
.preklapanje-hero {
    margin-top: -180px !important; /* Pomiče stupce prema gore preko slike */
    position: relative !important;
    z-index: 10 !important;       /* Osigurava da stupci budu IZNAD slike */
}

/* Prilagodba za mobitele (da ne zakriju tekst na malim ekranima) */
@media (max-width: 768px) {
    .preklapanje-hero {
        margin-top: -30px !important;
    }
}

/* Proširivanje bloka izvan standardnih dimenzija */
.rasireni-kontakt-stupci {
    max-width: 100% !important; /* Postavi željenu maksimalnu širinu (npr. 1200px, 1400px ili 100%) */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Osigurava da su svi linkovi unutar zlatnih gumba klikabilni */
.zlatni-gumb-demo a,
.preklapanje-hero a,
.wp-block-button__link {
    position: relative !important;
    z-index: 20 !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: 100% !important;
}

/* FORSIRANJE STILA LINKOVA UNUTAR ZLATNIH GUMBA */
.entry-content a,
.wp-block-columns a,
.wp-block-column a,
a:where(:not(.wp-element-button)) {
    color: #111111 !important;          /* Tamna boja teksta */
    text-decoration: none !important;    /* Uklanja podcrtavanje */
}

/* KAD SE MIŠEM PREĐE PREKO LINKA U GUMBU */
.entry-content a:hover,
.wp-block-columns a:hover,
.wp-block-column a:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

.single-post .entry-meta {
    display: none !important;
}

/* ZAOBLJAVANJE SLIKA UNUTAR GUTENBERG GALERIJE */
.wp-block-gallery .wp-block-image img,
.blocks-gallery-item img {
    border-radius: 15px !important;
    overflow: hidden !important;
}

.wp-block-gallery figure {
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* POTPUNO PROZIRNA POZADINA ZA GUTENBERG GALERIJU */
.wp-block-gallery,
.wp-block-gallery .wp-block-image,
.wp-block-gallery figure,
.blocks-gallery-item {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important; /* Uklanja eventualnu bijelu sjenu oko slika */
}

/* Smanjivanje H1 naslova na mobitelima i tabletima */
@media (max-width: 767px) {
    h1.wp-block-heading {
        font-size: 28px !important;
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}