/* ==================================================
   ESMAC 2026 — KIIT theme
   Load this file LAST on every page (after style.css,
   committee.css and info-pages.css). It only overrides
   colours, fonts and a few sizes; layout is unchanged.

   To tweak the look, edit the variables in :root below.
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* ---- KIIT brand palette ----
       green  #17D059 (brand)   gold  #A47E3C (brand)
       deeper greens are used for text / buttons so they stay readable on white */
    --kiit-green: #17d059;
    --kiit-green-mid: #0c8a3e;
    --kiit-green-deep: #0a5c2e;
    --kiit-green-ink: #06301a;
    --kiit-gold: #a47e3c;

    /* re-map the variables the existing CSS already uses */
    --red: var(--kiit-gold);
    --blue: var(--kiit-green-deep);
    --blue-2: #0f8a3f;
    --green: var(--kiit-green-mid);
    --green-2: #17c059;
    --navy: var(--kiit-green-ink);
    --navy-deep: #031f11;

    --white: #ffffff;
    --soft: #f2f8f4;
    --line: #dce7df;
    --text: #1b2620;
    --muted: #55635a;

    --grad-blue: linear-gradient(135deg, #0a5c2e, #0f8a3f 60%, #17b350);
    --grad-green: linear-gradient(135deg, #0c8a3e, #17c059);
    --grad-brand: linear-gradient(90deg, #a47e3c, #0a5c2e 50%, #17d059);

    --shadow-sm: 0 8px 22px rgba(6, 48, 26, 0.07);
    --shadow-md: 0 16px 38px rgba(6, 48, 26, 0.13);

    /* one clean sans-serif family everywhere */
    --serif: 'Poppins', Arial, Helvetica, sans-serif;
    --display: 'Poppins', Arial, Helvetica, sans-serif;
    --sans: 'Poppins', Arial, Helvetica, sans-serif;
}

body { color: var(--text); }

/* ==================================================
   BACKGROUNDS THAT WERE HARD-CODED BLUE
================================================== */

.section.alt { background: linear-gradient(180deg, #f6faf7 0%, #e9f3ec 100%); }

.hero-title {
    /* white veil on top of the photo keeps the title readable.
       0 = photo fully visible, 1 = photo hidden. Change this one number to taste. */
    --hero-veil: 0;

    background:
        linear-gradient(rgba(255, 255, 255, var(--hero-veil)), rgba(255, 255, 255, var(--hero-veil))),
        url("images/chemistry.png") center / cover no-repeat,
        #ffffff;
}

.logo-board { background: linear-gradient(180deg, #ffffff 0%, #eaf4ed 100%); }

.about-image {
    background:
        radial-gradient(circle, rgba(10, 92, 46, 0.07) 1px, transparent 1.4px) 0 0 / 16px 16px,
        var(--soft);
}

.dates-bar { box-shadow: 0 22px 50px rgba(6, 48, 26, 0.16); }

.nav-links > li > a,
.dropdown a { color: #2b352e; }

.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-links > li > a.current,
.dropdown a:hover,
.dropdown a.current { color: var(--kiit-green-mid); }

/* ==================================================
   HERO TITLE — colours + type
================================================== */

.t-red {
    font-weight: 700;
    font-size: clamp(17px, 2.2vw, 27px);
    color: #3562AF;
    text-shadow: none;
}

.t-on {
    font-style: normal;
    font-weight: 500;
    font-size: clamp(13px, 1.5vw, 17px);
    color: var(--muted);
}

.t-blue {
    font-weight: 700;
    font-size: clamp(26px, 3.8vw, 54px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #0a5c2e 0%, #0f8a3f 60%, #17a84f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.t-green {
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 50px);
    line-height: 1.2;
    background: linear-gradient(90deg, #0b7a38, #12a150);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.t-and { font-size: 26px; }

.t-collab { font-weight: 700; }

/* ==================================================
   BUTTONS
================================================== */

.btn { font-weight: 600; letter-spacing: 0.01em; }

.btn-blue { box-shadow: 0 10px 22px rgba(10, 92, 46, 0.28); }
.btn-blue:hover { box-shadow: 0 14px 28px rgba(10, 92, 46, 0.36); }

.btn-green { box-shadow: 0 10px 22px rgba(12, 138, 62, 0.28); }
.btn-green:hover { box-shadow: 0 14px 28px rgba(12, 138, 62, 0.36); }

/* ==================================================
   HEADINGS — Poppins is wider than the old serif,
   so sizes are trimmed a little
================================================== */

.section-heading h2 {
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.02em;
}

.overview-content .large-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.55;
}

.overview-card { background: linear-gradient(145deg, #031f11, #06301a 55%, #0a5c2e); }
.overview-card h3 { font-size: 28px; font-weight: 700; }
.overview-card p { color: #cfe8d8; }

.about-card h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 600; }
.topic-card h3 { font-size: 17px; font-weight: 600; }
.info-head h3 { font-size: 24px; font-weight: 600; }
.dates-bar-label h3 { font-size: 20px; font-weight: 600; }
.dates-bar-list li strong { font-weight: 600; }

/* ==================================================
   FOOTER — deep KIIT green
================================================== */

.footer { background: linear-gradient(135deg, #031f11, #06301a 60%, #0a5c2e); }
.footer-brand p { color: #b9d3c2; }
.footer-links a { color: #cfe3d6; }
.footer-links a:hover { color: #7ff0a8; }
.footer-bottom { color: #9fbfae; }

/* ==================================================
   INNER PAGES (committee / publication / speakers /
   registration / sponsorship / places)
================================================== */

.page-banner::after {
    background: linear-gradient(180deg, rgba(3, 31, 17, 0.10) 0%, rgba(3, 31, 17, 0.80) 100%);
}

.page-banner-text h1 { font-size: clamp(20px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; }

.person-card h3 { font-size: 20px; font-weight: 600; }
.member h3 { font-size: 17px; font-weight: 600; }
.lead-text { font-size: 20px; font-weight: 600; }
.panel-title { font-size: 24px; font-weight: 600; }
.fee-row .who { font-size: 19px; font-weight: 600; }
.tier h3 { font-size: 22px; font-weight: 600; }
.tier-price { font-size: 25px; font-weight: 600; }
.reach-card h3 { font-size: 22px; font-weight: 600; }
.place strong { font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }

.hex-inner {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='16' fill='%23b7cdbe'/%3E%3Cpath d='M18 92c2-22 16-32 32-32s30 10 32 32z' fill='%23b7cdbe'/%3E%3C/svg%3E")
        center / 78% no-repeat,
        var(--soft);
}

.tier-platinum { --tier-bar: linear-gradient(90deg, #4b5d55, #a4b5ab); --tier-ink: #35443d; }

@media (max-width: 560px) {
    .lead-text { font-size: 17px; }
}

/* ==================================================
   INDEX TWEAKS
================================================== */

/* 1) no gap between the sliding logos and the Important Dates bar */
.logo-board {
    padding-bottom: 0;
    border-bottom: none;
}

.logo-row-bottom { padding-bottom: 15px; }

.dates-bar { margin-top: 0; }

/* 2) KIIT and IMMT images in "About": full width, whole image, no empty space */
.about-pair .about-image {
    height: auto;
    padding: 0;
    overflow: hidden;
    background: none;
}

.about-pair .about-image img {
    display: block;
    width: 100%;
    height: 183px;
    max-width: none;
    max-height: none;
}

/* CRSI logo is a PNG -> plain white behind it */
.about-center .about-image {
    background: #fff;
    border: 1px solid var(--line);
}

/* ==================================================
   INDEX: spacing + section backgrounds + wide map
================================================== */

/* Important Dates bar: same space above (slider) and below (Overview) */
.dates-section {
    padding: 44px 0;
    background: #edf5ef;
}

/* every section gets its own soft background so the sections are easy to tell apart */
#overview { background: #ffffff; }
#about    { background: #e6f1e9; }
#topics   { background: #fbf7ea; }
#contact  { background: #e8f0f8; }

/* map as wide as the Contact / Accommodation / Registration cards above it */
.map-wrap {
    max-width: none;
    margin: 36px 0 0;
}

.map-wrap iframe { height: 340px; }

@media (max-width: 560px) {
    .map-wrap iframe { height: 240px; }
}

/* ==================================================
   FOOTER (all pages): Contact + Registration button on the right
================================================== */

.footer-right {
    display: flex;
    align-items: center;
    gap: 36px;
}

.footer-contact h4 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.footer-contact h4::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 8px 0 12px;
    border-radius: 3px;
    background: var(--kiit-gold);
}

.fc-name {
    font-size: 15px;
    font-weight: 500;
    color: #e8f3ec;
}

.fc-mail {
    display: inline-block;
    margin-top: 2px;
    font-size: 14.5px;
    color: #7ff0a8;
    word-break: break-all;
    transition: color 0.2s;
}

.fc-mail:hover { color: #fff; }

.footer-reg { white-space: nowrap; }

@media (max-width: 560px) {
    .footer-right { flex-wrap: wrap; gap: 22px; }
}

/* ==================================================
   NEW: additions for the updated conference data
================================================== */

/* hero: Date + Venue chips under "Celebrates 100 years..." */
.hero-title > :nth-child(13) { animation-delay: 1s; }

.t-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 26px;
    padding: 14px 30px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.meta-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--grad-green);
    border-radius: 10px;
}

.meta-icon-venue { border-radius: 50%; }

.meta-icon svg { width: 19px; height: 19px; }

.meta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.32;
}

.meta-text b {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--navy);
}

.meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.meta-divider {
    width: 1px;
    height: 34px;
    background: var(--line);
}

/* navbar: 2 partner logos on the right + a slightly smaller menu */
.nav-logos {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.nav-logos img {
    height: 39px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

.nav-links { gap: 16px; }
.nav-links > li > a { font-size: 13.5px; }

@media (max-width: 900px) {
    .nav-logos { display: none; }
}

/* footer: second contact person */
.fc-second { margin-top: 12px; }

/* registration page: Register Now + Abstract Submission buttons */
.reg-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

@media (max-width: 560px) {
    .reg-actions { flex-direction: column; }
    .meta-value { white-space: normal; }
    .meta-divider { display: none; }
    .t-meta { gap: 16px 22px; padding: 14px 20px; }
}