/*
 * temple-patterns.css
 * Decorative CSS patterns for the Aalayam theme
 * — kolam borders, lotus dividers, gold ornament lines
 */

/* ============================================================
   GOLD SHIMMER BORDER
   Used as header/footer separator
   ============================================================ */
.header-gold-border {
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-secondary) 20%,
        var(--color-accent) 50%,
        var(--color-secondary) 80%,
        transparent 100%
    );
}

/* ============================================================
   KOLAM DOT BORDER
   Traditional Tamil kolam (rangoli) dot pattern
   ============================================================ */
.kolam-border {
    height: 14px;
    background-image:
        radial-gradient(circle, var(--color-secondary) 2px, transparent 2px),
        radial-gradient(circle, var(--color-secondary) 2px, transparent 2px);
    background-size: 16px 14px, 16px 14px;
    background-position: 0 50%, 8px 100%;
    opacity: 0.6;
}

/* ============================================================
   LOTUS DIVIDER
   Gold lotus flower divider between sections
   ============================================================ */
.lotus-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    color: var(--color-secondary);
    font-size: 1.4rem;
    opacity: 0.8;
}

.lotus-divider::before,
.lotus-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-secondary));
    max-width: 200px;
}

.lotus-divider::after {
    background: linear-gradient(to left, transparent, var(--color-secondary));
}

/* ============================================================
   GOPURAM SILHOUETTE
   Simple CSS-only temple tower silhouette
   ============================================================ */
.gopuram-divider {
    height: 32px;
    background: var(--color-primary);
    clip-path: polygon(
        0% 100%,
        5% 100%,
        5% 70%,
        10% 70%,
        10% 50%,
        13% 50%,
        13% 35%,
        15% 35%,
        15% 25%,
        17% 25%,
        17% 15%,
        19% 15%,
        19% 8%,
        21% 8%,
        21% 4%,
        23% 4%,
        25% 0%,
        27% 4%,
        29% 4%,
        29% 8%,
        31% 8%,
        31% 15%,
        33% 15%,
        33% 25%,
        35% 25%,
        35% 35%,
        37% 35%,
        37% 50%,
        40% 50%,
        40% 70%,
        45% 70%,
        45% 100%,
        55% 100%,
        55% 70%,
        60% 70%,
        60% 50%,
        63% 50%,
        63% 35%,
        65% 35%,
        65% 25%,
        67% 25%,
        67% 15%,
        69% 15%,
        69% 8%,
        71% 8%,
        71% 4%,
        73% 4%,
        75% 0%,
        77% 4%,
        79% 4%,
        79% 8%,
        81% 8%,
        81% 15%,
        83% 15%,
        83% 25%,
        85% 25%,
        85% 35%,
        87% 35%,
        87% 50%,
        90% 50%,
        90% 70%,
        95% 70%,
        95% 100%,
        100% 100%
    );
    margin: 2rem 0;
    opacity: 0.15;
}

/* ============================================================
   DECORATIVE CARD ORNAMENT
   Corner ornaments for feature cards
   ============================================================ */
.ornament-card {
    position: relative;
}

.ornament-card::before,
.ornament-card::after {
    content: '✦';
    position: absolute;
    color: var(--color-secondary);
    font-size: 0.75rem;
    opacity: 0.6;
}

.ornament-card::before {
    top: 0.5rem;
    right: 0.75rem;
}

.ornament-card::after {
    bottom: 0.5rem;
    left: 0.75rem;
}

/* ============================================================
   OM WATERMARK
   Subtle Om symbol background for sections
   ============================================================ */
.om-bg-section {
    position: relative;
    overflow: hidden;
}

.om-bg-section::before {
    content: 'ॐ';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20rem;
    color: var(--color-primary);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

.om-bg-section > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   GOLD CHAIN BORDER
   Repeating decorative chain at section boundaries
   ============================================================ */
.gold-chain-border {
    height: 8px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--color-secondary) 0px,
        var(--color-secondary) 4px,
        transparent 4px,
        transparent 8px,
        var(--color-accent) 8px,
        var(--color-accent) 10px,
        transparent 10px,
        transparent 14px,
        var(--color-secondary) 14px,
        var(--color-secondary) 18px,
        transparent 18px,
        transparent 22px
    );
    background-size: 22px 8px;
    opacity: 0.6;
}

/* ============================================================
   ADMIN META BOX STYLES
   (decorative helpers)
   ============================================================ */


/* ============================================================
   LANGUAGE SWITCHER (Polylang)
   Pill trigger in the top-bar with a dropdown panel.
   Tuned for 2 languages (EN / TA); for 3+ extend the
   `li:not(.current-lang) ~ li:not(.current-lang)` rule below.
   ============================================================ */
.lang-switcher {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    line-height: 1;
    /* lift above sticky .site-header (z-index: 100) so the
       dropdown panel doesn't get hidden behind it */
    z-index: 200;
}

.lang-switcher li {
    margin: 0;
    padding: 0;
}

.lang-switcher li a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    color: var(--color-lang-item);
    color: color-mix(in srgb, var(--color-lang-item) 85%, transparent);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-switcher li a img {
    width: 16px;
    height: auto;
    display: inline-block;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* --- Trigger pill (current language) --- */
.lang-switcher .current-lang {
    /* 6% is near-invisible, so `transparent` is the safe pre-color-mix fallback
       — falling back to the solid token would paint a hard white pill. */
    background: transparent;
    background: color-mix(in srgb, var(--color-lang-pill-bg) 6%, transparent);
    border: 1px solid var(--color-lang-ring);
    border: 1px solid color-mix(in srgb, var(--color-lang-ring) 40%, transparent);
    border-radius: 999px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.lang-switcher .current-lang > a {
    color: var(--color-lang-text);
    font-weight: 600;
    padding-right: 1.6rem;
    position: relative;
}

.lang-switcher .current-lang > a::after {
    content: '';
    position: absolute;
    right: 0.6rem;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transform: translateY(-50%);
    transition: transform var(--transition-fast);
}

.lang-switcher:hover .current-lang,
.lang-switcher:focus-within .current-lang,
.lang-switcher.is-open .current-lang {
    background: rgba(200, 169, 81, 0.15);
    border-color: var(--color-secondary);
}

.lang-switcher:hover .current-lang > a::after,
.lang-switcher:focus-within .current-lang > a::after,
.lang-switcher.is-open .current-lang > a::after {
    transform: translateY(-50%) rotate(180deg);
}

/* --- Dropdown panel (all non-current languages) --- */
.lang-switcher li:not(.current-lang) {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 100%;
    background: var(--color-lang-panel-bg);
    border: 1px solid var(--color-secondary);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 50;
}

/* stack additional non-current items below the first one */
.lang-switcher li:not(.current-lang) ~ li:not(.current-lang) {
    top: calc(100% + 0.5rem + 2.2rem);
}

.lang-switcher:hover li:not(.current-lang),
.lang-switcher:focus-within li:not(.current-lang),
.lang-switcher.is-open li:not(.current-lang) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher li:not(.current-lang) > a {
    width: 100%;
    padding: 0.55rem 0.9rem;
    justify-content: flex-start;
}

.lang-switcher li:not(.current-lang) > a:hover {
    background: var(--color-secondary);
    color: var(--color-text);
}


/* ==========================================================
   2. TODAY / PANCHANGAM  — cards match the quick-tile design
   ========================================================== */
.today-strip{
  background:var(--v2-band-today);
  border-top:2px solid var(--color-primary);
  border-bottom:1px solid var(--color-border);
  padding:1.1rem 0 1.3rem;
}
.today-head{
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  margin-bottom:.9rem;
}
.today-head .t-day{font-family:var(--font-tamil-tiro);font-size:1.4rem;color:var(--color-primary-dark);line-height:1.4;font-weight:700}
.today-head .t-date{font-family:var(--font-tamil-noto);font-size:1rem;color:var(--color-nav-link)}

.panch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.panch-cell{
  background:var(--v2-cream);border:1px solid var(--color-border);border-radius:12px;
  padding:.55rem .7rem;box-shadow:0 2px 10px rgba(124,43,43,.06);
  display:flex;align-items:center;gap:.65rem;text-align:left;
  transition:all var(--transition-normal);
}
.panch-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--color-secondary)}
.panch-cell .ic{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#FDF6E9,#F4E9D7);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--color-primary);
}
.panch-cell .lbl{
  font-family:var(--font-tamil-tiro);font-weight:500;font-size:.90rem;
  color:var(--color-primary-dark);line-height:1.45;
}
.panch-cell .val{
  font-family:var(--font-tamil-noto);font-size:.85rem;color:var(--color-nav-link);line-height:1.5;
}
/* functional flag — a small dot only, so the card design stays as the reference */
.panch-cell .val .flag{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.35rem;vertical-align:middle}
.panch-cell.is-bad .val .flag{background:#C0392B}
.panch-cell.is-good .val .flag{background:#2E7D45}

/* line icons used by the panchangam cells (sprite paths inlined per cell) */
.icon{
  width:1em;height:1em;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.panch-cell .tx{min-width:0}

@media (max-width:1200px){
  .panch-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .panch-grid{grid-template-columns:1fr 1fr}
  .today-head{flex-direction:column;align-items:flex-start}
}