/*
Theme Name:   PNYC Kadence
Theme URI:    https://pnyc.co.uk/
Description:  Kadence child theme for Port Navas Yacht Club. Header, colours and fonts are set in the Kadence Customizer; this file only carries the PNYC-specific styling (boxes, news grid, event list, header panels).
Author:       Jeff Meadows
Author URI:   https://mdws.net
Template:     kadence
Version:      0.1.6
Requires PHP: 7.4
Text Domain:  pnyc-kadence
*/

/* ----------------------------------------------------------------
   Images are borrowed from the old PNYC theme for now
   (../pnyc/images/). Copy that folder into this theme before the
   old theme is ever deleted, then change ../pnyc/images/ to images/.
   ---------------------------------------------------------------- */

/* ---------- Site background (as before) ---------- */

html {
	background: #b2c0e3 url(../pnyc/images/pnyc_bg.jpg) no-repeat center center fixed;
	background-size: cover;
}

body {
	background: transparent;
}

@media (max-width: 1020px) {
	html { background-image: none; }
}

/* ---------- Header icons + flag (Kadence header HTML element) ---------- */

/* Flag on top, the four pop-up icons in a row beneath it, right-aligned */
.pnyc-header-icons {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.pnyc-icon-row {
	display: flex;
	gap: 5px;
}

.pnyc-header-icons a {
	display: block;
	line-height: 0;
}

.pnyc-header-icons img {
	display: block;
	width: auto;
	height: 60px;
}

.pnyc-header-icons .pnyc-flag {
	width: 150px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 768px) {
	.pnyc-header-icons { gap: 6px; }
	.pnyc-header-icons img { height: 36px; }
	.pnyc-header-icons .pnyc-flag { width: 90px; height: 60px; }
}

/* ---------- Branding: burgee with the tagline beneath; site name hidden ---------- */

#masthead .site-branding a.brand {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.site-branding .site-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.site-branding .site-description {
	text-shadow: 0 0 3px #fff;
}

/* ---------- Header pop-up panels (weather, tides, contact, members) ---------- */

.pnyc-panel {
	display: none;
	position: fixed;
	z-index: 99999;
	top: 120px;
	right: 20px;
	width: 360px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding: 20px;
	background: #cfd8dc;
	border-radius: 5px;
	box-shadow: 0 0 6px #777;
}

.admin-bar .pnyc-panel { top: 152px; }

@media (max-width: 768px) {
	.pnyc-panel { top: 90px; right: 16px; left: 16px; width: auto; }
}

.pnyc-panel img { max-width: 25%; }

.pnyc-panel .close {
	text-align: right;
	padding: 0;
}

.pnyc-panel .close a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.pnyc-panel ul {
	list-style: none;
	padding: 0 5px 0 10px;
	margin: 0;
}

.pnyc-panel .box {
	padding: 10px 10px 10px 15px;
}

/* ---------- Boxes ---------- */

.box {
	position: relative;
	overflow: visible;
	padding: 25px 5%;
	background: #fff;
	border: 1px solid #777;
	border-radius: 7px;
	margin: 10px auto;
}

.eo-events .box { background: #f1f4fb; }

/* Page/post content box (added by functions.php) */
.pnyc-content-box {
	margin: 0 auto 20px;
}

.pnyc-content-box > *:first-child { margin-top: 0; }

.clear { clear: both; }

/* ---------- News grid (Query Loop appended by functions.php) ---------- */

.pnyc-news {
	margin-top: 20px;
}

/* Masonry (js/pnyc-panels.js) lays the posts out across the page.
   Each post is half the width, with 5px either side as the gutter. */
.pnyc-news .wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0 -5px;
}

.pnyc-news .wp-block-post-template > li {
	width: 50%;
	box-sizing: border-box;
	padding: 0 5px;
	margin: 0 0 10px;
	position: relative;
}

@media (max-width: 700px) {
	.pnyc-news .wp-block-post-template > li { width: 100%; }
}

.pnyc-news .box { margin: 0; }

.pnyc-news .box::after { content: ""; display: table; clear: both; }

.pnyc-news .wp-block-post-title {
	font-size: 1.2em;
	margin: 4px 0 8px;
}

.pnyc-news .wp-block-post-featured-image {
	clear: both;
	text-align: center;
	margin: 0 0 10px;
}

.pnyc-news .wp-block-post-featured-image img {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

/* Date badge */

.calendar {
	float: left;
	color: #fff;
	font-size: 0.7em;
	font-weight: 600;
	line-height: 1.2em;
	text-align: center;
	background: #074686;
	padding: 5px;
	border-radius: 7px;
	margin: 0 15px 15px 0;
}

.calendar p,
.calendar .wp-block-post-date {
	margin: 0;
	color: #fff;
}

/* "Sold" / "Sold out" overlays on posts tagged sold or sold-out */

.tag-sold .overlay,
.tag-sold-out .overlay {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 250px;
	height: 250px;
	pointer-events: none;
}

.tag-sold .overlay { background: url(../pnyc/images/sold.png) no-repeat; }
.tag-sold-out .overlay { background: url(../pnyc/images/sold-out.png) no-repeat; }

/* ---------- Event Organiser list ---------- */

.eo-events h2.date {
	border-bottom: 2px solid rgba(4, 67, 149, 0.5);
	font-size: 1.2em;
	margin: 4px 0 8px;
}

.eo-events h2.title {
	text-transform: uppercase;
	font-size: 1.2em;
	margin: 4px 0 8px;
}

/* ---------- Content details carried over ---------- */

blockquote {
	background: #f1f4fb;
	padding: 10px 15px 5px;
	border: 1px solid #ccc;
	border-radius: 10px;
	margin: 0;
}

hr {
	clear: both;
	max-width: 1024px;
	height: 3px;
	border: 0;
	border-top: 5px dotted #546b9e;
	margin: 0.5em auto 0.75em;
	background: none;
}

a[href$=".pdf"] {
	color: #fff;
	padding: 5px 10px;
	background: rgb(41, 70, 134);
	border-radius: 7px;
	text-decoration: none;
}

a[href$=".pdf"]:hover { color: #fff; opacity: 0.85; }

.wp-block-file__embed { border: none !important; }

.wp-block-file__button {
	padding: 3px 10px !important;
	border-radius: 6px !important;
}

/* Captions overlay the bottom of the image, as before */

.wp-block-image figure,
figure.wp-block-image,
.wp-caption {
	position: relative;
	display: table;
	text-align: center;
	margin: 0 auto;
}

.wp-block-image figure figcaption,
figure.wp-block-image figcaption,
.wp-caption-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	font-size: 14px;
	color: #000;
	background: #fff;
	padding: 10px 2.5%;
	margin: 0;
}

/* Responsive video embeds (the old theme's padding-bot typo is fixed here) */

.video-container {
	position: relative;
	clear: both;
	padding-bottom: 56.25%;
	height: 0;
	margin: 5px auto;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Top-of-page slider / featured image (added by functions.php) ---------- */

.pnyc-slider {
	padding: 0;
	border: 10px solid #fff;
	border-radius: 7px;
	box-shadow: 0 0 10px #777;
	margin: 0 auto 20px;
	background: #fff;
}

/* The slideshow shortcode leaves an empty <p> (holding its <style>) above
   the gallery; without this its margin makes the top border thicker. */
.pnyc-slider > p {
	margin: 0;
}

.pnyc-slider img {
	display: block;
	width: 100%;
	height: auto;
}

.pnyc-slider .kb-slide-item {
	padding-top: 0;
	padding-bottom: 0;
}

.page-absent-friends .pnyc-slider,
.category-absent_friends .pnyc-slider { display: none; }

/* ---------- Contact Form 7 ---------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7-select {
	width: 100%;
	font-size: 1em;
	border: 1px solid #cde;
	padding: 5px 7px;
	margin-bottom: 8px;
}

.wpcf7 textarea { height: 100px; }

.wpcf7-submit {
	color: #fff;
	font-weight: 600;
	font-size: 1.2em;
	line-height: 1.8em;
	background-color: #425a8a;
	border: 1px solid #777;
	border-radius: 5px;
	margin: 10px 0 5px;
	cursor: pointer;
}

.wpcf7-submit:hover { opacity: 0.7; }

/* ---------- Tides (UK tides plugin + tidetimes widget) ---------- */

.bw_tides_0 { color: #1a4383; font-size: 1.1em; line-height: 1.4em; padding: 0 0 10px; }
.bw_tides_0 a { font-weight: normal; color: #1a4383 !important; }
.bw_tides_0 span br { display: none; }
.bw_tides_0 span span { font-weight: bold; }
.bw_tides > .bw_tides_3, .bw_tides > .bw_tides_5 { color: green; padding: 10px; }
.bw_tides > .bw_tides_2, .bw_tides > .bw_tides_4 { color: brown; padding: 10px; }

.tidetimes-widget {
	padding: 15px;
	color: #3d3c3c !important;
	font-size: 14px;
	background: #cfd8dc !important;
	border: solid 1px #c5d4e3;
}

.tidetimes-widget .tidetimes-date-for { display: none; }
.tidetimes-widget .tidetimes-times dl dd dt,
.tidetimes-widget .tidetimes-times dl dd dd { display: inline-block; margin: 0 0 5px; }
.tidetimes-widget .tidetimes-times dl dd dt { width: 70px; }
.tidetimes-widget .tidetimes-times dl dd dd { margin-left: 10px; width: 140px; font-weight: bold; }
.tidetimes-widget .hi { color: #2573a0; }
.tidetimes-widget .low { color: #99672b; }

/* Page title under the slider (Kadence title banner is off) */
.pnyc-page-title {
	font-size: 1.4em;
	line-height: 1.2em;
	letter-spacing: 1px;
	margin: 0 0 10px;
}

/* Older (classic-editor) embeds have no responsive wrapper: keep them inside the box */
.entry-content iframe {
	max-width: 100%;
}