@extends('layouts.admin')
@section('title', 'Site typography')
@section('page_heading', 'Fonts & sizes')
@section('content')
<span class="eyebrow">Design system</span><h2>Set typography across the website.</h2>
<p class="admin-intro">Choose professional font families, weights, sizes and line spacing. The default body text is 17px with a 1.25em line height. Set a different line height below or select the default to restore it.</p>
<form class="admin-form" method="post" action="{{ route('admin.typography.update') }}">@csrf @method('PUT')
@foreach(['heading_font_family'=>'Headings font', 'body_font_family'=>'Body text font', 'nav_font_family'=>'Main navigation font'] as $key=>$label)
<div class="form-field"><label for="{{ $key }}">{{ $label }}</label><select class="form-input" id="{{ $key }}" name="{{ $key }}">@foreach($families as $family)<option value="{{ $family }}" @selected(old($key, $settings[$key]) === $family)>{{ $family }}</option>@endforeach</select></div>
@endforeach
<div class="form-grid"><div class="form-field"><label for="heading_font_weight">Headings weight</label><select class="form-input" id="heading_font_weight" name="heading_font_weight">@foreach(['500','600','700','800'] as $weight)<option value="{{ $weight }}" @selected((string)old('heading_font_weight',$settings['heading_font_weight'])===$weight)>{{ $weight }}</option>@endforeach</select></div><div class="form-field"><label for="body_font_weight">Body weight</label><select class="form-input" id="body_font_weight" name="body_font_weight">@foreach(['400','500','600','700'] as $weight)<option value="{{ $weight }}" @selected((string)old('body_font_weight',$settings['body_font_weight'])===$weight)>{{ $weight }}</option>@endforeach</select></div></div>
<div class="form-grid"><div class="form-field"><label for="hero_heading_size">Large headline size (40–96px)</label><input class="form-input" type="number" id="hero_heading_size" name="hero_heading_size" min="40" max="96" value="{{ old('hero_heading_size',$settings['hero_heading_size']) }}" required></div><div class="form-field"><label for="section_heading_size">Section heading size (28–72px)</label><input class="form-input" type="number" id="section_heading_size" name="section_heading_size" min="28" max="72" value="{{ old('section_heading_size',$settings['section_heading_size']) }}" required></div></div>
<div class="form-grid"><div class="form-field"><label for="body_font_size">Body text (15–21px)</label><input class="form-input" type="number" id="body_font_size" name="body_font_size" min="15" max="21" value="{{ old('body_font_size',$settings['body_font_size']) }}" required></div><div class="form-field"><label for="nav_font_size">Navigation size (15–21px)</label><input class="form-input" type="number" id="nav_font_size" name="nav_font_size" min="15" max="21" value="{{ old('nav_font_size',$settings['nav_font_size']) }}" required></div></div>
<h3 class="form-subheading">Text spacing · measured in em</h3><p class="form-help">1em means the height of one text line equals its font size. A value such as 1.5em adds extra breathing room. All fields update the public website.</p>
<div class="form-grid"><div class="form-field"><label for="body_line_height">Body and paragraph line height (1–2.5em)</label><input class="form-input" type="number" id="body_line_height" name="body_line_height" min="1" max="2.5" step="0.01" required value="{{ old('body_line_height',$settings['body_line_height']) }}"><label class="reset-field"><input type="checkbox" name="reset_body_line_height" value="1" @checked(old('reset_body_line_height'))> Use the default (1.25em)</label></div><div class="form-field"><label for="heading_line_height">Headings line height (1–2em)</label><input class="form-input" type="number" id="heading_line_height" name="heading_line_height" min="1" max="2" step="0.05" required value="{{ old('heading_line_height',$settings['heading_line_height']) }}"></div></div>
<div class="form-field"><label for="nav_line_height">Main navigation line height (1–2em)</label><input class="form-input" type="number" id="nav_line_height" name="nav_line_height" min="1" max="2" step="0.05" required value="{{ old('nav_line_height',$settings['nav_line_height']) }}"></div>
<div class="form-grid"><div class="form-field"><label for="nav_font_weight">Navigation weight</label><select class="form-input" id="nav_font_weight" name="nav_font_weight">@foreach(['500','600','700','800'] as $weight)<option value="{{ $weight }}" @selected((string)old('nav_font_weight',$settings['nav_font_weight'])===$weight)>{{ $weight }}</option>@endforeach</select></div><div class="form-field"><label for="nav_font_style">Navigation style</label><select class="form-input" id="nav_font_style" name="nav_font_style"><option value="normal" @selected(old('nav_font_style',$settings['nav_font_style'])==='normal')>Normal</option><option value="italic" @selected(old('nav_font_style',$settings['nav_font_style'])==='italic')>Italic</option></select></div></div>
<div class="admin-buttons"><button type="submit" class="button button-dark">Save typography ↗</button><a href="{{ route('home') }}" class="button button-outline" target="_blank" rel="noopener">Preview the website</a></div></form>
@endsection