/*
Theme Name: Meteo Jajce
Theme URI: https://meteo-jajce.ba
Description: Lagana tema bez Elementora za meteo-jajce.ba — zajednički header (logo + obavijesti/postavke/meni), footer i donja navigacija (mobilno). Svaka stranica nosi samo svoj sadržaj (postojeći HTML widgeti).
Author: Sandro Nuhanović
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: meteo-jajce
*/

/* ===== Tokeni (isti kao widget) ===== */
:root{
  --mj-bg:#0b1a3b;
  --mj-gold:#f7b731;
  --mj-sky:#5db4f0;
  --mj-fg:#eaf1fb;
  --mj-muted:#9fb2d0;
  --mj-faint:#6c80a4;
  --mj-line:rgba(255,255,255,.10);
  --mj-card:rgba(255,255,255,.06);
  --mj-header-h:58px;
  --mj-bottom-h:78px;
  --mj-font:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mj-font-num:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--mj-bg);color:var(--mj-fg);font-family:var(--mj-font);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}

/* ===== HEADER — tanka frosted traka preko CIJELOG headera, od samog vrha (sve stranice) ===== */
.mj-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:8px 16px;
  background:rgba(9,19,45,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 14px rgba(0,0,0,.22);
}
.mj-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.mj-logo img{height:40px;width:auto;display:block}
.mj-actions{margin-left:auto;display:flex;align-items:center;gap:9px}

/* Mobilni header (tanka traka) */
@media(max-width:768px){
  .mj-header{min-height:56px;padding:8px 14px;gap:9px}
  .mj-logo img{height:42px}  /* ~30% manje nego prije (64px) */
  .mj-btn{width:44px;height:44px}
  .mj-btn svg{width:24px;height:24px}
}

/* Horizontalna navigacija u headeru — samo desktop (tanka traka) */
.mj-mainnav{display:none}
@media(min-width:769px){
  .mj-header{min-height:86px;padding:14px clamp(22px,3.2vw,52px);gap:18px}  /* +30% viši */
  .mj-logo img{height:54px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
  .mj-mainnav{display:flex;align-items:center;gap:4px;margin-left:26px}
  .mj-mainnav a{padding:9px 15px;border-radius:11px;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.1px;color:var(--mj-muted);white-space:nowrap;transition:color .15s,background .15s}
  .mj-mainnav a:hover{color:var(--mj-fg);background:rgba(255,255,255,.08)}
  .mj-mainnav a.mj-active{color:var(--mj-gold);background:rgba(247,183,49,.12)}
  .mj-actions{gap:11px}
  .mj-btn{width:46px;height:46px}
  .mj-btn svg{width:24px;height:24px}
  .mj-burger{display:none!important}  /* na desktopu navigacija je u traci — hamburger nije potreban */
}
.mj-btn{
  width:39px;height:39px;border-radius:50%;flex:none;
  border:1px solid var(--mj-line);background:rgba(255,255,255,.09);
  color:var(--mj-fg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .2s,transform .15s;position:relative;
}
.mj-btn:hover{background:rgba(255,255,255,.17)}
.mj-btn:active{transform:scale(.94)}
.mj-btn svg{width:20px;height:20px}
/* Zvono — aktivno stanje (obavijesti uključene) */
.mj-bell.on{background:rgba(247,183,49,.9);border-color:transparent;color:#241a03}
.mj-bell.on:hover{background:var(--mj-gold)}
/* Toast poruka za obavijesti */
.mj-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(14px);
  z-index:2000;max-width:min(92vw,420px);padding:12px 16px;border-radius:14px;
  background:rgba(12,24,52,.96);color:var(--mj-fg);font-size:14px;line-height:1.45;font-weight:600;
  border:1px solid var(--mj-line);box-shadow:0 12px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;text-align:center}
.mj-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mj-toast.ok{border-color:rgba(46,213,115,.5)}
@media(max-width:768px){.mj-toast{bottom:calc(var(--mj-bottom-h) + env(safe-area-inset-bottom,0px) + 14px)}}

/* ===== SADRŽAJ ===== */
.mj-main{min-height:40vh}
/* Razmak između headera i HTML sadržaja dodanih stranica (naslovnica ostaje flush). */
body:not(.mj-home) .mj-main{padding-top:25px}

/* ===== DRAWER (hamburger, desna strana) ===== */
.mj-scrim{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mj-scrim.open{opacity:1;visibility:visible}
.mj-drawer{
  position:fixed;top:0;right:0;z-index:1200;height:100%;width:290px;max-width:86vw;
  background:#0c1d40;border-left:1px solid var(--mj-line);
  transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;padding:16px 0;box-shadow:-18px 0 50px rgba(0,0,0,.45)
}
.mj-drawer.open{transform:none}
.mj-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px;border-bottom:1px solid var(--mj-line)}
.mj-drawer-head img{height:30px;width:auto}
.mj-drawer nav{padding:10px 10px;overflow:auto}
.mj-drawer nav a{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;
  text-decoration:none;font-weight:600;font-size:15px;color:var(--mj-fg)
}
.mj-drawer nav a:hover{background:rgba(255,255,255,.06)}
.mj-drawer nav a.mj-active{background:rgba(93,180,240,.12);color:var(--mj-gold)}
.mj-drawer nav a .mj-ic{width:20px;height:20px;flex:none;color:var(--mj-sky)}
.mj-drawer nav a.mj-active .mj-ic{color:var(--mj-gold)}
.mj-drawer-sep{height:1px;background:var(--mj-line);margin:8px 16px}
.mj-drawer-foot{margin-top:auto;padding:12px 18px;color:var(--mj-faint);font-size:12px;border-top:1px solid var(--mj-line)}

/* ===== FOOTER ===== */
.mj-footer{border-top:1px solid var(--mj-line);padding:22px 16px 26px;text-align:center}
.mj-footer .mj-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:13.5px}
.mj-footer .mj-links a{color:var(--mj-muted);text-decoration:none;font-weight:600}
.mj-footer .mj-links a:hover{color:var(--mj-fg)}
.mj-footer .mj-copy{margin-top:10px;font-size:12px;color:var(--mj-faint)}

/* ===== DONJA NAVIGACIJA (samo mobilno) ===== */
.mj-bottomnav{display:none}
@media(max-width:768px){
  .mj-bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1000;
    background:rgba(9,19,45,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--mj-line);
    padding:9px 4px calc(9px + env(safe-area-inset-bottom));
    /* horizontalni scroll kad ima vise stavki nego sto stane u red */
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .mj-bottomnav::-webkit-scrollbar{display:none}
  .mj-bottomnav a{
    flex:0 0 66px;   /* fiksna sirina -> duzi nazivi se prelamaju u 2 reda; 7 stavki se prelije -> horizontalni scroll */
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:3px 4px;text-decoration:none;color:var(--mj-muted);
    font-size:9.5px;font-weight:700;letter-spacing:-.1px;line-height:1.1;text-align:center;
  }
  /* nazivi se prelamaju u drugi red (puni nazivi, isti kao u hamburger meniju) */
  .mj-bottomnav a span{display:block;width:100%;white-space:normal;overflow-wrap:break-word;line-height:1.08}
  .mj-bottomnav a.mj-active{color:var(--mj-gold)}
  .mj-bottomnav svg{width:24px;height:24px;flex:none}
  /* Fiksna donja navigacija pluta preko dna viewporta. Razmak stavljamo kao
     PADDING-BOTTOM na footer (ne margin!): margina zadnjeg djeteta "iscuri" iz
     body-ja i ne produžava skrol, pa footer ostane ispod navigacije. Padding
     uvijek produžava visinu footera, pa sadržaj footera ostaje IZNAD navigacije. */
  body{padding-bottom:0}
  .mj-footer{position:relative;z-index:1;padding-bottom:calc(var(--mj-bottom-h) + env(safe-area-inset-bottom,0px) + 22px)!important}
}