/* Mpumalanga Chamber Orchestra - shared styles */

:root {

  --gold: #C8872E;

  --gold-d: #9A6516;

  --gold-l: #F6EBD6;

  --ink: #141414;

  --bg: #fff;

  --bg2: #FBF7EF;

  --tx: #222;

  --mut: #666;

  --card: #fff;

  --line: #E9DFCB;

  box-sizing: border-box;

  padding-top: env(safe-area-inset-top, 0px);

  padding-bottom: env(safe-area-inset-bottom, 0px);

}



@media (prefers-color-scheme: dark) {

  :root {

    --bg: #121212;

    --bg2: #1a1816;

    --tx: #f1ede4;

    --mut: #b5ad9d;

    --card: #1f1c18;

    --line: #3a3328;

    --gold-l: #2a2217;

  }

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }



body {

  margin: 0;

  font-family: Georgia, 'Times New Roman', serif;

  background: var(--bg);

  color: var(--tx);

  line-height: 1.65;

}



h1, h2, h3 { font-family: Georgia, serif; line-height: 1.2; margin: 0 0 .5em; }

a { color: inherit; }



/* Header (logo top-left) */

header {

  position: sticky;

  top: env(safe-area-inset-top, 0px);

  z-index: 20;

  background: #fff;

  border-bottom: 3px solid var(--gold);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 6px 5vw;

}

header img { height: 68px; width: auto; display: block; }



nav { display: flex; gap: 6px; font-family: system-ui, sans-serif; }

nav a {

  text-decoration: none;

  color: #141414;

  padding: 8px 14px;

  font-size: .92rem;

  font-weight: 600;

  letter-spacing: .04em;

  text-transform: uppercase;

  border-radius: 4px;

}

nav a:hover, nav a.on { color: var(--gold-d); background: #F6EBD6; }



.wrap { max-width: 1050px; margin: 0 auto; padding: 0 5vw; }



/* Hero */

.hero {

  background: linear-gradient(135deg, #141414 0%, #2a2113 100%);

  color: #fff;

  padding: 90px 0 100px;

  position: relative;

  overflow: hidden;

}

.hero:after {

  content: "";

  position: absolute;

  right: -120px;

  top: -120px;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(200,135,46,.55), transparent 70%);

}

.eyebrow {

  font-family: system-ui, sans-serif;

  color: var(--gold);

  letter-spacing: .25em;

  text-transform: uppercase;

  font-size: .8rem;

  font-weight: 700;

}

.hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); margin: .3em 0; }

.hero h1 span { color: var(--gold); }

.hero p { max-width: 600px; color: #e8e1d2; font-size: 1.1rem; }



/* Buttons */

.btn {

  display: inline-block;

  font-family: system-ui, sans-serif;

  font-weight: 700;

  text-decoration: none;

  padding: 13px 28px;

  border-radius: 3px;

  margin: 14px 12px 0 0;

  border: 2px solid var(--gold);

  cursor: pointer;

  font-size: .95rem;

}

.btn.p { background: var(--gold); color: #141414; }

.btn.p:hover { background: #dfa04a; }

.btn.o { color: #fff; }

.btn.o:hover { background: rgba(200,135,46,.2); }



/* Sections */

section { padding: 70px 0; }

.alt { background: var(--bg2); }

.rule { width: 70px; height: 3px; background: var(--gold); margin: 0 0 22px; }



.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-top: 30px; }

.stat {

  text-align: center;

  padding: 22px;

  border: 1px solid var(--line);

  background: var(--card);

  border-top: 3px solid var(--gold);

}

.stat b { display: block; font-size: 2rem; color: var(--gold-d); }



.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 28px; }

.card {

  background: var(--card);

  border: 1px solid var(--line);

  border-top: 3px solid var(--gold);

  padding: 26px;

}

.card .ic { font-size: 1.8rem; color: var(--gold); }

.card p { color: var(--mut); margin: 0; font-size: .97rem; }



.cta { background: #141414; color: #fff; text-align: center; }

.cta h2 { color: var(--gold); }



/* Footer */

footer {

  background: #0b0b0b;

  color: #cfc8b8;

  padding: 34px 0;

  font-family: system-ui, sans-serif;

  font-size: .9rem;

  border-top: 3px solid var(--gold);

}

footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

footer a { color: var(--gold); }



/* Contact page */

.phead { background: linear-gradient(135deg, #141414, #2a2113); color: #fff; padding: 60px 0; }

.phead h1 { margin: .2em 0 .1em; font-size: clamp(2rem, 5vw, 3rem); }



.two { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; }



.info div { margin-bottom: 18px; padding-left: 16px; border-left: 3px solid var(--gold); }

.info b {

  display: block;

  font-family: system-ui, sans-serif;

  font-size: .78rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--gold-d);

}



form {

  background: var(--card);

  border: 1px solid var(--line);

  border-top: 3px solid var(--gold);

  padding: 28px;

}

label { display: block; font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 600; margin: 14px 0 5px; }

input, select, textarea {

  width: 100%;

  padding: 11px;

  border: 1px solid var(--line);

  background: var(--bg);

  color: var(--tx);

  font: inherit;

  border-radius: 3px;

}

input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }

textarea { min-height: 120px; resize: vertical; }



#ok {

  display: none;

  margin-top: 16px;

  padding: 12px;

  background: var(--gold-l);

  border-left: 4px solid var(--gold);

  font-family: system-ui, sans-serif;

}



/* Mobile */

@media (max-width: 760px) {

  .two { grid-template-columns: 1fr; }

  header img { height: 54px; }

  nav a { padding: 6px 8px; font-size: .78rem; }

}