/* site-pro.css — clean, professional type for every page, and a bright contact band (phone + showroom
   addresses) at the top of the footer. Loaded last, after layout/header-tn.css. */

/* ---------- type: Playfair Display for headings, Source Sans 3 for reading, Poppins for small labels ---------- */
body.site, body.desk-body { font-family: "Source Sans 3", "Noto Sans Tamil", system-ui, sans-serif; }
.hd-nav a {
  font-family: "Source Sans 3", "Noto Sans Tamil", sans-serif !important;
  font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: .04em !important;
}
.hd-brand strong { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; letter-spacing: .16em !important; }
.hd-brand small { font-family: Poppins, sans-serif !important; font-weight: 500; }
@media (max-width: 980px) { .hd-nav a { font-size: 16px !important; } }

/* ---------- footer ---------- */
body.site .site-footer { background: linear-gradient(180deg, #4a0915, #2e0710) !important; color: #fbf3e4 !important; padding: 0 0 22px !important; }
body.site .site-footer h2 { font: 700 26px "Playfair Display", serif !important; color: #f1d58a !important; }
body.site .site-footer h3 { font: 600 12px Poppins, sans-serif !important; letter-spacing: .2em; text-transform: uppercase; color: #c9a24a !important; margin-top: 14px; }
body.site .site-footer p { color: rgba(251, 243, 228, .9) !important; font-size: 16px; }
body.site .site-footer a { color: #f1d58a !important; }
body.site .site-footer .brand-mark { background: #c9a24a !important; color: #3d0710 !important; border: 0 !important; }
body.site .site-footer .legal { color: rgba(251, 243, 228, .6) !important; border-top: 1px solid rgba(201, 162, 74, .3); padding-top: 16px; }

/* ---------- bright contact band ---------- */
.contact-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
  margin: 0 0 40px; padding: 34px 0 0;
  border-top: 4px solid #c9a24a;
}
.cb-card {
  position: relative; padding: 24px 24px 22px 92px; min-height: 150px;
  background: linear-gradient(135deg, #fff7e2, #f6e2b0);
  border: 2px solid #e2bd62; outline: 1px solid rgba(255, 255, 255, .6); outline-offset: -8px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 162, 74, .3);
  color: #3d0710; transition: transform .3s ease, box-shadow .3s ease;
}
.cb-card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -20px rgba(0, 0, 0, .6), 0 0 26px rgba(241, 213, 138, .35); }
.cb-call { background: linear-gradient(135deg, #f1d58a, #d9ae4f); border-color: #fbe7a6; }
.cb-ico {
  position: absolute; left: 22px; top: 24px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: #6b0f1f; box-shadow: 0 0 0 4px rgba(107, 15, 31, .15);
}
.cb-ico svg { width: 24px; height: 24px; fill: #f1d58a; }
.cb-call .cb-ico { animation: cb-ring 2.8s ease-in-out infinite; }
@keyframes cb-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
.cb-card small { display: block; font: 600 11px Poppins, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #8e1f35; }
body.site .site-footer .cb-card a.cb-big {
  display: block; margin: 6px 0 10px; color: #3d0710 !important; text-decoration: none;
  font: 700 30px/1.15 "Playfair Display", serif; letter-spacing: .02em;
}
body.site .site-footer .cb-card p.cb-addr { margin: 8px 0 12px; color: #2a1a12 !important; font: 600 17px/1.45 "Source Sans 3", sans-serif; }
.cb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
body.site .site-footer .cb-acts a {
  display: inline-block; padding: 8px 14px; background: #6b0f1f; color: #f1d58a !important; text-decoration: none;
  font: 600 11px Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
body.site .site-footer .cb-acts a:hover { background: #3d0710; }
body.site .site-footer .cb-acts a.wa { background: #1f8f4e; color: #fff !important; }
@media (max-width: 900px) { .contact-band { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cb-call .cb-ico { animation: none; } }

/* header logo: lotus badge (app logo option 3) + SSS / FASHION */
.hd-brand { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; text-decoration: none; }
.hd-brand .hd-logo { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); transition: transform .4s ease; }
.hd-brand:hover .hd-logo { transform: rotate(-6deg) scale(1.05); }
.hd-brand .hd-word { display: flex; flex-direction: column; line-height: 1; }
.hd.is-small .hd-brand .hd-logo { width: 44px; height: 44px; }
@media (max-width: 760px) { .hd-brand .hd-logo { width: 42px; height: 42px; } }

/* footer brand: lotus logo and the name side by side at the top of the first column */
body.site .site-footer .ft-brand { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 12px !important; }
body.site .site-footer .ft-brand .ft-logo { width: 56px; height: 56px; flex: none; }
body.site .site-footer .ft-brand h2 { margin: 0 !important; padding: 0 !important; text-align: left !important; position: static !important; transform: none !important; }
body.site .site-footer .footer-grid { align-items: start !important; }
body.site .site-footer .footer-grid > div:first-child { text-align: left !important; }

/* numbers: straight, normal digits everywhere (Playfair's old-style 3/4/7/9 dropping below the line looked odd) */
body.site, body.desk-body, body.site *, body.desk-body * { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* phone numbers in the plain reading font */
body.site .site-footer .cb-card a.cb-big { font-family: "Source Sans 3", "Noto Sans Tamil", sans-serif !important; font-weight: 700 !important; letter-spacing: .03em; }

/* phones: nothing may push the page wider than the screen */
html, body.site { overflow-x: hidden; }
.hd-toggle { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
