/*
Theme Name: EditLA
Description: The EditLA.tv site, plugin-free. Pages are ordinary blocks: a Cover block at the top of a page is its photo opening (style "Page opening"), and the block styles below give the section titles, subtitles, short lines and pink lists their EditLA look. Header and footer settings are in Appearance > Customize > EditLA.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: editla
Update URI: false
*/

:root {
	--ela-bg: #111111;
	--ela-text: #7a89ab;
	--ela-white: #ffffff;
	--ela-soft: #cccccc;
	--ela-pink: #ea088c;
	--ela-wide: 1170px;
	--ela-font: Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ela-bg); color: var(--ela-text); font: 400 16px/1.88 var(--ela-font); -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--ela-pink); text-decoration: none; }
a:hover { color: var(--ela-white); }
h1, h2, h3, h4, h5, h6 { color: var(--ela-white); font-family: var(--ela-font); font-weight: 600; margin: 0 0 20px; }
h1 { font-size: 90px; line-height: 1; letter-spacing: 1px; }
h2 { font-size: 48px; line-height: 1.2; letter-spacing: 1px; }
h3 { font-size: 30px; line-height: 1.6; }
h4 { font-size: 24px; line-height: 1.25; }
p { margin: 0 0 20px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: the logo left, the menu right, over the top of the page. */
.ela-header { position: absolute; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 50px; }
.admin-bar .ela-header { top: 32px; }
.ela-logo img { width: 200px; height: auto; }
.ela-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.ela-nav a { color: var(--ela-soft); font-size: 16px; text-transform: uppercase; line-height: 64px; }
.ela-nav a:hover, .ela-nav .current-menu-item > a { color: var(--ela-pink); }

/* A page with no photo opening still starts below the header. */
.ela-main { min-height: 50vh; }
.ela-main > :first-child:not(.wp-block-cover) { margin-top: 140px; }

/* Content: sections centered at the site's width. */
.ela-main > :where(:not(.wp-block-cover):not(.alignfull)) { max-width: var(--ela-wide); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.ela-main > .wp-block-heading { margin-top: 60px; }
.ela-main .has-text-align-center { text-align: center; }
.ela-main .wp-block-columns { gap: 60px; margin-bottom: 40px; }
.ela-main .wp-block-image { margin: 0 auto 60px; }
.ela-main .wp-block-image.aligncenter { display: block; }
.ela-main .wp-block-image.aligncenter img { margin: 0 auto; }
.ela-main .wp-block-image.is-style-dimmed img { filter: brightness(.35); }
/* A Custom HTML block's code (the Google map) sits straight in the page, so the section rule above would give it
   the site's full width and padding: it fits the screen instead. */
.ela-main > iframe, .ela-main .wp-block-html iframe { display: block; max-width: calc(100% - 40px); padding: 0; margin: 0 auto 60px; }

/* The photo at the top of a page, darkened, with its small line and title. */
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) { min-height: 0; padding: 196px 20px 174px; margin: 0 0 60px; color: var(--ela-white); }
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) .wp-block-cover__inner-container { max-width: var(--ela-wide); }
/* On the home page the opening photo fills the screen, as the old site's did. */
.home .ela-main > .wp-block-cover:is(.is-style-opening, .is-style-opening-below):first-child { min-height: 100vh; min-height: 100svh; }
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) h1 { margin: 0; text-align: center; }
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) .is-style-opening-line { margin: 0 0 20px; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: 7px; text-transform: uppercase; text-align: center; color: var(--ela-white); }
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) .wp-block-image { margin: 0 auto; }
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) .wp-block-image img { margin: 0 auto; }
/* The big logo in an opening is the old site's 900px. */
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) .wp-block-image img { max-width: min(900px, 100%); }
/* The old openings were parallax photos sized a third of a screen taller than their box and hung from its top,
   so they showed the photo's top and came a little closer; standing still, this is the same picture. */
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) { overflow: hidden; }
.wp-block-cover:is(.is-style-opening, .is-style-opening-below) > .wp-block-cover__image-background { top: 0; bottom: auto; height: calc(100% + 30vh); }
/* An opening below the menu: the menu sits on a solid bar above it instead of over the photo. */
body:has(.ela-main > .is-style-opening-below:first-child) .ela-header { position: relative; background: var(--ela-bg); }

/* Under a section title: the small spaced-out line, then a short rule. */
p.is-style-subtitle { font-size: 14px; line-height: 1.3; letter-spacing: 4px; text-transform: uppercase; text-align: center; color: var(--ela-text); margin-bottom: 20px; }
hr.wp-block-separator.is-style-short { width: 130px; max-width: 130px; margin: 0 auto 50px; border: 0; border-top: 1px solid var(--ela-white); opacity: 1; height: 0; }

/* The pink lists of what a room has. */
ul.is-style-highlights { list-style: none; margin: 30px auto; padding: 0; text-align: center; }
ul.is-style-highlights li { color: var(--ela-pink); font-size: 25px; line-height: 1.6; font-weight: 900; font-style: italic; }

/* Galleries: three across, square, a thin gap. */
.ela-main .wp-block-gallery { gap: 6px !important; margin: 0 auto 80px; }
.ela-main .wp-block-gallery.has-nested-images figure.wp-block-image { margin: 0; }

/* Footer. */
.ela-footer { text-align: center; padding: 90px 20px; }
.ela-footer__logo img { margin: 0 auto 20px; width: 480px; max-width: 100%; }
.ela-footer__lines { margin: 0 0 20px; color: var(--ela-white); font-size: 24px; line-height: 1.25; font-weight: 600; }
.ela-footer__lines a { color: inherit; }
.ela-footer__badges img { margin: 0 auto 20px; max-width: 460px; width: 100%; }
.ela-footer__copyright { margin: 0; color: var(--ela-pink); font-size: 14px; }

/* A gallery photo opened full size (assets/lightbox.js): black, the photo in the middle, the gallery down the right. */
.ela-lb-photo { cursor: zoom-in; }
.ela-lb-open, .ela-lb-open body { overflow: hidden; }
.ela-lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: stretch; background: rgba(0, 0, 0, .94); }
.ela-lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 60px 70px; min-width: 0; }
.ela-lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ela-lb__thumbs { flex: 0 0 170px; overflow-y: auto; padding: 60px 20px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.ela-lb__thumb { padding: 0; border: 0; background: none; cursor: pointer; opacity: .35; transition: opacity .2s; }
.ela-lb__thumb:hover, .ela-lb__thumb.is-current { opacity: 1; }
.ela-lb__thumb img { width: 150px; height: 150px; object-fit: cover; }
.ela-lb button { color: var(--ela-white); }
.ela-lb__close, .ela-lb__prev, .ela-lb__next { position: absolute; border: 0; background: none; cursor: pointer; width: 48px; height: 48px; padding: 0; opacity: .8; }
.ela-lb__close:hover, .ela-lb__prev:hover, .ela-lb__next:hover { opacity: 1; }
.ela-lb__close { top: 12px; left: 12px; }
.ela-lb__close::before, .ela-lb__close::after { content: ""; position: absolute; left: 12px; top: 22px; width: 24px; height: 4px; background: currentColor; transform: rotate(45deg); }
.ela-lb__close::after { transform: rotate(-45deg); }
.ela-lb__prev, .ela-lb__next { top: 50%; margin-top: -24px; }
.ela-lb__prev { left: 12px; }
.ela-lb__next { right: 182px; }
.ela-lb__prev::before, .ela-lb__next::before { content: ""; position: absolute; top: 14px; width: 18px; height: 18px; border: solid currentColor; border-width: 0 0 4px 4px; }
.ela-lb__prev::before { left: 18px; transform: rotate(45deg); }
.ela-lb__next::before { left: 10px; transform: rotate(-135deg); }

.ela-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.ela-burger span:not(.screen-reader-text) { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--ela-pink); }

@media (max-width: 900px) {
	/* Phones: the logo and a pink menu button; the menu opens over the page. */
	.ela-header { padding: 16px 20px; }
	.ela-burger { display: block; position: relative; z-index: 2; }
	.ela-nav { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, .97); opacity: 0; visibility: hidden; transition: opacity .3s; }
	.ela-menu-open .ela-nav { opacity: 1; visibility: visible; }
	.ela-menu-open { overflow: hidden; }
	.ela-nav ul { flex-direction: column; align-items: center; }
	.ela-nav a { font-size: 22px; line-height: 48px; }
	.ela-main .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; }
	h1 { font-size: 54px; }
	h2 { font-size: 34px; }
	.wp-block-cover:is(.is-style-opening, .is-style-opening-below) { padding: 200px 20px 90px; }
	.wp-block-cover:is(.is-style-opening, .is-style-opening-below) .is-style-opening-line { letter-spacing: 4px; font-size: 16px; }
	ul.is-style-highlights li { font-size: 20px; }
	.ela-main .wp-block-columns { gap: 0; }
	/* Phones: the gallery runs along the bottom instead. */
	.ela-lb { flex-direction: column; }
	.ela-lb__stage { padding: 60px 10px 10px; }
	.ela-lb__thumbs { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px; }
	.ela-lb__thumb img { width: 70px; height: 70px; }
	.ela-lb__next { right: 12px; }
}