/* ── Hide scrollbar globally, keep scrolling ─────────────── */

html,
body {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ / old Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;               /* Chrome, Safari, new Edge */
}

/* ── Navigation backdrop — top-to-bottom green fade ──────────
   Sage-green gradient (palette: #6f7760 → transparent) behind the
   nav on every page, improving white text contrast over varied
   page backgrounds. */
.fh5co-nav {
    background: linear-gradient(
        to bottom,
        rgba(60, 68, 50, 0.9) 0%,
        rgba(60, 68, 50, 0.55) 55%,
        rgba(60, 68, 50, 0) 100%
    );
    padding: 18px 0 35px;
    pointer-events: none;
}

.fh5co-nav > .container {
    pointer-events: auto;
}

@media screen and (max-width: 768px) {
    .fh5co-nav {
        padding: 10px 0 25px;
    }
}

/* ── Navigation dropdown ─────────────────────────────────── */

.fh5co-nav ul li.has-dropdown .dropdown {
    width: 160px;
}

/* Keep dropdown submenu link color consistent regardless of which
   page is active — the global `li.active > a { color: #fff }` rule
   would otherwise make the current page's submenu entry invisible
   on the dropdown's light background. */
.fh5co-nav ul li.has-dropdown .dropdown li.active > a,
.fh5co-nav ul li.has-dropdown .dropdown li.active > a:focus {
    color: #999999 !important;
}

.fh5co-nav ul li.has-dropdown .dropdown li.active > a:hover {
    color: #000 !important;
}

/* ── Envelope Overlay ─────────────────────────────────────── */

#envelope-overlay {
    position: fixed;
    inset: 0;
    background: #e9b3b3;
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 1.1s ease, transform 1.1s ease;
    transform: scale(1);
}

#envelope-overlay.closing {
    opacity: 0;
    transform: scale(1.15);
    pointer-events: none;
}

.env-scene {
    position: relative;
    width: 420px;
    height: 280px;
    margin-bottom: 48px;
}

/* Letter card — slides up out of the envelope */
.env-letter-card {
    position: absolute;
    bottom: 20px;
    left: 25px;
    right: 25px;
    height: 240px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 20px;
    text-align: center;
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
    transition-delay: 0.55s;
}

.env-letter-card.revealed {
    transform: translateY(-155px);
}

.env-card-pre {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #97a085;
    display: block;
}

.env-card-names {
    font-family: 'Sacramento', cursive;
    font-size: 50px;
    color: #3a3a3a;
    margin: 4px 0;
    line-height: 1;
}

.env-card-heart {
    color: #e9b3b3;
    font-size: 14px;
    display: block;
}

.env-card-date {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 11px;
    color: #aaa;
    letter-spacing: 2px;
    display: block;
}

/* Envelope body */
.env-body {
    position: absolute;
    inset: 0;
    background: #6f7760;
    border-radius: 3px;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Fold decorations */
.env-fold-l {
    position: absolute;
    inset: 0;
    background: #7d8670;
    clip-path: polygon(0 0, 44% 50%, 0 100%);
}

.env-fold-r {
    position: absolute;
    inset: 0;
    background: #626b54;
    clip-path: polygon(100% 0, 56% 50%, 100% 100%);
}

.env-fold-b {
    position: absolute;
    inset: 0;
    background: #5c6450;
    clip-path: polygon(0 100%, 50% 56%, 100% 100%);
}

/* Flap — opens with 3-D flip */
.env-flap {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, #97a085 0%, #7d8a6e 100%);
    clip-path: polygon(0 0, 100% 0, 50% 52%);
    transform-origin: 50% 0%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.env-flap::after {
    content: '♥';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #e9b3b3;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.env-flap.open {
    transform: perspective(900px) rotateX(-180deg);
}

/* Hint */
.env-hint {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(111, 119, 96, 0.8);
    margin: 0;
    animation: env-hint-blink 2.4s ease-in-out infinite;
    transition: opacity 0.4s;
}

.env-hint.gone {
    opacity: 0;
}

@keyframes env-hint-blink {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* Mobile */
@media screen and (max-width: 520px) {
    .env-scene {
        width: 88vw;
        height: calc(88vw * 0.667);
        margin-bottom: 36px;
    }

    .env-letter-card {
        left: calc(88vw * 0.06);
        right: calc(88vw * 0.06);
        height: calc(88vw * 0.571);
        bottom: calc(88vw * 0.048);
    }

    .env-letter-card.revealed {
        transform: translateY(calc(88vw * -0.37));
    }

    .env-card-names {
        font-size: calc(88vw * 0.115);
    }
}

.arrow-bg {
    border-top: solid 5px #97a085;
}

/* ── Index header — swap background image on mobile ───────────
   index.html sets background-image: mixed.jpg inline; override
   it on small screens with the portrait-oriented ruce.jpg. Scoped
   to the index header only (other pages use .fh5co-cover-sm). */
@media screen and (max-width: 768px) {
    #fh5co-header.fh5co-cover:not(.fh5co-cover-sm) {
        background-image: url(../images/predsvatebni/ruce.jpg) !important;
    }
}

/* ── Index header — shift centered content lower ──────────────
   display-tc is vertical-align: middle; padding-top reduces the
   space above the content so the centered block sits lower in
   the header, giving more visual breathing room at the top. */
#fh5co-header .display-tc {
    padding-top: 160px;
}

@media screen and (max-width: 768px) {
    #fh5co-header .display-tc {
        padding-top: 80px;
    }
}

/* ── Index header — optical centering of the names ─────────────
   The Sacramento "d" at the end of "David" overhangs its glyph
   box, so the title looks shifted right. Nudge it ~5px left to
   visually balance it within the centered container. */
#fh5co-header .display-tc h1 {
    transform: translateX(-5px);
}

@media screen and (min-width: 769px) {
    #fh5co-header .display-tc h1 {
        font-size: 110px;
    }
}

/* ── Index header — wider gap between titles and countdown ─────
   The header block is vertically centered (display-tc), so adding
   top margin on the countdown both pushes it down and opens up a
   gap between the titles and the countdown — letting the
   background image breathe through the middle. */
#fh5co-header .simply-countdown {
    margin-top: 16em;
    margin-bottom: 3em;
}

@media screen and (max-width: 768px) {
    #fh5co-header .simply-countdown {
        margin-top: 8em;
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 480px) {
    #fh5co-header .simply-countdown {
        margin-top: 6em;
    }
}

/* ── Subpage header (fh5co-cover-sm) — shorter than index ─ */

.fh5co-cover.fh5co-cover-sm,
.fh5co-cover.fh5co-cover-sm .display-t,
.fh5co-cover.fh5co-cover-sm .display-tc {
    height: 400px;
}

@media screen and (max-width: 768px) {
    .fh5co-cover.fh5co-cover-sm,
    .fh5co-cover.fh5co-cover-sm .display-t,
    .fh5co-cover.fh5co-cover-sm .display-tc {
        height: 280px;
    }
}

/* ── Go-to-top button ────────────────────────────────────── */

.gototop a {
    background: linear-gradient(145deg, #97a085 0%, #6f7760 100%);
    border-radius: 50%;
    box-shadow: 0 3px 14px rgba(0,0,0,.22);
    transition: box-shadow .2s ease, transform .2s ease;
}
.gototop a:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.32);
    transform: translateY(-2px);
}

/* ── Footer ──────────────────────────────────────────────── */

#fh5co-footer {
    padding: 2em 0;
}

#fh5co-footer p {
    font-family: "Sacramento", Arial, serif;
    font-weight: 700;
    font-size: 48px;
    color: #6f7760;
    margin: 0;
}

@media screen and (max-width: 768px) {
    #fh5co-footer p {
        font-size: 6vw;
    }
}

/* ── Venue sections (kdy-a-kde.html) ────────────────────── */

/* Widen the container on kdy-a-kde so the sections get more room.
   Wrapper background is neutralized — each .venue-row paints its own
   full-width background (alternating gray/white). */
#fh5co-venue {
    overflow-x: hidden;
    background: #fff;
}

#fh5co-venue > .container {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    #fh5co-venue > .container { max-width: 95%; width: 95%; }
}
@media (min-width: 1200px) {
    #fh5co-venue > .container { max-width: 1400px; width: 90%; }
}

/* Stretch each venue-row to full viewport width so its background
   and bottom border run edge-to-edge, while the content area stays
   aligned with the container via compensating padding. */
#fh5co-venue .venue-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 50px calc(50vw - 50%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#fh5co-venue .venue-row:last-child {
    border-bottom: none;
}

/* Alternating background: odd = gray (palette), even = white */
#fh5co-venue .venue-row:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.04);
}

#fh5co-venue .venue-row:nth-of-type(even) {
    background: #fff;
}

/* First venue-row: inverted icon colors (sage fill, pink glyph) + larger size */
#fh5co-venue .venue-row:first-of-type .feature-left .icon {
    background: #97a085;
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
}

#fh5co-venue .venue-row:first-of-type .feature-left .icon i {
    color: #f1d3d3;
    font-size: 40px;
}

#fh5co-venue .venue-row:first-of-type .feature-left .feature-copy h3 {
    font-size: 22px;
    margin-bottom: 6px;
}

#fh5co-venue .venue-row:first-of-type .feature-left .feature-copy p {
    font-size: 16px;
}

#fh5co-venue .venue-row > .venue-col {
    float: none;
}

/* Center content in text columns */
#fh5co-venue .venue-info,
#fh5co-venue .venue-address {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Justify the venue description paragraphs (section 3) */
#fh5co-venue .venue-info > p {
    width: 100%;
    text-align: justify;
    hyphens: auto;
}

#fh5co-venue .venue-info > p.venue-cta-note {
    text-align: center;
}

/* Center icon + text blocks in section 1 */
#fh5co-venue .venue-info .feature-left {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}

#fh5co-venue .venue-info .feature-left .icon {
    float: none;
    margin: 0 0 10px 0;
}

#fh5co-venue .venue-info .feature-left .feature-copy {
    float: none;
    width: auto;
    text-align: center;
}

/* Swap columns visually on desktop for alternating rows */
@media (min-width: 768px) {
    #fh5co-venue .venue-row-reverse .venue-info,
    #fh5co-venue .venue-row-reverse .venue-address {
        order: 2;
    }
    #fh5co-venue .venue-row-reverse .venue-img,
    #fh5co-venue .venue-row-reverse .venue-map {
        order: 1;
    }
}

#fh5co-venue .venue-photo {
    width: 100%;
    border-radius: 4px;
}

#fh5co-venue .venue-img-cover {
    align-self: stretch;
}

#fh5co-venue .venue-img-cover .venue-photo {
    height: 100%;
    object-fit: cover;
}

#fh5co-venue .video-embed,
#fh5co-venue .map-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 4px;
}

#fh5co-venue .video-embed iframe,
#fh5co-venue .map-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Soften the Google Maps embed to blend with the sage/cream palette */
#fh5co-venue .map-embed iframe {
    filter: grayscale(0.6) sepia(0.15) contrast(0.95) saturate(0.9);
}

/* Clickable venue title — inherits heading style, subtle hover */
#fh5co-venue .venue-title-link,
#fh5co-venue .venue-title-link:focus {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#fh5co-venue .venue-title-link:hover {
    color: #97a085;
    border-bottom-color: #97a085;
}

.venue-cta-note {
    margin-top: 18px;
    font-size: 14px;
    letter-spacing: 1px;
}

.venue-cta-note a {
    color: #97a085;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.venue-cta-note a:hover,
.venue-cta-note a:focus {
    color: #97a085;
    border-bottom-color: #97a085;
    text-decoration: none;
}

.btn-navigovat {
    margin-top: 16px;
    border-color: #97a085;
    color: #97a085;
    letter-spacing: 1px;
}

.btn-navigovat:hover,
.btn-navigovat:focus {
    background-color: #97a085;
    color: #fff;
    border-color: #97a085;
}

@media (max-width: 767px) {
    #fh5co-venue .venue-info,
    #fh5co-venue .venue-address,
    #fh5co-venue .venue-video,
    #fh5co-venue .venue-img:not(:last-child) {
        margin-bottom: 24px;
    }
}

/* ── Harmonogram sekce ──────────────────────────────────── */

#fh5co-event {
    background: #6f7760;
    padding: 3em 0;
    height: auto;
    float: none;
}

/* ── Horizontal timeline (PC) ───────────────────────────── */

.hm-timeline {
    display: flex;
    align-items: flex-start;
    position: relative;
    /* horizontal padding keeps first/last dots off the edge */
    padding: 24px 40px 40px;
}

/* Horizontal connector line through all dots */
.hm-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 33px; /* padding-top (24) + dot radius (9) */
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 0;
}

.hm-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px;
}

.hm-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e9b3b3;
    border: 3px solid rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.hm-label {
    padding-top: 14px;
    text-align: center;
}

.hm-time {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.hm-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
}

/* ── Vertical timeline (mobile) ─────────────────────────── */

@media screen and (max-width: 768px) {
    #fh5co-event .fh5co-heading {
        margin-bottom: 1em;
    }

    .hm-timeline {
        flex-direction: column;
        padding: 8px 20px 0 20px;
        max-width: 360px;
        margin: 0 auto;
    }

    /* Vertical connector line — centered on the dot */
    .hm-timeline::before {
        left: 28px;   /* item-offset (20) + dot-radius (9) - 1 */
        top: 17px;
        bottom: 17px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .hm-item {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 0;
        margin-bottom: 20px;
        position: relative;
        width: 100%;
    }

    .hm-item:last-child {
        margin-bottom: 8px;
    }

    .hm-dot {
        position: relative;
        flex-shrink: 0;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
    }

    .hm-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 0;
        text-align: left;
        width: 100%;
    }

    .hm-time {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 40px;
        text-align: right;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.55);
    }

    .hm-title {
        font-size: 14px;
        text-align: left;
    }
}

/* ===== Galerie: header image alignment ===== */
/* mobile: show the bottom of the image */
.galerie-cover {
	background-position-y: bottom;
}
/* non-mobile: lift the crop up off the bottom. A percentage keeps the
   image fully covering (no empty space) and only changes which slice
   shows; a fixed px offset would reveal a gap when the image doesn't
   overflow far enough. */
@media screen and (min-width: 769px) {
	.galerie-cover {
		background-position-y: 70%;
	}
}

/* ===== Galerie: divider between grid and footer ===== */
.gallery-divider {
	height: 6px;
	background: #e3e8dc;
	width: 100%;
}

/* ===== Galerie: section heading ===== */
/* collapse the section's top padding and the heading's bottom margin so the
   green band fills the entire space between the page header and the grid */
#fh5co-gallery {
	padding-top: 0;
}
#fh5co-gallery .fh5co-heading {
	margin-bottom: 0;
}

h2.gallery-title {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e3e8dc;
	color: #4f5743;
	text-transform: uppercase;
	letter-spacing: 2px;
	white-space: nowrap;
	font-size: 32px;
	/* full-bleed: span the entire viewport width */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 40px 16px;
}

@media screen and (max-width: 768px) {
	h2.gallery-title {
		font-size: 22px;
		letter-spacing: 1px;
		padding: 28px 12px;
	}
}

@media screen and (max-width: 480px) {
	h2.gallery-title {
		font-size: 16px;
		letter-spacing: 0.5px;
	}
}

/* ===== Galerie: full-width image grid ===== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
	/* break out of the .container to span the full viewport width */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0 8px;
}

.gallery-grid__item {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f1f1f1;
	aspect-ratio: 1 / 1;
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease, opacity .4s ease;
}

.gallery-grid__item:hover img,
.gallery-grid__item:focus img {
	transform: scale(1.06);
	opacity: .9;
}

@media screen and (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 5px;
		padding: 0 5px;
	}
}

@media screen and (max-width: 480px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===== Vítejte! heading: tighter top/bottom spacing ===== */
#fh5co-couple {
	padding-top: 3em;
	padding-bottom: 3em;
}
#fh5co-couple .fh5co-heading {
	margin-bottom: 2em;
}

/* Mobile: divider between the two person sections — a 4px line
   (upper half pink, lower half green) with the small pulsing heart
   centered on it. Reuses the .heart element that sits between the
   two sections in the DOM (hidden on desktop's stacked view). */
@media screen and (max-width: 768px) {
	.heart {
		display: flex;
		position: relative;
		top: auto;
		height: auto;
		clear: both;
		margin: 25px 0;
		align-items: center;
		justify-content: center;
		animation: none;
	}
	.heart::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 4px;
		transform: translateY(-50%);
		background: linear-gradient(to bottom, #f1d3d3 0 50%, #97a085 50% 100%);
	}
	.heart i {
		position: relative;
		z-index: 1;
		font-size: 16px;
		padding: 12px;
		animation: pulse 1s ease infinite;
	}
}