/*
 * Didysis Karpis supplementary styles.
 * 1. Header / navigation
 * 2. Footer
 * 3. Content sections (patterns)
 * 4. dvee-reservations overrides (tokens on body)
 * 5. Responsive
 */

/* 1. Header / navigation ------------------------------------------------ */
.site-header a { text-decoration: none; }
.site-header__logo { margin: 0; }
.site-header__logo img { display: block; }
.site-header__auth .wp-block-button__link { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* On the front page the bar floats over the hero photo */
body.home .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
}
/* ...and the hero starts at the very top: kill the root block gap and any
 * top padding on main that would show as a white strip above the photo. */
body.home main.wp-block-group {
	margin-block-start: 0;
	padding-top: 0;
}
/* The bar is ~80px tall and out of flow, so reserve that space inside the
 * cover: on narrow screens the centered hero text grows past min-height and
 * would otherwise start under the bar. */
body.home .hero-cover { padding-top: 6rem; }

/* Plugin-injected auth items (dvee-reservations class-nav-menu.php) */
.site-header .dvee-nav-auth { position: relative; list-style: none; }
.site-header .dvee-nav-auth .dvee-dropdown-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	min-width: 12rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
	display: none;
	z-index: 40;
}
.site-header .dvee-nav-auth:hover .dvee-dropdown-menu,
.site-header .dvee-nav-auth:focus-within .dvee-dropdown-menu { display: block; }
.site-header .dvee-dropdown-menu a {
	display: block;
	padding: 0.4rem 1rem;
	color: var(--wp--preset--color--primary);
}
.site-header .dvee-dropdown-menu a:hover { background: color-mix(in srgb, var(--wp--preset--color--secondary) 20%, white); }
.site-header .dvee-nav-divider { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 15%, white); margin: 0.4rem 0; }

/* 2. Footer -------------------------------------------------------------- */
/* Sticky footer: on short pages the footer sits at the bottom of the viewport
 * instead of leaving white space under it. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex-grow: 1; }

.site-footer a { color: inherit; }
.site-footer > * { margin-block-start: 0; }
.site-footer__waves img { display: block; width: 100%; height: auto; }
/* Per the design, the waves image overlaps the green band (the gray wave dips
 * into it): in Figma 157px of the 273px-tall image sits on the band, i.e.
 * ~9.2% of the image's width. Percent margins resolve against width. */
.site-footer__waves {
	margin: 0 0 -9.2%;
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.site-footer__icon { margin: 0; flex-shrink: 0; }
.site-footer__icon img { display: block; }
.site-footer__map img { max-width: 300px; width: 100%; height: auto; }
.site-footer__col { min-width: 180px; }
/* Push the band's content below the 9.2% wave overlap, whatever the width. */
.site-footer__band { padding-top: calc(9.2% + var(--wp--preset--spacing--40)); }

/* 3. Content sections ---------------------------------------------------- */
/* Hero */
.hero-cover .hero-title { max-width: 480px; }
/* Make the cover (not its inner container) the containing block, so the
 * decor offsets are relative to the full hero area. */
.hero-cover .wp-block-cover__inner-container { position: static; }
/* Inset hero content to the 1240px content column regardless of how the
 * running WP version handles root padding inside covers. */
.hero-cover .wp-block-cover__inner-container {
	width: 100%;
	padding-left: max(1.5rem, calc((100% - 1240px) / 2));
	padding-right: max(1.5rem, calc((100% - 1240px) / 2));
}
/* Let the doodles hang over the hero's bottom edge, like the design */
.hero-cover.wp-block-cover { overflow: visible; }
.hero-decor {
	position: absolute;
	pointer-events: none;
	z-index: 5;
}
.hero-decor--hook {
	left: 4%;
	bottom: 0;
	width: 82px;
	transform: translateY(55%) rotate(133deg);
}
.hero-decor--baits {
	right: 6%;
	bottom: 0;
	width: 150px;
	transform: translateY(90%);
}

/* Section decorations */
.fish-decor { width: 94px; opacity: 0.22; }
.fish-decor--flip { transform: scaleX(-1); }

/* Gallery */
.akimirkos__gallery .wp-block-image img { box-shadow: -4px 4px 8px rgb(0 0 0 / 0.25); }
.laimikiai__gallery .wp-block-image figcaption { border-radius: 0 0 20px 20px; } /* core overlay caption follows the 20px image corners */

/* Rules ("Taisyklės") page — photo column left, numbered rules right */
/* ponytail: the pattern carries its own H1; hide page.html's post-title instead of adding a title-less template. */
main:has(.taisykles) > .wp-block-post-title { display: none; }
.taisykles__text { position: relative; }
.taisykles__decor {
	position: absolute;
	top: -2.5rem;
	right: 0;
	width: 120px;
	opacity: 0.22;
	pointer-events: none;
}
.taisykles__title { font-weight: 800; padding-left: 2.25rem; position: relative; }
.taisykles__title::before { /* green check circle, no asset needed */
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #34a853 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.taisykles__list { list-style: none; padding-left: 0; counter-reset: rule; }
.taisykles__list li { counter-increment: rule; margin-bottom: 1.25rem; font-weight: 500; line-height: 1.5; }
.taisykles__list li::before { content: counter(rule) ". "; font-weight: 800; }
@media (max-width: 781px) { .taisykles__photos { order: 2; } } /* rules before photos once core stacks the columns */

/* Cards */
.price-card { box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); }
.news-card { box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); overflow: hidden; }

/* Records */
.record-card__value { font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; }

/* Sector + pond-plan popups (native popover) */
.sector-popup {
	position: fixed;
	inset: 0; /* with margin:auto = centered; inset:auto pinned it top-left */
	margin: auto;
	max-width: 28rem;
	width: calc(100vw - 2rem);
	padding: 1.5rem;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.3);
}
.sector-popup::backdrop { background: rgb(15 49 14 / 0.55); }
.sector-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: 0;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--wp--preset--color--primary);
}

/* Pond plan popup — wider, dark title bar, image fills the body */
.pond-plan-popup { width: fit-content; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; }
.pond-plan-popup__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.75rem 2.5rem;
	background: var(--wp--preset--color--primary);
}
.pond-plan-popup__title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.pond-plan-popup .sector-popup__close { color: var(--wp--preset--color--base); }
/* ponytail: 3.5rem ≈ title bar height; image drives popup width, 80vh caps height */
.pond-plan-popup__image { display: block; max-width: 100%; max-height: calc(80vh - 3.5rem); height: auto; }

/* 4. dvee-reservations overrides ----------------------------------------
 * The plugin defines its palette as :root custom properties
 * (calendar-table.css, dvee-forms.css). Setting them on body overrides via
 * inheritance without any specificity fight. Theme owns colors only —
 * plugin owns all layout/logic.
 */
body {
	/* Forms (login / register / account — dvee-forms.css) */
	--dvee-primary: #0f310e;
	--dvee-primary-hover: #889d87;
	--dvee-card-radius: 8px;
	--dvee-text: #000000;
	--dvee-text-muted: #4a5a49;
	--dvee-input-focus-border: #889d87;
	--dvee-input-focus-shadow: 0 0 0 3px rgb(136 157 135 / 0.35);

	/* Week calendar (calendar-table.css) */
	--dvee-table-header-bg: #0f310e;
	--dvee-table-header-fg: #ffffff;
	--dvee-booked-bg: #dcdcdc;
	--dvee-booked-text: #4a4a4a;
	--dvee-available-bg: #eef3ee;
	--dvee-available-text: #0f310e;
	--dvee-today-bg: #d9e4d8;
	--dvee-border: #c8d4c7;
	--dvee-nav-btn-bg: #0f310e;
	--dvee-nav-btn-fg: #ffffff;
	--dvee-book-btn-bg: #0f310e;
	--dvee-book-btn-fg: #ffffff;

	/* Single-resource page shell */
	--dvee-rp-accent: #0f310e;
	--dvee-rp-ink: #000000;
	--dvee-rp-ink-soft: #4a5a49;
	--dvee-rp-line: #c8d4c7;
	--dvee-rp-radius: 8px;
	--dvee-rp-font-disp: var(--wp--preset--font-family--montserrat);
	--dvee-rp-font-body: var(--wp--preset--font-family--montserrat);
}

/* Single-resource ("Sektorius") page — Figma "Didziausi laimikiai" frame.
 * Plugin owns the markup (Resource_Navigation / Resource_Record); theme
 * restyles it. Selectors are prefixed with .dvee-single-resource so they
 * outrank the plugin's single-class rules whatever the stylesheet order. */

/* Pond plan above the pager (functions.php filters the plugin's pager HTML);
 * click opens the shared pond-plan popover at full size. */
.sector-pond-plan { max-width: 800px; margin: 0 auto 8px; }
.sector-pond-plan__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sector-pond-plan__open img { display: block; width: 100%; height: auto; }

/* Numbered sector strip under the pager */
.dvee-single-resource .dvee-rp-sectors { background: var(--wp--preset--color--secondary); }
.dvee-single-resource .dvee-rp-sectors a { color: #fff; }
.dvee-single-resource .dvee-rp-sectors a:hover,
.dvee-single-resource .dvee-rp-sectors a:focus { background: rgb(15 49 14 / 0.5); }
.dvee-single-resource .dvee-rp-sectors a[aria-current="page"] { background: var(--wp--preset--color--primary); }

/* Pager: one tinted band, dividers, chevrons */
.dvee-single-resource .dvee-rp-pager {
	background: rgb(136 157 135 / 0.09);
	border-bottom: 0;
}
.dvee-single-resource .dvee-rp-pager__link { padding: 8px 20px; gap: 6px; }
.dvee-single-resource .dvee-rp-pager__link:hover,
.dvee-single-resource .dvee-rp-pager__link:focus { background: rgb(136 157 135 / 0.2); }
.dvee-single-resource .dvee-rp-pager__dir {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: rgb(0 0 0 / 0.3);
}
.dvee-single-resource .dvee-rp-pager__name {
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.dvee-single-resource .dvee-rp-pager__pos {
	border-color: rgb(0 0 0 / 0.25);
	font-size: 0.625rem;
	font-weight: 500;
	color: #000;
}
.dvee-single-resource .dvee-rp-pager__arrow { font-size: 0; color: #000; }
.dvee-single-resource .dvee-rp-pager__arrow::before { content: "\2039"; font-size: 1.75rem; font-weight: 700; line-height: 0.5; }
.dvee-single-resource .dvee-rp-pager__link--next .dvee-rp-pager__arrow::before { content: "\203A"; }

/* Title: SEKTORIUS 19 */
.dvee-single-resource h1.dvee-rp-title {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Record card */
.dvee-single-resource .dvee-record-card {
	border: 0;
	border-radius: 20px;
	box-shadow: 0 -1px 4px rgb(0 0 0 / 0.25), 0 4px 4px rgb(0 0 0 / 0.25);
}
.dvee-single-resource .dvee-record-card:hover,
.dvee-single-resource .dvee-record-card:focus-within {
	transform: none;
	box-shadow: 0 -1px 4px rgb(0 0 0 / 0.25), 0 4px 4px rgb(0 0 0 / 0.25);
}
.dvee-single-resource .dvee-record-card__badge { display: none; } /* Figma has no ribbon */
.dvee-single-resource .dvee-record-card__head { grid-template-columns: 211px 1fr; padding: 19px 18px 16px; }
.dvee-single-resource .dvee-record-card__photo,
.dvee-single-resource .dvee-record-banner__icon {
	width: 211px;
	height: 169px;
	border: 1px solid rgb(0 0 0 / 0.18);
	border-radius: 20px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
	background: #fff;
}
.dvee-single-resource .dvee-record-card__photo img { object-fit: cover; }
.dvee-single-resource .dvee-record-card__expand { width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #000; opacity: 1; }
.dvee-single-resource .dvee-record-card__expand svg { width: 11px; height: 11px; }
.dvee-single-resource .dvee-record-card__title,
.dvee-single-resource .dvee-record-banner__lozenge {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 12px;
	padding: 0;
}
.dvee-single-resource .dvee-record-card__stats { border: 1px solid rgb(0 0 0 / 0.38); border-radius: 10px; }
.dvee-single-resource .dvee-record-card__stat { padding: 10px 8px; border-right-color: rgb(0 0 0 / 0.38); }
.dvee-single-resource .dvee-record-card__stat-label { font-size: 0.75rem; letter-spacing: 0; color: rgb(0 0 0 / 0.5); }
.dvee-single-resource .dvee-record-card__stat-value { font-size: 1rem; font-weight: 600; color: #000; }
.dvee-single-resource .dvee-record-card__stat--weight .dvee-record-card__stat-value { font-size: 1.5rem; color: var(--wp--preset--color--primary); }
.dvee-single-resource .dvee-record-card__foot,
.dvee-single-resource .dvee-record-banner__text {
	border-top: 0;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 15px 18px;
}
.dvee-single-resource .dvee-record-card__foot-icon,
.dvee-single-resource .dvee-record-banner__text::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	flex-shrink: 0;
}

/* No-record banner: reuse the card layout (Figma "sektorius be rekordo").
 * The lozenge ("No record yet") becomes the card title; the redundant
 * "Resource record" heading is hidden; the body text drops into the foot band. */
.dvee-single-resource .dvee-record-banner {
	display: grid;
	grid-template-columns: 211px 1fr;
	gap: 24px;
	padding: 19px 18px 0;
	background: #fff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 -1px 4px rgb(0 0 0 / 0.25), 0 4px 4px rgb(0 0 0 / 0.25);
	overflow: hidden;
}
.dvee-single-resource .dvee-record-banner__body { display: contents; }
.dvee-single-resource .dvee-record-banner__title { display: none; }
.dvee-single-resource .dvee-record-banner__lozenge { position: static; grid-column: 2; grid-row: 1; align-self: start; background: none; border-radius: 0; }
.dvee-single-resource .dvee-record-banner__icon { grid-column: 1; grid-row: 1; font-size: 2.5rem; font-weight: 300; color: #000; }
.dvee-single-resource .dvee-record-banner__text {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	margin: 16px -18px 0;
	line-height: 1.6;
}

@media (max-width: 599px) {
	.dvee-single-resource .dvee-record-card__head,
	.dvee-single-resource .dvee-record-banner { grid-template-columns: 1fr; }
	.dvee-single-resource .dvee-record-card__photo,
	.dvee-single-resource .dvee-record-banner__icon { width: 100%; }
	.dvee-single-resource .dvee-record-banner__lozenge { grid-column: 1; grid-row: 2; }
}

/* Flash notices — plugin emits two class pairs; style both alike */
.dvee-success, .dvee-flash-success {
	background: #eef3ee;
	border-left: 4px solid #0f310e;
	padding: 0.75rem 1rem;
	border-radius: 4px;
}
.dvee-error, .dvee-flash-error {
	background: #fbeeee;
	border-left: 4px solid #8b2222;
	padding: 0.75rem 1rem;
	border-radius: 4px;
}

/* 5. Responsive ---------------------------------------------------------- */
/* Phone-first defaults are above. */

@media (max-width: 999px) {
	/* Auth pills drop out of the bar on small screens — the plugin's
	 * dvee-nav-auth items in the overlay menu cover login/account access. */
	/* .site-header prefix: outranks WP's later .wp-block-buttons-is-layout-flex { display:flex } */
	.site-header .site-header__auth { display: none; }
}

@media (max-width: 599px) {
	.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
	.hero-cover { min-height: 70vh; }
	.hero-decor, .fish-decor, .taisykles__decor { display: none; }
	.site-footer__map img { max-width: 100%; }
}

@media (min-width: 600px) and (max-width: 999px) {
	/* Tablet (834 frame): news grid to 2 cols */
	.wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}