/* Designated theme: WordPress and Freight Portal rules on top of the approved design (style.css). */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.df-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.df-skip:focus { top: 12px; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.topbar .icon { width: 15px; height: 15px; color: #ff6b70; }
.mobile-nav:not(.open) { display: none; }
.site-header .brand img { width: auto; }

/* Generic page and article content */
.df-prose { max-width: 820px; font-size: 1.05rem; line-height: 1.75; }
.df-prose > * + * { margin-top: 1.1em; }
.df-prose h2, .df-prose h3 { margin-top: 1.6em; }
.df-prose img { border-radius: var(--radius); }
.df-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Freight Portal: request form inside the Request a Quote page */
.df-form-panel .fp-request { border: 0; border-radius: 0; background: transparent; padding: clamp(22px, 3vw, 38px); }
.df-form-panel .fp-form { gap: 18px; }
.fp-h2, .fp-h3, .fp-card__route, .fp-route { font-family: var(--font-head); color: var(--ink); letter-spacing: -0.02em; }
.fp-field { font-family: var(--font-body); color: var(--ink); }
.fp-form .fp-input, .fp-form select, .fp-form textarea, .fp-form input[type="text"], .fp-form input[type="email"], .fp-form input[type="tel"], .fp-form input[type="password"], .fp-form input[type="number"], .fp-form input[type="date"], .fp-form input[type="search"] {
  font: inherit; font-size: .97rem; border: 1.5px solid var(--line); border-radius: 11px; padding: .8em 1em; min-height: 48px; background: #fff;
}
.fp-form .fp-input:focus, .fp-form select:focus, .fp-form textarea:focus, .fp-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 111, 197, .12); }
.fp-btn { font-family: var(--font-head); font-weight: 700; min-height: 48px; padding: 0 1.45em; }
/* The plugin's stylesheet loads after ours, so these are scoped to body to win. Main actions are DFS red. */
body .fp-btn--accent { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(211, 38, 45, .7); }
body .fp-btn--accent:hover { background: var(--red-600); border-color: var(--red-600); filter: none; }
.fp-btn--ink { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
/* The quote form's send button is the page's main call to action: brand red, as in the design. */
.df-form-panel .fp-btn--ink { background: var(--red); border-color: var(--red); box-shadow: 0 10px 24px -10px rgba(211, 38, 45, .7); }
.df-form-panel .fp-btn--ink:hover { background: var(--red-600); border-color: var(--red-600); }

/* Freight Portal: tracking and client portal pages */
.page-hero--app .wrap { padding-top: 56px; padding-bottom: 64px; }
.page-hero--app h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: .3em; }
.df-app-section { padding-top: 48px; }
.df-app-section .fp-portal__bar { padding-top: 0; }
.df-app-section .fp-track, .df-app-section .fp-login__box { box-shadow: var(--shadow); }

@media (max-width: 600px) {
  .df-form-panel .fp-grid { grid-template-columns: 1fr; }
  .df-app-section { padding-top: 32px; }
}
.df-app-section .fp-portal__bar .fp-eyebrow { display: none; } /* the page band above already says "Client portal" */