/*
Theme Name: PIA Manila Qatar Section
Theme URI: https://piaqatar.example.com
Author: PIA Manila Chapter - Qatar Section
Description: Official WordPress theme for the Philippine Institute of Architects (PIA) Manila Chapter - Qatar Section. Maroon / gold / navy design with a fully editable Hero (Customizer) and editable content pages (Block Editor).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pia-qatar
*/

/* ===================================================================
   This theme uses the Tailwind CDN (loaded in header.php) so class
   names in templates match the original design 1:1. Everything below
   is the small amount of extra CSS needed to make WordPress-specific
   pieces (nav menu, Customizer hero, block editor content, forms)
   look identical to the original design.
=================================================================== */

:root{
  --pia-maroon:#800020;
  --pia-beige:#F5F5DC;
  --pia-navy:#000080;
  --pia-gold:#D4AF37;
}

html{ scroll-behavior:smooth; }
body{ background:rgba(255,251,235,.2); }

/* ---------- WP core nav menu -> same look as original buttons ---------- */
#primary-menu{ display:flex; align-items:center; gap:1.5rem; }
#primary-menu li{ list-style:none; }
#primary-menu a{
  font-weight:500; font-size:.875rem; color:#334155; text-decoration:none;
  transition:color .15s ease;
}
#primary-menu a:hover, #primary-menu .current-menu-item > a{ color:var(--pia-maroon); }

#mobile-menu ul{ margin:0; padding:0; }
#mobile-menu li{ list-style:none; }
#mobile-menu a{
  display:block; width:100%; text-align:left; padding:.5rem 0;
  color:#334155; text-decoration:none; font-weight:500; font-size:.9rem;
}
#mobile-menu a:hover{ color:var(--pia-maroon); }

/* ---------- Page title banner (About/Officers/Events/etc.) ---------- */
.pia-page-banner{ text-align:center; }
.pia-eyebrow{
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.15em; color:var(--pia-gold);
}

/* ---------- Editable content area (Block Editor output) ----------
   Keeps whatever the admin writes in Pages/Home looking consistent
   with the rest of the site without them having to add classes. */
.pia-editable{ color:#475569; line-height:1.75; }
.pia-editable > *{ margin-top:1.25rem; }
.pia-editable > *:first-child{ margin-top:0; }
.pia-editable h1,.pia-editable h2,.pia-editable h3,.pia-editable h4{
  font-family: Georgia, 'Times New Roman', serif; font-weight:700; color:#0f172a;
}
.pia-editable h2{ font-size:1.875rem; }
.pia-editable h3{ font-size:1.25rem; }
.pia-editable a{ color:var(--pia-maroon); text-decoration:underline; }
.pia-editable img{ border-radius:.75rem; height:auto; max-width:100%; }
.pia-editable .wp-block-column,
.pia-editable .wp-block-group{ background:#fff; }

/* Utility classes used on Gutenberg blocks (added as "Additional CSS class") */
.pia-card{
  background:#fff; border:1px solid rgba(251,191,36,.3); border-radius:.75rem;
  padding:1.75rem; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.pia-card h3,.pia-card h4{ margin-top:.5rem !important; }
.pia-quote-block{
  background:var(--pia-navy); color:#fff; border-radius:.75rem; padding:2rem; text-align:center;
}
.pia-quote-block p{ color:#fef3c7; font-style:italic; font-family:Georgia,serif; }
.pia-num-badge{
  width:3rem; height:3rem; border-radius:.5rem; background:rgba(128,0,32,.1); color:var(--pia-maroon);
  display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-weight:700; font-size:1.25rem;
}
.pia-btn, .wp-block-button.pia-btn-outline .wp-block-button__link{
  border-radius:9999px !important; font-weight:600 !important; padding:.75rem 1.75rem !important;
}
.wp-block-button.pia-btn-outline .wp-block-button__link{
  background:transparent !important; border:2px solid #1e293b !important; color:#1e293b !important;
}
.wp-block-button.pia-btn-outline .wp-block-button__link:hover{ background:#0f172a !important; color:#fff !important; }
.wp-block-button.pia-btn-solid .wp-block-button__link{
  background:var(--pia-maroon) !important; border-radius:.375rem !important;
}

/* ---------- Contact form (rendered by [pia_contact_form]) ---------- */
.pia-contact-form input, .pia-contact-form textarea{
  width:100%; padding:.5rem 1rem; border-radius:.375rem; border:1px solid #e2e8f0;
}
.pia-contact-form input:focus, .pia-contact-form textarea:focus{
  outline:none; border-color:var(--pia-maroon);
}
.pia-contact-form label{
  display:block; font-size:.75rem; font-weight:600; text-transform:uppercase; color:#475569; margin-bottom:.25rem;
}
.pia-contact-form button{
  width:100%; padding:.75rem 0; background:var(--pia-maroon); color:#fff; font-weight:500;
  border-radius:.375rem; border:0; cursor:pointer; transition:opacity .15s ease;
}
.pia-contact-form button:hover{ opacity:.9; }
.pia-form-notice{ padding:.75rem 1rem; border-radius:.5rem; font-size:.875rem; margin-bottom:1rem; }
.pia-form-notice.success{ background:#d1fae5; color:#065f46; }
.pia-form-notice.error{ background:#fee2e2; color:#991b1b; }

/* ---------- Small pill badges (Events status tags) ---------- */
.pia-badge{
  display:inline-block; padding:.25rem .75rem; border-radius:9999px;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
}
.pia-badge-amber{ background:#fef3c7; color:var(--pia-maroon); }
.pia-badge-emerald{ background:#d1fae5; color:#065f46; }

/* ---------- Highlighted card (e.g. Chairman on Officers page) ---------- */
.pia-card-highlight{ box-shadow:0 0 0 2px rgba(212,175,55,.4); }

/* ---------- Customizer live-preview highlight (admin only, harmless) --- */
.pia-hero{ position:relative; background:#0f172a; color:#fff; overflow:hidden; }