/* ============================================================
   LOTIA FOUNDATION — COMMON / SHARED STYLESHEET
   Consolidated from the identical CSS blocks that were
   previously duplicated inline on every page:
   index.php, about-us.php, contact-us.php, our-initiatives.php,
   header.php (nav), footer.php, contact-section.php.

   Load this file in <head> BEFORE each page's own <style> block
   so page-specific rules can still override where needed.
   ============================================================ */

/* ------------------------------------------------------------
   1. ROOT VARIABLES (design tokens — colors, fonts, easing)
   ------------------------------------------------------------ */
:root{
  --night:#080d1c;
  --ink:#0e1830;
  --ink-2:#15223f;
  --ink-3:#1c2c4d;
  --gold:#d8a534;
  --gold-bright:#f3c861;
  --gold-deep:#a87b22;
  --saffron:#e07b39;
  --vermilion:#bb4129;
  --leaf:#2f5d4a;
  --leaf-bright:#4f8a6c;
  --lotus:#e0879e;
  --cream:#f6efdd;
  --cream-2:#efe4cb;
  --sand:#e7d8b6;
  --sand-2:#dcc89c;
  --paper-ink:#22304b;
  --paper-soft:#5a6478;
  --hairline:rgba(216,165,52,.28);
  --hairline-soft:rgba(216,165,52,.16);
  --line-dark:rgba(34,48,75,.14);

  --ff-display:"Cormorant Garamond", Georgia, serif;
  --ff-body:"Mukta", system-ui, sans-serif;

  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------
   2. SITE NAV + MOBILE MENU (used by header.php on every page)
   ------------------------------------------------------------ */
html, body {
  overflow-x: hidden;
}

.lf-nav,
.lf-nav *,
.lf-nav *::before,
.lf-nav *::after {
  box-sizing: border-box;
}

.lf-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  padding: 14px 14px 0;
  pointer-events: none;
}

.lf-nav-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* desktop */
.lf-nav-desktop {
  pointer-events: auto;
  width: min(100%, 960px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(10,16,34,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246,239,221,.12);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,.8);
}

.lf-nav-side {
  display: flex;
  align-items: center;
  gap: 60px;
  min-width: 0;
}

.lf-nav-side--left {
  justify-content: flex-end;
}

.lf-nav-side--right {
  justify-content: flex-start;
}

.lf-nav-side a {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(246,239,221,.84);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: capitalize;
  padding: .5em .1em;
  transition: color .3s ease;
}

.lf-nav-side a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .1em;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width .35s var(--ease);
}

.lf-nav-side a:hover,
.lf-nav-side a.active {
  color: var(--gold-bright);
}

.lf-nav-side a:hover::after,
.lf-nav-side a.active::after {
  width: 100%;
}

.lf-nav-logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  text-decoration: none;
  padding: 0 25px;
}

.lf-nav-logo-center img {
  display: block;
  height: 100%;
  width: auto;
}

.lf-nav-logo-center .logo-fallback {
  display: none;
  font-family: var(--ff-display);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--cream);
  white-space: nowrap;
}

.lf-contact-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5em;
  text-decoration: none;
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #3a2607 !important;
  padding: 10px 20px !important;
  border-radius: 999px;
  border: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.lf-contact-btn::after {
  display: none !important;
}

.lf-contact-btn:hover,
.lf-contact-btn.active {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(216,165,52,.8);
}

/* mobile */
.lf-nav-mobile {
  display: none;
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lf-mobile-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 58px);
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10,16,34,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246,239,221,.14);
  text-decoration: none;
  overflow: hidden;
}

.lf-mobile-logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

.lf-mobile-logo .logo-fallback {
  display: none;
}

.lf-burger {
  display: none;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(10,16,34,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246,239,221,.14);
  cursor: pointer;
}

.lf-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}

.lf-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.lf-burger.open span:nth-child(2) {
  opacity: 0;
}

.lf-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.lf-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  padding: 96px 20px 28px;
  box-sizing: border-box;
  background: rgba(8,13,28,.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  transition: opacity .35s ease, visibility .35s ease;
}

.lf-mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lf-mobile-menu a {
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--ff-display);
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: .02em;
  word-break: break-word;
}

.lf-mobile-menu a:hover,
.lf-mobile-menu a.active {
  color: var(--gold);
}

.lf-mobile-menu .lf-mm-contact {
  margin-top: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #3a2607;
  font-family: var(--ff-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .95em 2.1em;
  border-radius: 999px;
}

@media (max-width: 860px) {
  .lf-nav-desktop {
    display: none;
  }

  .lf-nav-mobile {
    display: flex;
  }

  .lf-burger {
    display: flex;
  }
}

@media (min-width: 861px) {
  .lf-mobile-menu {
    display: none;
  }
}

/* ------------------------------------------------------------
   3. SITE FOOTER (used by footer.php on every page)
   ------------------------------------------------------------ */
.lf-ftr{background:var(--night,#080d1c);color:var(--cream,#f6efdd);padding:clamp(3rem,6vw,4.5rem) 0 2.2rem}
.lf-ftr-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem}

.lf-ftr-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3rem)}
.lf-ftr-col h4{font-family:var(--ff-display,serif);font-weight:600;font-size:1.15rem;
  color:var(--cream,#f6efdd);margin-bottom:1rem}
.lf-ftr-logo{height:42px;width:auto;margin-bottom:.9rem}
.lf-ftr-logo-fallback{font-family:var(--ff-display,serif);font-size:1.4rem;color:var(--cream,#f6efdd);display:none;margin-bottom:.9rem}
.lf-ftr-desc{color:rgba(246,239,221,.62);font-weight:300;font-size:.92rem;line-height:1.6;max-width:32ch}
.lf-ftr-social{display:flex;gap:.7rem;margin-top:1.2rem}
.lf-ftr-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline-soft,rgba(216,165,52,.16));
  display:grid;place-items:center;color:var(--cream,#f6efdd);transition:all .3s}
.lf-ftr-social a:hover{background:var(--gold,#d8a534);color:var(--night,#080d1c);border-color:var(--gold,#d8a534)}
.lf-ftr-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.lf-ftr-links a{color:rgba(246,239,221,.75);font-size:.94rem;transition:color .3s}
.lf-ftr-links a:hover{color:var(--gold,#d8a534)}
.lf-ftr-news{display:flex;gap:.5rem;margin-top:.4rem}
.lf-ftr-news input{flex:1;min-width:0;padding:.7em .9em;border-radius:10px 0 0 10px;border:1px solid var(--hairline-soft,rgba(216,165,52,.16));
  background:rgba(255,255,255,.06);color:var(--cream,#f6efdd);font-size:.88rem}
.lf-ftr-news input::placeholder{color:rgba(246,239,221,.45)}
.lf-ftr-news button{padding:0 1.1em;border:none;border-radius:0 10px 10px 0;background:var(--gold,#d8a534);
  color:var(--night,#080d1c);font-weight:700;font-size:.82rem;cursor:pointer;transition:background .3s}
.lf-ftr-news button:hover{background:var(--gold-bright,#f3c861)}

.lf-ftr-bottom{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--hairline-soft,rgba(216,165,52,.16));
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.82rem;color:rgba(246,239,221,.55)}
.lf-ftr-bottom a{color:rgba(246,239,221,.55)}
.lf-ftr-bottom a:hover{color:var(--gold,#d8a534)}

@media (max-width:900px){
  .lf-ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .lf-ftr-grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   4. CONTACT FORM SECTION (used by contact-section.php)
   ------------------------------------------------------------ */
.lf-contact{background:var(--cream,#f6efdd);padding:clamp(3.5rem,3vw,5.5rem) 0}
.lf-contact-inner{max-width:1349px;margin:0 auto;padding:0 1.5rem}
.lf-contact-head{text-align:center;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.lf-contact-head h2{font-family:var(--ff-display,serif);font-weight:600;
  font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--ink,#0e1830)}
.lf-contact-head p{margin-top:.7rem;color:var(--paper-soft,#5a6478);font-size:1rem;font-weight:300}

.lf-contact-form{background:#fff;border-radius:20px;
  padding:clamp(1.8rem,3.5vw,2.8rem) clamp(1.8rem,4vw,3.2rem);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.22);border:1px solid var(--hairline,rgba(216,165,52,.28))}
.lf-contact-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;align-items:start}
.lf-contact-field{display:flex;flex-direction:column}
.lf-contact-field label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-soft,#5a6478);margin-bottom:.5rem}
.lf-contact-field select,.lf-contact-field input,.lf-contact-field textarea{
  width:100%;padding:.75em .9em;border-radius:10px;border:1px solid var(--hairline,rgba(216,165,52,.28));
  background:#fff;color:var(--ink,#0e1830);font-family:var(--ff-body,sans-serif);font-size:.92rem;resize:none}
.lf-contact-field select:focus,.lf-contact-field input:focus,.lf-contact-field textarea:focus{
  outline:none;border-color:var(--gold,#d8a534)}
/*.lf-contact-field textarea{min-height:44px}*/
.lf-contact-consent{display:flex;align-items:flex-start;gap:.6em;margin-top:1.3rem;font-size:.82rem;
  color:var(--paper-soft,#5a6478)}
.lf-contact-consent input{margin-top:.25em}
.lf-contact-consent a{color:var(--gold-deep,#a87b22)}
.lf-contact-submit-row{margin-top:1.4rem;text-align:center}
.lf-contact-submit{background:var(--gold,#d8a534);color:var(--night,#080d1c);border:none;
  padding:.85em 2.6em;border-radius:999px;font-weight:700;font-size:.88rem;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:background .3s}
.lf-contact-submit:hover{background:var(--gold-bright,#f3c861)}
.lf-contact-msg{margin-top:.9rem;text-align:center;font-size:.85rem}

@media (max-width:1100px){
  .lf-contact-row{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:700px){
  .lf-contact-row{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .lf-contact-row{grid-template-columns:1fr}
}
/* ============================================================
   CRM CONTACT FORMS — shared validation / result styling
   Applies to all .wg-contact-form forms (Contact Us, Get in Touch
   section, Footer Newsletter). Kept generic + low-specificity so
   it layers cleanly on top of each form's existing design.
   ============================================================ */
.wg-error input,
.wg-error textarea,
.wg-error select {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.wg-field-error {
  display: block;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.4;
}

.wg-form-result,
.ff-msg,
.lf-contact-msg {
  font-size: 0.85rem;
  margin-top: 10px;
  min-height: 18px;
  transition: color 0.2s ease;
}

.wg-form-result.wg-success,
.ff-msg.wg-success,
.lf-contact-msg.wg-success {
  color: #16a34a;
}

.wg-form-result.wg-error,
.ff-msg.wg-error,
.lf-contact-msg.wg-error {
  color: #dc2626;
}

button.wg-loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
}
