/*
Theme Name: Maja Vidmar Uskoro
Theme URI: https://it-kol.com/
Author: it-Kol
Description: Privremena stranica "Mrežne stranice uskoro" za odvjetnicu Maju Vidmar. Podaci za kontakt uređuju se na vrhu datoteke functions.php.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: mv-uskoro
*/

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/poppins-500.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400-italic.woff) format('woff')}

:root{--plava:#1F7AA3;--plava-tamna:#17607F;--tinta:#26303A;--siva:#56626D;--papir:#FFFFFF;--crta-linka:#B5C9D4}
*,*::before,*::after{box-sizing:border-box}
html{font-size:max(100%,.74vw);-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
body,h1,p,dl,dd{margin:0}
body{background:var(--papir);color:var(--tinta);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}

/* Raspored: dva stupca, na uskim i uspravnim ekranima jedan ispod drugog */
.stranica{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.admin-bar .stranica{min-height:calc(100vh - 32px);min-height:calc(100svh - 32px)}
.ploha{background:var(--plava);display:flex;align-items:center;justify-content:center;padding:3rem max(3rem,env(safe-area-inset-left))}
.znak{display:block;width:min(100%,24rem);height:auto;overflow:visible}
.znak .crta{fill:none;stroke:#FFFFFF;stroke-width:38;stroke-linecap:round;stroke-linejoin:round}
.podaci{container-type:inline-size;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:3rem max(clamp(2rem,7vw,7rem),env(safe-area-inset-right)) 3rem clamp(2rem,7vw,7rem)}

/* Tekst */
h1{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.2;font-weight:500}
h1 em{font-size:.5em;font-weight:400;color:var(--siva);white-space:nowrap}
.uloga{margin-top:.25rem;font-size:1.25rem;color:var(--siva)}
.poruka{margin-top:2.25rem;font-size:1.125rem;font-weight:500;color:var(--plava-tamna);line-height:1.4}
.poruka span{display:block;margin-top:.25rem;font-size:1rem;font-weight:400;color:var(--siva);line-height:1.5}

/* Kontakti */
.kontakt{margin-top:2.25rem;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1.25rem;align-items:baseline}
.kontakt dt{color:var(--siva);font-size:.9375rem}
.kontakt dd{min-width:0;overflow-wrap:anywhere}
a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--crta-linka);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--plava-tamna);text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--plava);outline-offset:3px;border-radius:2px}

/* Kad u stupcu nema mjesta, oznaka ide iznad podatka */
@container (max-width:24rem){
  .kontakt{grid-template-columns:minmax(0,1fr);gap:0}
  .kontakt dd{margin-bottom:.6rem}
  .kontakt dd:last-child{margin-bottom:0}
}

@media (max-width:820px) and (orientation:portrait),(max-width:560px){
  .stranica{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .ploha{padding:max(3rem,env(safe-area-inset-top)) 1.5rem 3rem}
  .znak{width:min(60%,15rem)}
  .podaci{justify-content:flex-start;padding:2.25rem max(1.5rem,env(safe-area-inset-right)) max(3rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left))}
}
@media (max-width:782px){
  .admin-bar .stranica{min-height:calc(100vh - 46px);min-height:calc(100svh - 46px)}
}
/* Nizak ekran, npr. mobitel položen na bok */
@media (max-height:480px) and (orientation:landscape){
  .ploha{align-items:flex-start;padding-top:2rem;padding-bottom:2rem}
  .podaci{padding-top:1.5rem;padding-bottom:1.5rem}
  .poruka,.kontakt{margin-top:1.25rem}
}

/* Jedno iscrtavanje znaka pri učitavanju */
@media (prefers-reduced-motion:no-preference){
  .znak .crta{stroke-dasharray:1 1.1;stroke-dashoffset:1.05;animation:crta 1.2s cubic-bezier(.55,.1,.3,1) .1s forwards}
  .znak .crta:nth-child(2){animation-delay:.3s}
  .znak .crta:nth-child(3){animation-delay:.6s}
}
@keyframes crta{to{stroke-dashoffset:0}}

@media (forced-colors:active){
  .znak .crta{stroke:CanvasText}
}
@media print{
  .stranica{display:block;min-height:0}
  .ploha{background:none;justify-content:flex-start;padding:0 0 1.5rem}
  .znak{width:8rem}
  .znak .crta{stroke:#1F7AA3;animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .podaci{padding:0}
  a{text-decoration:none}
}