@charset "UTF-8";
/******************************************************
/// Essential Guide Croatia + House Rules
******************************************************/
#guides .sectionWrap { border-radius: 30px; }
#guides .sectionStatic .sectionTitleWrap { padding: 0 50px; }

#guides .staticContent { width: 100%;
    min-width: 100%;
    position: relative;
    background: rgba(255, 255, 255, .1);
    color: #3d5ca0;
    font-weight: 600;
    border: 2px solid rgba(5, 146, 194, .25);
    box-shadow: 0 0 10px rgba(0, 114, 186, .08), 0 12px 18px -14px rgba(0, 0, 0, .18);
    margin: 0;
    text-align: center;
    border-radius: 16px;
    padding: 30px 35px; }

/* Search */
#guide-search, .search-wrapper input{ width: 100%; max-width: 450px; margin: 0 auto 2rem; padding: .6rem 1rem; border: 2px solid #0592c2; border-radius: 4px; font-family: "Asap Condensed", sans-serif; font-size: 1rem; font-weight: 700; color: #0592c2; background-image: linear-gradient(-135deg, rgba(155,208,223,.2) 0%, rgba(155,208,223,.3) 100%); }
#guide-search:hover { background-image: linear-gradient(135deg, rgba(155,208,223,.8) 100%, rgba(155,208,223,.4) 0%); }
#guide-search:focus-visible, .search-wrapper input:focus-visible { outline: 3px solid rgba(5,146,194,.35); outline-offset: 2px; }
.search-wrapper { position: relative; display: flex; align-items: center; max-width: 450px; width: 100%; margin: 0 auto 2rem; }
.search-wrapper input { flex: 1; padding-right: 2.5rem; }

/* Voice search button */
#voice-search{ position: absolute; right: 6px; top: 4px; background: #0592c2; border: none; color: rgba(155,208,223,1); padding: .5rem; cursor: pointer; border-radius: 4px; line-height: 1; transition: transform .3s, background .3s, color .3s; }
#voice-search:hover, #voice-search:focus-visible{ color: #037b98; outline: 2px solid #037b98; background: #fff; }
#voice-search.mic-disabled{ color: #c00; cursor: not-allowed; background: #fff; }
#voice-search.mic-disabled::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:2px; background:#c00; transform: rotate(-45deg); }
#voice-search.mic-disabled:hover, #voice-search.mic-disabled:focus{ outline:none; background:inherit; color:#c00; }

/* Guides grid */
.guides-grid { display:flex; flex-wrap:wrap; align-items:stretch; gap:1.2rem; padding:0; list-style:none; margin:2rem auto; width:100%; max-width:1500px; }
.sectionStatic ul.guides-grid li { list-style-type:none; margin:0; padding:0; }
.sectionStatic ul.guides-grid li::before { display:none!important; }

.guides-grid li { flex:1 1 250px; display:flex; border-radius:8px; }
.guides-grid a { display:flex; flex-direction:column; justify-content:center; flex:1; padding:1.2rem; background: rgba(155,208,223,.4); border-radius:8px; transition: background-color .3s, transform .3s, box-shadow .3s; box-shadow: 0 2px 5px rgba(0,0,0,.16); border: 2px solid rgba(0,0,0,.1); text-decoration: none; }
.guides-grid a:focus-visible, .guides-grid a:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,.2); outline: 3px solid rgba(5,146,194,.28); outline-offset: 2px; }
.guides-grid a[aria-disabled="true"]{ opacity:.5; pointer-events:none; cursor:not-allowed; }

.guides-grid i, .guides-grid a i { font-size: 1.5rem; margin-bottom: .6rem; color: #0592c2; transition: transform .3s, color .3s; display:block; }
.guides-grid a:hover i, .guides-grid a:focus i { transform:none; color:#037b98; }

.guides-grid h3 { margin:.6rem 0; font-size:1.2rem !important; text-shadow:none; }
.guides-grid a h3 { margin:.5rem 0; }
.guides-grid p { margin:0; font-size:.95rem; color:#555; }

@media print {
	#guide-search, .guides-grid a:hover, body > *:not(main) { display:none !important; } 
	.guides-grid { display:block; } 
	.guides-grid li { margin-bottom:1.5rem; }
}

/* === Reusable TOC styles === */
.toc-scope { --accent:#f6c45a; --brand:#0592c2; --ink:#1d2e3a; }
.toc-scope h2[id], .toc-scope h3[id], .toc-scope h4[id]{ scroll-margin-top: 90px; }

.toc-scope .toc-sidebar{ padding:10px 20px; border-radius:10px; position:sticky; top:50px; border-left:4px solid var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.08); background:#fff; }
.toc-scope .toc-sidebar h4{ margin:0 0 10px; font-size:30px; text-transform:uppercase; font-weight:800; border-bottom:4px solid var(--accent); padding-bottom:10px; }

/* List  */
.toc-scope .list-toc{ list-style:none; margin:10px 0 0; padding:0; }
.toc-scope .list-toc ul{ list-style:none; margin:0; padding:0; }
.toc-scope .list-toc li{ margin:.05em 0 !important; }
.toc-scope .list-toc a{ position:relative; display:inline-block; font-size:20px; line-height:1.1; font-weight:800; text-transform:uppercase; text-decoration:none; transition: transform .2s ease, color .2s ease; }
.toc-scope .list-toc li:hover > a, .toc-scope .list-toc a:focus-visible{ transform: translateX(5px); color:#babac0; outline:none; }
.toc-scope .list-toc li.active > a, .toc-scope .list-toc a[aria-current="true"],
.toc-scope .list-toc a[aria-current="page"]{ color: var(--accent); }

/* Live search (shared) */
.toc-scope .liveSearchWrapper{ position:relative; margin:0; padding:0; }
.toc-scope .search-bar{ position:relative; display:flex; align-items:center; max-width:500px; width:100%; margin:0 auto 2rem; }
.toc-scope .search-bar input{ flex:1; padding:.6rem 2.5rem .6rem 1rem; border:2px solid var(--brand); border-radius:4px; font-size:1rem; color:var(--brand); font-family:"Asap Condensed",system-ui,sans-serif; font-weight:700; background-image: linear-gradient(-135deg, rgba(155,208,223,.2) 0%, rgba(155,208,223,.3) 100%); }
.toc-scope .search-bar input:hover{ background-image: linear-gradient(135deg, rgba(155,208,223,.8) 100%, rgba(155,208,223,.4) 0%); }
.toc-scope .voice-btn{ position:absolute; right:.3rem; top:.25rem; display:inline-flex; align-items:center; justify-content:center; background:var(--brand); color:rgba(155,208,223,1); border:0; padding:.5rem; border-radius:4px; line-height:1; cursor:pointer; transition: transform .3s ease, background .3s ease, color .3s ease; }
.toc-scope .voice-btn:hover,
.toc-scope .voice-btn:focus-visible{ color:#037b98; outline:2px solid #037b98; background:#fff; }
.toc-scope .voice-btn.mic-disabled{ color:#c00; cursor:not-allowed; background:#fff; }
.toc-scope .voice-btn.mic-disabled::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:2px; background:#c00; transform: rotate(-45deg); }
.toc-scope mark { background:#fff0a6; padding:0 2px; border-radius:2px; }

/* Layout columns */
@media (min-width:768px){ 
	.toc-scope .row{ display:flex; flex-wrap:wrap; margin-inline:-15px; } 
	.toc-scope .col{ padding-inline:20px; box-sizing:border-box; } 
	.toc-scope .col:first-child{ width:70%; } 
	.toc-scope .col:last-child{  width:30%; } 
	.toc-scope .toggle-button{ display:none; }
}

/* Mobile slide-in + optional mask */
@media (max-width:767px){ 
	.toc-scope .col:first-child{ order:2; } 
	.toc-scope .toc-sidebar{ margin-bottom:40px; position:fixed; right:0; top:0; height:100vh; max-width:85vw; width:320px; transform: translateX(100%); transition: transform .3s ease-in-out; z-index:1000; overflow:auto; }
	.toc-scope .toc-sidebar.active{ transform: translateX(0); }
	.toc-scope .toggle-button{ position:fixed; right:10px; bottom:10px; z-index:1001; }
	.toc-scope .toc-mask{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:999; }
	.toc-scope .toc-mask.visible{ opacity:1; pointer-events:auto; }
}


.mfp-content .sectionWrap, .mfp-content .sectionStatic {
    padding: 0px;

    transform: scale(0.8);
    width: 90%;
    justify-content: center;
    position: relative;
    z-index: 97;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin: 0;
    align-items: flex-start;
    overflow: hidden;
    text-align: left;
    border-radius: 30px;
    background: transparent;
	 background-color: #fff;
    box-shadow: none;
}
.mfp-close {
    width: 60px;
    height: 60px;
    line-height: 60px;
    right: 0;
    top: 0;
    opacity: .65;
    padding: 18px;
    font-size: 60px;
}
button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
}
.mfp-close-btn-in .mfp-close {
    color: #333;
}
@media screen and (min-width: 1200px) { h1.sectionTitle, h2.sectionTitle { font-size: 65px; position: relative; top: 0; transform: rotate(0deg); } }