/*
Theme Name: COA Achievers Celebration
Theme URI: https://example.com
Author: Cluster of Achievers
Description: One-page website for the Celebration of 50 Achievers at the Punjab Vidhan Sabha, Chandigarh. Activate it and the site's home page shows the event page.
Version: 1.0
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coa-achievers
*/
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout: formal portal - tricolour strip, utility bar, crest header, navy nav, notice board + content panels, navy footer. Deliberately single (light) theme, like official portals. */
:root {
  --navy: #0B2E59;
  --navy-2: #12417D;
  --saffron: #FF9933;
  --green: #138808;
  --bg: #FFFFFF;
  --panel: #F2F4F7;
  --line: #D5DBE3;
  --ink: #1B2430;
  --muted: #55606E;
  --link: #1A4FA3;
  --gold: #B8860B;
  --f-body: "Noto Sans", "Segoe UI", Arial, sans-serif;
  --f-head: "Noto Serif", Georgia, "Times New Roman", serif;
  --f-hindi: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
  --fs: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { font-size: var(--fs); }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1rem; line-height: 1.6; }
.wrap { max-width: 1140px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--f-head); color: var(--navy); line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.hi { font-family: var(--f-hindi); }

/* Tricolour + utility bar */
.tricolour { height: 6px; background: linear-gradient(to right, var(--saffron) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--green) 66.66%); border-bottom: 1px solid var(--line); }
.utility { background: var(--navy); color: #FFFFFF; font-size: .8rem; }
.utility .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 6px; }
.utility a { color: #FFFFFF; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.util-r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.util-r button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #FFFFFF; font: 600 .75rem var(--f-body); padding: 2px 8px; cursor: pointer; border-radius: 2px; }
.util-r button[aria-pressed="true"] { background: #FFFFFF; color: var(--navy); }

/* Header */
.masthead { background: var(--bg); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 16px; }
.crest { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { height: 42px; width: auto; flex: none; display: block; }
.crest-text { display: grid; min-width: 0; align-content: center; }
.crest-text .hi { font-size: 1.05rem; color: var(--navy); font-weight: 700; }
.crest-text span { font-size: .85rem; color: var(--muted); }
.presence { text-align: right; font-size: .85rem; color: var(--muted); border-left: 3px solid var(--saffron); padding-left: 12px; }
.presence b { display: block; color: var(--navy); font-size: .95rem; }

/* Nav */
.mainnav { background: var(--navy-2); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.mainnav .wrap { display: flex; flex-wrap: wrap; }
.mainnav a { color: #FFFFFF; text-decoration: none; font-size: .9rem; font-weight: 600; padding: 11px 14px; border-right: 1px solid rgba(255,255,255,.15); }
.mainnav a:first-child { border-left: 1px solid rgba(255,255,255,.15); }
.mainnav a:hover { background: var(--navy); }

/* Banner */
.banner { background: linear-gradient(rgba(11,46,89,.92), rgba(11,46,89,.92)), repeating-linear-gradient(90deg, #0B2E59 0 40px, #0E3768 40px 80px); color: #FFFFFF; }
.banner .wrap { padding-block: 44px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.banner h1 { color: #FFFFFF; font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
.banner .hi { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: #FFD7A8; margin-top: 8px; }
.banner p.lede { margin-top: 14px; max-width: 60ch; opacity: .92; }
.banner .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.btn { display: inline-block; padding: 10px 20px; font: 600 .95rem var(--f-body); text-decoration: none; border-radius: 2px; cursor: pointer; border: 1px solid transparent; }
.btn-saffron { background: var(--saffron); color: #1B2430; }
.btn-saffron:hover { background: #F28A1C; }
.btn-outline { border-color: #FFFFFF; color: #FFFFFF; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.keybox { background: #FFFFFF; color: var(--ink); border-top: 4px solid var(--saffron); }
.keybox h2 { font-size: 1rem; background: var(--panel); padding: 10px 16px; border-bottom: 1px solid var(--line); font-family: var(--f-body); }
.keybox dl { margin: 0; padding: 6px 16px 14px; display: grid; }
.keybox dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 10px; font-weight: 600; }
.keybox dd { margin: 0; font-weight: 600; color: var(--navy); }

/* Notice ticker */
.notice { background: #FFF6EA; border-bottom: 1px solid #F1D7B4; font-size: .9rem; }
.notice .wrap { display: flex; align-items: stretch; gap: 0; padding-block: 0; }
.notice b { background: var(--saffron); color: #1B2430; padding: 8px 14px; flex: none; }
.notice .track { overflow: hidden; flex: 1; min-width: 0; display: flex; align-items: center; }
.notice .track span { white-space: nowrap; padding-left: 14px; display: inline-block; animation: tick 32s linear infinite; }
@keyframes tick { from { transform: translateX(30%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .notice .track span { animation: none; white-space: normal; padding: 8px 14px; } }

/* Sections */
section { padding-block: 48px; }
section.alt { background: var(--panel); }
.sec-title { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.sec-title h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.sec-title::before { content: ""; width: 6px; height: 30px; background: linear-gradient(var(--saffron) 0 33%, #FFFFFF 33% 66%, var(--green) 66%); border: 1px solid var(--line); flex: none; }
.lead { color: var(--muted); max-width: 70ch; margin: -12px 0 24px; }

.two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.panel { background: var(--bg); border: 1px solid var(--line); }
.panel-h { background: var(--navy); color: #FFFFFF; font-weight: 600; padding: 10px 16px; font-size: .95rem; }
.panel-b { padding: 16px; display: grid; gap: 12px; }
.panel-b p { color: var(--ink); }
.bullets { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.news { list-style: none; margin: 0; padding: 0; }
.news li { padding: 10px 16px; border-bottom: 1px dashed var(--line); font-size: .92rem; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.news li:last-child { border-bottom: 0; }
.badge { font-size: .7rem; font-weight: 700; background: var(--green); color: #FFFFFF; padding: 2px 6px; border-radius: 2px; align-self: start; margin-top: 3px; }
.badge.s { background: var(--saffron); color: #1B2430; }

/* Hemicycle */
.house-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.chamber { width: 100%; height: auto; display: block; background: var(--bg); border: 1px solid var(--line); }
.chamber .seat { fill: #FFFFFF; stroke: var(--navy); stroke-width: 1.6; cursor: pointer; }
.chamber .seat:hover, .chamber .seat.on { fill: var(--saffron); stroke: #C46A12; }
.chamber .well { fill: var(--green); }
.chamber .well-label { fill: #FFFFFF; font: 600 13px var(--f-body); }
.seat-no { font-family: var(--f-head); font-size: 3rem; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--bg); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--navy); color: #FFFFFF; font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(even) td { background: #F8FAFC; }
td.num { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 700; width: 64px; }

/* Grids */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.field { background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 14px; display: grid; gap: 4px; }
.field h3 { font-size: 1.05rem; font-family: var(--f-body); }
.field p { color: var(--muted); font-size: .9rem; }
.criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.criteria div { background: var(--bg); border: 1px solid var(--line); padding: 14px; }
.criteria b { color: var(--navy); display: block; }
.criteria span { color: var(--muted); font-size: .9rem; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tiers .panel-b ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: .93rem; display: grid; gap: 4px; }

/* Venue */
.venue-art { width: 100%; height: auto; display: block; background: var(--navy); }

/* FAQ */
.faq { border: 1px solid var(--line); background: var(--bg); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; }
.faq details[open] summary { background: var(--panel); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 16px 14px; color: var(--muted); }

/* Nomination form */
form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form .full { grid-column: 1 / -1; }
label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--navy); }
label .req { color: #B42318; }
input, select, textarea { font: 400 1rem var(--f-body); color: var(--ink); background: #FFFFFF; border: 1px solid #A9B4C2; border-radius: 2px; padding: 9px 10px; width: 100%; }
textarea { min-height: 100px; resize: vertical; }
.form-msg { font-size: .9rem; color: var(--green); min-height: 1.4em; font-weight: 600; }
.form-msg.err { color: #B42318; }
.copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy code { font: 600 1rem var(--f-body); user-select: all; color: var(--navy); }
.copy button { font: 600 .75rem var(--f-body); background: var(--panel); border: 1px solid var(--line); color: var(--navy); padding: 3px 10px; cursor: pointer; border-radius: 2px; }

/* Footer */
footer { background: var(--navy); color: #DCE4EF; font-size: .88rem; }
footer .wrap { padding-block: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
footer h3 { color: #FFFFFF; font-family: var(--f-body); font-size: 1rem; margin-bottom: 8px; }
footer a { color: #DCE4EF; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.subfoot { background: #071E3B; color: #B8C4D4; font-size: .78rem; }
.subfoot .wrap { padding-block: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .banner .wrap, .two, .house-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  footer .wrap { grid-template-columns: 1fr; }
  .presence { text-align: left; }
  .logo { height: 40px; }
  form { grid-template-columns: 1fr; }
}