/* Settings secondary navigation and section panels.
 *
 * Everything here decorates markup the server already arranged. No rule in
 * this file is required for the navigation to work: with no CSS at all the
 * tabs are still links, and the section that is not open still carries the
 * hidden attribute, which the browser honours on its own. */

/* The section tabs, and the checks row on a diagnostic screen. */
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-tab-nav { display: flex; align-items: center; gap: 4px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow-x: auto; white-space: nowrap; }
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-tab-nav .nav-tab { float: none; margin: 0 !important; border: 0 !important; border-radius: 7px; background: transparent; min-height: 30px; padding: 5px 10px; line-height: 20px; color: #3c434a; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-tab-nav .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-tab-nav .nav-tab:hover,
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-tab-nav .nav-tab:focus { background: #f0f6fc; color: #135e96; }
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-tab-nav .nav-tab.nav-tab-active { background: #e8f4fb; color: #0a4b78; font-weight: 600; }

/* The back link that starts the checks row, set apart from the checks. */
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-checks-back { color: #646970; margin-right: 4px !important; }
#ai-o-optimiser-global-secondary-nav .ai-o-optimiser-settings-checks-nav .ai-o-optimiser-settings-checks-back + .nav-tab { border-left: 1px solid #dcdcde !important; border-radius: 0 7px 7px 0; padding-left: 12px; }

/* One section is open; the rest carry hidden. The !important is only here
 * because the plugin's design layer sets display on sections elsewhere. */
.ai-o-optimiser-settings-section-panel[hidden] { display: none !important; }
.ai-o-optimiser-settings-section-panel { margin-top: 8px; }
.ai-o-optimiser-settings-section-panel > .ai-o-optimiser-site-setup-intro:first-child { margin-top: 0; }

/* Section headings carry their tab's icon. */
.ai-o-optimiser-settings-section-heading.ai-o-optimiser-settings-heading-with-icon { display: flex; align-items: center; gap: 8px; }
.ai-o-optimiser-settings-section-heading .ai-o-optimiser-settings-heading-icon { font-size: 18px; width: 18px; height: 18px; line-height: 18px; color: #2271b1; flex: 0 0 18px; }

/* The four diagnostic screens, listed inside Health. */
.ai-o-optimiser-settings-checks-panel { margin-top: 18px; }
.ai-o-optimiser-settings-checks-panel h3 { margin: 0 0 4px; }
.ai-o-optimiser-settings-checks-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

@media (max-width: 782px) {
	.ai-o-optimiser-settings-section-panel { margin-right: 10px; }
	.ai-o-optimiser-settings-checks-grid .ai-o-optimiser-settings-check-link { flex: 1 1 100%; text-align: center; }
}