/* Veritas home page. Most layout is inline in templates/home.php (copied from the approved design);
   this file resets theme styles inside .vh-root, styles the shared pieces and adds the tablet/phone layouts. */

.vh-full-page { margin: 0; background: #F4ECE0; }
.vh-root, .vh-root * { box-sizing: border-box; }
.vh-root { -webkit-font-smoothing: antialiased; overflow-x: clip; }
.vh-root h1, .vh-root h2, .vh-root h3 { font-family: inherit; color: inherit; text-transform: none; padding: 0; }
.vh-root p { padding: 0; }
.vh-root a { color: inherit; text-decoration: none; box-shadow: none; }
.vh-root a:hover { color: #A45D44; }
.vh-root img { max-width: 100%; border: 0; box-shadow: none; border-radius: 0; }
.vh-root button { font-family: inherit; box-shadow: none; text-shadow: none; min-height: 0; line-height: 1.2; letter-spacing: normal; text-transform: none; border-radius: 0; margin: 0; }
.vh-root figure { padding: 0; }
.vh-root dl, .vh-root dd, .vh-root dt { margin: 0; padding: 0; }
.vh-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.vh-sr { position: absolute; left: -9999px; }

/* Buttons and labels */
.vh-root .vh-btn { display: inline-block; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; transition: filter .15s; }
.vh-root .vh-btn:hover { filter: brightness(1.08); }
.vh-root a.vh-btn[style*="#A45D44"]:hover { color: #FAF5EC; }
.vh-root .vh-hero a.vh-btn:hover { color: #F4ECE0; }
.vh-root .vh-custom a.vh-btn:hover { color: #2B211C; }
.vh-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #A45D44; margin-bottom: 16px; }
.vh-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6B5A4A; margin-bottom: 10px; }
.vh-root .vh-link-btn { background: none; border: 0; padding: 8px 0; font-size: 15px; font-weight: 600; color: #2B211C; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }

/* Header */
.vh-nav a { color: #2B211C; white-space: nowrap; }
.vh-tools a { color: #2B211C; }
.vh-drop { position: relative; }
.vh-drop > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; }
.vh-caret { font-size: 9px; transition: transform .15s; }
.vh-drop-menu { position: absolute; left: 50%; top: 100%; z-index: 60; min-width: 240px; display: flex; flex-direction: column; padding: 8px 0; background: #FAF5EC; border: 1px solid #DCCAB1; box-shadow: 0 12px 30px rgba(43,33,28,.12); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; text-align: left; }
.vh-root .vh-drop-menu a { padding: 11px 20px; color: #2B211C; letter-spacing: 0.1em; font-size: 12px; }
.vh-root .vh-drop-menu a:hover { background: #F4ECE0; color: #A45D44; }
.vh-drop:hover .vh-drop-menu, .vh-drop:focus-within .vh-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vh-drop:hover .vh-caret, .vh-drop:focus-within .vh-caret { transform: rotate(180deg); }
.vh-menu-h { padding: 14px 20px 4px; font-size: 11px; letter-spacing: 0.16em; color: #866E54; border-top: 1px solid #DCCAB1; margin-top: 6px; }
.vh-menu-h:empty { padding: 0; }
.vh-root .vh-menu-panel a.vh-menu-sub { padding: 9px 20px 9px 32px; font-size: 12px; }
.vh-menu-panel { max-height: calc(100vh - 140px); overflow-y: auto; }
.vh-menu { display: none; position: relative; }
.vh-menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid #CDB79C; }
.vh-menu summary::-webkit-details-marker { display: none; }
.vh-menu summary span { display: block; height: 1.5px; background: #2B211C; }
.vh-menu-panel { position: absolute; right: 0; top: 48px; z-index: 40; background: #FAF5EC; border: 1px solid #DCCAB1; min-width: 240px; display: flex; flex-direction: column; padding: 8px 0; box-shadow: 0 12px 30px rgba(43,33,28,.12); }
.vh-menu-panel a { padding: 12px 20px; color: #2B211C; }

/* Height picker */
.vh-root .vh-chip { width: 100%; padding: 12px 4px; font-size: 15px; font-weight: 600; cursor: pointer; background: transparent; color: #2B211C; border: 1px solid #CDB79C; }
.vh-root .vh-chip[aria-pressed="true"] { background: #2B211C; color: #FAF5EC; border-color: #2B211C; font-weight: 700; }
.vh-seg { display: flex; gap: 6px; }
.vh-root .vh-seg button { flex: 1 1 0; padding: 11px 10px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: #2B211C; border: 1px solid #CDB79C; }
.vh-root .vh-seg button span { font-weight: 500; color: #6B5A4A; margin-left: 4px; }
.vh-root .vh-seg button[aria-pressed="true"] { background: #2B211C; color: #FAF5EC; border-color: #2B211C; }
.vh-root .vh-seg button[aria-pressed="true"] span { color: #DCCAB1; }
.vh-specs > div { padding: 12px 0; border-bottom: 1px solid #DCCAB1; }
.vh-specs dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B5A4A; }
.vh-specs dd { margin-top: 3px; font-size: 18px; font-weight: 600; }

/* Compare pop-up */
.vh-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(43,33,28,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vh-modal[hidden] { display: none; }
.vh-modal-box { background: #FAF5EC; width: 100%; max-width: 940px; max-height: 88vh; overflow: auto; padding: 30px 34px 34px; }
.vh-root .vh-close { background: none; border: 1px solid #2B211C; width: 44px; height: 44px; font-size: 20px; cursor: pointer; color: #2B211C; flex: 0 0 auto; }
.vh-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 760px; margin: 0; border: 0; }
.vh-table th, .vh-table td { border: 0; background: none; }
.vh-table thead th { text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B5A4A; padding: 14px 8px 12px; font-weight: 600; }
.vh-table tbody tr { border-top: 1px solid #DCCAB1; }
.vh-table tbody th { padding: 13px 8px 13px 0; text-align: left; font-weight: 750; font-stretch: 88%; font-size: 18px; }
.vh-table td { padding: 13px 8px; }
.vh-muted { color: #6B5A4A; }
.vh-root .vh-choose { background: none; border: 0; padding: 6px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #A45D44; cursor: pointer; }
.vh-modal-open { overflow: hidden; }

/* Measuring video card + pop-up */
.vh-root .vh-measure { position: relative; overflow: hidden; min-height: 220px; }
.vh-measure-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43,33,28,0.85) 0%, rgba(43,33,28,0.35) 55%, rgba(43,33,28,0.15) 100%); transition: background .2s; }
.vh-root .vh-measure:hover .vh-measure-shade { background: linear-gradient(0deg, rgba(43,33,28,0.9) 0%, rgba(43,33,28,0.45) 55%, rgba(43,33,28,0.25) 100%); }
.vh-video-modal { background: rgba(20,15,12,0.88); }
.vh-video-box { width: 100%; max-width: 1040px; }

/* Shared bits */
.vh-cap { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #866E54; }
.vh-step { padding: 28px 32px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.vh-step h3 { margin: 0; font-size: 24px; font-weight: 700; font-stretch: 92%; }
.vh-step p { margin: 0; color: #4A3C31; }
.vh-root .vh-vans a { color: #F4ECE0; padding: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-left: 1px solid #4A3C33; }
.vh-root .vh-vans a:first-child { padding-left: 0; border-left: 0; }
.vh-root .vh-vans a:last-child { padding-right: 0; }
.vh-van-name { font-size: 24px; font-weight: 750; font-stretch: 88%; }
.vh-van-yr { font-size: 13px; color: #D2986C; white-space: nowrap; }
.vh-root .vh-kit { color: #F4ECE0; display: flex; flex-direction: column; gap: 12px; }
.vh-kit img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.vh-kit > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vh-kit-price { font-size: 14px; color: #D2986C; white-space: nowrap; }
.vh-root .vh-card { color: #2B211C; background: #FAF5EC; border-radius: 2px; overflow: hidden; }
.vh-card-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vh-card-row img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.vh-footer nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.vh-root .vh-footer a { color: #E2D4C2; }
.vh-root .vh-footer a:hover { color: #D2986C; }
.vh-foot-h { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #D2986C; margin-bottom: 4px; }

/* Tablet */
@media (max-width: 1280px) {
	.vh-options { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1100px) {
	.vh-header-in { grid-template-columns: auto 1fr !important; }
	.vh-nav { display: none !important; }
	.vh-menu { display: block; }
	.vh-fold { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; padding: 88px 40px 32px !important; }
	.vh-fold-text { grid-column: 1 / -1; padding-right: 0 !important; }
	.vh-kits { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.vh-more { grid-template-columns: minmax(0, 1fr) !important; }
	.vh-more-side { grid-template-rows: none !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vh-card-row { grid-template-columns: minmax(0, 1fr); }
	.vh-card-row img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) {
	.vh-proof { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.vh-cols2 { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
	.vh-cols-2-1 { grid-template-columns: minmax(0, 1fr) !important; }
	.vh-vans { grid-template-columns: minmax(0, 1fr) !important; }
	.vh-root .vh-vans a { padding: 18px 0 !important; border-left: 0 !important; border-top: 1px solid #4A3C33; }
	.vh-root .vh-vans a:first-child { border-top: 0; }
}

/* Phone */
@media (max-width: 640px) {
	.vh-root { font-size: 16px !important; }
	.vh-announce { font-size: 10.5px !important; letter-spacing: 0.1em !important; }
	.vh-header-in { padding: 14px 18px !important; column-gap: 12px !important; }
	.vh-logo { font-size: 13px !important; letter-spacing: 0.16em !important; }
	.vh-tools { gap: 14px !important; }
	.vh-account { display: none; }
	.vh-hero { height: auto !important; min-height: 600px; }
	.vh-hero-shade { background: linear-gradient(0deg, rgba(43,33,28,0.9) 0%, rgba(43,33,28,0.6) 45%, rgba(43,33,28,0.1) 80%) !important; }
	.vh-hero-in { padding: 220px 20px 40px !important; min-height: 600px; }
	.vh-hero p { font-size: 17px !important; }
	.vh-proof { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding: 18px 20px !important; }
	.vh-pad { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
	.vh-chips { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px !important; }
	.vh-root .vh-chip { font-size: 13px; padding: 11px 2px; }
	.vh-options { grid-template-columns: minmax(0, 1fr) !important; }
	.vh-specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.vh-custom { padding: 28px 24px !important; }
	.vh-modal { padding: 0; align-items: stretch; }
	.vh-modal-box { max-height: 100vh; padding: 22px 18px; }
	.vh-fold { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px !important; padding: 64px 20px 24px !important; }
	.vh-fold h2 { font-size: 30px !important; }
	.vh-fold-second { margin-top: 32px !important; }
	.vh-step { padding-right: 0; }
	.vh-van-hero { height: 480px !important; }
	.vh-van-in { padding: 0 20px 36px !important; }
	.vh-kits { gap: 14px !important; }
	.vh-kit > span { flex-direction: column; gap: 2px; }
	.vh-title-row > span:first-child { font-size: 24px !important; }
	.vh-more-side { grid-template-columns: minmax(0, 1fr); }
	.vh-footer > div:first-child { padding: 56px 20px 32px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.vh-footer > div:first-child > div:first-child { grid-column: 1 / -1; }
	.vh-footer > div:last-child { padding: 18px 20px 28px !important; }
}