/*
Theme Name: Membaz
Theme URI: https://membaz.co.za
Author: Membaz
Description: Membaz brand theme. A light blue, Poppins-based block theme for the Membaz website. Keeps all existing page content and changes only the look and feel.
Version: 1.0.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: membaz
*/

/* ---------- Tokens ---------- */
:root {
  --mbz-ink: #1b2f4b;
  --mbz-text: #34496a;
  --mbz-soft: #52657d;
  --mbz-action: #2563b0;
  --mbz-action-hover: #1d4f8f;
  --mbz-accent: #3b82d6;
  --mbz-sky: #d5e6fb;
  --mbz-wash: #eaf3fe;
  --mbz-mist: #f4f8fd;
  --mbz-border: #dbe6f3;
  --mbz-gradient: linear-gradient(135deg, #3b82d6 0%, #2563b0 100%);
  --mbz-gradient-light: linear-gradient(135deg, #eaf3fe 0%, #d5e6fb 100%);
  --mbz-radius-control: 6px;
  --mbz-radius-button: 8px;
  --mbz-radius-card: 10px;
  --mbz-shadow-card: 0 1px 3px rgba(27, 47, 75, 0.08);
}

body { -webkit-font-smoothing: antialiased; }
img { height: auto; max-width: 100%; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(59, 130, 214, 0.45); outline-offset: 2px; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Header ---------- */
.mbz-header { background: #fff; border-bottom: 1px solid var(--mbz-border); padding: 12px 24px; position: relative; z-index: 20; }
.mbz-header > .wp-block-group { gap: 24px; }
.mbz-header .wp-block-image { margin: 0; }
.mbz-header .wp-block-image img { height: 46px; width: auto; display: block; }
.mbz-header .wp-block-navigation { gap: 4px; }
.mbz-header .wp-block-navigation a { color: #34496a; text-decoration: none; padding: 8px 10px; border-radius: 6px; }
.mbz-header .wp-block-navigation a:hover { color: var(--mbz-action); background: var(--mbz-mist); }
.mbz-header .wp-block-navigation .current-menu-item > a,
.mbz-header .wp-block-navigation .current-menu-ancestor > a { color: var(--mbz-action); font-weight: 600; }
.wp-block-navigation__submenu-container { border: 1px solid var(--mbz-border) !important; border-radius: var(--mbz-radius-card) !important; box-shadow: 0 12px 30px rgba(27, 47, 75, 0.12); padding: 6px; }
.mbz-login .wp-block-button__link { padding: 10px 22px; }

/* ---------- Buttons ---------- */
.wp-block-button__link { text-decoration: none; transition: background-color 0.15s ease; }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.mbz-outline .wp-block-button__link {
  background: #fff; color: var(--mbz-action); border: 1px solid var(--mbz-action);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.mbz-outline .wp-block-button__link:hover { background: var(--mbz-wash); color: var(--mbz-action-hover); }
.mbz-on-blue .wp-block-button__link { background: #fff; color: var(--mbz-action); }
.mbz-on-blue .wp-block-button__link:hover { background: var(--mbz-wash); color: var(--mbz-action-hover); }

/* ---------- Page head and content ---------- */
.mbz-pagehead { background: var(--mbz-gradient-light); padding: 56px 24px 48px; }
.mbz-pagehead .wp-block-post-title { margin: 0; }
.mbz-main { padding: 56px 24px 72px; }
.wp-block-post-content > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.wp-block-post-content > .alignwide { max-width: 1200px; }
.wp-block-post-content > .alignfull { max-width: none; }
.wp-block-post-content h2 { margin-top: 2.2em; }
.wp-block-post-content h3 { margin-top: 1.8em; }
.wp-block-post-content ul, .wp-block-post-content ol { padding-left: 1.4em; }
.wp-block-post-content li { margin-bottom: 0.45em; }
.wp-block-post-content li::marker { color: var(--mbz-action); }
.wp-block-post-content img { border-radius: var(--mbz-radius-card); }
.wp-block-post-content table, .entry-content table { border-collapse: collapse; width: 100%; font-size: 15px; }
.wp-block-post-content th, .wp-block-post-content td { border: 1px solid var(--mbz-border); padding: 10px 14px; text-align: left; vertical-align: top; }
.wp-block-post-content th { background: var(--mbz-wash); color: var(--mbz-ink); font-weight: 600; }
.wp-block-post-content blockquote { border-left: 4px solid var(--mbz-accent); margin-left: 0; padding: 4px 0 4px 20px; color: var(--mbz-ink); }
.wp-block-post-content hr { border: 0; border-top: 1px solid var(--mbz-border); margin: 2.5em auto; }

/* Forms (contact forms, search) */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  font-family: inherit; font-size: 15px; color: var(--mbz-ink); background: #fff;
  border: 1px solid var(--mbz-border); border-radius: var(--mbz-radius-control); padding: 11px 14px; max-width: 100%; box-sizing: border-box;
}
textarea { width: 100%; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(59, 130, 214, 0.25); border-color: var(--mbz-accent); }
input[type="submit"], button[type="submit"], .wpcf7-submit {
  font-family: inherit; font-weight: 500; font-size: 15px; color: #fff; background: var(--mbz-action);
  border: 0; border-radius: var(--mbz-radius-button); padding: 12px 26px; cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover, .wpcf7-submit:hover { background: var(--mbz-action-hover); }
label { font-weight: 500; color: var(--mbz-ink); }

/* ---------- Home sections ---------- */
.mbz-hero { background: var(--mbz-gradient-light); padding: 88px 24px; position: relative; overflow: hidden; }
.mbz-hero > .wp-block-columns { align-items: center; gap: 64px; }
.mbz-hero h1 { font-size: 54px; line-height: 1.18; margin: 0 0 24px; }
.mbz-accent { color: var(--mbz-action); }
.mbz-hero p { font-size: 18px; line-height: 1.6; }
.mbz-shot { margin: 0; }
.mbz-shot img { width: 100%; height: auto; border-radius: var(--mbz-radius-card); }
.mbz-eyebrow, .mbz-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mbz-action); margin: 0 0 14px;
}
.mbz-section { padding: 88px 24px; }
.mbz-section.mbz-mist { background: var(--mbz-mist); }
.mbz-section h2 { margin: 0 0 24px; }
.mbz-section p { font-size: 18px; line-height: 1.7; }
.mbz-two > .wp-block-column p { margin: 0; color: var(--mbz-soft); }
.mbz-cards { gap: 24px; margin: 24px 0 0; }
.mbz-card {
  background: #fff; border: 1px solid var(--mbz-border); border-radius: var(--mbz-radius-card);
  box-shadow: var(--mbz-shadow-card); padding: 32px 28px; box-sizing: border-box;
}
.mbz-card h3 { margin: 0; font-size: 20px; line-height: 1.4; }
.mbz-card p { font-size: 15px; line-height: 1.6; margin: 10px 0 0; color: var(--mbz-soft); }
.mbz-card .mbz-label { margin: 0 0 10px; }
.mbz-icon {
  width: 44px; height: 44px; border-radius: var(--mbz-radius-card); background: var(--mbz-gradient);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.mbz-linkcard a { text-decoration: none; }
.mbz-linkcard h3 a { color: var(--mbz-ink); }
.mbz-linkcard:hover { border-color: var(--mbz-accent); }

/* ---------- Closing band ---------- */
.mbz-cta { background: var(--mbz-gradient); padding: 64px 24px; }
.mbz-cta .wp-block-group { gap: 24px; }
.mbz-cta h2 { color: #fff; margin: 0; font-size: 34px; }

/* ---------- Footer ---------- */
.mbz-footer { background: var(--mbz-mist); border-top: 1px solid var(--mbz-border); padding: 48px 24px 32px; }
.mbz-footer .wp-block-image { margin: 0; }
.mbz-footer .wp-block-image img { height: 52px; width: auto; }
.mbz-footer .wp-block-navigation a { color: #34496a; text-decoration: none; }
.mbz-footer .wp-block-navigation a:hover { color: var(--mbz-action); }
.mbz-footer .mbz-legal { border-top: 1px solid var(--mbz-border); margin-top: 32px; padding-top: 20px; font-size: 13px; color: var(--mbz-soft); }
.mbz-footer .mbz-legal a { color: var(--mbz-soft); }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
  .mbz-hero { padding: 56px 20px; }
  .mbz-hero h1 { font-size: 38px; }
  .mbz-hero > .wp-block-columns { gap: 32px; }
  .mbz-section { padding: 56px 20px; }
  .mbz-pagehead { padding: 40px 20px 32px; }
  .mbz-pagehead h1 { font-size: 34px; }
  .mbz-main { padding: 40px 20px 56px; }
  .mbz-cta { padding: 48px 20px; }
  .mbz-cta h2 { font-size: 26px; }
  .mbz-header { padding: 10px 16px; }
  .mbz-header .wp-block-image img { height: 40px; }
  .mbz-cards { gap: 16px; }
}

/* ---------- Extras ---------- */
.mbz-two + .mbz-enable { margin-top: 64px; }
.mbz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.mbz-grid > .mbz-card { padding: 28px 24px; }
.mbz-grid > .mbz-card h3 { margin: 0; }
.mbz-hero .wp-block-buttons { margin-top: 28px; }
.mbz-pagehead .wp-block-post-date { margin-top: 8px; color: var(--mbz-soft); font-size: 14px; }
.mbz-enable h2 { margin-bottom: 0; }