/*
Theme Name: Fulton Ranch Sale
Theme URI: https://tiltxchange.com/
Author: Tilt Media Co. for tiltXchange
Author URI: https://tiltxchange.com/
Description: Auction sale landing page theme built for Fulton Performance Horses and hosted by tiltXchange. Includes a live countdown to bidding, an editable letter section, a Lots catalog post type, and a built-in contact form. All copy, dates, contacts and images are editable in Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fulton-ranch-sale
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
	--color-accent:#c81c20;
	--color-accent-600:#b01418;
	--color-accent-700:#8d0f13;
	--color-dark:#141312;
	--color-ink:#201e1d;
	--color-paper:#f3f2f2;
	--rule-light:rgba(243,242,242,.22);
	--rule-light-soft:rgba(243,242,242,.28);
	--rule-dark:rgba(32,30,29,.4);
	--rule-dark-soft:rgba(32,30,29,.3);
	--pad-x:44px;
	--font:Archivo,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	background:var(--color-paper);
	color:var(--color-ink);
	font-family:var(--font);
	overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--color-accent-700);text-decoration:none;transition:color .15s ease}
a:hover,a:focus{color:var(--color-accent)}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit}

/* Accessibility helpers */
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
	overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.skip-link:focus{
	background:var(--color-accent);color:#fff;clip:auto!important;clip-path:none;
	display:block;font:700 13px/1 var(--font);left:12px;padding:14px 20px;top:12px;
	text-transform:uppercase;letter-spacing:.12em;width:auto;height:auto;z-index:100000;
}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ==========================================================================
   3. Utilities carried over from the source design
   ========================================================================== */
.kicker{
	font:600 9.5px var(--font);
	letter-spacing:.16em;
	text-transform:uppercase;
}
.kicker--wide{letter-spacing:.18em}
.kicker--accent{color:var(--color-accent);font-size:11px;font-weight:700;letter-spacing:.2em}
.kicker--muted-light{color:rgba(243,242,242,.5)}
.kicker--muted-dark{color:rgba(32,30,29,.55)}

.ph{
	background:repeating-linear-gradient(45deg,#dedbd6,#dedbd6 8px,#d3d0ca 8px,#d3d0ca 16px);
	display:flex;align-items:flex-start;justify-content:flex-end;
}
.ph span{
	font:600 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
	color:rgba(0,0,0,.42);padding:7px 8px;
}
.gs{overflow:hidden}
.gs img{filter:grayscale(1) contrast(1.06);display:block;width:100%;height:100%;object-fit:cover}

.rule-accent{width:36px;height:2px;background:var(--color-accent);flex:none}
.section-title{
	font:800 clamp(30px,3.4vw,42px)/1.02 var(--font);
	letter-spacing:-.02em;text-transform:uppercase;margin:14px 0 0;
}
.section-title--sm{font-size:clamp(28px,3.2vw,38px);margin-top:12px}

/* Buttons -- recreated from the source design system */
.btn{
	display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;
	font:700 13px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
	padding:15px 22px;border:1px solid transparent;background:transparent;
	color:inherit;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}
.btn-primary:hover,.btn-primary:focus{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.btn-ghost{border-color:rgba(243,242,242,.4);color:var(--color-paper)}
.btn-ghost:hover,.btn-ghost:focus{border-color:var(--color-paper);color:#fff}
.btn-ghost-dark{border-color:var(--rule-dark);color:var(--color-ink)}
.btn-ghost-dark:hover,.btn-ghost-dark:focus{border-color:var(--color-ink);color:var(--color-ink)}
.btn-sm{font-size:12px;padding:11px 17px}

/* Form fields -- recreated from the source design system */
.field{display:flex;flex-direction:column;gap:7px}
.field label{
	font:600 9.5px var(--font);letter-spacing:.16em;text-transform:uppercase;
	color:rgba(32,30,29,.55);
}
.input{
	font:400 15px var(--font);color:var(--color-ink);background:transparent;
	border:0;border-bottom:1px solid var(--rule-dark-soft);padding:10px 0;
	width:100%;border-radius:0;transition:border-color .15s ease;
}
.input::placeholder{color:rgba(32,30,29,.35)}
.input:focus{outline:0;border-bottom-color:var(--color-accent)}
textarea.input{min-height:104px;resize:vertical}

/* ==========================================================================
   4. Header / navbar
   ========================================================================== */
.site-dark{background:var(--color-dark);color:var(--color-paper)}
.navbar{
	display:flex;align-items:center;justify-content:space-between;
	padding:18px var(--pad-x);border-bottom:2px solid var(--rule-light);
	gap:20px;
}
.navbar__brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.navbar__logo{width:150px;height:40px;object-fit:contain;object-position:left}
.navbar__divider{width:1px;height:22px;background:var(--rule-light-soft);flex:none}
.navbar__hosted{display:flex;align-items:center;gap:10px}
.navbar__hosted .kicker{color:rgba(243,242,242,.6)}
.navbar__host-logo{height:20px;width:auto;object-fit:contain;object-position:left}
.navlinks{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.navlinks a{
	font:600 11px var(--font);letter-spacing:.12em;text-transform:uppercase;
	color:rgba(243,242,242,.75);
}
.navlinks a:hover,.navlinks a:focus{color:var(--color-paper)}
.navlinks a.btn-primary{color:var(--color-paper)}

/* Logo placeholder (shown until an image is uploaded in the Customizer) */
.logo-ph{
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid rgba(243,242,242,.35);color:rgba(243,242,242,.8);
	font:800 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
	padding:9px 12px;max-width:100%;
}
.logo-ph--sm{font-size:10px;padding:7px 10px}
@media (max-width:560px){
	.navbar__divider{display:none}
	.navbar__logo{width:120px}
	.logo-ph{font-size:10px;padding:7px 9px}
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{display:grid;grid-template-columns:1.05fr .95fr}
.hero-pad{padding:60px var(--pad-x) 48px;display:flex;flex-direction:column;gap:26px}
.hero__eyebrow{display:flex;align-items:center;gap:10px}
.hero__eyebrow span{
	font:700 11px var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);
}
.h1{
	margin:0;font:800 clamp(52px,6.4vw,86px)/.92 var(--font);
	letter-spacing:-.03em;text-transform:uppercase;
}
.h1 .dot{color:var(--color-accent)}
.hero__lede{
	margin:0;max-width:30ch;font:400 17px/1.5 var(--font);
	color:rgba(243,242,242,.72);text-wrap:pretty;
}
.hero__meta{
	display:flex;flex-wrap:wrap;width:fit-content;
	border-top:2px solid var(--rule-light);border-bottom:2px solid var(--rule-light);
}
.hero__meta > div{padding:16px 26px;border-left:1px solid var(--rule-light)}
.hero__meta > div:first-child{padding-left:0;border-left:0}
.hero__meta > div:last-child{padding-right:0}
.hero__meta strong{display:block;font:700 17px var(--font);margin-top:5px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-img{position:relative;min-height:560px;border-left:2px solid var(--rule-light)}
.hero-img .ph{width:100%;height:100%;min-height:inherit}
.hero__stamp{
	position:absolute;left:0;bottom:0;background:var(--color-accent);color:#fff;
	padding:11px 17px;font:700 11px var(--font);letter-spacing:.16em;text-transform:uppercase;
}

/* ==========================================================================
   6. Countdown clock
   ========================================================================== */
.clock{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--rule-light)}
.clock > div{padding:28px 26px;border-left:1px solid var(--rule-light)}
.clock > div:first-child{border-left:0}
.clock__num{font:800 clamp(34px,4vw,50px)/1 var(--font);font-variant-numeric:tabular-nums}
.clock > div:first-child .clock__num{color:var(--color-accent)}
.clock .kicker{color:rgba(243,242,242,.55);margin-top:9px}
.clock__live{
	grid-column:1/-1;padding:26px var(--pad-x);
	font:700 15px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);
}

/* ==========================================================================
   7. About / letter
   ========================================================================== */
.about{
	background:var(--color-paper);padding:60px var(--pad-x);
	display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;
	border-bottom:2px solid var(--rule-dark);
}
.about__figure{margin-top:26px;height:200px}
.about__figure .ph{width:100%;height:100%}
.about__body{
	display:flex;flex-direction:column;gap:16px;
	font:400 15.5px/1.62 var(--font);color:rgba(32,30,29,.82);
}
.about__body p{text-wrap:pretty}
.about__signoff{font-weight:700;color:var(--color-ink)}
.facts{
	display:grid;grid-template-columns:auto auto;width:fit-content;
	border-top:2px solid var(--rule-dark);padding-top:18px;margin-top:4px;
}
.facts > div{padding-left:28px;border-left:1px solid var(--rule-dark-soft)}
.facts > div:first-child{padding-left:0;padding-right:28px;border-left:0}
.facts strong{display:block;font:700 14px var(--font);margin-top:5px}

/* ==========================================================================
   8. Lots catalog
   ========================================================================== */
.lots{background:var(--color-paper);padding:60px var(--pad-x);border-bottom:2px solid var(--rule-dark)}
.section-head{
	display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;
	border-bottom:2px solid var(--rule-dark);padding-bottom:16px;
}
.section-head__aside{font:400 14px/1.5 var(--font);color:rgba(32,30,29,.65);max-width:34ch}
.lots__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:1px;background:var(--rule-dark-soft);margin-top:32px;
	border:1px solid var(--rule-dark-soft);
}
.lot-card{background:var(--color-paper);display:flex;flex-direction:column}
.lot-card__media{position:relative;aspect-ratio:4/3;background:#dedbd6}
.lot-card__media .ph{width:100%;height:100%}
.lot-card__num{
	position:absolute;left:0;top:0;background:var(--color-accent);color:#fff;
	padding:7px 11px;font:700 10px var(--font);letter-spacing:.16em;text-transform:uppercase;
}
.lot-card__body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.lot-card__title{
	font:800 19px/1.1 var(--font);letter-spacing:-.01em;text-transform:uppercase;color:var(--color-ink);
}
.lot-card__title a{color:inherit}
.lot-card:hover .lot-card__title a,.lot-card__title a:focus{color:var(--color-accent)}
.lot-card__meta{font:600 10px var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(32,30,29,.55)}
.lot-card__excerpt{font:400 14px/1.55 var(--font);color:rgba(32,30,29,.78);margin-top:2px}
.lot-card__more{
	margin-top:auto;padding-top:12px;font:700 10.5px var(--font);letter-spacing:.16em;
	text-transform:uppercase;color:var(--color-accent);
}
.lots__empty{
	margin-top:32px;border:1px dashed var(--rule-dark-soft);padding:36px;
	font:400 15px/1.6 var(--font);color:rgba(32,30,29,.7);
}
.lots__empty strong{display:block;font:800 18px var(--font);text-transform:uppercase;color:var(--color-ink);margin-bottom:8px}
.lots__foot{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   9. Contact
   ========================================================================== */
.contact{background:var(--color-paper);padding:60px var(--pad-x);border-bottom:2px solid var(--rule-dark)}
.form-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:44px;margin-top:32px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form .span-2{grid-column:span 2}
.contact-form__actions{
	grid-column:span 2;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.contact-form__note{font:400 12px var(--font);color:rgba(32,30,29,.55)}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-details{display:flex;flex-direction:column;border-top:2px solid var(--rule-dark)}
.contact-details > div{padding:16px 0;border-bottom:1px solid var(--rule-dark-soft)}
.contact-details > div:last-child{border-bottom:0}
.contact-details strong{display:block;font:700 15px var(--font);margin-top:5px}
.contact-details p{font:400 14px/1.5 var(--font);margin-top:5px;color:rgba(32,30,29,.75)}
.form-notice{
	grid-column:span 2;padding:14px 16px;font:600 13px/1.5 var(--font);
	border-left:3px solid var(--color-accent);background:rgba(200,28,32,.06);
}
.form-notice--ok{border-left-color:#1e7a3c;background:rgba(30,122,60,.08)}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer{background:var(--color-dark);color:rgba(243,242,242,.6);padding:34px var(--pad-x)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px}
.foot__brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot__logo{width:124px;height:34px;object-fit:contain;object-position:left}
.foot__divider{width:1px;height:24px;background:rgba(243,242,242,.24);flex:none}
.foot__host{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.foot__host img{height:22px;width:auto;object-fit:contain;object-position:left}
.foot__tag{font:400 12px var(--font)}
.foot__links{display:flex;gap:22px;font:600 10.5px var(--font);letter-spacing:.14em;text-transform:uppercase}
.foot__links a{color:rgba(243,242,242,.7)}
.foot__links a:hover,.foot__links a:focus{color:var(--color-paper)}
.foot__links a.is-accent{color:var(--color-accent)}
.foot__hr{height:1px;background:rgba(243,242,242,.2);margin:24px 0 18px}
.foot--legal{font:400 11.5px var(--font);color:rgba(243,242,242,.45)}

/* ==========================================================================
   11. Interior pages (single lot, blog, 404)
   ========================================================================== */
.page-shell{background:var(--color-paper);padding:60px var(--pad-x);min-height:50vh}
.page-shell__inner{max-width:860px}
.entry-title{font:800 clamp(32px,4vw,52px)/1.02 var(--font);letter-spacing:-.02em;text-transform:uppercase}
.entry-content{margin-top:22px;font:400 16px/1.65 var(--font);color:rgba(32,30,29,.85)}
.entry-content p{margin:0 0 16px}
.entry-content h2{font:800 26px var(--font);text-transform:uppercase;margin:28px 0 10px}
.entry-content img{height:auto}
.entry-meta{margin-top:14px;font:600 10.5px var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(32,30,29,.55)}
.lot-single__media{margin-top:26px}
.lot-single__specs{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
	border-top:2px solid var(--rule-dark);margin-top:26px;
}
.lot-single__specs > div{padding:16px 24px 16px 0}
.lot-single__specs strong{display:block;font:700 15px var(--font);margin-top:5px}
.back-link{
	display:inline-block;margin-top:30px;font:700 10.5px var(--font);
	letter-spacing:.16em;text-transform:uppercase;
}
.post-list{display:flex;flex-direction:column;gap:34px;margin-top:30px}
.post-list article{border-top:1px solid var(--rule-dark-soft);padding-top:22px}
.post-list h2{font:800 24px var(--font);text-transform:uppercase;margin:0 0 8px}
.pagination{margin-top:36px;font:600 11px var(--font);letter-spacing:.14em;text-transform:uppercase}
.pagination .page-numbers{padding:8px 12px;border:1px solid var(--rule-dark-soft);margin-right:6px;display:inline-block}
.pagination .current{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}

/* WordPress core alignment / caption classes */
.alignleft{float:left;margin:6px 24px 12px 0}
.alignright{float:right;margin:6px 0 12px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font:400 12px var(--font);color:rgba(32,30,29,.6);margin-top:6px}
.sticky,.gallery-caption,.bypostauthor{display:block}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width:1100px){
	.form-grid{grid-template-columns:1fr .8fr;gap:32px}
}
@media (max-width:900px){
	:root{--pad-x:22px}
	.hero{grid-template-columns:1fr}
	.hero-img{min-height:300px;border-left:0;border-top:2px solid var(--rule-light)}
	.hero-pad{padding:36px 22px 32px}
	.h1{font-size:52px}
	.clock{grid-template-columns:repeat(2,1fr)}
	.clock > div:nth-child(3),.clock > div:nth-child(4){border-top:1px solid var(--rule-light)}
	.clock > div:nth-child(3){border-left:0}
	.about{grid-template-columns:1fr;padding:36px 22px;gap:28px}
	.navbar{padding:14px 22px;flex-wrap:wrap;gap:14px}
	.navlinks{gap:12px}
	.form-grid{grid-template-columns:1fr}
	.foot{flex-direction:column;align-items:flex-start;gap:14px}
	.facts{grid-template-columns:1fr}
	.facts > div{border-left:0;padding-left:0;border-top:1px solid var(--rule-dark-soft)}
	.facts > div:first-child{border-top:0;padding-right:0}
	.lots,.contact,.page-shell{padding:36px 22px}
	.site-footer{padding:28px 22px}
}
@media (max-width:560px){
	.contact-form{grid-template-columns:1fr}
	.contact-form .span-2,.contact-form__actions,.form-notice{grid-column:span 1}
	.hero__meta > div{padding:14px 0;border-left:0;border-top:1px solid var(--rule-light);width:100%}
	.hero__meta > div:first-child{border-top:0}
	.hero__meta{width:100%}
}
@media (prefers-reduced-motion:reduce){
	*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}