/* DNS base styles and component classes. Mobile first: phone is the reference device.
   Source: dns-design-system/base.css + the extra classes used in home-layout.html. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-weight: var(--weight-body); font-size: var(--size-body); line-height: var(--line-body); color: var(--text-on-light); background: var(--white); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: var(--line-heading); margin: 0 0 var(--space-2); }
h1 { font-size: var(--size-display); font-weight: var(--weight-display); }
h2 { font-size: var(--size-h2); font-weight: var(--weight-heading); }
h3 { font-size: var(--size-h3); font-weight: var(--weight-heading); }
p { margin: 0 0 var(--space-2); }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; }
.lede { font-size: var(--size-lede); }
.small-print { font-size: var(--size-label); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-2); }
.section { padding: var(--section-pad) 0; }
.section--light { background: var(--white); }
.section--light-alt { background: var(--grey-1); }
.section--dark { background: var(--charcoal); color: var(--text-on-dark); }
.section--dark-deep { background: var(--charcoal-deep); color: var(--text-on-dark); }
.section--dark :focus-visible, .section--dark-deep :focus-visible { outline-color: var(--gold); }

.label { display: block; font-size: var(--size-label); font-weight: var(--weight-label); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--space-1); }
.section--dark .label, .section--dark-deep .label { color: var(--gold); }
.muted { color: var(--muted-on-light); }
.section--dark .muted, .section--dark-deep .muted { color: var(--muted-on-dark); }

.btn { display: inline-block; font: var(--weight-heading) 1rem/1 var(--font); padding: 1rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--gold); color: var(--near-black); }
.btn--primary:hover { background: var(--gold-pressed); }
.section--dark .btn--primary:hover, .section--dark-deep .btn--primary:hover, .on-dark .btn--primary:hover { background: var(--gold-light); }
.btn--secondary { background: transparent; color: var(--text-on-light); border-color: var(--text-on-light); }
.section--dark .btn--secondary, .section--dark-deep .btn--secondary, .on-dark .btn--secondary { color: var(--gold); border-color: var(--gold); }
.btn--on-photo { color: var(--text-on-dark) !important; border-color: var(--text-on-dark) !important; }
.btn--block { display: block; width: 100%; text-align: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.text-link { color: var(--gold-text); font-weight: var(--weight-label); text-decoration: none; background: none; border: 0; font-family: inherit; font-size: inherit; padding: 0; cursor: pointer; }
.section--dark .text-link, .section--dark-deep .text-link, .on-dark .text-link { color: var(--gold); }

.card { background: var(--grey-2); border-radius: var(--radius); overflow: hidden; }
.section--dark .card, .section--dark-deep .card, .on-dark .card { background: var(--charcoal-raised); }
.card__body { padding: var(--space-3); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.field { display: block; margin-bottom: var(--space-3); }
.field__label { display: block; font-weight: var(--weight-label); margin-bottom: var(--space-1); }
.field__input { width: 100%; font: inherit; padding: 0.85rem 1rem; border-radius: var(--radius); border: 2px solid var(--grey-4); background: var(--grey-2); color: var(--text-on-light); }
.field--error .field__input { border-color: var(--error); }
.field__error { color: var(--error); font-weight: var(--weight-label); font-size: var(--size-small); margin-top: var(--space-1); }
.section--dark .field__input, .on-dark .field__input { background: var(--charcoal-raised); border-color: var(--charcoal-raised); color: var(--text-on-dark); }
.section--dark .field--error .field__input, .on-dark .field--error .field__input { border-color: var(--error-on-dark); }
.section--dark .field__error, .on-dark .field__error { color: var(--error-on-dark); }
.message--success { border-left: 6px solid var(--success); padding: var(--space-1) var(--space-2); margin-bottom: var(--space-3); }
.message--success strong { color: var(--success-text); }
.section--dark .message--success strong, .on-dark .message--success strong { color: var(--success); }

/* Phone bar - home-layout version: gold, Call / WhatsApp / Free visit */
.phone-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--gold); z-index: 20; }
.phone-bar a { flex: 1; text-align: center; padding: 1rem 0.5rem; color: var(--near-black); font-weight: var(--weight-heading); text-decoration: none; }
.phone-bar a + a { border-left: 1px solid var(--gold-pressed); }
.phone-bar--static { position: static; }
@media (min-width: 900px) { .phone-bar:not(.phone-bar--always) { display: none; } }
.header-cta { display: none; }
@media (min-width: 600px) { .header-cta { display: inline-block; } }