/*
Theme Name: UTPPO Native
Version: 1.0.0
Description: Native WordPress layouts for UTPPO forms.
*/
:root { color-scheme: light; --utppo-accent: #0077b8; }
* { box-sizing: border-box; }
body { margin: 0; color: #343a40; background: #fff; font: 16px/1.55 system-ui, sans-serif; }
a { color: var(--utppo-accent); text-underline-offset: .15em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #006da8; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.utppo-header, .utppo-layout { width: min(1240px, 100%); margin-inline: auto; padding: 24px; }
.utppo-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid #e1e7eb; }
.utppo-brand img { display: block; width: 200px; }
.utppo-menu { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.utppo-menu .sub-menu { list-style: none; padding-left: 16px; }
.utppo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.utppo-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) minmax(220px, 28%); }
.utppo-layout.sidebar-left .utppo-sidebars { grid-column: 1; grid-row: 1; }
.utppo-layout.sidebar-left .utppo-page-content { grid-column: 2; }
.utppo-page-content { min-width: 0; }
.utppo-sidebars { min-width: 0; padding: 16px; background: #f3f8fb; border-radius: 6px; }
.utppo-sidebars .widget { margin-bottom: 24px; }
.utppo-sidebars h3 { margin-top: 0; font-size: 1.05rem; }
.utppo-sidebars .gpmpn-page-link { display: block; padding: 5px 0; overflow-wrap: anywhere; }
.utppo-home { max-width: 48rem; margin: 48px auto; text-align: center; }
.utppo-home img { width: 300px; }
h1, h2, h3, h4, h5 { line-height: 1.25; color: #253946; }
input, select, textarea, button { font: inherit; max-width: 100%; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=image]), select, textarea { border: 1px solid #9cabb4; border-radius: 4px; padding: 9px; background: #fff; color: inherit; }
button, input[type=submit], input[type=button] { cursor: pointer; }
.gform_wrapper input[type=submit], .gform_wrapper input[type=button], .gform_wrapper button { background: #006fa8; color: #fff; border: 1px solid #006fa8; border-radius: 4px; padding: 10px 16px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 9999; padding: 8px; background: #fff; clip-path: none; width: auto; height: auto; }
@media (max-width: 760px) {
    .utppo-header, .utppo-layout { padding: 16px; }
    .utppo-layout.has-sidebar { grid-template-columns: minmax(0, 1fr); }
    .utppo-layout.sidebar-left .utppo-sidebars, .utppo-layout.sidebar-left .utppo-page-content { grid-column: auto; grid-row: auto; }
    .utppo-sidebars { margin-top: 12px; }
}