/* UpSkill Gulf brand layer. Edit the tokens, not the rules.
   Placeholder palette until the brand is decided: a professional navy/teal, WCAG AA on white. */
:root {
  --sf-primary: #0b3d5c;       /* buttons, links, active states */
  --sf-primary-dark: #072a40;  /* hover */
  --sf-accent: #0e8a7b;        /* success, "Free", progress */
  --sf-ink: #1b1f23;           /* body text */
  --sf-muted: #5b6770;         /* secondary text */
  --sf-surface: #ffffff;
  --sf-surface-alt: #f4f7f9;
  --sf-border: #d9e1e7;
  --sf-radius: 6px;
}

/* One blue everywhere (lesson from Physiodemy: three different blues looked unfinished). */
a, .vibe-link, .vbp-link { color: var(--sf-primary); }
a:hover { color: var(--sf-primary-dark); }
.button, button.button, input[type="submit"], .vibe_button, .vbp_button, .vbp-button, .wplms-button {
  background: var(--sf-primary) !important; border-color: var(--sf-primary) !important; color: #fff !important;
  border-radius: var(--sf-radius) !important;
}
.button:hover, button.button:hover, input[type="submit"]:hover, .vibe_button:hover, .vbp_button:hover, .vbp-button:hover {
  background: var(--sf-primary-dark) !important; border-color: var(--sf-primary-dark) !important;
}

/* Body text: black on white, readable line length. */
body { color: var(--sf-ink); }
.unit_content, .course_description, .vbp-unit-content { max-width: 72ch; line-height: 1.65; font-size: 1.05rem; }

/* Hide star ratings everywhere until real reviews exist (toggle from functions.php). */
body.sf-hide-ratings .course_rating, body.sf-hide-ratings .rating, body.sf-hide-ratings .vbp-course-rating,
body.sf-hide-ratings .star-rating, body.sf-hide-ratings .course-rating { display: none !important; }

/* Lab notice block used inside units: [sf_lab_notice] */
.sf-lab-notice { border-left: 4px solid var(--sf-accent); background: var(--sf-surface-alt); padding: 12px 16px; margin: 16px 0; border-radius: var(--sf-radius); }
.sf-lab-notice strong { color: var(--sf-primary); }

/* Live-session card used inside "live" units: [sf_session] */
.sf-session { border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 16px; margin: 16px 0; background: var(--sf-surface); }
.sf-session h4 { margin: 0 0 6px; color: var(--sf-primary); }
.sf-session .sf-session-time { color: var(--sf-muted); font-size: 0.95rem; }
.sf-session .sf-session-local { font-weight: 600; }

/* Keyboard focus must be visible (accessibility requirement in the plan). */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }

/* Front page: the landing content carries its own hero, so hide the theme's "Home" page title bar. */
.home .pagetitle, body.page-id-72 .pagetitle { display: none !important; }

/* Footer: four-column widget area and the bottom bar. */
footer .footertop { padding: 40px 0 10px; }
footer .footertop .widget { color: #cfd8de; font-size: .95rem; }
footer .footertop .widget h4 { color: #fff; font-size: 1rem; margin: 0 0 12px; letter-spacing: .02em; }
footer .footertop .widget ul { list-style: none; padding: 0; margin: 0; }
footer .footertop .widget li { padding: 4px 0; }
footer .footertop .widget a { color: #cfd8de; text-decoration: none; }
footer .footertop .widget a:hover { color: #5fd3c4; }
footer .footertop .widget img { max-height: 40px; width: auto; }
#footerbottom { font-size: .85rem; }
#footerbottom #footerlogo img { height: 36px; width: auto; }

/* Lay the four footer widgets out as columns (block widgets carry no column classes). */
footer .footertop .row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
footer .footertop .row > .widget, footer .footertop .row > div { min-width: 0; }
@media (max-width: 900px) { footer .footertop .row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer .footertop .row { grid-template-columns: 1fr; } }
#footerbottom #footerlogo { margin: 0 0 8px; }
#footerbottom #footerlogo img { height: 36px !important; width: auto !important; max-width: none !important; }
#footerbottom { text-transform: none; }
/* Bootstrap's clearfix pseudo-elements become grid cells; remove them, and undo the theme's float widths. */
footer .footertop .row::before, footer .footertop .row::after { display: none !important; content: none !important; }
footer .footertop .row > div { width: auto !important; float: none !important; padding: 0 !important; }
#footerbottom #footerlogo { float: none !important; width: auto !important; margin: 0 0 10px !important; line-height: 0; }
#footerbottom .col-md-3 { text-align: left; }