/* Same sharp-serif heading font as the home page */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");

/* =========================================================================
   Admissions > Visit Campus
   Clean, restrained palette: navy + blue, one orange call-to-action colour,
   red used only for headings (same as the home page). Scoped to .visit-page.

   Typography matches the home page (colours unchanged):
     main headings = Marcellus, capitals, weight 400, red underline
     card names    = Cormorant Garamond (var(--font-head)), bold
     paragraphs    = var(--font-body), weight 400 + 0.15px stroke
   ========================================================================= */

.visit-page {
  --v-navy: #0B3F73;
  --v-blue: #1667B0;
  --v-orange: #E8790E;
  --v-red: #D32F2F;
  --v-gold: #FFC400;
  --v-tint: #EAF3FB;
  --v-soft: #F5F8FC;
  --v-green: #1F4D3A;
  background: #fff;
}

/* ---------- Headings: same look as the home page (Marcellus, capitals,
   red, red underline as wide as the text) ---------- */
.v-title,
.visit-page .section-head h2 {
  display: inline-block;
  font-family: "Marcellus", var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--v-red);
  padding-bottom: 4px;
  border-bottom: 3px solid var(--v-red);
}
.v-title { font-size: clamp(2rem, 4vw, 3.1rem); }                 /* home heading size */
.visit-page .section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); }

/* Safety: if an old template still has the banner block, keep it hidden */
.visit-page .v-hero,
.visit-page .v-hero-ph,
.visit-page .v-hero-img { display: none !important; }

/* ---------- Intro: breadcrumb on top, title below ---------- */
.visit-page .v-intro { padding: 36px 0 56px; text-align: center; }
.v-crumbs {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-body);
  font-size: 1.1rem; font-weight: 400;
  -webkit-text-stroke: 0.15px currentColor;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.v-crumbs a:hover { color: var(--v-blue); }
.v-crumbs i { font-size: 0.6rem; }
.v-crumbs span { color: var(--ink); font-weight: 400; }

/* ---------- Section heading ---------- */
.visit-page .section-head { max-width: 800px; margin: 0 auto 48px; text-align: center; }

/* ---------- Visit process + Schedule a visit, side by side.
   This section has its own background colour and shapes. ---------- */
.visit-page .visit-book {
  position: relative; overflow: hidden;
  padding: 88px 0;
  background:
    radial-gradient(circle at 0% 100%, #FFE3A8 0, #FFE3A8 150px, transparent 151px),
    var(--v-tint);
}
.visit-book::before {                       /* big white circle, top left */
  content: ""; position: absolute; z-index: 0;
  width: 560px; height: 560px; border-radius: 50%;
  left: -200px; top: -230px;
  background: rgba(255, 255, 255, 0.7);
}
.visit-book::after {                        /* soft orange circle, right */
  content: ""; position: absolute; z-index: 0;
  width: 300px; height: 300px; border-radius: 50%;
  right: -110px; bottom: -110px;
  background: #FBD9B5;
}
.visit-book .container { position: relative; z-index: 1; }

.book-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.book-col .section-head { max-width: none; margin: 0 0 32px; text-align: left; }
.visit-page .visit-book .section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }   /* narrower columns */

/* Process: vertical numbered steps joined by a thin line */
.process-list { position: relative; display: grid; gap: 30px; }
.process-list::before {
  content: ""; position: absolute; z-index: 0;
  left: 27px; top: 28px; bottom: 28px;
  border-left: 2px solid #B9CFE6;
}
.process-card { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 20px; }
.process-no {
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--v-navy);
  border: 2px solid var(--v-navy);
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
  box-shadow: 0 0 0 6px var(--v-tint);
}
/* Step names: same as the home-page card names */
.process-card h3 {
  font-family: var(--font-head);
  font-size: 1.6rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em;
  -webkit-text-stroke: 0.3px currentColor;
  color: var(--ink); margin: 4px 0 4px;
}
/* Step text: home-page paragraph style */
.process-card p {
  font-family: var(--font-body);
  font-size: 1.1rem; font-weight: 400; line-height: 1.75;
  -webkit-text-stroke: 0.15px currentColor;
  color: var(--ink-soft);
}

/* Form card */
.book-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 34px;
  box-shadow: 0 24px 50px -34px rgba(18, 18, 18, 0.35);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 26px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-head);
  font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--ink);
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 400;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--v-blue);
  box-shadow: 0 0 0 3px rgba(22, 103, 176, 0.15);
}
.form-field textarea { resize: vertical; min-height: 110px; }

/* ---------- FAQ (native details/summary) ----------
   Coloured text: questions = navy (blue when open),
   answers = deep blue-grey, "+ / −" sign = orange,
   open card gets a blue left accent. */
.visit-page .visit-faq { padding: 88px 0 100px; background: var(--v-soft); }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--v-orange);          /* colour accent on the left */
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; line-height: 1.25;
  color: var(--v-navy);                            /* question text: navy */
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.6rem; line-height: 1;
  color: var(--v-orange);                          /* + sign: orange */
}
.faq-item[open] {
  border-color: #BCD3EA;
  border-left-color: var(--v-blue);                /* open card: blue accent */
  box-shadow: 0 14px 30px -22px rgba(11, 63, 115, 0.45);
}
.faq-item[open] summary { color: var(--v-blue); }  /* open question: brighter blue */
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  margin: 0; padding: 0 22px 20px;
  font-family: var(--font-body);
  font-size: 1.22rem; font-weight: 400; line-height: 1.8;
  -webkit-text-stroke: 0.15px currentColor;
  color: #2F4F6F;                                  /* answer text: deep blue-grey */
}
.faq-item summary:focus-visible { outline: 2px solid var(--v-blue); outline-offset: -2px; border-radius: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .book-wrap { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 700px) {
  .visit-page .v-intro { padding: 40px 0 44px; }
  .visit-page .visit-book { padding: 60px 0; }
  .visit-page .visit-faq { padding: 60px 0 72px; }
  .book-card { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .faq-item p { font-size: 1.05rem; }
  .process-card h3 { font-size: 1.4rem; }
  .process-card p { font-size: 1.02rem; }
}