/* ==========================================================================
   Podere San Martino - modern stylesheet (2026 refresh)
   Preserves the original identity: red banner, olive watermark, dark-red
   headings with a soft-green glow, red drop-caps, framed drop-shadow images.
   Replaces the old fixed 670px layout with a responsive one.
   ========================================================================== */

/* ---- Reset / box model ---- */
*, *::before, *::after { box-sizing: border-box; }

:root {
	--psm-red: #9D1515;
	--psm-red-dark: #800000;
	--psm-ink: #222;
	--psm-link: #191970;
	--psm-glow: #b0dead;
	--banner-height: 72px;
	--content-width: 60%;   /* matches the original fluid column width */
}

@font-face {
	font-family: 'Freebooter';
	src: url('freebooter.ttf') format('truetype');
	font-display: swap;
}

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	padding-top: var(--banner-height);
	color: var(--psm-ink);
	/* Olive watermark sits at the far-left of the viewport, just below the banner */
	background: #fff url('../images/olives_watermark.jpg') no-repeat 0 74px;
	font-family: "Open Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;   /* ~0.8em, matching the original */
	line-height: 1.5;
}

/* ==========================================================================
   Banner (fixed) + logo
   ========================================================================== */
.site-banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--banner-height);
	z-index: 30;
	background-image: url("../images/vertical_bar_background.jpg");
	background-position: top left;
	background-repeat: repeat-x;
	display: flex;
	align-items: center;
}

.site-banner a { display: inline-block; line-height: 0; }

/* Show the logo at its natural size (508x63) inside the 72px banner so the
   terracotta tile's built-in green bottom line stays visible around it. */
.site-banner img {
	height: auto;
	width: auto;
	max-height: 63px;
	max-width: 100%;
	border: 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 8px 10px 4px;
}

.site-nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 900px;
}

.site-nav a {
	display: block;
	font-weight: bold;
	font-size: 13px;   /* matches the original nav (~0.8em); 14px read as too heavy */
	line-height: 1.1;
	text-decoration: none;
	color: var(--psm-ink);
	/* button_background.jpg is flat teal for its top ~20px then a light strip.
	   Keep the button short (~21px) so only the uniform teal top shows, like the
	   original; the matching background-color hides any sub-pixel seam. */
	background-color: rgb(103, 153, 144);
	background-image: url('../images/button_background.jpg');
	background-position: left top;
	background-repeat: repeat-x;
	padding: 2px 9px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .3);
}

/* Home & Search buttons kept their inverted (terracotta) background */
.site-nav a.alt {
	background-color: rgb(207, 106, 79);
	background-image: url('../images/button_background_inv.jpg');
}

.site-nav a:hover,
.site-nav a:focus {
	color: #fff;
	background-color: #000;
}

.site-nav a[aria-current="page"] {
	color: var(--psm-red-dark);
	outline: 2px solid rgba(157, 21, 21, .35);
}

/* ==========================================================================
   Google Translate widget
   ========================================================================== */
#google_translate_element {
	max-width: 160px;
	margin: 4px auto 0;
	text-align: center;
}
#google_translate_element img { max-height: 20px; }

/* ==========================================================================
   Main content column
   ========================================================================== */
main#page {
	width: var(--content-width);
	max-width: 1100px;   /* cap line length on very wide monitors */
	margin: 0 auto;
	padding: 12px 16px 40px;
	text-align: left;
}

/* Gallery pages need more room for the photo grid */
main#page.gallery-wide {
	width: 94%;
	max-width: 1280px;
}
.gallery-frame {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 460px;
	border: 0;
}

/* Panorama viewer: very wide image in a horizontally scrolling strip */
.panorama-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0;
	border: 1px solid #C0C0C0;
	box-shadow: 0 0 9px 0 rgba(179, 174, 174, .75);
}
.panorama-wrap img {
	max-width: none !important;   /* show at natural width so it can scroll */
	height: auto;
	display: block;
}
.pano-nav { text-align: center; font-size: 1.1em; margin: 14px 0; }
.pano-nav a { margin: 0 12px; }

main#page h1,
main#page h2,
main#page h3 {
	font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	font-weight: bold;
	color: var(--psm-red);
	line-height: 1.2;
}
main#page h1,
main#page h2 { text-shadow: 1px 1px 10px var(--psm-glow); }

/* Fit content images to the column, but respect a smaller intended inline
   max-width (e.g. the 568px image-mapped gallery photo). Mobile hard-caps below. */
main#page img { max-width: 100%; height: auto; }

/* ---- Links ---- */
a { color: var(--psm-link); text-decoration: underline; }
a:hover { color: var(--psm-red-dark); }

a.noDec:link, a.noDec:visited { text-decoration: none; }
a.noDec:hover, a.noDec:active { text-decoration: underline; }

/* ==========================================================================
   Signature red drop-caps (scoped to page content only)
   ========================================================================== */
main#page p:first-letter {
	color: var(--psm-red);
	font-size: 1.35em;
	text-shadow: 1px 1px 5px #b4edb2;
}
main#page p.nodrop:first-letter,
main#page p.nodropNone:first-letter {
	font-size: inherit;
	text-shadow: none;
	color: inherit;
}
main#page p.nodropA:first-letter { color: #566D0C; text-shadow: none; font-size: 1.2em; }
main#page p.nodropRed:first-letter { color: red; text-shadow: none; font-size: 1.2em; font-weight: normal; }

/* ==========================================================================
   Framed, drop-shadow images (original "newImage" look)
   ========================================================================== */
.newImage {
	box-shadow: 12px 12px 9px 0 rgba(179, 174, 174, .75);
	border: 1px solid #C0C0C0;
	padding: 16px;
	background-color: #EEE;
}
.centerImg { display: block; margin: 0 auto; max-width: 100%; }
.newImageDiv { text-align: center; margin: 0 0 40px 0; }
.newImageDivOutter { margin-left: 0; }

.boxShadow  { box-shadow: 10px 10px 9px 0 rgba(179, 174, 174, .75); }
.boxShadow2 { box-shadow: 0 0 9px 0 rgba(179, 174, 174, .75); }
.boxShadow3 { box-shadow: 15px 15px 9px 0 rgba(179, 174, 174, .75); }

/* ==========================================================================
   Small utility classes carried over from the old inline styles
   ========================================================================== */
.alignCenter, .center { text-align: center; }
.alignRight { text-align: right; }
.noBorder { border: 0; }
.hundredPercent { width: 100%; }
.style_bold { font-weight: bold; }
.style_italic { font-style: italic; }
.highlight { background: #FFFF40; }   /* search-term highlighting */

.responsive-iframe-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.responsive-iframe-container iframe,
.responsive-iframe-container object,
.responsive-iframe-container embed {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* ==========================================================================
   Sound toggle button
   ========================================================================== */
#sound-toggle {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 40;
	border: 1px solid #888;
	background: rgba(255, 255, 255, .9);
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
#sound-toggle:hover { background: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	width: var(--content-width);
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
	border-top: 1px solid #ddd;
	font-size: 13px;
	color: #555;
	text-align: center;
}
.site-footer a { color: var(--psm-link); }

/* ==========================================================================
   pjax page-transition (subtle)
   ========================================================================== */
main#page { transition: opacity .15s ease; }
body.pjax-loading main#page { opacity: .35; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* On narrower screens the 60% column gets too cramped, so widen it. */
@media (max-width: 1024px) { :root { --content-width: 78%; } }

@media (max-width: 720px) {
	:root { --content-width: 94%; }
	body { background-image: none; }
	main#page { padding: 10px 14px 32px; }
	main#page img { max-width: 100% !important; }   /* hard-cap so nothing overflows on phones */
	.newImageDiv { margin-right: 0 !important; }
	.newImage { padding: 8px; box-shadow: 6px 6px 8px 0 rgba(179,174,174,.6); }
	/* image + caption tables become stacked blocks on small screens */
	main#page table.hundredPercent,
	main#page table.hundredPercent tbody,
	main#page table.hundredPercent tr,
	main#page table.hundredPercent td {
		display: block;
		width: 100% !important;
		text-align: center !important;
	}
}

@media (max-width: 420px) {
	.site-nav a { padding: 2px 8px; }
}