/*
Theme Name: Beishir Classic
Theme URI: https://showmelocks.com
Author: Beishir Locksmith
Description: Faithful rebuild of the original Beishir website layout as a lightweight block theme. Photo banners, red slab headings, white header. No page builder required.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 6.8
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: beishir-classic
*/

/* ---------- Header ---------- */
.site-header { box-shadow: 0 1px 0 rgba(0,0,0,.08); position: relative; z-index: 20; }
.site-logo img { display: block; width: 210px; height: auto; }
@media (max-width: 781px) { .site-logo img { width: 150px; } }

.site-header .wp-block-navigation { font-family: var(--wp--preset--font-family--jost); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus-visible { color: var(--wp--preset--color--red); }
.site-header .wp-block-navigation .wp-block-navigation__submenu-container { border: 0; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 220px; padding: .4rem 0; }
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a { padding: .55rem 1.1rem; }
.nav-phone > a { background: var(--wp--preset--color--red); color: #fff !important; padding: .55rem .9rem !important; border-radius: 2px; }
.nav-phone > a:hover { background: var(--wp--preset--color--red-dark); }

/* Phone always visible on mobile, next to the menu button */
.header-call { display: none; }
@media (max-width: 781px) {
  .header-call { display: inline-flex; align-items: center; gap: .35rem; background: var(--wp--preset--color--red); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--jost); font-weight: 600; letter-spacing: .04em; padding: .5rem .75rem; border-radius: 2px; font-size: .9rem; }
}

/* ---------- Page banner ---------- */
.page-banner { min-height: 340px; }
.page-banner .wp-block-post-title,
.page-banner h1 { font-family: var(--wp--preset--font-family--jost); text-transform: uppercase; letter-spacing: .2em; font-weight: 600; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); margin: 0; }
.home-banner { min-height: 520px; }
.home-banner p { font-family: var(--wp--preset--font-family--jost); text-transform: uppercase; letter-spacing: .18em; font-weight: 500; color: #fff; }
@media (max-width: 781px) { .page-banner { min-height: 220px; } .home-banner { min-height: 380px; } }

/* ---------- Content ---------- */
.entry-content > .wp-block-heading:first-child { margin-top: 0; }
.entry-content .has-text-align-center { text-align: center; }
.wp-block-image img { height: auto; }
.wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--rule); margin: 3rem auto; width: 100%; max-width: none; opacity: 1; }
.wp-block-buttons { margin: 1.75rem 0; }
.classic-intro, .classic-pass, .classic-quote { text-align: center; }
.classic-intro .wp-block-buttons, .classic-pass .wp-block-buttons, .classic-quote .wp-block-buttons,
.entry-content > .wp-block-buttons:has(+ hr), .entry-content .has-text-align-center + .wp-block-buttons { justify-content: center; }
.classic-intro h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.35; }

/* Service tiles (home) */
.classic-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.classic-tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--ink); text-decoration: none; }
.classic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s; opacity: .78; display: block; }
.classic-tile span { position: absolute; inset: auto 0 0 0; padding: 1rem 1.1rem; color: #fff; font-family: var(--wp--preset--font-family--jost); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.classic-tile:hover img, .classic-tile:focus-visible img { transform: scale(1.04); opacity: .9; }
.classic-tile--pass { background: var(--wp--preset--color--red); display: flex; align-items: center; justify-content: center; }
.classic-tile--pass span { position: static; background: none; text-align: center; }
@media (max-width: 781px) { .classic-tiles { grid-template-columns: repeat(2, 1fr); } }

.classic-pass { background: var(--wp--preset--color--white); padding: 2.5rem 1.5rem; border-left: 6px solid var(--wp--preset--color--red); margin-top: 3rem; }

/* Testimonials */
.wp-block-quote { border-left: 4px solid var(--wp--preset--color--red); margin: 0 0 2rem; padding: .25rem 0 .25rem 1.5rem; }
.wp-block-quote p { font-family: var(--wp--preset--font-family--arvo); font-style: italic; font-size: 1.15rem; line-height: 1.55; }
.wp-block-quote cite { font-style: normal; font-weight: 700; font-size: .9rem; letter-spacing: .04em; color: var(--wp--preset--color--red); }
.classic-quote .wp-block-quote { border: 0; padding: 0; max-width: 760px; margin-inline: auto; }

/* Team */
.classic-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.classic-team figure { margin: 0; text-align: center; }
.classic-team img, .classic-team__placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #d9d6d3; }
.classic-team__placeholder { display: grid; place-items: center; font-family: var(--wp--preset--font-family--arvo); font-size: 2.5rem; color: #8a8481; }
.classic-team figcaption { margin-top: .75rem; font-size: .95rem; }
.classic-team figcaption strong { display: block; font-family: var(--wp--preset--font-family--arvo); color: var(--wp--preset--color--red); font-size: 1.05rem; }
@media (max-width: 781px) { .classic-team { grid-template-columns: repeat(2, 1fr); } }

/* Blog list */
.post-card { background: #fff; padding: 0 0 1.5rem; height: 100%; }
.post-card .wp-block-post-featured-image { margin-bottom: 1rem; }
.post-card .wp-block-post-title, .post-card .wp-block-post-excerpt, .post-card .wp-block-post-date { padding-inline: 1.25rem; }
.post-card .wp-block-post-title { font-size: 1.15rem; line-height: 1.3; }

/* ---------- Footer ---------- */
.site-footer a { color: inherit; }
.site-footer a:hover { color: #fff; }
.footer-tag { font-family: var(--wp--preset--font-family--arvo); font-style: italic; }

/* ---------- Contact form ---------- */
.bcf { display: grid; gap: .25rem; margin-top: 1.5rem; }
.bcf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bcf-row--phone { grid-template-columns: 1fr 7rem; }
.bcf-field { margin: 0 0 .9rem; border: 0; padding: 0; }
.bcf label, .bcf legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.bcf .req, .bcf .opt { font-weight: 400; color: #6b6566; font-size: .82rem; }
.bcf input[type=text], .bcf input[type=email], .bcf input[type=tel], .bcf textarea { width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid #b9b4b2; border-radius: 2px; background: #fff; font: inherit; color: inherit; }
.bcf input:focus-visible, .bcf textarea:focus-visible { outline: 3px solid var(--wp--preset--color--red); outline-offset: 1px; border-color: transparent; }
.bcf [aria-invalid=true] { border-color: #a40e0e; }
.bcf .bcf-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .35rem 0; }
.bcf .bcf-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--red); }
.bcf-error { color: #a40e0e; font-size: .85rem; margin: .3rem 0 0; }
.bcf-summary { background: #fbeaea; border-left: 4px solid #a40e0e; padding: .75rem 1rem; margin-bottom: 1rem; }
.bcf-summary p { margin: 0; }
.bcf-success { background: #fff; border-left: 6px solid var(--wp--preset--color--red); padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
.bcf-note { font-size: .88rem; color: #5c5657; }
.bcf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .bcf-row { grid-template-columns: 1fr; } .bcf-row--phone { grid-template-columns: 1fr 6rem; } }

/* ---------- Accessibility ---------- */
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--red); outline-offset: 2px; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 100000; background: #fff; padding: .75rem 1rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }