/* =============================================================
   ICIDAC WEBSITE - MAIN STYLESHEET
   This file controls the colours, spacing, layout, responsive
   design, watermark, and animations of the full website.
   ============================================================= */

/* Import the fonts used in the design. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');
/* -------------------------------------------------------------
   1. COLOUR VARIABLES
   These variables make it easy to change the complete colour
   theme from one central place.
   ------------------------------------------------------------- */
:root {
    --ink: #11233f;
    --blue: #075da8;
    --blue-dark: #06284f;
    --gold: #f1be56;
    --mist: #f4f8fc;
    --line: #dce6f0;
    --white: #ffffff;
}

/* -------------------------------------------------------------
   2. BASIC RESET AND DEFAULT TEXT STYLES
   ------------------------------------------------------------- */
.brochure-panel { display:grid; grid-template-columns:minmax(220px,.75fr) 1fr; gap:28px; max-width:940px; margin:34px 0; padding:24px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 12px 30px rgba(8,43,80,.08); }
.brochure-preview { display:flex; min-height:220px; flex-direction:column; justify-content:center; align-items:center; padding:24px; border:2px dashed #9ccbf4; border-radius:10px; color:var(--blue-dark); background:#f4f8fc; text-align:center; }
.brochure-preview span { color:var(--blue); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.brochure-preview strong { margin:8px 0; font-family:"Playfair Display",Georgia,serif; font-size:1.35rem; }
.brochure-preview p { margin:0; color:#58718d; font-size:.86rem; }
.brochure-copy h3 { margin-top:0!important; }.brochure-copy .cta { margin-top:8px; }
@media (max-width:650px) { .brochure-panel { grid-template-columns:1fr; gap:20px; } }

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    margin: 0;
    background: var(--mist);
    color: var(--ink);
    font-family: 'DM Sans', Arial, sans-serif;
    line-height: 1.65;
}

/* The college logo sits on its own fixed layer. It stays in place while the
   page content scrolls above it. */
   
.site-header,
.announcement,
.app-shell,
.site-footer {
    position: relative;
    z-index: 1;
}

/* =============================================================
   CONFERENCE HEADER
   ============================================================= */

.site-header {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--white);
}

/* ======================================================
   NEW HEADER
======================================================*/

.top-bar{
    background:#075DA8;
    color:#fff;
    text-align:center;
    padding:10px 20px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;
}

.main-header{
    display:grid;
    grid-template-columns:300px 1fr 240px;
    align-items:center;

    padding:18px 35px;

    background:
        radial-gradient(circle at 87% 18%, rgba(93,193,255,.24), transparent 22%),
        radial-gradient(circle at 15% 90%, rgba(34,134,217,.32), transparent 30%),
        linear-gradient(125deg,#041b38,#075da8);

    border-bottom:4px solid var(--gold);
}

.header-left,
.header-right{
    display:flex;
    align-items:center;
}

.header-left{
    justify-content:flex-start;
}

.header-right{
    justify-content:flex-end;
}

.nnrg-logo{
    width:320px;
    max-width:100%;
    height:auto;
}

.icidac-logo{
    width:200px;
    height:auto;
}

.header-center {
  text-align: center;
}

.top-nnrg-logo {
  display: block;
  width: 330px;   /* adjust if you want it larger/smaller */
  max-width: 85%;
  height: auto;
  margin: 0 auto 18px;
}

.header-center h1{
    margin:0;
    color:white;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    font-family:"DM Sans",sans-serif;
}

.header-center h2{
    margin:10px 0;
    color:white;
    font-family:"Playfair Display",serif;
    font-size:34px;
    line-height:1.18;
    font-weight:700;
}

.header-center h3{
    margin:8px 0;
    color:#f1be56;
    font-family:"Playfair Display",serif;
    font-size:24px;
}

.conference-date{
    margin-top:10px;
    color:#dfefff;
    font-size:20px;
    font-weight:600;
}

/* Decorative Gold Line */

.conference-date::before{
    content:"";
    display:block;
    width:240px;
    height:2px;
    background:#f1be56;
    margin:0 auto 18px;
}

/* =============================================================
   ICDAC 2027 - MOVING ANNOUNCEMENT TICKER
   ============================================================= */

.announcement-bar {
    width: 100% !important;
    height: 44px !important;

    background: #fff200 !important;

    border-top: 2px solid #d8b400 !important;
    border-bottom: 2px solid #12395f !important;

    overflow: hidden !important;

    position: relative !important;

    display: block !important;

    white-space: nowrap !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Moving container */

.announcement-track {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    height: 100% !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    width: max-content !important;
    max-width: none !important;

    white-space: nowrap !important;

    animation: icdac-announcement-scroll 32s linear infinite !important;
}


/* Each repeated message */

.announcement-content {
    flex: 0 0 auto !important;

    display: flex !important;

    align-items: center !important;

    width: max-content !important;
    max-width: none !important;

    height: 44px !important;

    white-space: nowrap !important;

    padding-right: 80px !important;

    color: #12395f !important;

    font-family: Arial, sans-serif !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 44px !important;
}


/* Main announcement */

.announcement-content .breaking {
    color: #12395f !important;

    font-weight: 800 !important;

    letter-spacing: 0.3px;
}


/* Diamond separators */

.announcement-content .separator {
    color: #c79500 !important;

    font-weight: 900 !important;

    margin: 0 16px !important;
}


/* SCROLL */

@keyframes icdac-announcement-scroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* Pause on mouse */

.announcement-bar:hover .announcement-track {
    animation-play-state: paused !important;
}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 650px) {

    .announcement-bar {
        height: 40px !important;
    }

    .announcement-content {
        height: 40px !important;

        font-size: 13px !important;

        line-height: 40px !important;

        padding-right: 50px !important;
    }

    .announcement-content .separator {
        margin: 0 9px !important;
    }

    .announcement-track {
        animation-duration: 24s !important;
    }

}
/* -------------------------------------------------------------
   5. MAIN LAYOUT AND SIDEBAR NAVIGATION
   Grid creates a fixed-width sidebar and a flexible content area.
   ------------------------------------------------------------- */
.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    max-width: 1440px;
    min-height: 680px;
    margin: 0 auto;
}

.sidebar {
    padding: 30px 14px;
    background: var(--blue-dark);
}

.nav-label {
    margin: 0 14px 12px;
    color: #9ccbf4;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.sidebar li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.nav-link {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-left: 3px solid transparent;
    color: #e9f5ff;
    text-decoration: none;
    transition: 0.2s ease;
}

.nav-link span {
    color: #85c9ff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* hover = mouse is over the link; active = currently open page */
.nav-link:hover,
.nav-link.active {
    border-left-color: var(--gold);
    background: rgba(77, 163, 237, 0.2);
    color: var(--white);
}

.nav-link.active span {
    color: var(--gold);
}

/* This button is hidden on desktop and visible only on mobile. */
.menu-toggle {
    display: none;
}

/* -------------------------------------------------------------
   6. DYNAMIC CONTENT AREA AND LOGO WATERMARK
   The ::before pseudo-element displays the watermark behind the
   text. It has low opacity so content remains readable.
   ------------------------------------------------------------- */
#content {
    position: relative;
    z-index: 1;
    min-height: 680px;
    padding: clamp(28px, 5vw, 70px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.20);
}

#content::before {
    display: none;
}

.loading {
    color: #52718f;
    font-weight: 600;
}

/* Common headings, paragraphs, lists, and table styles. */
#content h2 {
    margin: 0 0 20px;
    color: var(--blue-dark);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

/* Small gold line below each main page heading. */
#content h2::after {
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 15px;
    border-radius: 5px;
    background: var(--gold);
    content: '';
}

#content h3 {
    margin: 32px 0 10px;
    color: var(--blue);
    font-size: 1.18rem;
}

#content h4 {
    margin: 25px 0 8px;
    color: var(--blue-dark);
    font-size: 1.03rem;
}

#content p {
    max-width: 900px;
    margin: 0 0 15px;
}

#content ul,
#content ol {
    max-width: 850px;
    margin: 12px 0;
    padding-left: 22px;
}

#content li {
    margin: 7px 0;
}

.committee-list,
.speaker-list,
.process-list,
.topic-grid,
.date-list {
    display: grid;
    gap: 14px;
    max-width: 960px;
    margin: 22px 0;
}

.committee-item,
.speaker-item,
.process-item,
.topic-item,
.date-item {
    padding: 18px;
    border-left: 4px solid var(--gold);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 23px rgba(8, 43, 80, 0.06);
}

.committee-item h3,
.process-item h4,
.topic-item h4 {
    margin-top: 0;
}

.committee-item p,
.process-item p,
.topic-item p {
    margin-bottom: 0 !important;
}

.speaker-item,
.date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.speaker-item b,
.date-item b {
    color: var(--blue-dark);
}

.speaker-item span,
.date-item span {
    color: #56718d;
    font-size: 0.88rem;
    font-weight: 700;
}

.topic-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* -------------------------------------------------------------
   7. HOME PAGE COMPONENTS
   ------------------------------------------------------------- */
.home-hero {
    max-width: 940px;
    margin: 35px auto 36px;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 17px 45px rgba(16, 50, 84, 0.09);
}
.home-hero .kicker {
    margin: 0 0 9px !important;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.home-hero h2 {
    margin-bottom: 18px !important;
    font-size: clamp(2.25rem, 5vw, 4rem) !important;
}

/* Remove the gold line only from the home-page hero title. */
.home-hero h2::after {
    display: none !important;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.cta {
    display: inline-block;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}

.cta.primary {
    background: var(--blue);
    color: var(--white);
}

.cta.secondary {
    border: 1px solid var(--blue);
    background: var(--white);
    color: var(--blue);
}

.cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(6, 40, 79, 0.18);
}

.section-intro {
    color: #4c6682;
}

/* auto-fit lets the number of cards change with screen width. */
.track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
        width: 100%;
    max-width: 1000px;
    margin: 20px 0 34px;
}
.track-card span {
  display: block;
    width: 100%;
  margin-top: 14px;
  line-height: 1.75;
}

.track-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 23px rgba(8, 43, 80, 0.06);
    overflow: hidden;
}

.track-card b {
    display: block;
    color: var(--blue-dark);
    font-size: 1.03rem;
}

.track-card span {
    flex: 1;
    color: #56718d;
    font-size: 0.86rem;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left;
}

.track-grid.conference-track-grid {
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    max-width: 1220px;
    gap: 16px;
}

.conference-track-grid .track-card {
    border-top: 3px solid var(--blue);
    background: var(--white);
}

.conference-track-grid .track-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.conference-track-grid .track-heading .track-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    margin-top: 0;
    border: 1px solid #d8e8f5;
    border-radius: 12px;
    background: #e8f4ff;
    color: var(--blue);
    line-height: 1;
}

.conference-track-grid .track-heading .track-icon svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.conference-track-grid .track-heading b {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.3;
}

.conference-track-grid .track-topics {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.conference-track-grid .track-topics li {
    position: relative;
    padding-left: 17px;
    color: #56718d;
    font-size: 0.86rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.conference-track-grid .track-topics li::before {
    position: absolute;
    top: 0.48em;
    left: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px #fff4d5;
    content: "";
}

@media (max-width: 900px) {
    .track-grid.conference-track-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .track-grid.conference-track-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    .conference-track-grid .track-card {
        min-width: 0;
        padding: 16px;
    }

    .conference-track-grid .track-heading {
        gap: 10px;
        min-height: 0;
        margin-bottom: 11px;
        padding-bottom: 11px;
    }

    .conference-track-grid .track-heading .track-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .conference-track-grid .track-heading .track-icon svg {
        width: 23px;
        height: 23px;
    }

    .conference-track-grid .track-heading b {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .conference-track-grid .track-topics {
        gap: 9px;
    }

    .conference-track-grid .track-topics li {
        padding-left: 16px;
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

@media (max-width: 380px) {
    .conference-track-grid .track-card {
        padding: 14px;
    }

    .conference-track-grid .track-heading {
        gap: 9px;
    }
}

@media (hover: none) {
    .conference-track-grid .track-card:hover {
        transform: none;
    }
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
}

.highlight {
    padding: 17px;
    border-left: 4px solid var(--gold);
    background: #fffaf0;
}

.highlight b {
    display: block;
    color: var(--blue-dark);
}

.highlight span {
    color: #56718d;
    font-size: 0.86rem;
}

/* -------------------------------------------------------------
   8. FOOTER AND BACK-TO-TOP BUTTON
   ------------------------------------------------------------- */
.site-footer {
    padding: 28px 20px;
    background: #041b38;
    color: #c5dcf2;
    font-size: 0.88rem;
    text-align: center;
}

.site-footer p {
    margin: 3px;
}

.site-footer strong {
    color: var(--white);
}

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: var(--blue-dark);
    box-shadow: 0 9px 23px rgba(4, 27, 56, 0.25);
    cursor: pointer;
    font-size: 1.45rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: 0.2s ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.back-to-top:hover {
    background: #ffe0a0;
    transform: translateY(-3px);
}

/* -------------------------------------------------------------
   9. ANIMATIONS
   ------------------------------------------------------------- */
.announcement span {
    animation: notice-pulse 2.4s ease-in-out infinite;
}

.track-card,
.highlight {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.track-card:hover,
.highlight:hover {
    border-color: #9bd0fa;
    box-shadow: 0 16px 28px rgba(8, 43, 80, 0.14);
    transform: translateY(-5px);
}

.home-hero {
    animation: home-rise 0.55s ease both;
}

.home-hero .kicker {
    animation: fade-slide 0.55s 0.07s ease both;
}

.home-hero h2 {
    animation: fade-slide 0.6s 0.12s ease both;
}

.home-hero > p:not(.kicker),
.cta-row {
    animation: fade-slide 0.6s 0.18s ease both;
}

.page-enter {
    animation: page-enter 0.38s ease;
}

@keyframes notice-pulse {
    50% {
        box-shadow: 0 0 0 6px rgba(241, 190, 86, 0.18);
    }
}

@keyframes home-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-slide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes page-enter {
    from {
        opacity: 0.1;
        transform: translateY(13px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------
   10. MOBILE RESPONSIVE DESIGN
   This media query applies when screen width is 800px or less.
   ------------------------------------------------------------- */
/* Compact desktop header */
.main-header {
  display: block;
  padding: 16px 5% 24px;
  background:
    radial-gradient(circle at 87% 18%, rgba(93, 193, 255, 0.24), transparent 22%),
    radial-gradient(circle at 15% 90%, rgba(34, 134, 217, 0.32), transparent 30%),
    linear-gradient(125deg, #041b38, #075da8);
  border-bottom: 4px solid var(--gold);
}

.header-logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-bottom: 8px;
}
.header-logo-row .nnrg-logo {
  width: 760px;
  max-width: 78%;
  height: auto;
}

.header-logo-row .top-icidac-logo {
  width: 105px;
  height: 105px;
  max-width: none;
  object-fit: contain;
  flex: 0 0 105px;
}

.header-center {
  width: 100%;
  text-align: center;
}

.header-center h1 {
  margin: 0 0 8px;
  color: white;
  font-size: 26px;
  white-space: nowrap;
}

.header-center h2 {
  margin: 0 0 8px;
  line-height: 1.1;
}

.header-center h3 {
  margin: 6px 0;
}

.conference-date {
  margin: 8px 0 0;
}

.conference-date::before {
  width: 180px;
  margin: 0 auto 10px;
}

/* Mobile layout */
@media (max-width: 800px) {
  .header-logo-row .nnrg-logo {
    width: 280px;
  }

  .header-logo-row .top-icidac-logo {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
  }

  .header-center h1 {
    white-space: normal;
    font-size: 19px;
  }
}
/* Extra-compact header */
.main-header {
  padding: 10px 4% 14px;
}

.header-logo-row {
  gap: 14px;
  margin-bottom: 4px;
}

.header-logo-row .nnrg-logo {
  width: 420px;
}

.header-logo-row .top-icidac-logo {
  width: 82px;
  height: 82px;
  flex-basis: 82px;
}

.header-center h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.header-center h2 {
  margin: 0 0 4px;
  font-size: 36px;
  line-height: 1.05;
}

.header-center h3 {
  margin: 3px 0;
  font-size: 22px;
}

.conference-date {
  margin: 4px 0 0;
  font-size: 17px;
}

.conference-date::before {
  width: 150px;
  margin: 0 auto 6px;
}
.header-logo-row {
  margin-bottom: -22px !important;
}

.dates-intro {
  max-width: 760px;
  margin-bottom: 32px !important;
  color: #4c6682;
}

.conference-timeline {
  position: relative;
  max-width: 920px;
  margin: 0 0 38px;
  padding-left: 30px;
}

.conference-timeline::before {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 51px;
  width: 2px;
  background: linear-gradient(var(--gold), #dce6f0);
  content: "";
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 44px 92px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 4px solid var(--mist);
  border-radius: 50%;
  background: var(--blue-dark);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}

.timeline-date {
  padding: 10px 8px;
  border-radius: 10px;
  background: #fff8e9;
  color: var(--blue-dark);
  text-align: center;
}

.timeline-date span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.timeline-date strong {
  display: block;
  color: #075da8;
  font-size: 29px;
  line-height: 1;
}

.timeline-content {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 25px rgba(8, 43, 80, 0.07);
}

.timeline-content p:last-child {
  margin: 0 !important;
  color: #58718d;
  font-size: 15px;
}

.timeline-label {
  margin: 0 0 4px !important;
  color: var(--blue-dark);
  font-size: 19px;
  font-weight: 700;
}

.conference-date-highlight {
  max-width: 920px;
  padding: 30px;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  background: linear-gradient(120deg, #041b38, #075da8);
  color: white;
  text-align: center;
  box-shadow: 0 14px 30px rgba(8, 43, 80, 0.18);
}

.conference-date-highlight p {
  margin: 0 0 6px !important;
  color: #dfefff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.conference-date-highlight h3 {
  margin: 0 0 7px !important;
  color: var(--gold) !important;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px !important;
}

.conference-date-highlight span {
  color: #dfefff;
}

@media (max-width: 700px) {
  .conference-timeline {
    padding-left: 0;
  }

  .conference-timeline::before {
    left: 21px;
  }

  .timeline-entry {
    grid-template-columns: 44px 1fr;
  }

  .timeline-date {
    grid-column: 2;
    width: 90px;
  }

  .timeline-content {
    grid-column: 2;
  }
}

/* Single-page layout overrides: original content styling above is preserved. */
html { scroll-behavior: smooth; scroll-padding-top: 0; }
.site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 5px 20px rgba(4, 27, 56, 0.24); }
/* =========================================================
   ICDAC 2027 - HEADER FINAL DESIGN
   ========================================================= */

/* BLUE HEADER - FULL WIDTH */
.site-header {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    background: linear-gradient(
        110deg,
        #062d55 0%,
        #0b467c 50%,
        #1265a5 100%
    );

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    overflow: hidden;
}



/* =========================================================
   HEADER IDENTITY AREA
   ========================================================= */

.identity {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;

    /* Left space | Heading | Right space */
    grid-template-columns: 1fr minmax(600px, 850px) 1fr;

    grid-template-rows: auto auto;

    align-items: center;

    padding: 25px 40px 30px;

    box-sizing: border-box;
}


/* =========================================================
   NNRG LOGO - LARGE AND CENTERED AT TOP
   ========================================================= */

.identity .nnrg-logo {
    grid-column: 1 / 4;
    grid-row: 1;

    justify-self: center;

    /* MUCH LARGER THAN BEFORE */
    width: 430px;
    max-width: 70vw;
    height: auto;

    display: block;

    margin: 0 auto 22px;

    object-fit: contain;
}


/* =========================================================
   CONFERENCE TITLE
   ========================================================= */

.identity .conference-title {
    grid-column: 2;
    grid-row: 2;

    width: 100%;

    text-align: center;

    margin: 0;

    color: white;
}


/* SMALL TITLE */
.identity .conference-title p {
    margin: 0 0 10px;

    font-size: 20px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #f6c343;
    text-transform: none;
}


/* MAIN CONFERENCE NAME */
.identity .conference-title h1 {
    margin: 0;

    font-size: 42px;
    line-height: 1.12;

    font-weight: 700;

    color: white;
}


/* ICDAC 2027 */
.identity .conference-title strong {
    display: block;

    margin-top: 12px;

    font-size: 25px;

    color: #f6c343;
}


/* DATE */
.identity .conference-title span {
    display: block;

    margin-top: 10px;

    font-size: 20px;

    font-weight: 600;

    color: white;
}


/* =========================================================
   ICIDAC LOGO - BESIDE THE HEADING
   ========================================================= */

.identity .conference-logo {
    grid-column: 3;
    grid-row: 2;

    justify-self: start;
    align-self: center;

    position: static;

    transform: none;

    width: 145px;
    height: 145px;

    margin-left: 15px;

    object-fit: contain;

    display: block;
}


/* =========================================================
   GOLD LINE UNDER BLUE HEADER
   ========================================================= */

.site-header::after {
    content: "";

    display: block;

    width: 100%;
    height: 4px;

    background: #f2bd32;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-row {
    width: 100%;
    max-width: none;

    background: white;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .identity {
        grid-template-columns: 120px minmax(0, 1fr) 120px;

        padding: 22px 25px 28px;
    }

    .identity .nnrg-logo {
        width: 360px;
    }

    .identity .conference-title h1 {
        font-size: 36px;
    }

    .identity .conference-logo {
        width: 115px;
        height: 115px;
        margin-left: 10px;
    }
}


/* =========================================================
   MOBILE / SMALL SCREEN
   ========================================================= */

@media (max-width: 750px) {

    .identity {
        display: flex;

        flex-direction: column;

        padding: 18px 15px 25px;
    }


    /* NNRG */
    .identity .nnrg-logo {
    grid-column: 1 / 4;
    grid-row: 1;

    justify-self: center;

    width: 750px;
    max-width: 90vw;
    height: auto;

    display: block;

    margin: 0 auto 22px;

    object-fit: contain;
}

    /* Heading */
    .identity .conference-title {
        width: 100%;
    }


    .identity .conference-title p {
        font-size: 14px;

        letter-spacing: 1px;
    }


    .identity .conference-title h1 {
        font-size: 28px;

        line-height: 1.15;
    }


    .identity .conference-title strong {
        font-size: 20px;
    }


    .identity .conference-title span {
        font-size: 15px;
    }


    /* ICIDAC goes underneath heading on mobile */
    .identity .conference-logo {
        width: 95px;
        height: 95px;

        margin: 15px auto 0;
    }
}

.conference-title p { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.conference-title h1 {
    margin: 4px 0;
    color: #fff;
    font: 700 clamp(1.5rem, 2.5vw, 2.25rem)/1.12 "Playfair Display", serif;
}
.conference-title strong { display: block; color: var(--gold); font: 700 1.13rem "Playfair Display", serif; }
.conference-title span { display: block; margin-top: 2px; color: #dfefff; font-weight: 600; font-size: .9rem; }
.nav-row {
    position: relative;
    background: #fff;
    box-shadow: 0 3px 10px rgba(4, 27, 56, 0.08);
}

.nav-row nav {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1440px;
    min-height: 58px;
    margin: 0 auto;
    padding: 0 15px;
}

.nav-link {
    display: block;
    padding: 17px 14px 14px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    color: var(--blue-dark);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s ease;
}
.nav-link span { display: none; }
.nav-link:hover, .nav-link.active { border-left-color: transparent; border-bottom-color: var(--gold); background: transparent; color: var(--blue); }
.menu-toggle { display: none; }
.app-shell { display: block; min-height: 0; max-width: none; margin: 0; }
.sidebar, #content, .loading { display: none; }
.page-section {
    width: min(1180px, 100%);
    min-height: 390px;
    margin: 0 auto;
    padding: 110px clamp(22px, 5vw, 62px) 70px;
    scroll-margin-top: 205px;
}
.page-section.alt { width: 100%; background: rgba(255,255,255,.78); box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line); }
.page-section.alt > * { max-width: 1056px; margin-left: auto; margin-right: auto; }
.page-section h2 { margin: 0 0 20px; color: var(--blue-dark); font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
.page-section h2::after { display: block; width: 56px; height: 4px; margin-top: 15px; border-radius: 5px; background: var(--gold); content: ""; }
.page-section h3 { margin: 32px 0 10px; color: var(--blue); font-size: 1.18rem; }
.page-section h4 { margin: 25px 0 8px; color: var(--blue-dark); font-size: 1.03rem; }
.page-section p { max-width: 900px; margin: 0 0 15px; }
.page-section ul, .page-section ol { max-width: 850px; margin: 12px 0; padding-left: 22px; }
.page-section li { margin: 7px 0; }
.page-section .home-hero { margin-bottom: 36px; }
.page-section .home-hero h2::after { display: none; }
.back-to-top { z-index: 110; }
@media (max-width: 860px) {
  html { scroll-padding-top: 80px; }
  .identity { grid-template-columns: 1fr auto; min-height: 78px; padding: 8px 18px; }
  .identity .nnrg-logo { max-height: 46px; }
  .conference-logo { width: 56px; height: 56px; }
  .conference-title { display: none; }
  .menu-toggle { display: block; width: 100%; padding: 11px 18px; border: 0; color: #fff; background: var(--blue); cursor: pointer; font: 700 .77rem "DM Sans", sans-serif; text-align: left; }
  .nav-row nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 80px); overflow: auto; background: #fff; box-shadow: 0 10px 22px rgba(4,27,56,.22); }
  .nav-row nav.open { display: block; }
  .nav-link { padding: 12px 18px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
  .nav-link.active { border-left-color: var(--gold); border-bottom-color: var(--line); }
  .page-section { padding: 48px 22px; scroll-margin-top: 80px; }
}

.committee-names {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    row-gap: 6px;
}

.committee-names div {
    line-height: 1.4;
}

/* =========================================================
   ORGANIZING COMMITTEE
   ========================================================= */

.committee-section {
    padding: 70px 6%;
    background: #f4f8fc;
}

/* Committee heading */

.committee-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.committee-heading h2 {
    margin: 0;
    color: #0b3b70;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}

.heading-line {
    width: 55px;
    height: 3px;
    background: #e8b73f;
    border-radius: 10px;
}

.committee-intro {
    text-align: center;
    color: #666;
    font-size: 16px;
    margin: 0 auto 35px;
}


/* Main two-column layout */

.committee-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1450px;
    margin: 0 auto;
}


/* Main cards */

.committee-card {
    background: #ffffff;
    border: 1px solid #d6e3f1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(20, 60, 100, 0.10);
}


/* Blue card headers */

.committee-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 24px;
    background: linear-gradient(135deg, #0b4f91, #0b3b70);
    color: #ffffff;
}

.committee-card-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
}

.committee-icon {
    font-size: 25px;
}


/* Left committee table */

.committee-table-header {
    display: grid;
    grid-template-columns: 34% 66%;
    background: #e8f2fc;
    color: #0b3b70;
    font-weight: 700;
    padding: 15px 20px;
}

.committee-row {
    display: grid;
    grid-template-columns: 34% 66%;
    padding: 17px 20px;
    border-bottom: 1px solid #e4ebf2;
    color: #183a5c;
    line-height: 1.6;
}

.committee-row:nth-child(odd) {
    background: #f8fbfe;
}

.committee-row:last-child {
    border-bottom: none;
}

.committee-position {
    color: #0b3b70;
    font-weight: 700;
    padding-right: 15px;
}


/* Technical / Publication committee groups */

.member-group {
    margin: 20px;
    border: 1px solid #cbddec;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.member-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    background: #e5f1fc;
    border-bottom: 1px solid #cbddec;
}

.member-group-title span {
    font-size: 20px;
}

.member-group-title h4 {
    margin: 0;
    color: #0b3b70;
    font-size: 18px;
}


/* Two columns for committee members */

.member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 0;
    padding: 12px 20px;
}

.member-grid div {
    padding: 6px 0;
    color: #183a5c;
    font-size: 15px;
    line-height: 1.4;
}


/* Vertical separator between two member columns */

.member-grid div:nth-child(odd) {
    border-right: 1px solid #d9e5ef;
    padding-right: 25px;
}

.member-grid div:nth-child(even) {
    padding-left: 5px;
}


/* Hover effect */

.member-grid div:hover {
    color: #0b5da7;
}


/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 1000px) {

    .committee-layout {
        grid-template-columns: 1fr;
    }

    .committee-heading h2 {
        font-size: 30px;
    }
}


@media (max-width: 650px) {

    .committee-section {
        padding: 45px 20px;
    }

    .committee-heading {
        gap: 10px;
    }

    .committee-heading h2 {
        font-size: 26px;
    }

    .heading-line {
        width: 30px;
    }

    .committee-table-header,
    .committee-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .committee-table-header div:nth-child(2) {
        display: none;
    }

    .committee-position {
        padding-right: 0;
    }

    .member-grid {
        grid-template-columns: 1fr;
    }

    .member-grid div:nth-child(odd) {
        border-right: none;
        padding-right: 0;
    }

    .member-grid div:nth-child(even) {
        padding-left: 0;
    }

    .member-group-title h4 {
        font-size: 16px;
    }
}

/* ================================
   NNRG WATERMARK
   ================================ */

body::before {
    content: "";
    position: fixed;

    /* Move watermark toward the bottom */
    left: 50%;
    bottom: 40px;

    /* Size */
    width: 650px;
    height: 180px;

    /* Logo */
    background-image: url("images/nnrg-logo-autonomous.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* Slightly darker / more visible */
    opacity: 0.14;

    /* Center horizontally */
    transform: translateX(-50%);

    /* Stay behind the website content */
    pointer-events: none;
    z-index: 0;
}

/* Keep all website content above the watermark */
header,
nav,
main,
section,
footer {
    position: relative;
    z-index: 1;
}

header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* =========================================
   NEW CONFERENCE HEADER LAYOUT
   ========================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* Main header container */
.identity {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 18px 30px 25px;
}

/* NNRG logo at TOP CENTER */
.identity .nnrg-logo {
    width: 190px;
    height: auto;

    margin-bottom: 10px;

    object-fit: contain;
}

/* Conference title */
.identity .conference-title {
    text-align: center;
    max-width: 850px;
}

/* Small heading */
.identity .conference-title p {
    margin: 0 0 8px;

    font-size: 18px;
    font-weight: 700;
}

/* Main conference heading */
.identity .conference-title h1 {
    margin: 0;

    font-size: 38px;
    line-height: 1.12;
    font-weight: 700;
}

/* ICDAC year */
.identity .conference-title strong {
    display: block;

    margin-top: 8px;

    font-size: 21px;
}

/* Date */
.identity .conference-title span {
    display: block;

    margin-top: 8px;

    font-size: 17px;
}


/* =========================================
   ICIDAC LOGO BESIDE THE HEADING
   ========================================= */

.identity .conference-logo {
    position: absolute;

    /* Put it beside the heading */
    right: 7%;

    top: 50%;

    transform: translateY(-25%);

    width: 125px;
    height: 125px;

    object-fit: contain;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1000px) {

    .identity .conference-logo {
        position: static;

        transform: none;

        margin-top: 12px;

        width: 100px;
        height: 100px;
    }

}


@media (max-width: 700px) {

    .identity {
        padding: 15px 15px 20px;
    }

    .identity .nnrg-logo {
        width: 150px;
    }

    .identity .conference-title h1 {
        font-size: 27px;
    }

    .identity .conference-title p {
        font-size: 14px;
    }

    .identity .conference-title strong {
        font-size: 18px;
    }

    .identity .conference-title span {
        font-size: 14px;
    }

    .identity .conference-logo {
        width: 85px;
        height: 85px;
    }

}

/* FORCE NNRG HEADER LOGO SIZE */
.site-header .identity img.nnrg-logo {
    width: 700px !important;
    max-width: 90vw !important;
    height: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;

    object-fit: contain !important;
}

:root {
    --header-height: 330px;
}

main {
    padding-top: var(--header-height);
}

/* Keep the header in the document flow so Home starts immediately beneath it. */
.site-header {
    position: sticky !important;
}

.announcement {
    display: none;
}

main {
    padding-top: 0;
}

/* Compact fixed header and accurate in-page navigation. */
.identity {
    padding: 12px 30px 15px;
}

.identity .conference-logo {
    width: 145px;
    height: 145px;
}

.nav-row nav {
    min-height: 44px;
}

.nav-link {
    padding-top: 9px;
    padding-bottom: 8px;
}

.identity .conference-title p {
    margin-bottom: 4px;
}

.identity .conference-title strong {
    margin-top: 4px;
}

.identity .conference-title span {
    margin-top: 3px;
}

.page-section {
    padding-top: 48px;
    scroll-margin-top: 0;
}

@media (max-width: 860px) {
    .page-section {
        padding-top: 38px;
    }
}

/* Desktop header: logos share the top row, followed by compact conference details. */
@media (min-width: 1100px) {
    .identity {
        display: grid;
        grid-template-columns: minmax(0, 780px) 100px;
        grid-template-rows: auto auto;
        width: min(942px, calc(100% - 48px));
        margin: 0 auto;
        justify-content: center;
        column-gap: 14px;
        row-gap: 6px;
        align-items: center;
        padding: 2px 24px 6px;
    }

    .site-header .identity img.nnrg-logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 780px !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none;
    }

    .identity .conference-logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        position: static;
        transform: none !important;
        width: 100px;
        height: 100px;
        margin: 0;
        z-index: 1;
    }

    .identity .conference-title {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .identity .conference-title p {
        margin: 0 0 2px;
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .identity .conference-title h1 {
        margin: 0;
        font-size: clamp(1.45rem, 2.45vw, 2.65rem);
        line-height: 1.1;
        white-space: nowrap;
        letter-spacing: 0;
    }

    .identity .conference-title strong {
        display: inline;
        margin: 0;
        font-size: 1rem;
    }

    .identity .conference-title span {
        display: inline;
        margin-left: 12px;
        font-size: 1.08rem;
    }
}

/* Keep the first content card close to the navigation bar. */
.page-section {
    padding-top: 20px;
}

/* Keep anchored section headings below the sticky desktop header. */
@media (min-width: 861px) {
    html {
        scroll-padding-top: var(--header-height);
    }

    .page-section {
        scroll-margin-top: var(--header-height);
    }
}

/* Keep the conference identity visible and let the mobile menu open below it. */
@media (max-width: 860px) {
    html,
    body {
        overflow-x: clip;
    }

    .site-header {
        overflow: visible;
    }

    .identity {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        min-height: 0;
        padding: 10px 14px 12px;
    }

    .site-header .identity img.nnrg-logo {
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
        max-width: none !important;
        max-height: 62px;
        margin: 0 !important;
        justify-self: start;
    }

    .identity .conference-title {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .identity .conference-title p {
        margin: 0 0 3px;
        font-size: .67rem;
        letter-spacing: .04em;
        line-height: 1.2;
    }

    .identity .conference-title h1 {
        margin: 0;
        font-size: clamp(1.05rem, 5.5vw, 1.55rem);
        line-height: 1.12;
        white-space: normal;
    }

    .identity .conference-title strong {
        display: inline;
        margin-top: 0;
        font-size: .82rem;
    }

    .identity .conference-title span {
        display: inline;
        margin: 0 0 0 5px;
        font-size: .72rem;
    }

    .identity .conference-logo {
        grid-column: 2;
        grid-row: 1;
        width: 72px;
        height: 72px;
        margin: 0;
        justify-self: end;
    }

    .nav-row {
        position: relative;
        z-index: 2;
    }

    .menu-toggle {
        display: block;
        width: 100%;
        padding: 10px 14px;
        border: 0;
        color: #fff;
        background: var(--blue);
        cursor: pointer;
        font: 700 .8rem "DM Sans", sans-serif;
        text-align: left;
    }

    .nav-row nav {
        position: static;
        max-height: none;
        box-shadow: none;
    }

    .track-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .track-card {
        text-align: left;
    }

    .highlight-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 12px;
        margin-bottom: 24px;
    }

    .highlight {
        padding: 14px;
    }

    .page-section {
        padding: 34px 18px;
        scroll-margin-top: 120px;
    }

    body::before {
        bottom: 28px;
        width: min(92vw, 650px);
        height: 120px;
    }
}

/* Separate the participation cards from the paper-format details. */
.page-section .highlight-grid + p {
    margin-top: 24px;
}

/* =========================================================
   ADVISORY COMMITTEE
   ========================================================= */

.advisory-committee {
    width: 100%;
    margin: 36px auto 0;
    background: #ffffff;
    border: 1px solid #d6e3f1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(20, 60, 100, 0.10);
}

.advisory-title {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 24px;
    background: #124477;
    border-bottom: 1px solid #124477;
    color: #ffffff;
}

.advisory-title h3 {
    margin: 0 !important;
   color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 700;
}

.advisory-icon {
    font-size: 24px;
}

.advisory-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 12px;
}

.advisory-table {
    width: 100%;
    border: 1px solid #d5e2ee;
    border-radius: 8px;
    overflow: hidden;
}

.advisory-header {
    display: grid;
    grid-template-columns: 55px 1.15fr 1.7fr 105px;
    background: #e8f3fc;
    color: #0b3b70;
    font-weight: 700;
    font-size: 14px;
}

.advisory-header div {
    padding: 12px 9px;
    border-right: 1px solid #d5e2ee;
}

.advisory-header div:last-child {
    border-right: none;
}

.advisory-row {
    display: grid;
    grid-template-columns: 55px 1.15fr 1.7fr 105px;
    min-height: 70px;
    align-items: center;
    color: #183a5c;
    font-size: 14px;
    border-bottom: 1px solid #e1eaf2;
}

.advisory-row:nth-child(odd) {
    background: #f8fbfe;
}

.advisory-row:last-child {
    border-bottom: none;
}

.advisory-row div {
    padding: 12px 9px;
    border-right: 1px solid #e1eaf2;
    line-height: 1.45;
}

.advisory-row div:last-child {
    border-right: none;
}

.advisory-row > div:first-child {
    text-align: center;
    font-weight: 700;
    color: #0b3b70;
}

.advisory-row .member-name {
    font-weight: 700;
    color: #0b3b70;
}

.advisory-row > div:nth-child(3) {
    line-height: 1.5;
}

@media (max-width: 1000px) {
    .advisory-columns {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADVISORY COMMITTEE - MOBILE FIX
   ========================================================= */

@media (max-width: 650px) {

    .advisory-committee {
        width: 100%;
        margin: 30px 0 0;
        border-radius: 12px;
    }

    .advisory-title {
        padding: 14px 16px;
    }

    .advisory-title h3 {
        font-size: 18px !important;
    }

    .advisory-columns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 8px;
    }

    .advisory-table {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    /* Header and rows must fit inside phone width */
    .advisory-header,
    .advisory-row {
        display: grid;
        grid-template-columns: 32px minmax(70px, 1fr) minmax(98px, 1.35fr) minmax(66px, 0.9fr);
        width: 100%;
        min-width: 0;
    }

    .advisory-header {
        font-size: 11px;
    }

    .advisory-header div:nth-child(2) {
        overflow-wrap: normal;
    }

    .advisory-row {
        font-size: 12px;
        min-height: 65px;
    }

    .advisory-header div,
    .advisory-row div {
        padding: 9px 5px;
        min-width: 0;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .advisory-row .member-name {
        font-size: 12px;
    }

}
@media (max-width: 650px) {

    .announcement-bar {
        height: 40px;
    }

    .announcement-track span {
        font-size: 13px;
        padding: 0 12px;
    }

    .announcement-track {
        animation-duration: 24s;
    }
}

/* ================================
   ICDAC ANNOUNCEMENT TICKER
   ================================ */

.announcement-bar {
    width: 100%;
    height: 44px;
    background: #fff200;
    border-top: 2px solid #e1b900;
    border-bottom: 2px solid #163b63;
    overflow: hidden !important;
    position: relative;
    display: block !important;
    white-space: nowrap !important;
}

.announcement-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    animation: icdacTicker 35s linear infinite;
}

.announcement-content {
    flex: 0 0 auto !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    padding-right: 40px;
    color: #12395f;
    font-size: 15px;
    font-weight: 600;
    line-height: 44px;
}

.announcement-content b {
    color: #c79500;
    padding: 0 14px;
}

/* Move continuously from right to left */
@keyframes icdacTicker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause when mouse is over ticker */
.announcement-bar:hover .announcement-track {
    animation-play-state: paused;
}


/* MOBILE */
@media (max-width: 650px) {

    .announcement-bar {
        height: 40px;
    }

    .announcement-content {
        font-size: 13px;
        line-height: 40px;
        padding-right: 25px;
    }

    .announcement-content b {
        padding: 0 8px;
    }

    .announcement-track {
        animation-duration: 25s;
    }
}

/* =========================================
   ADVISORY COMMITTEE - FINAL DESIGN
   ========================================= */

.advisory-committee {
    width: 100%;
    max-width: 1500px;
    margin: 35px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Heading */
.advisory-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.advisory-title h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 700;
    color: #123b78;
    text-align: center;
}

/* Table */
.advisory-table-wide {
    width: 100%;
    background: #fff;
    border: 1px solid #c8def5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(20, 70, 120, 0.08);
}

/* Header */
.advisory-table-wide .advisory-header {
    display: grid !important;
    grid-template-columns: 13% 43% 44% !important;
    width: 100%;
    background: #0869b5;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.advisory-table-wide .advisory-header > div {
    padding: 15px 18px;
    border-right: 1px solid rgba(255,255,255,0.35);
}

/* Rows */
.advisory-table-wide .advisory-row {
    display: grid !important;
    grid-template-columns: 13% 43% 44% !important;
    width: 100%;
    min-height: 70px;
    border-top: 1px solid #c8def5;
    color: #123b78;
}

/* Alternating row background */
.advisory-table-wide .advisory-row:nth-child(odd) {
    background: #e8f4ff;
}

.advisory-table-wide .advisory-row:nth-child(even) {
    background: #ffffff;
}

/* All cells */
.advisory-table-wide .advisory-row > div {
    padding: 14px 18px;
    border-right: 1px solid #c8def5;
    display: flex;
    align-items: center;
}

/* Serial number */
.advisory-table-wide .advisory-row > div:first-child {
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}

/* Name + designation */
.advisory-table-wide .member-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: left;
}

.advisory-table-wide .member-name {
    display: block !important;
    width: 100%;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #123b78 !important;
}

.advisory-table-wide .member-designation {
    display: block !important;
    width: 100%;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #123b78 !important;
}

/* Institution */
.advisory-table-wide .advisory-row > div:last-child {
    justify-content: flex-start;
    text-align: left;
    font-size: 17px;
    color: #123b78;
}

/* Mobile */
@media (max-width: 768px) {
    .advisory-committee {
        padding: 0 10px;
        overflow-x: auto;
    }

    .advisory-table-wide {
        min-width: 850px;
    }
}

/* =====================================================
   FINAL ADVISORY COMMITTEE DESIGN
   ===================================================== */

#advisory-final {
    width: 96% !important;
    max-width: 1480px !important;
    margin: 35px auto !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* ---------- TITLE ---------- */

#advisory-final .advisory-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    background: transparent !important;
    border: none !important;
    color: #123b78 !important;
}

#advisory-final .advisory-title h3 {
    position: relative !important;
    margin: 0 !important;
    padding: 0 65px !important;
    color: #123b78 !important;
    background: transparent !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Decorative lines beside title */
#advisory-final .advisory-title h3::before,
#advisory-final .advisory-title h3::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 100px !important;
    height: 3px !important;
    background: #1b6fb8 !important;
}

#advisory-final .advisory-title h3::before {
    right: 100% !important;
}

#advisory-final .advisory-title h3::after {
    left: 100% !important;
}

/* Hide old emoji */
#advisory-final .advisory-icon {
    display: none !important;
}


/* ---------- TABLE ---------- */

#advisory-final .advisory-table-wide {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #c5ddf3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 5px 18px rgba(20, 70, 120, 0.08) !important;
}


/* ---------- HEADER ---------- */

#advisory-final .advisory-header {
    display: grid !important;
    grid-template-columns: 30% 42% 28% !important;
    width: 100% !important;
    min-height: 60px !important;
    background: #096bb5 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

#advisory-final .advisory-header > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 15px !important;
    border-right: 1px solid rgba(255,255,255,0.45) !important;
    box-sizing: border-box !important;
}


/* ---------- ROWS ---------- */

#advisory-final .advisory-row {
    display: grid !important;
    grid-template-columns: 30% 42% 28% !important;
    width: 100% !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid #c9def2 !important;
    color: #123b78 !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Alternating colours */
#advisory-final .advisory-row:nth-child(even) {
    background: #ffffff !important;
}

#advisory-final .advisory-row:nth-child(odd) {
    background: #e8f4ff !important;
}


/* ---------- CELLS ---------- */

#advisory-final .advisory-row > div {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 14px 20px !important;
    border-right: 1px solid #c9def2 !important;
    line-height: 1.4 !important;
}


/* ---------- MEMBER NAME ---------- */

#advisory-final .advisory-row > div:first-child {
    justify-content: center !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #123b78 !important;
}


/* ---------- NAME AND DESIGNATION CELLS ---------- */

#advisory-final .member-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: left !important;
}

#advisory-final .member-name {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #123b78 !important;
}

#advisory-final .member-designation {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    color: #123b78 !important;
}


/* ---------- INSTITUTION ---------- */

#advisory-final .advisory-row > div:last-child {
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 17px !important;
    color: #123b78 !important;
}


/* ---------- LAST ROW ---------- */

#advisory-final .advisory-row:last-child {
    border-bottom: none !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

    #advisory-final {
        width: 100% !important;
        margin: 28px auto !important;
        padding: 0 12px !important;
        overflow: visible !important;
    }

    #advisory-final .advisory-table-wide {
        min-width: 0 !important;
    }

    #advisory-final .advisory-title {
        margin-bottom: 18px !important;
    }

    #advisory-final .advisory-title h3 {
        padding: 0 30px !important;
        font-size: 28px !important;
    }

    #advisory-final .advisory-title h3::before,
    #advisory-final .advisory-title h3::after {
        width: 38px !important;
    }

    #advisory-final .advisory-header {
        display: none !important;
    }

    #advisory-final .advisory-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 0 !important;
        padding: 4px 0 !important;
    }

    #advisory-final .advisory-row > div {
        display: grid !important;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 10px 12px !important;
        border-right: none !important;
        font-size: 15px !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    #advisory-final .advisory-row > div::before {
        content: attr(data-label);
        color: #075da8 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
    }

    #advisory-final .advisory-row .member-name {
        font-size: 15px !important;
    }

    #advisory-final .advisory-row .member-designation {
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {
    #advisory-final .advisory-title h3 {
        padding: 0 18px !important;
        font-size: 24px !important;
    }

    #advisory-final .advisory-title h3::before,
    #advisory-final .advisory-title h3::after {
        width: 24px !important;
    }

    #advisory-final .advisory-row > div {
        grid-template-columns: minmax(84px, 32%) minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px 10px !important;
    }
}
/* ICDAC 2027 announcement ticker */
#icdac-ticker {
    width: 100%;
    height: 36px;
    background: #eaf3fb;
    border-top: 2px solid #2b6ea6;
    border-bottom: 2px solid #12395f;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#icdac-ticker-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    align-items: center;
    animation: icdacMove 28s linear infinite;
}

.icdac-ticker-item {
    display: inline-block;
    white-space: nowrap;
    padding-right: 70px;
    color: #12395f;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 36px;
}

.icdac-ticker-item strong {
    font-weight: 700;
}

.icdac-ticker-separator {
    color: #2b6ea6;
    font-weight: 900;
    padding: 0 10px;
}

@keyframes icdacMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

#icdac-ticker:hover #icdac-ticker-track {
    animation-play-state: paused;
}

@media (max-width: 650px) {
    #icdac-ticker {
        height: 32px;
    }

    .icdac-ticker-item {
        font-size: 12px;
        line-height: 32px;
        padding-right: 38px;
    }

    #icdac-ticker-track {
        animation-duration: 22s;
    }
}