/* Corinthian UK static site. 2026-10-08: rebuilt from the WordPress theme's own
   styling (blankslate + the site's custom rules), so the pages look as before.
   Added only: phone-width rules at the bottom, and the photo viewer styles. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 13px;
	line-height: 140%;
	letter-spacing: 0.5px;
	text-align: center;
	background-color: #999999;
	color: #000;
}
p { margin: 0 0 10px; }
h2 { font-size: 15px; font-weight: bold; margin: 0 0 10px; }
ul { margin: 0; padding: 0; }
li { margin: 0 0 10px 50px; list-style: circle; }
img { border: none; }
a:link, a:visited, a:active { text-decoration: none; color: blue; }
a:hover { text-decoration: underline; color: blue; }

#content {
	width: 850px;
	margin: 0 auto 20px;
	padding: 10px;
	text-align: left;
}
#fppic { display: block; width: 505px; height: auto; margin: 50px 0 30px 150px; }
.indent { padding-left: 30px; }

/* home page: framed photo with the menu beside it */
#home { display: flex; justify-content: center; align-items: flex-start; gap: 50px; }
#fpmainpic { border: 20px solid #fff; width: 440px; height: auto; display: block; }
#right { padding-top: 200px; line-height: 2; }

#bottommenu, .style1 { font-size: 18px; color: gray; letter-spacing: 0.5px; }
#bottommenu a, .style1 a { color: #fff; }
#bottommenu { text-align: center; margin-top: 50px; }

/* screen-reader only (gallery page titles: present for search engines and
   screen readers, hidden as on the original pages) */
.gallery-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* gallery overview: two white cards per row, picture + title + description */
.cards { display: flex; flex-wrap: wrap; justify-content: center; }
.card {
	display: flex; gap: 10px; width: calc(50% - 10px); min-height: 150px; margin: 10px 5px; padding: 5px;
	background: #fff; border: 1px solid #e8e8e8; text-align: left;
}
.card-pic { flex: 0 0 120px; display: block; }
.card-pic img { width: 120px; height: 90px; object-fit: cover; display: block; }
.card-text { font-family: "Segoe UI", "Trebuchet MS", sans-serif; min-width: 0; overflow-wrap: anywhere; }
.card-title { display: block; font-size: 16px; font-weight: bold; color: #000; margin-bottom: 2px; }
.card-text p { font-size: 14px; color: #000; margin: 0; line-height: 1.35; }

/* one gallery: grid of 180 x 90 thumbnails, 4px apart */
.thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 904px; margin: 0 auto; }
.thumb { display: block; width: 180px; height: 90px; background: rgba(255, 255, 255, 0.3); }
.thumb img { width: 180px; height: 90px; object-fit: cover; display: block; }

/* photo viewer (lightbox.js) */
.lb { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 86vh; display: block; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); background: #222; }
.lb button { position: absolute; background: rgba(0, 0, 0, 0.35); border: 0; border-radius: 4px; color: #fff; font: 64px/1 Georgia, "Times New Roman", serif; cursor: pointer; padding: 8px 18px 16px; opacity: 0.85; }
.lb button:hover, .lb button:focus { opacity: 1; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 8px; top: 8px; font-size: 34px; }
.lb-count { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #ccc; font-size: 13px; }

/* phones and narrow windows (the original pages were fixed at 850px wide) */
@media (max-width: 880px) {
	#content { width: auto; padding: 10px 16px; }
	#fppic { width: 100%; max-width: 505px; margin: 30px auto 24px; }
	#home { flex-direction: column; align-items: center; gap: 10px; }
	#fpmainpic { width: 100%; max-width: 440px; border-width: 12px; }
	#right { padding-top: 0; text-align: center; }
	.card { width: 100%; }
	li { margin-left: 24px; }
	.indent { padding-left: 0; }
}
@media (max-width: 420px) {
	.thumb, .thumb img { width: calc(50vw - 22px); height: calc(25vw - 11px); }
}