/* --------- Base --------- */
:root{
  --blue-900:#002157;
  --blue-800:#003366;
  --blue-700:#00509E;
  --blue-600:#1e3c72;
  --blue-500:#2a5298;
  --blue-100:#eaf3ff;
  --ink-900:#1b1f24;
  --ink-700:#2d3436;
  --ink-500:#495057;
  --ink-300:#6c757d;
  --ink-100:#e9ecef;
  --bg:#ffffff;
  --card:#ffffff;
  --shadow:0 8px 20px rgba(0,0,0,.06);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink-700);
  background:var(--bg);
  line-height:1.6;
}

/* Containers */
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.75rem 1.1rem;
  border-radius:999px;
  background:var(--blue-700);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-outline{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:999px;
  color:var(--blue-700);
  border:2px solid var(--blue-700);
  text-decoration:none;
  font-weight:600;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.btn-outline:hover{
  background:var(--blue-700);
  color:#fff;
  transform:translateY(-1px);
}
.btn-invert{
  background:#fff;
  color:var(--blue-700);
}
.btn-invert:hover{
  background:var(--ink-100);
}

/* Topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid #eee;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink-900);
}
.brand-logo{
  width:80px;  /* Adjust between 70px–100px for balance */
  height:auto;
  object-fit:contain;
}

.brand-name{
  font-weight:800;
  letter-spacing:.3px;
  color:var(--blue-800);
  font-size:clamp(1.1rem, 1vw + 0.9rem, 1.6rem); /* Auto scales with screen size */
  line-height:1.2;
}


/* Header / Nav */
.site-header{
  background:linear-gradient(90deg, var(--blue-600), var(--blue-500));
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
}
.nav-toggle{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:1rem; padding:1rem .4rem; cursor:pointer; display:none;
}
.nav-menu{
  display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0;
}
.nav-item > a, .nav-item > button{
  color:#fff; text-decoration:none; font-weight:600; padding:1rem .75rem; border-radius:10px; border:0; background:none; cursor:pointer;
}
.nav-item > a:hover, .nav-item > button:hover{ background-color:rgba(255,255,255,.1); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; color:var(--ink-700); border-radius:12px;
  box-shadow:var(--shadow); padding:.4rem; display:none;
}
.dropdown.open{ display:block; }
.dropdown a{
  display:block; padding:.65rem .8rem; border-radius:8px; color:var(--ink-700); text-decoration:none; font-weight:600;
}
.dropdown a:hover{ background:var(--ink-100); }

/* Mobile */
@media (max-width: 920px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute; inset: 100% 0 auto 0; background:linear-gradient(180deg, var(--blue-600), var(--blue-500));
    flex-direction:column; gap:0; padding:.5rem; display:none;
  }
  .nav-menu.open{ display:flex; }
  .dropdown{ position:static; box-shadow:none; background:transparent; padding:0; }
  .dropdown a{ color:#fff; }
  .dropdown a:hover{ background:rgba(255,255,255,.12); }
}

/* Hero */
.hero{
  position:relative; min-height:56vh;
  background:url('https://www.irmac.ca/resources/Pictures/CN-Tower_GettyImages-615764386.jpg') center/cover no-repeat;
  display:grid; place-items:center; text-align:center; color:#fff;
}
.hero-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,33,87,.55), rgba(0,33,87,.55));
}
.hero-content{ position:relative; z-index:1; }
.hero h1{
  font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem);
  line-height:1.15; margin:0 0 .6rem; font-weight:800;
}
.hero p{
  font-size:clamp(1rem, 1vw + .6rem, 1.25rem);
  opacity:.95; margin:0 0 1.2rem;
}
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Sections */
.section{ padding:3.5rem 0; }
.section-alt{ background:var(--blue-100); }
.section-header{ text-align:center; margin-bottom:1.8rem; }
.section-header h2{
  margin:0; font-size:clamp(1.4rem, .9vw + 1rem, 2rem); color:var(--blue-800);
}

/* Announcements */
.announcements{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:1rem;
}
.announcement{
  background:var(--card); padding:1.2rem; border-radius:var(--radius); box-shadow:var(--shadow);
  border-left:6px solid var(--blue-700);
}
.announcement h3{
  margin:.2rem 0 .4rem; color:var(--blue-800);
}
.announcement a{ color:var(--blue-700); font-weight:700; text-decoration:none; }
.announcement a:hover{ text-decoration:underline; }

/* Cards Grid */
.grid-4{
  display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid-4{ grid-template-columns: 1fr;} }

.card{
  background:var(--card); padding:1.25rem 1.25rem; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid #eef2f6;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.08); }
.card h3{ margin-top:0; color:var(--blue-800); }
.card .list{ padding-left:1.1rem; margin:0; }
.card .list li{ margin:.35rem 0; }

/* CTA Band */
.cta-band{
  background:linear-gradient(90deg, var(--blue-600), var(--blue-500));
  color:#fff;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.6rem 0;
}
.cta-text h2{ margin:.2rem 0 .2rem; }
.cta-text p{ margin:0; opacity:.95; }
@media (max-width: 820px){
  .cta-inner{ flex-direction:column; text-align:center; }
}

/* Panels / Columns */
.grid-3{
  display:grid; gap:1rem; grid-template-columns: repeat(3,1fr);
}
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } }

.panel{
  background:var(--card); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow);
  border:1px solid #eef2f6;
}
.panel h3{ margin-top:0; color:var(--blue-800); }

/* Events List */
.events{ list-style:none; margin:0; padding:0; }
.events li{ padding:.6rem .2rem; border-bottom:1px dashed #e8eef6; }
.events li:last-child{ border-bottom:0; }
.event-title{ font-weight:700; text-decoration:none; color:var(--ink-700); }
.event-title:hover{ color:var(--blue-700); }
.event-meta{ color:var(--ink-300); font-size:.95rem; }

/* Links list */
.links{ list-style: none; padding:0; margin:0; }
.links li{ margin:.4rem 0; }
.links a{ text-decoration:none; color:var(--blue-700); font-weight:700; }
.links a:hover{ text-decoration:underline; }

/* Sponsors */
.sponsors{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center;
}
.sponsor-card{
  background:#0a76a8; border-radius:14px; padding:18px 24px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; min-width:220px; min-height:90px;
}
.sponsor-card img{ max-height:40px; width:auto; display:block; filter:brightness(1.1); }
.sponsor-card.sponsor-light{ background:#fff; }
.sponsor-card.sponsor-light img{ filter:none; }

/* Search + Social row */
.split{ display:flex; align-items:center; gap:1rem; justify-content:space-between; flex-wrap:wrap; }
.search{ display:flex; gap:.6rem; }
.search-input{
  border:1px solid #e2e8f0; padding:.7rem .9rem; border-radius:999px; min-width:260px;
}
.social{ display:flex; gap:.6rem; flex-wrap:wrap; }
.social-btn{
  text-decoration:none; font-weight:700; color:var(--blue-700); background:#fff; border:1px solid #e2e8f0;
  padding:.55rem .9rem; border-radius:999px;
}
.social-btn:hover{ background:var(--ink-100); }

/* Footer */
.site-footer{
  background:var(--blue-800); color:#dbe7ff;
}
.footer-inner{
  text-align:center; padding:1.6rem 0;
}
.footer-inner a{ color:#fff; font-weight:700; text-decoration:underline; }
.wa-credit{ opacity:.95; }


.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* space between logo and text */
}

.logo {
  width: 60px;  /* adjust size as needed */
  height: auto;
}


/* =========================================================
   DAMA Days speaker card styles (Content gadget version)
   Paste into Wild Apricot: Website > CSS, then Save.

   How it works:
   - The CSS class "damadays_speaker-card" is set on a Content
     gadget (gadget settings > Advanced > CSS class).
   - Inside the gadget, content is typed with the toolbar:
       Image        = speaker photo (first thing in the card)
       Heading 4    = speaker name
       Paragraph    = title line (first paragraph after the name)
       Heading 5    = speaking slot (optional)
       Paragraphs   = bio
       LinkedIn link= styled automatically
   - Every rule starts with .damadays_speaker-card, so no other
     gadget on the site is affected.
   ========================================================= */


/* ---------- 1. The card (the gadget itself) ---------- */

.damadays_speaker-card {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 30px 0 !important;
  padding: 0 20px 20px 20px !important;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.damadays_speaker-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Wild Apricot wraps gadget content in inner containers that
   can carry theme padding. Reset them so spacing comes only
   from the card. */
.damadays_speaker-card .gadgetStyleBody,
.damadays_speaker-card .gadgetContentEditableArea {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}


/* ---------- 2. Photo ---------- */

/* The editor usually wraps an image in a paragraph.
   Remove that paragraph's spacing. */
.damadays_speaker-card p:first-child {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

/* Photo runs edge to edge across the top of the card.
   The negative side margins cancel the card's 20px padding.
   !important overrides the width, height and alignment the
   editor writes onto the image when you insert or resize it. */
.damadays_speaker-card img {
  display: block !important;
  float: none !important;
  width: calc(100% + 40px) !important;
  max-width: none !important;
  height: 360px !important;
  margin: 0 -20px 20px -20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
  background: #f8f9fb;
}


/* ---------- 3. Name (Heading 4) ---------- */

.damadays_speaker-card h4 {
  font-family: inherit !important;
  font-size: 1.4em !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  color: #222 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* ---------- 4. Title line (first paragraph after the name) ---------- */

.damadays_speaker-card h4 + p {
  font-size: 1em !important;
  color: #777 !important;
  margin: 5px 0 10px 0 !important;
  line-height: 1.4 !important;
}


/* ---------- 5. Speaking slot (Heading 5, optional) ---------- */

.damadays_speaker-card h5 {
  font-family: inherit !important;
  font-size: 0.95em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #444 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* ---------- 6. Bio (all other paragraphs) ---------- */

.damadays_speaker-card p {
  font-family: inherit;
  font-size: 0.95em;
  color: #555;
  line-height: 1.5;
  margin: 0 0 10px 0;
}


/* ---------- 7. LinkedIn link ---------- */

.damadays_speaker-card a[href*="linkedin.com"],
.damadays_speaker-card a[href*="linkedin.com"]:visited {
  display: inline-block;
  margin-top: 5px;
  text-decoration: none !important;
  color: #0077b5 !important;
  font-weight: bold;
  transition: color 0.3s ease;
}

.damadays_speaker-card a[href*="linkedin.com"]:hover,
.damadays_speaker-card a[href*="linkedin.com"]:focus {
  color: #005582 !important;
  text-decoration: underline !important;
}


/* ---------- 8. Optional section heading ----------
   Set CSS class "damadays_speaker-heading" on a separate
   Content gadget above the layout that holds the cards. */

.damadays_speaker-heading,
.damadays_speaker-heading h1,
.damadays_speaker-heading h2 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  color: #333;
}

.damadays_speaker-heading h1,
.damadays_speaker-heading h2 {
  font-size: 2.5em;
  margin: 40px 0;
}