/* ============================================================================
   styles.css  ---  ONE STYLESHEET FOR THE WHOLE SITE

   HOW THIS FILE IS ORGANISED
     1. DESIGN TOKENS   <- change brand colours + fonts here (this is the bit
                            you will edit most). Everything else uses these.
     2. RESET / BASE
     3. LAYOUT HELPERS  (container, section, spacing)
     4. TYPOGRAPHY
     5. BUTTONS
     6. HEADER / NAV
     7. HERO
     8. SECTIONS        (stats, services, products, faq, team, etc.)
     9. FORMS
    10. FOOTER
    11. RESPONSIVE       (mobile adjustments)

   To rebrand the whole site, you usually only need to change the values in
   section 1 below.
   ========================================================================== */

/* ============================================================================
   1. DESIGN TOKENS  ---  EDIT THESE TO REBRAND
   ========================================================================== */
:root {
  /* --- Brand colours ------------------------------------------------------
     Replace these hex codes with Super Enterprises' brand colours.
     --brand      : main colour (buttons, headings accents, header)
     --brand-dark : a darker shade for hovers
     --accent     : secondary highlight colour (used sparingly)             */
  --brand:        #14463c;   /* deep pine green */
  --brand-dark:   #0e332c;
  --accent:       #b0803f;   /* warm brass */
  --accent-dark:  #916829;

  /* --- Neutrals ---------------------------------------------------------- */
  --ink:          #17211d;   /* main text colour */
  --ink-soft:     #55605b;   /* secondary text */
  --paper:        #faf8f3;   /* page background (warm off-white) */
  --surface:      #ffffff;   /* cards */
  --line:         #e6e2d8;   /* borders / dividers */

  /* --- Typography -------------------------------------------------------
     Change these two lines (and the <link> in partials/head.ejs) to swap
     fonts across the whole site.                                          */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* headings */
  --font-body:    "Inter", system-ui, -apple-system, Arial, sans-serif; /* text */

  /* --- Layout knobs ------------------------------------------------------ */
  --max-width:    1120px;   /* how wide the content can get */
  --radius:       14px;     /* rounded corner size */
  --gap:          clamp(2.5rem, 6vw, 5rem); /* vertical space between sections */
}

/* ============================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

/* ============================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2rem);
}

.section { padding: var(--gap) 0; }

.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

.center { text-align: center; }

/* ============================================================================
   4. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.5em;
}

.section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.body-text { margin: 0 0 1.2rem; color: var(--ink-soft); }

/* Eyebrow / small label helper (optional) */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}

/* ============================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;      /* pill shape */
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }

/* Solid brand button */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

/* Brass accent button */
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }

/* Outlined / ghost button */
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { background: var(--brand); color: #fff; }

/* ============================================================================
   6. HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.brand { display: flex; align-items: center; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--brand);
  letter-spacing: -0.01em;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.96rem;
  border-radius: 8px;
}
.nav-link:hover { color: var(--brand); background: rgba(20, 70, 60, 0.06); }
.nav-link.is-active { color: var(--brand); }

.caret { font-size: 0.7rem; opacity: 0.7; }

/* Dropdown menu */
.has-dropdown { position: relative; }
.dropdown {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  color: var(--ink);
  font-size: 0.92rem;
}
.dropdown-link:hover { background: rgba(20, 70, 60, 0.06); color: var(--brand); }

/* Mobile hamburger button (hidden on desktop, shown in responsive section) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============================================================================
   7. HERO
   ========================================================================== */
.hero {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(176, 128, 63, 0.10), transparent 60%),
    var(--paper);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 2rem;
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 1.8rem;
}
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Decorative circle on the right of the hero. Replace .hero-visual contents
   with a photo or illustration whenever you have one. */
.hero-visual { display: flex; justify-content: center; }
.hero-orb {
  width: min(340px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
  box-shadow: 0 30px 60px rgba(20, 70, 60, 0.25);
  position: relative;
}
.hero-orb::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.35);
}

/* ============================================================================
   8. SECTIONS
   ========================================================================== */

/* --- Page hero (inner pages) --- */
.page-hero {
  background: var(--brand);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.page-title { color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.page-lead { color: rgba(255, 255, 255, 0.85); font-size: 1.15rem; max-width: 60ch; }

/* --- Stats --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--brand);
  font-weight: 600;
}
.stat-label { display: block; color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.4rem; }

/* --- Tabs (home services) --- */
.tabs { margin-top: 2rem; }
.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.tab-button {
  font-family: var(--font-body);
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-button:hover { border-color: var(--brand); color: var(--brand); }
.tab-button.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.tab-panel {
  display: none;
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.tab-panel.is-active { display: block; }
.tab-panel h3 { color: var(--brand); }

/* --- Services page list --- */
.service-list { display: flex; flex-direction: column; gap: 1.2rem; }
.service-item {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.service-body h2 { margin-bottom: 0.2rem; }
.service-summary { color: var(--brand); font-weight: 600; margin: 0 0 0.6rem; }

/* --- Products grid --- */
.products-section { background: var(--surface); }
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.product-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
.product-card h3 { margin: 0; font-size: 1.1rem; }
.product-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

/* --- FAQ accordion --- */
.faq-list { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.2rem 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-icon { color: var(--accent); font-size: 1.5rem; transition: transform 0.2s ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-answer p { color: var(--ink-soft); margin: 0 0 1.2rem; }

/* --- Team --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.team-photo { aspect-ratio: 4 / 3; background: var(--line); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
/* If the photo is missing, show a brand-coloured block with initials space. */
.team-photo.no-photo {
  background: linear-gradient(150deg, var(--brand), var(--brand-dark));
}
.team-info { padding: 1.3rem; }
.team-info h3 { margin-bottom: 0.1rem; }
.team-role { color: var(--accent); font-weight: 600; margin: 0 0 0.8rem; font-size: 0.9rem; }
.team-toggle {
  background: none; border: none; color: var(--brand);
  font-weight: 600; cursor: pointer; padding: 0; font-size: 0.9rem;
}
.team-bio { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.team-bio p { color: var(--ink-soft); font-size: 0.92rem; margin: 0.8rem 0 0; }

/* --- Insights / articles --- */
.article-list { display: flex; flex-direction: column; gap: 1.2rem; }
.article-card {
  display: block;
  padding: 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); color: var(--ink); }
.article-date { color: var(--accent); font-weight: 600; font-size: 0.85rem; }
.article-card h2 { margin: 0.3rem 0 0.5rem; font-size: 1.3rem; }
.article-card p { color: var(--ink-soft); margin: 0 0 0.8rem; }
.article-more { color: var(--brand); font-weight: 600; font-size: 0.9rem; }

/* --- Careers --- */
.job-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem; }
.job-card {
  padding: 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.job-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.job-head h2 { font-size: 1.3rem; margin: 0; }
.job-meta { color: var(--ink-soft); font-size: 0.9rem; }
.job-card p { color: var(--ink-soft); margin: 0.8rem 0 1.2rem; }

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* --- CTA band (reusable partial) --- */
.cta-band { background: var(--brand); color: #fff; }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  flex-wrap: wrap;
}
.cta-text h2 { color: #fff; margin-bottom: 0.4rem; }
.cta-text p { color: rgba(255,255,255,0.85); margin: 0; max-width: 50ch; }

/* --- 404 --- */
.error-section { padding: clamp(4rem, 10vw, 8rem) 0; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 9rem);
  color: var(--accent);
  line-height: 1;
  margin: 0;
}

/* ============================================================================
   9. FORMS
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
}
.contact-details h2 { font-size: 1.4rem; }
.contact-details p { color: var(--ink-soft); margin: 0 0 1.1rem; }
.contact-details strong { color: var(--ink); }

.contact-form-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; font-size: 0.92rem; }
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 70, 60, 0.12);
}
.contact-form button { align-self: flex-start; margin-top: 0.4rem; }

.form-success {
  text-align: center;
  padding: 1rem 0;
}
.form-success h2 { color: var(--brand); }
.form-errors {
  background: #fdecec;
  border: 1px solid #f3b4b4;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}
.form-errors p { margin: 0.2rem 0; color: #a12626; font-size: 0.9rem; }

/* ============================================================================
   10. FOOTER
   ========================================================================== */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,0.85); margin-top: var(--gap); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.footer-logo { color: #fff; font-size: 1.4rem; display: block; }
.footer-tagline { color: var(--accent); margin: 0.3rem 0 1.5rem; font-style: italic; }
.footer-address { margin-bottom: 1.2rem; }
.footer-address h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.footer-address p { margin: 0; font-size: 0.9rem; }

.footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: rgba(255,255,255,0.8); font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }

.footer-social { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1rem; }
.footer-social a { color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.footer-social a:hover { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.footer-bottom p { margin: 0; padding: 1.2rem 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); }

/* ============================================================================
   11. RESPONSIVE  ---  mobile and tablet adjustments
   ========================================================================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; margin-bottom: 1.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Show the hamburger, hide the horizontal menu until toggled. */
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    transition: transform 0.25s ease;
    padding: 1rem 0;
    box-shadow: 0 20px 30px rgba(0,0,0,0.08);
  }
  .site-nav.is-open { transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 0 1rem; }
  .nav-cta { margin-top: 0.5rem; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
  }
}

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .service-item { flex-direction: column; gap: 0.8rem; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   LEGAL PAGE EXTRAS  ---  notes and tables (disclaimer / privacy)
   ========================================================================== */
.legal-heading { margin-top: 2.5rem; font-size: 1.35rem; }

/* Highlighted single-line note (e.g. AMFI registration statement). */
.legal-note {
  background: rgba(176, 128, 63, 0.10);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 500;
  margin: 1.5rem 0;
}

/* Small print under tables. */
.legal-fineprint { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.8rem; }

/* Horizontal scroll wrapper so wide tables never break the layout on mobile. */
.table-wrap { overflow-x: auto; margin: 1rem 0; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 480px;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--line);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.legal-table thead th { background: var(--brand); color: #fff; font-weight: 600; }
.legal-table tbody th { background: var(--paper); font-weight: 600; }
.legal-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); }