/*
Theme Name: DZZC_SpO
Theme URI: 
Author: Aleksandar Gluščević
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: dzzc_spo
Tags: 
*/
/*
  Spectra One Child – Print kit + vertical bars + Spectra Heading print sizes
  Paste this into your child theme style.css
*/


.custom-border-colour{
  /* Let Spectra/Gutenberg control width/sides/radius; we only supply color */
  border-color: var(--custom-border-color) !important;
}

/* If Spectra injects inline style="border-color: ..." after duplication/convert,
   this ensures your dynamic color still wins (their inline isn't !important). */
.custom-border-colour[style*="border-color"]{
  border-color: var(--custom-border-color) !important;
}

/* Optional: ensure inner wrappers don't visually square rounded borders */
.custom-border-colour { overflow: hidden; }
.custom-border-colour > .wp-block-group__inner-container,
.custom-border-colour .uagb-container__inner-wrap,
.custom-border-colour .uagb-container-inner-blocks{
	min-height: 100%;
}





/* ============================================================
   OPTIONAL VISIBILITY HELPERS (use in editor as needed)
   ============================================================ */
.screen-only{ display: initial; }
.print-only{  display: none; }

/* ============================================================
   PRINT RULES (A4 page, strip site chrome, neutralize content width)
   Keeps screen styling in the editor; only adjusts layout when printing.
   ============================================================ */
@media print {

	
	.custom-border-colour{
    border-color: var(--custom-border-color) !important;
  }
	
	
  @page { size: A4; margin: 12mm; }

  html, body{
    background: #fff !important;
    color: #000 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Hide site chrome (FSE template parts + common wrappers) */
  .wp-block-template-part[area="header"],
  .wp-block-template-part[area="footer"],
  .wp-site-blocks > header,
  .wp-site-blocks > footer,
  .wp-block-navigation,
  .comments, .comment-respond,
  .pagination, .widget-area, .sidebar, .no-print{
    display: none !important;
  }

  /* If you wrap printable content in a Group with class "print-page",
     make it use full printable width (bypassing “content width”). */
  .print-page{
    max-width: none !important;
    width: 210mm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

     
       height: 297mm !important;


  }

  /* Remove theme horizontal padding that can push content inward on print */
  .wp-site-blocks{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Undo Gutenberg "constrained" inner max-width so borders reach page margins */
  .print-page.is-layout-constrained > .wp-block-group__inner-container{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep logical sections intact (if you add .print-section to Groups) */
  .print-section{
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Flip helpers */
  .screen-only{ display: none !important; }
  .print-only{  display: initial !important; }

  /* ==========================================================
     PRINT TYPOGRAPHY — Spectra Heading with class "print-title"
     Heading: 3em, letter-spacing 0.05em
     Subheading: 1.7em, letter-spacing 0.05em
     ========================================================== */

  /* Heading text (Spectra Advanced Heading or raw h1–h6 inside .print-title) */
  .print-page .print-title .uagb-heading-text,
  .print-page .print-title h1,
  .print-page .print-title h2,
  .print-page .print-title h3,
  .print-page .print-title h4,
  .print-page .print-title h5,
  .print-page .print-title h6{
    font-size: 3.2em !important;
    letter-spacing: 0.01em !important;
    line-height: 1.1;
  }

  /* Subheading / Description (Spectra classes + fallback) */
  .print-page .print-title .uagb-desc-text,
  .print-page .print-title .uagb-subheading,
  .print-page .print-title .uagb-description,
  .print-page .print-title p.uagb-desc-text{
    font-size: 1.9em !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2;
  }

	
	.employee-data{
		font-size: 25px !important;
   
    line-height: 1.2;
		color: #000000 !important;
		text-align:center;
	}

	/*  tekst ispod ikone  */
	.clickable-card a,
	.head_w_sub h5{
		font-size: 25px !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2;
		color: #000000 !important;
		text-align:center;
	}

	/* NE PRINTAJ */
	
	.no-print{
		display: none !important;
	}
	
	.printaj{
		display: block !important;
	}

	 /* keep a white canvas */
  .qr-print svg { background: #fff !important; }

  /* Case A: encoder outputs a single <path> with all modules */
  .qr-print svg path {
    fill: #000 !important;
    /* White outline to create spacing between modules */
    stroke: #fff !important;
    stroke-width: 1.2px;          /* ← increase for more whitespace */
    stroke-linejoin: round;        /* rounds corners */
    stroke-linecap: round;         /* rounds caps (helps dotty feel) */
    shape-rendering: crispEdges;
    paint-order: stroke fill;      /* draw white stroke on top of black fill */
  }

  /* Case B: encoder outputs many <rect> modules */
  .qr-print svg rect:not([width="100%"]) {
    fill: #000 !important;
    stroke: #fff !important;       /* white gutters between squares */
    stroke-width: 1.2px;           /* tweak to taste */
    shape-rendering: crispEdges;
  }
	
	
}



/* Square box: height = width (screen + print) */
.square {
  aspect-ratio: 1 / 1;     /* modern, simple */
  overflow: hidden;        /* optional: clip overflow */
}

/* Make common inner wrappers stretch to fill the square */
.square > .wp-block-group__inner-container,
.square .uagb-container__inner-wrap,
.square .uagb-container-inner-blocks {
  height: 100%;
}

/* Fallback for very old engines (optional) */
@supports not (aspect-ratio: 1 / 1) {
  .square {
    position: relative;
  }
  .square::before {
    content: "";
    display: block;
    padding-top: 100%;     /* keeps a 1:1 box */
  }
  .square > * {
    position: absolute;
    inset: 0;
  }
}


/* Wrapper that makes SVG/IMG fill its parent box */
.svg-fit-parent{
  width: 100%;
  height: 100%;          /* parent must have an explicit height or aspect-ratio */
  display: block;
}

/* Child element should occupy the wrapper fully */
.svg-fit-parent > svg,
.svg-fit-parent > img{
  display: block;
  width: 100%;
  height: 100%;
}

/* IMG object-fit behaviors (inline SVG uses preserveAspectRatio) */
.svg-fit-parent[data-fit="contain"] > img{ object-fit: contain; }
.svg-fit-parent[data-fit="cover"]   > img{ object-fit: cover; }
.svg-fit-parent[data-fit="fill"]    > img{ object-fit: fill; }
.svg-fit-parent[data-fit="scale-down"] > img{ object-fit: scale-down; }


/* =========================================
   META-DRIVEN BORDER COLOR (screen + print)
   Add "custom-border-colour" on any block you want bordered.
   Only the border-color is affected.
   ========================================= */

/* Generic blocks (Group/Container/etc.) */
.custom-border-colour{
  border-color: var(--custom-border-color) !important; /* you provide the var in PHP */
}

/* If Gutenberg/Spectra injected an inline border-color, override it */
.custom-border-colour[style*="border-color"]{
  border-color: var(--custom-border-color) !important;
}

/* ===== Spectra Icon / Icon List =====
   Apply ONLY border-color on the icon’s wrapper elements.
   Does NOT touch text color, icon fill, or strokes.
*/

/* Icon block itself when you add the class on the block */
.wp-block-uagb-icon.custom-border-colour,
.custom-border-colour.wp-block-uagb-icon{
  border-color: var(--custom-border-color) !important;
}

/* Common Spectra icon wrappers that can carry a border */
.custom-border-colour .uagb-icon,
.custom-border-colour .uagb-icon__wrap,
.custom-border-colour .uagb-icon__link,
.custom-border-colour .uagb-svg-wrapper,
.custom-border-colour .uagb-icon-list__icon,
.custom-border-colour .uagb-icon-list__source-icon{
  border-color: var(--custom-border-color) !important;
}

/* If Spectra sets border-color inline on those wrappers, override it */
.custom-border-colour .uagb-icon[style*="border-color"],
.custom-border-colour .uagb-icon__wrap[style*="border-color"],
.custom-border-colour .uagb-icon__link[style*="border-color"],
.custom-border-colour .uagb-svg-wrapper[style*="border-color"],
.custom-border-colour .uagb-icon-list__icon[style*="border-color"],
.custom-border-colour .uagb-icon-list__source-icon[style*="border-color"]{
  border-color: var(--custom-border-color) !important;
}










/* Ensure overlay link fills the Spectra container completely */
.clickable-card {
  position: relative; /* ensure overlay positions relative to this */
}

.clickable-card .box-overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; /* above icon and group elements */
  display: block;
}

/* Legacy: Make sure no earlier rule hides cards incorrectly */
.hide-if-empty {
  display: block !important;
}
.hide-if-empty:not(:has(.box-overlay-link, .webshare-marker, a[href])) {
  display: none !important;
}


.box-link-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.box-link-overlay > * {
  text-align: center;
	margin: 0 !important;
}

.wpgb-djelatnost-bg, .wpgb-pretraga-parent-bg {
	height:100%;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
  z-index: 0;                 /* sit behind content */
  pointer-events: none;
	margin: 0 auto;
}

.wpgb-djelatnost-bg{
  width:10px;
border-radius: 5px;
}

.wpgb-pretraga-parent-bg {
  width:6px;
border-radius: 3px;
}



.wpgb-pretraga-parent-svg{
	width:100%;
	
}

/* Keep the centering you already added */
.wpgb-1stcol {
  display: grid;         /* grid = easy centering, minimal side-effects */
  place-items: center;   /* vertical + horizontal centering */
  text-align: center;    /* if the SVG is wrapped in an inline element */
}

.wpgb-1stcol svg {
  display: block;        /* removes inline-SVG baseline gap */
  max-width: 100%;
  height: auto;
}

.wpgb-1stcol div{
  
  max-width: 100%;
  height: auto;
	display: grid;         /* grid = easy centering, minimal side-effects */
  place-items: center;   /* vertical + horizontal centering */
  text-align: center; 
}



/* Hide the wrapper if its direct h5 child has no content (RADNO VRIJEME) */
.head_w_sub:has(> h5:empty) {
  display: none;
}

.employee-data{
	text-align:center;
	line-height: 1em;
}
.titula{
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--regular);
	white-space: nowrap;
	letter-spacing: normal !important;
}




/* make the SVG (or any img) fill as large as possible while keeping aspect */
.term-svg-1 {
 width: 3.5em;
    height: 3.5em;
    display: inline-block;
    vertical-align: middle;
}

.term-svg{
width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;

}

/* turn dark/black SVGs to pure white */
.oboji_bijelo {
  filter: brightness(0) invert(1);
}

.titule-lista{
	font-size:0.8em !important;
font-weight:500 !important;}





/* ikone na kartici lokacija */

/* === Layout === */
.zs-dj-counts--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9em 1.3em;
}

/* === Each Item === */
.zs-dj-counts__item {
  display: inline-flex;
  align-items: center;   /* vertical centering */
  justify-content: center;
  line-height: 1.2;
  cursor: help;
  padding: 0.3em 0.8em;
  border: none !important;
  background: none !important;
}

/* === Inner Content (icon + x + number) === */
.zs-dj-content {
  display: inline-flex;
  align-items: center;   /* ensure vertical alignment within */
  justify-content: center;
  gap: 0;                /* manual spacing handled below */
}

/* === ICON (forced size + true vertical center) === */
.zs-dj-counts__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.zs-dj-counts__icon svg {
  width: 1.8em !important;      /* control size */
  height: 1.8em !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  vertical-align: middle;
  transform: translateY(0);     /* reset shift */
}

/* === Separator (x) === */
.zs-dj-counts__sep {
  font-size: 0.7em !important;
  font-weight: 700 !important;
  margin: 0 0.2em 0 0.03em !important;
  line-height: 1;
  user-select: none;
}

/* === Number === */
.zs-dj-counts__num {
  font-weight: 600;
  line-height: 1;
  margin-left: 0.25em;
}

/* Clean up old bar remnants if any */
.zs-dj-bar,
.zs-dj-counts__item::before,
.zs-dj-counts__item::after {
  display: none !important;
  content: none !important;
}