/*
Theme Name:        Hindu Centre Singapore
Theme URI:         https://hinducentre.org.sg
Author:            Hindu Centre (Singapore) — built from the "Sacred Pragmatism" prototype
Author URI:        https://hinducentre.org.sg
Description:        Custom theme for Hindu Centre (Singapore). Converts the single-file "Sacred Pragmatism" prototype (index.html) into a managed WordPress site. Three pillars — Jnana, Bhakti, Sevaa. The real design-system CSS lives in /assets/css/main.css (see README, Step 3); this file only carries the WordPress theme header plus a few WordPress-specific overrides.
Version:           0.8.0
Requires at least: 6.4
Requires PHP:      8.0
License:           All rights reserved (client work)
Text Domain:       hindu-centre
*/

/* ============================================================
   WordPress-specific overrides ONLY.
   The full Sacred Pragmatism design system is in
   /assets/css/main.css (extracted from the prototype's <style>
   block — see tools/extract-assets.sh and README Step 3).
   Keep this file tiny; do NOT paste the design system here.
   ============================================================ */

/* --- 1. Neutralise the prototype's single-page-app display rule ---
   In the prototype every section lived inside <div class="page">
   and JS toggled .page-active to show one at a time. In WordPress
   each section is its own URL, so a page must always be visible. */
.page,
.page:not(.page-active) {
  display: block !important;
}

/* --- 2. WordPress admin bar safety --- */
body.admin-bar .site-header.scrolled { /* keep nav clear of the 32px admin bar */ }

/* --- 3. WordPress core alignment + caption classes (Gutenberg) --- */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 0.85rem; color: #6b6b6b; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* --- 4. Editor-managed body copy (The Events Calendar / posts) ---
   Inherits the prototype's typography variables from main.css. */
.entry-content { font-family: var(--font-body, 'Work Sans', sans-serif); }

/* --- 5. The Events Calendar — Design Gita colour override --- */

/* Find Events button */
.tribe-events .tribe-events-c-search__button,
.tribe-events-button,
input[type="submit"].tribe-events-button {
  background-color: #E8651A !important;
  border-color: #E8651A !important;
  color: #FFF8F0 !important;
}
.tribe-events .tribe-events-c-search__button:hover,
.tribe-events-button:hover {
  background-color: #C85010 !important;
  border-color: #C85010 !important;
}

/* Active tab underline (List / Month / Day) */
.tribe-events .tribe-events-c-view-selector__button--active,
.tribe-events .tribe-events-c-view-selector__button:focus {
  border-bottom-color: #E8651A !important;
  color: #5B1A1A !important;
}

/* Subscribe to calendar button */
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events-subscribe-dropdown__button {
  border-color: #E8651A !important;
  color: #E8651A !important;
}
.tribe-events .tribe-events-c-subscribe-dropdown__button:hover {
  background-color: #E8651A !important;
  color: #FFF8F0 !important;
}

/* All links within events pages */
.tribe-events a,
.tribe-events .tribe-events-c-nav__next a,
.tribe-events .tribe-events-c-nav__prev a,
.tribe-common a {
  color: #E8651A !important;
}
.tribe-events a:hover,
.tribe-common a:hover {
  color: #C85010 !important;
}

/* Any remaining blue accent the plugin injects */
.tribe-common--breakpoint-medium.tribe-common .tribe-common-anchor-thin:active,
.tribe-common--breakpoint-medium.tribe-common .tribe-common-anchor-thin:focus,
.tribe-common--breakpoint-medium.tribe-common .tribe-common-anchor-thin:hover {
  color: #E8651A !important;
  border-bottom-color: #E8651A !important;
}

/* --- 6. The Events Calendar — Design Gita typography --- */

/* Headings & event titles → Crimson Pro */
.tribe-events .tribe-events-calendar-month__header-column-title,
.tribe-events .tribe-common-h1,
.tribe-events .tribe-common-h2,
.tribe-events .tribe-common-h3,
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events h1, .tribe-events h2, .tribe-events h3 {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif !important;
}

/* Body & UI elements → Work Sans */
.tribe-events,
.tribe-common,
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-view-selector__button,
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-events-calendar-month__day-date {
  font-family: 'Work Sans', -apple-system, 'Segoe UI', sans-serif !important;
}

/* --- 7. The Events Calendar — single event page (Design Gita) --- */

/* Event title → temple charcoal + Crimson Pro (was dark-navy sans-serif) */
.tribe-events-single-event-title,
.tribe-events-single .entry-title {
  color: #5B1A1A !important;
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif !important;
}

/* Details section title + labels/values (Date / Time / Website) → brand text */
.tribe-events-single-section-title,
.tribe-events-schedule,
.tribe-events-meta-label,
.tribe-events-meta-value {
  color: var(--text-primary, #3D1010) !important;
}

/* Event URL / meta links → saffron (TEC's specific rule kept them blue) */
.tribe-events-event-url a,
.tribe-events-single-section a,
.tribe-events-event-meta a {
  color: #E8651A !important;
}
.tribe-events-event-url a:hover,
.tribe-events-single-section a:hover,
.tribe-events-event-meta a:hover {
  color: #C85010 !important;
}

/* --- 8. Footer Zoho newsletter signup — brand restyle --- */
/* Zoho ships a pink Arial button; recolour to brand gold + Work Sans. */
.hc-zoho-optin #zcWebOptin {
  background-color: var(--lamp-gold, #F5B800) !important;
  color: #3D1010 !important;
  font-family: 'Work Sans', -apple-system, sans-serif !important;
  font-weight: 600 !important;
}
.hc-zoho-optin #zcWebOptin:hover {
  background-color: #E8651A !important;
  color: #FFF8F0 !important;
}
.hc-zoho-optin form,
.hc-zoho-optin input,
.hc-zoho-optin #customForm div {
  font-family: 'Work Sans', -apple-system, 'Segoe UI', sans-serif !important;
}
/* Keep the white signup card from overflowing the narrow footer column. */
.hc-zoho-optin [name="SIGNUP_BODY"],
.hc-zoho-optin #customForm > div > div { max-width: 100%; }

/* --- 9. Utility-bar site search --- */
.utility-search { display: inline-flex; align-items: center; gap: 0.3rem; }
.utility-search input[type="search"] {
  width: 130px; max-width: 40vw; background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid currentColor; opacity: 0.85;
  font-family: 'Work Sans', -apple-system, sans-serif; font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
}
.utility-search input[type="search"]::placeholder { color: inherit; opacity: 0.6; }
.utility-search input[type="search"]:focus { outline: none; opacity: 1; }
.utility-search button {
  display: inline-flex; align-items: center; background: transparent;
  border: 0; color: inherit; cursor: pointer; padding: 0;
}