/*
Theme Name: Vehicle Sale
Description: A one-page listing to sell a single vehicle. On activation it creates a "Vehicle for sale" page (photos, video, specification, history, contact) and sets it as the homepage.
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vehicle-sale
*/

html { scroll-behavior: smooth; }
:where([id]) { scroll-margin-top: 70px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; }
.admin-bar .site-header { top: 32px; }
.site-header .brand { letter-spacing: .12em; text-transform: uppercase; }
.site-header .brand a { text-decoration: none; }
.site-header .nav-links a { color: #fff; text-decoration: none; }
.site-header .nav-links a:hover { text-decoration: underline; }
.site-header .wp-block-button__link { padding: 6px 14px; }

/* Hero */
.wp-block-cover.hero .wp-block-cover__inner-container, .wp-block-cover.hero.has-custom-content-position .wp-block-cover__inner-container { width: 100% !important; max-width: 1140px; margin-left: auto !important; margin-right: auto !important; }
.wp-block-cover.hero { padding-left: 0 !important; padding-right: 0 !important; }
.hero .eyebrow { letter-spacing: .15em; text-transform: uppercase; }

/* Tick list */
.ticks { list-style: none; padding-left: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--wp--preset--color--olive); }

/* Specification table */
.spec-table table { border-collapse: collapse; width: 100%; }
.spec-table td { border: 0; border-bottom: 1px solid #d6d1c2; padding: 10px 8px; vertical-align: top; }
.spec-table td:first-child { width: 42%; font-weight: 600; color: var(--wp--preset--color--muted); }

/* Video: shows a neat box in the editor until a link is pasted */
.video-section .wp-block-embed { margin-top: 24px; }
.video-section .wp-block-embed iframe { border-radius: 4px; }

/* Gallery */
.photo-gallery img { border-radius: 4px; transition: opacity .2s; }
.photo-gallery a:hover img { opacity: .85; }

/* Timeline */
.timeline { list-style: none; padding-left: 0; border-left: 3px solid var(--wp--preset--color--olive); }
.timeline li { position: relative; padding: 0 0 18px 22px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 7px; width: 15px; height: 15px; border-radius: 50%; background: var(--wp--preset--color--olive); }
.timeline strong { display: inline-block; min-width: 60px; }

/* Condition cards */
.condition-card { border-top: 4px solid var(--wp--preset--color--olive); border-radius: 4px; }

/* Outline button on dark background */
.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; }
.contact .is-style-outline > .wp-block-button__link { color: #fff; background: transparent; }
.contact .is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--olive-dark); }

@media (max-width: 781px) {
	.site-header .nav-links { display: none; }
	.contact .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.contact .wp-block-button { width: 100%; }
	.contact .wp-block-button__link { width: 100%; }
	.timeline strong { display: block; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}