/*
=========================================================
FORMS STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the shared form styles used across joshuadaltonmedia.com. It is the single source of truth for reusable form controls, form shells, validation states, and the base brief-form control system, while page-family styles stay in their own page skin files.

What belongs in this file
-------------------------
- Shared form shells and wrappers
- Standard form layout patterns
- Shared label, field, and fieldset styling
- Shared input, select, textarea, and file input styling
- Shared checkbox, radio, and consent row styling
- Shared brief-form control styling
- Shared helper, error, success, and validation states
- Shared submit rows and inline form patterns
- Shared responsive form breakpoint rules

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/forms.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared form class system where possible
3. keep page-specific form layout and copy styling in their page skin stylesheet

Maintenance rule
----------------
If a form style is not genuinely reusable across multiple forms or templates, it should not be added here. Keep this file shared, stable, and predictable. Page-family layout and page-only typography belong outside this file.
*/

/* ================= FORM SHELLS ================= */
.form-wrap{display:grid;gap:14px}
.form-shell{display:grid;gap:14px;padding:clamp(16px,4vw,24px);border-radius:var(--radius);background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.35));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}
.form-shell.lite{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.32);backdrop-filter:none;-webkit-backdrop-filter:none}
.form-shell.compact{padding:16px}
.form-shell.flush{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.form-topbar{display:grid;gap:10px;padding:12px;border-radius:calc(var(--radius) - 4px);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.form-topbar-grid{display:grid;gap:8px}
.form-stat{display:grid;gap:2px}
.form-stat strong{font-size:.78rem;line-height:1.25;color:var(--ink)}
.form-stat span{font-size:.72rem;line-height:1.35;color:var(--muted)}
.form-main{display:grid;gap:14px}
.form-copy{display:grid;gap:12px}
.form-note{margin:0;font-size:clamp(.76rem,2.5vw,.84rem);line-height:1.45;color:var(--muted)}
.form-anchor{margin:0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);font-size:.76rem;line-height:1.4;color:var(--muted)}
.form-anchor strong{color:var(--ink);font-weight:700}
.form-alt{margin:0;font-size:.74rem;line-height:1.4;color:var(--muted)}
.form-alt a{color:var(--accent);font-weight:700;text-decoration:none}
.form-alt a:hover{text-decoration:underline}

/* ================= FORM LISTS ================= */
.form-points{display:grid;gap:8px;margin:0;padding:0}
.form-points li{list-style:none;position:relative;padding-left:18px;font-size:clamp(.8rem,2.7vw,.9rem);line-height:1.45;color:var(--muted)}
.form-points li::before{content:"";position:absolute;top:.56em;left:0;width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(255,77,77,.14)}

/* ================= CORE FORM LAYOUT ================= */
.form{display:grid;gap:10px}
.form.relaxed{gap:14px}
.form.compact{gap:8px}
.form .row{display:grid;grid-template-columns:1fr;gap:10px}
.form .row.two{grid-template-columns:1fr}
.form .row.three{grid-template-columns:1fr}
.form .row.four{grid-template-columns:1fr}
.form .stack{display:grid;gap:8px}
.form .stack.sm{gap:6px}
.form .stack.lg{gap:12px}
.form .inline{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.form .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.form .actions.end{justify-content:flex-end}
.form .actions.center{justify-content:center}

/* ================= LABELS AND FIELDS ================= */
.form label{display:grid;gap:6px;font-size:.8rem;line-height:1.3;color:var(--muted);font-weight:700}
.form .field{display:grid;gap:6px;font-size:.8rem;line-height:1.3;color:var(--muted);font-weight:700;align-content:start}
.form label>span{font-size:.8rem;line-height:1.3;color:var(--muted);font-weight:700}
.form .field>span{font-size:.8rem;line-height:1.3;color:var(--muted);font-weight:700}
.form .required::after{content:" *";color:var(--accent)}
.form .field--full{grid-column:1 / -1}

/* ================= FIELDSETS ================= */
.form fieldset{margin:0;padding:0;border:0;min-width:0;display:grid;gap:8px}
.form fieldset.box{padding:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.form legend{font-size:.76rem;line-height:1.25;color:var(--muted);font-weight:700;padding:0}

/* ================= INPUTS ================= */
.form input{width:100%;min-width:0;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(15,15,15,.65);color:#efefef;padding:12px 12px;font-size:16px;line-height:1.35;box-shadow:inset 0 1px 0 rgba(255,255,255,.02);appearance:none;-webkit-appearance:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.form select{width:100%;min-width:0;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(15,15,15,.65);color:#efefef;padding:12px 12px;font-size:16px;line-height:1.35;box-shadow:inset 0 1px 0 rgba(255,255,255,.02);appearance:none;-webkit-appearance:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.form textarea{width:100%;min-width:0;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(15,15,15,.65);color:#efefef;padding:12px 12px;font-size:16px;line-height:1.35;box-shadow:inset 0 1px 0 rgba(255,255,255,.02);appearance:none;-webkit-appearance:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;min-height:110px;resize:vertical}
.form textarea.sm{min-height:88px}
.form textarea.lg{min-height:160px}
.form input::placeholder{color:rgba(255,255,255,.4);opacity:1}
.form textarea::placeholder{color:rgba(255,255,255,.4);opacity:1}
.form input:hover{border-color:rgba(255,255,255,.18)}
.form select:hover{border-color:rgba(255,255,255,.18)}
.form textarea:hover{border-color:rgba(255,255,255,.18)}
.form input:focus{outline:none;border-color:rgba(255,77,77,.55);box-shadow:0 0 0 3px rgba(255,77,77,.14)}
.form select:focus{outline:none;border-color:rgba(255,77,77,.55);box-shadow:0 0 0 3px rgba(255,77,77,.14)}
.form textarea:focus{outline:none;border-color:rgba(255,77,77,.55);box-shadow:0 0 0 3px rgba(255,77,77,.14)}
.form input:disabled{opacity:.6;cursor:not-allowed;background:rgba(15,15,15,.45)}
.form select:disabled{opacity:.6;cursor:not-allowed;background:rgba(15,15,15,.45)}
.form textarea:disabled{opacity:.6;cursor:not-allowed;background:rgba(15,15,15,.45)}

/* ================= AUTOFILL ================= */
.form input:-webkit-autofill{-webkit-text-fill-color:#efefef;-webkit-box-shadow:0 0 0px 1000px rgba(15,15,15,.95) inset;transition:background-color 9999s ease-in-out 0s}
.form input:-webkit-autofill:hover{-webkit-text-fill-color:#efefef;-webkit-box-shadow:0 0 0px 1000px rgba(15,15,15,.95) inset;transition:background-color 9999s ease-in-out 0s}
.form input:-webkit-autofill:focus{-webkit-text-fill-color:#efefef;-webkit-box-shadow:0 0 0px 1000px rgba(15,15,15,.95) inset;transition:background-color 9999s ease-in-out 0s}
.form textarea:-webkit-autofill{-webkit-text-fill-color:#efefef;-webkit-box-shadow:0 0 0px 1000px rgba(15,15,15,.95) inset;transition:background-color 9999s ease-in-out 0s}
.form select:-webkit-autofill{-webkit-text-fill-color:#efefef;-webkit-box-shadow:0 0 0px 1000px rgba(15,15,15,.95) inset;transition:background-color 9999s ease-in-out 0s}

/* ================= SELECTS ================= */
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;padding-right:40px}
.form select[multiple]{background-image:none;padding-right:12px;min-height:120px}

/* ================= SPECIAL INPUT TYPES ================= */
.form input[type="date"]{min-height:46px}
.form input[type="time"]{min-height:46px}
.form input[type="datetime-local"]{min-height:46px}
.form input[type="month"]{min-height:46px}
.form input[type="color"]{min-height:46px;padding:6px;cursor:pointer}
.form input[type="number"]{appearance:textfield}
.form input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.form input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ================= FILE INPUTS ================= */
.form input[type="file"]{padding:10px;background:rgba(15,15,15,.55);cursor:pointer}
.form input[type="file"]::file-selector-button{margin-right:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--ink);padding:9px 12px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;transition:background-color .18s ease,border-color .18s ease}
.form input[type="file"]::file-selector-button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}

/* ================= CHECKBOX AND RADIO OVERRIDES ================= */
.form input[type="checkbox"]{appearance:auto;-webkit-appearance:checkbox;width:18px;height:18px;min-width:18px;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--accent);cursor:pointer}
.form input[type="radio"]{appearance:auto;-webkit-appearance:radio;width:18px;height:18px;min-width:18px;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--accent);cursor:pointer}

/* ================= CHECKBOXES AND RADIOS ================= */
.form .agree{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px;font-size:.76rem;line-height:1.45;color:var(--muted);font-weight:400}
.form .choice{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px;font-size:.76rem;line-height:1.45;color:var(--muted);font-weight:400}
.form .agree input[type="checkbox"]{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);box-shadow:none;padding:0;background:none;border:none}
.form .choice input[type="checkbox"]{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);box-shadow:none;padding:0;background:none;border:none}
.form .choice input[type="radio"]{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);box-shadow:none;padding:0;background:none;border:none}
.form .choices{display:grid;gap:8px}
.form .choices.inline{display:flex;flex-wrap:wrap;gap:10px 14px}
.form .choice-card{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.form .choice-card:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.045)}
.form .choice-card strong{display:block;color:var(--ink);font-size:.86rem;line-height:1.25;font-weight:700}
.form .choice-card small{display:block;margin-top:3px;font-size:.74rem;line-height:1.4;color:var(--muted)}

/* ================= HELPERS AND MESSAGES ================= */
.form .help{margin:0;font-size:.74rem;line-height:1.35;color:var(--muted)}
.form .meta{margin:0;font-size:.74rem;line-height:1.35;color:var(--muted)}
.form .hint{margin:0;font-size:.74rem;line-height:1.35;color:var(--muted)}
.form .error{margin:0;font-size:.74rem;line-height:1.35;color:#ff7d7d}
.form .success{margin:0;font-size:.74rem;line-height:1.35;color:#7ee2a8}
.form [aria-invalid="true"]{border-color:rgba(255,125,125,.72);box-shadow:0 0 0 3px rgba(255,125,125,.12)}
.form .is-invalid{border-color:rgba(255,125,125,.72);box-shadow:0 0 0 3px rgba(255,125,125,.12)}
.form .invalid{border-color:rgba(255,125,125,.72);box-shadow:0 0 0 3px rgba(255,125,125,.12)}
.form .is-valid{border-color:rgba(126,226,168,.5);box-shadow:0 0 0 3px rgba(126,226,168,.1)}
.form .valid{border-color:rgba(126,226,168,.5);box-shadow:0 0 0 3px rgba(126,226,168,.1)}

/* ================= SUBMIT AREA ================= */
.form .submit-row{display:grid;gap:8px;align-items:start}
.form .submit-row .btn{justify-self:start}

/* ================= NETLIFY / HIDDEN FIELDS ================= */
.form input[type="hidden"]{display:none !important}
.netlify-honeypot{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important}
.form-honeypot{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important}

/* ================= MODIFIERS ================= */
.form.dark input{background:rgba(10,10,10,.78)}
.form.dark select{background:rgba(10,10,10,.78)}
.form.dark textarea{background:rgba(10,10,10,.78)}
.form.lite input{background:rgba(255,255,255,.04)}
.form.lite select{background:rgba(255,255,255,.04)}
.form.lite textarea{background:rgba(255,255,255,.04)}
.form .center{text-align:center}
.form .right{text-align:right}

/* ================= BRIEF FORM VARIANT ================= */
.brief{max-width:var(--brief-max-width,100%);margin-inline:auto;padding:var(--brief-padding,0);border-radius:var(--brief-radius,var(--radius));background:var(--brief-bg,transparent);border:var(--brief-border,0);box-shadow:var(--brief-shadow,none);backdrop-filter:var(--brief-backdrop,none);-webkit-backdrop-filter:var(--brief-backdrop,none)}
.brief-intro{display:grid;gap:var(--brief-intro-gap,10px)}
.brief-section{margin-top:var(--brief-section-gap,0)}
.brief .field{display:grid;gap:var(--brief-field-gap,8px);min-width:0}
.brief :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="date"],input[type="time"],select,textarea){width:100%;min-height:var(--brief-input-min-height,46px);padding:var(--brief-input-padding,12px 14px);border-radius:var(--brief-input-radius,10px);border:var(--brief-input-border,1.5px solid var(--field-border));background:var(--field-bg);color:var(--field-text);font-size:var(--brief-input-font-size,16px);line-height:var(--brief-input-line-height,1.4);font-weight:var(--brief-input-font-weight,400);font-family:var(--brief-input-font-family,inherit);box-shadow:var(--brief-input-shadow,inset 0 1px 0 rgba(255,255,255,.04));transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease;-webkit-appearance:none;appearance:none}
.brief textarea{min-height:var(--brief-textarea-min-height,96px);resize:vertical}
.brief input::placeholder,.brief textarea::placeholder{color:var(--field-ph);opacity:var(--brief-placeholder-opacity,1);font-size:var(--brief-placeholder-size,inherit)}
.brief :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="date"],input[type="time"],select,textarea):hover{border-color:var(--field-border-hover)}
.brief :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="date"],input[type="time"],select,textarea):focus{outline:none;border-color:var(--accent);background:var(--field-bg-focus);box-shadow:var(--ring)}
.brief select{background-image:linear-gradient(45deg,transparent 50%,#bfbfbf 50%),linear-gradient(135deg,#bfbfbf 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.brief .check-item,.brief .form-check{display:flex;align-items:flex-start;gap:var(--brief-check-gap,10px);font-size:var(--brief-check-font-size,.75rem);line-height:var(--brief-check-line-height,1.45);font-weight:var(--brief-check-font-weight,400);cursor:pointer}
.brief .check-item input[type="checkbox"],.brief .check-item input[type="radio"],.brief .form-check input[type="checkbox"]{appearance:none;width:var(--brief-check-size,18px);height:var(--brief-check-size,18px);min-width:var(--brief-check-size,18px);margin:var(--brief-check-input-margin,2px 0 0);flex:0 0 var(--brief-check-size,18px);border:var(--brief-check-border,2px solid var(--field-border));border-radius:var(--brief-checkbox-radius,4px);background:var(--field-bg);position:relative;cursor:pointer}
.brief .check-item input[type="radio"]{border-radius:999px}
.brief .check-item input:hover,.brief .form-check input:hover{border-color:var(--field-border-hover)}
.brief .check-item input[type="checkbox"]:checked,.brief .form-check input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.brief .check-item input[type="checkbox"]:checked::after,.brief .form-check input[type="checkbox"]:checked::after{content:"";position:absolute;top:var(--brief-checkmark-top,1px);left:var(--brief-checkmark-left,5px);width:var(--brief-checkmark-width,4px);height:var(--brief-checkmark-height,9px);border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.brief .check-item input[type="radio"]:checked{border-color:var(--accent)}
.brief .check-item input[type="radio"]:checked::after{content:"";position:absolute;inset:var(--brief-radio-dot-inset,3px);border-radius:999px;background:var(--accent)}
.brief .check-item span{display:block}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= FORM SHELLS ================= */
	.form-shell{padding:18px}
	.form-topbar{padding:14px}
}

@media(min-width:700px){
	/* ================= FORM SHELLS ================= */
	.form-topbar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
	.form-main{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:start;gap:18px}
	/* ================= CORE FORM LAYOUT ================= */
	.form .row{grid-template-columns:1fr 1fr;gap:12px}
	.form .row.two{grid-template-columns:1fr 1fr}
	.form .row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
	.form .row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
	/* ================= INPUTS ================= */
	.form textarea{min-height:132px}
	/* ================= SUBMIT AREA ================= */
	.form .submit-row{grid-template-columns:auto 1fr;align-items:center}
}

@media(min-width:1024px){
	/* ================= FORM SHELLS ================= */
	.form-shell{padding:clamp(22px,3vw,32px)}
	.form-main{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:22px}
}