/* ============================================================================
 * FITVIBES — MOBILE POLISH (load LAST, after all other CSS)
 * Jedinstveni layer odgovora na sve nalaze iz mobile audit-a.
 * Ciljani break-pointi: 480px, 380px, 320px (extreme phones).
 * ============================================================================ */

/* === STICKY FOOTER — bullet-proof kroz sve scenarije === */
html, body{
    min-height: 100vh;
    min-height: 100dvh;
}
body{
    display: flex !important;
    flex-direction: column !important;
    padding-top: 60px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
header[role="banner"] {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
/* Page containers — NO outer top margin/padding. Inner content cards get the breathing room. */
body > main,
body > .main-container,
body > .blog-container,
body > .article-container,
body > .about-container,
body > .contact-container,
body > .policy-container,
body > .recipes-wrapper,
body > .recipe-detail-main,
body > .calorie-container,
body > .bmi-container,
body > .applications-page-container,
body > .info-page-main,
.foods-page,
.calculator-section,
.app-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* First section/div inside main — touches main top */
main > section:first-child,
main > div:first-child,
.main-container > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Internal HEADERS get the small top breathing room (16px) — INSIDE the content card */
.blog-header,
.article-header,
.about-header,
.contact-header,
.policy-header,
.foods-head {
    margin-top: 16px !important;
    padding-top: 0 !important;
}
/* Internal CONTENT cards get top padding so their h1 isn't glued to top edge */
.foods-card,
.about-content,
.contact-content,
.policy-content,
.article-content,
.calculator-card {
    padding-top: clamp(20px, 3vw, 32px) !important;
}
body > footer,
body > .footer-wrap{
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}
/* Glavni content mora da grow do popune prostora */
body > main,
body > .main-container,
body > .article-container,
body > .blog-container,
body > .calorie-container,
body > .bmi-container,
body > .contact-container,
body > .about-container,
body > .applications-page-container,
body > section.hero,
body > section{
    flex: 1 0 auto !important;
}

/* === Ad-container — REZERVIŠE PROSTOR PRE NEGO ŠTO SE REKLAMA UČITA
       da se footer NE PODIGNE/SKOCI kad AdSense renderuje. === */
.ad-container,
[style*="max-width: 728px"]{
    max-width: min(728px, 100% - 20px) !important;
    box-sizing: border-box;
    overflow: hidden;
    contain: layout style;
    margin: 24px auto !important;
    /* Reserve space for typical ad heights to prevent CLS / footer jump */
    min-height: 280px;       /* desktop: covers 250px medium rectangle, 280x70, 728x90 */
}
/* Inner adsbygoogle slot — also reserve space */
.ad-container ins.adsbygoogle{
    display: block !important;
    min-height: 250px;
    width: 100%;
}
/* On mobile (≤480px) ad sizes are smaller (320x100 / 320x50) — less reserved space */
@media (max-width: 480px){
    .ad-container,
    [style*="max-width: 728px"]{
        max-width: calc(100vw - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 250px;
    }
    .ad-container ins.adsbygoogle{
        min-height: 250px;
    }
}
/* Subtle placeholder background while loading so empty space isn't jarring */
.ad-container:not(:has(ins[data-ad-status="filled"])) {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

/* === Prevencija horizontalnog scroll-a globalno === */
html, body{
    overflow-x: clip;
    max-width: 100vw;
}
img, video, iframe, canvas, svg, picture{
    max-width: 100%;
    height: auto;
}

/* === Univerzalne mobile typography popravke === */
@media (max-width: 480px){
    h1, .blog-header h1, .article-header h1, .foods-title, .calculator-title{
        font-size: clamp(1.4rem, 5.5vw + .3rem, 2rem) !important;
        line-height: 1.2 !important;
    }
    h2{ font-size: clamp(1.2rem, 5vw, 1.6rem) !important; line-height: 1.25 !important; }
    h3{ font-size: clamp(1rem, 4vw, 1.3rem) !important; }
    .article-body, p { font-size: clamp(.95rem, 3.6vw, 1.05rem); line-height: 1.65; }
    .lead, .article-body .lead{ font-size: clamp(1rem, 4vw, 1.15rem) !important; padding: 14px !important; }

    /* H2/H3 inside article */
    .article-body h2{ font-size: clamp(1.25rem, 5vw, 1.6rem) !important; line-height: 1.25; }
    .article-body h3{ font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }

    /* Calculator result value */
    .result-value{ font-size: clamp(1.6rem, 6vw + .5rem, 2.4rem) !important; line-height: 1.1 !important; }

    /* Hero on homepage */
    #pocetna .text h1, .pocetna h1 { font-size: clamp(1.6rem, 6vw + .5rem, 2.4rem) !important; }
    #pocetna .image-container, .pocetna .image-container{ height: auto !important; min-height: 200px; }
    #pocetna .image-container img { height: clamp(200px, 50vw, 360px); width: 100%; object-fit: cover; }
}

/* === Tap target minimum (WCAG 44×44) na svim interaktivnim elementima === */
@media (max-width: 768px){
    button:not(.fv-skel-chip):not(.lang-btn),
    .pagination-page,
    .pagination-arrow,
    #fv-prev, #fv-next,
    .fv-pill,
    a.btn, a.cta, a.learn-more-button,
    input[type="submit"]{
        min-height: 44px;
    }
    .lang-btn{ min-width: 44px; min-height: 44px; }

    /* Pagination */
    .pagination-page, .pagination-arrow{
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    /* Hamburger meni — override !important deklaracija iz navbar-mobile-fix.css */
    .hamburger-menu{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}
/* Sigurnosna mreža: hamburger ≥44px na svim breakpoint-ima */
.hamburger-menu{ min-width: 44px; min-height: 44px; }

/* === Login modal popravka === */
@media (max-width: 480px){
    .fv-modal-content{
        width: clamp(280px, 92vw, 380px) !important;
        max-width: 92vw !important;
        padding: clamp(16px, 5vw, 32px) !important;
    }
    .fv-auth-title{ font-size: clamp(1.2rem, 5vw, 2rem) !important; line-height: 1.2 !important; }
    .fv-auth-input{ font-size: 16px !important; /* spreči iOS zoom na focus */ }
}

/* === Profile menu na mobilnom === */
@media (max-width: 480px){
    .fv-prof-menu{
        width: clamp(240px, 88vw, 280px) !important;
        max-width: 92vw !important;
        right: 8px !important;
    }
}

/* === Calculator card popravka === */
@media (max-width: 480px){
    .calculator-card{
        max-width: min(460px, calc(100vw - 24px)) !important;
        padding: clamp(16px, 5vw, 32px) !important;
        margin: 12px auto !important;
    }
    .calculator-card input,
    .calculator-card select,
    .form-group input,
    .form-group select{
        font-size: 16px !important; /* iOS zoom prevention */
    }
}

/* === Article tables, code blocks i blockquotes === */
@media (max-width: 768px){
    .article-body{ overflow-x: clip; }
    .article-body table{
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-collapse: collapse;
    }
    .article-body table tbody{
        display: table;
        width: max-content;
        min-width: 100%;
    }
    .article-body code{
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
    .article-body pre{
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px !important;
        font-size: .85rem !important;
    }
    .article-body blockquote{
        padding: clamp(12px, 4vw, 20px) clamp(14px, 4vw, 24px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .article-body img,
    .article-body figure{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* === Forms — full-width submit on mobile, prevent iOS auto-zoom === */
@media (max-width: 480px){
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea{
        font-size: 16px !important;
    }
    button[type="submit"],
    .submit-btn,
    .submit-button{
        width: 100%;
    }
}

/* === Footer mobile spacing === */
@media (max-width: 480px){
    .footer-container{ padding: 24px 14px !important; gap: 14px; }
    .footer-legal{
        justify-content: center;
        gap: 8px 12px;
        font-size: .85rem;
    }
    .footer-legal .separator{ display: none; }
    .footer-legal a{ padding: 6px 4px; }
    .footer-bottom{ font-size: .85rem; text-align: center; }
}

/* === Card grid behavior — bezuslovno 1 kolona ispod 480px === */
@media (max-width: 480px){
    .articles-grid,
    .foods-grid,
    .tools-grid,
    .stats-grid,
    .applications-grid{
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .blog-article,
    .food-card,
    .tool-card,
    .application-card,
    .stat-item{
        padding: clamp(14px, 4vw, 20px) !important;
        border-radius: 14px !important;
    }
}

/* === Section spacing — manje praznog prostora na mobilnom === */
@media (max-width: 480px){
    section{ padding-top: clamp(20px, 5vw, 40px) !important; padding-bottom: clamp(20px, 5vw, 40px) !important; }
    .calorie-education-section,
    .bmi-education-section,
    .applications-page-container{
        padding: clamp(16px, 4vw, 24px) clamp(12px, 4vw, 20px) !important;
    }
    .article-container, .blog-container{
        padding: clamp(70px, 18vw, 90px) clamp(12px, 4vw, 20px) clamp(20px, 5vw, 40px) !important;
    }
}

/* === Author box, share buttons na narrow screen === */
@media (max-width: 480px){
    .article-author-box{
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding: clamp(14px, 4vw, 20px) !important;
    }
    .article-author-box img{
        width: 56px !important;
        height: 56px !important;
    }
    .article-meta{
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* === Quick filter pills mobile — bez horizontal squeeze === */
@media (max-width: 480px){
    .fv-quick-row{
        gap: 6px !important;
    }
    .fv-quick-label{
        flex-basis: 100%;
        text-align: left;
        padding-left: 4px !important;
        margin-bottom: 4px;
    }
    .fv-pill{
        font-size: .82rem !important;
        padding: 0 10px !important;
        height: 36px !important;
    }
    .fv-pill-count{
        margin-left: 4px !important;
        font-size: .65rem !important;
    }
}

/* === Modal close button — touch friendly === */
@media (max-width: 480px){
    .fv-close-modal,
    .modal-close,
    .close-btn{
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.6rem !important;
    }
}

/* === Reduced motion respekt — sve animacije isključene === */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Landscape phone orientation polish === */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape){
    section{ padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* === Skip-link visible on focus (a11y) === */
.skip-link:focus,
a[href^="#main"]:focus{
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    background: var(--primary-green, #69B254) !important;
    color: #0c1a0e !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    z-index: 10000 !important;
    font-weight: 700 !important;
}

/* === Sigurnosna mreža: spreči overflow zbog dugih reči (URL-ovi, jezičke kombinacije) === */
.article-body, .blog-content, .article-content, .lead{
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* === Cookie/GDPR baner ako iskoči — uvek touch-able === */
@media (max-width: 480px){
    [class*="cookie-banner"],
    [class*="gdpr-banner"]{
        padding: 12px !important;
        font-size: .85rem !important;
    }
    [class*="cookie-banner"] button,
    [class*="gdpr-banner"] button{
        min-height: 44px !important;
        min-width: 100px !important;
    }
}

/* === DEFENSIVNI OVERFLOW FIX (10-pass) — svi block container-i ne smeju biti širi od parent-a === */
.foods-card,
.foods-page,
.foods-grid,
.articles-grid,
.blog-container,
.article-container,
.about-container,
.contact-container,
.applications-page-container,
.image-container,
.app-image,
main,
section {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.foods-grid > *,
.articles-grid > * {
    min-width: 0;
}

/* === Word-wrap protection na long content === */
h1, h2, h3, h4, h5, h6, p, li, td, th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* === Slike apsolutno bezbedne === */
img, video, iframe, picture, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}
.image-container,
.app-image {
    max-width: 100%;
    overflow: hidden;
}

/* === SPECIFICITY OVERRIDE — forsiraj sve container-i 100% parent === */
html body .foods-page .foods-card,
html body .main-container .foods-card,
html body .articles-grid,
html body .blog-container,
html body main,
html body .foods-card {
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
}
@media (min-width: 1240px) {
    html body .foods-page .foods-card {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* === IMAGE/APP CONTAINER overflow fix === */
html body .image-container,
html body .app-image,
html body #pocetna .image-container,
html body section .image-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
}
html body .image-container img,
html body .app-image img,
html body section img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}
@media (max-width: 768px) {
    html body #pocetna .image-container {
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    html body .app-image {
        max-width: 280px !important;
        margin: 0 auto !important;
    }
}