/*
*page content formats
*/

/* ── Global utility: orange submit/action button ───────────────── */
.auth-btn {
  display: block;
  width: 100%;
  padding: 0.55rem 1.25rem;
  background: var(--ce-orange, #E8622C);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.auth-btn:hover, .auth-btn:focus { opacity: 0.9; box-shadow: 0 2px 8px rgba(232,98,44,0.35); color: #fff; }
.auth-btn:active { opacity: 0.82; }
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .col-13 {width: 20%;}
}

a {
  text-decoration: none;
}

.footer a {
  text-decoration: none;
  color: white;
}

.footer ul li {
  display: inline;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
  padding: 5px 0;
}

p a {
  text-decoration: none;
  color: white;
}

li {
  padding-left: 0%;
  margin-left: 0;
  display: inline;
  text-decoration: none;
}

.bg-site {
  background-color: rgb(8, 103, 49);
  color: whitesmoke;
}

.bg-site-color {
  color: whitesmoke;
}

/* Darker shade of the same brand green, for surfaces (like the cookie
   consent banner) that sit behind a .bg-site button/link and need to read
   as on-brand while still contrasting with it - used instead of Bootstrap's
   .bg-danger (red), which clashed with the rest of the site's green chrome. */
.bg-site-dark {
  background-color: rgb(5, 62, 29);
  color: whitesmoke;
}

.ulsquare {
  list-style-type: square;
}

.quileditorheight {
  height: 500px;
}


/* ==========================================================================
   CivilEngApps home page (blueprint/drafting visual identity)
   ========================================================================== */

:root {
  --ce-ink:       #16233A;   /* blueprint navy - headings, dark surfaces */
  --ce-slate:     #3D6E8C;   /* steel blue - secondary accent, links */
  --ce-orange:    #E8622C;   /* safety orange - CTAs, hover state only */
  --ce-paper:     #EEF1F4;   /* cool paper background */
  --ce-paper-2:   #FFFFFF;
  --ce-line:      rgba(22, 35, 58, 0.14);
  --ce-text:      #232B36;
  --ce-text-soft: #5B6672;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

#services,
.ce-hero {
  font-family: var(--font-body);
  color: var(--ce-text);
}

/* ---------- Hero ---------- */
.ce-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(22, 35, 58, 0.94), rgba(22, 35, 58, 0.88)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, 0.06) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.06) 39px 40px);
  overflow: hidden;
}

.ce-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .18em;
  font-size: .78rem;
  color: #9FC1D6;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}

.ce-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ce-orange);
  display: inline-block;
}

.ce-hero h1 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

.ce-hero .lead {
  font-family: var(--font-body);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  color: #D7E1E9;
}

.ce-hero__stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.ce-hero__stat-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.ce-hero__stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

.ce-cta {
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ce-orange);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .75rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ce-cta:hover,
.ce-cta:focus-visible {
  background: #c94e1e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232,98,44,0.4);
}

.ce-cta svg {
  width: 18px;
  height: 18px;
}

/* ---------- Services ---------- */
.ce-section {
  background: var(--ce-paper);
}

.ce-group {
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--ce-line);
}

.ce-group:last-child {
  border-bottom: none;
}

.ce-group-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.ce-group-head .index {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ce-slate);
  letter-spacing: .06em;
}

.ce-group-head h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0;
  color: var(--ce-ink);
}

.ce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.65rem;
}

.ce-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  background: var(--ce-paper-2);
  border: 1px solid var(--ce-line);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  color: var(--ce-text);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ce-card:hover,
.ce-card:focus-visible {
  border-color: var(--ce-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(22, 35, 58, .28);
  color: var(--ce-text);
}

.ce-card:focus-visible {
  outline: 2px solid var(--ce-slate);
  outline-offset: 2px;
}

.ce-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 8px;
  background: rgba(61,110,140,0.09);
  transition: background .18s ease;
}

.ce-card:hover .ce-card__icon {
  background: rgba(232,98,44,0.09);
}

.ce-card__icon svg {
  width: 24px;
  height: 24px;
}

.ce-card__body { flex: 1; min-width: 0; }

.ce-card .tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--ce-slate);
  display: block;
  margin-bottom: .15rem;
}

.ce-card .name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .83rem;
  line-height: 1.3;
  color: var(--ce-ink);
  margin-bottom: .28rem;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.ce-card .rule {
  height: 2px;
  width: 0;
  background: var(--ce-orange);
  border-radius: 1px;
  transition: width .22s ease;
}

.ce-card:hover .rule { width: 24px; }

@media (prefers-reduced-motion: reduce) {
  .ce-card, .ce-cta { transition: none; }
}

@media (max-width: 767px) {
  .ce-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ce-group-head h2 { font-size: 1.3rem; }
}

/*
  login.css
  ---------
  Styles extracted from login.html.

  ASSUMPTION: no color values are introduced here. Every color still comes
  from the existing Bootstrap/theme classes already used in the template
  (bg-site, text-primary, text-dark, border-gray-300, bg-light, etc). This
  file only adds layout, sizing, and hover/focus polish so the page's
  palette is unchanged.
*/

/*
  FIX: this element previously also carried Bootstrap's col-11/col-sm-9/
  col-md-8 grid classes, but its parent is a plain d-flex div, not a real
  Bootstrap .row -- so it never got the negative-margin gutter compensation
  .col-* classes assume. On top of that, width: 100% here (loaded after
  Bootstrap, same specificity) silently overrode the col-* percentages at
  every breakpoint anyway. The combination produced uneven left/right
  margins and a card that could run past the viewport edge on some widths.
  The col-* classes have been removed from the markup; this class now owns
  sizing and centering on its own, with a bit of horizontal breathing
  room reserved via calc() so the card never touches the viewport edges
  on narrow phones.
*/
.login-card {
  width: calc(100% - 2rem);
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.login-card .card-header-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Social sign-in buttons ---
   FIX: the original markup rendered each provider as a bare icon-only
   <span> inside an <a>, laid out with fixed-width Bootstrap columns
   (col-4). Two problems combined to make buttons appear to "disappear":

   1. No minimum size was set on the button itself, so if the icon font
      (Font Awesome) hadn't loaded yet -- slow network, blocked CDN,
      ad-blocker -- the icon glyph rendered as nothing, and the anchor
      collapsed down to just its ~4px padding. Visually indistinguishable
      from "not there."
   2. The Facebook button is commented out in the template, but the row
      still used fixed col-4 slots. With only 2 of 3 slots filled and no
      justify-content-center on that inner row, the remaining icons sat
      off-center with a dead gap where Facebook used to be -- easy to
      mistake for "one of the icons vanished."

   The fixes below give every social button a guaranteed minimum
   footprint (independent of whether the icon glyph itself renders) and
   center the group with even spacing regardless of how many providers
   are shown. The template also adds a visually-hidden text label per
   button as a fallback so the control is never empty even if the icon
   truly fails to load. */
.login-social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-height: 48px; /* reserves layout space so the row never collapses */
}

.login-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;  /* guarantees visible footprint even if icon font fails */
  min-height: 48px;
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-social-btn:hover,
.login-social-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
}

.login-social-btn .fab {
  font-size: 1.25rem;
  line-height: 1;
}

/* Bootstrap's .visually-hidden equivalent, kept local in case the
   installed Bootstrap version differs from the theme's own copy. */
.login-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-divider {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- "Don't have an account? Register" prompt ---
   FIX: previously two stacked rows with a bg-light/text-dark fill, which
   rendered as a flat grey box behind plain text -- looked like a disabled
   field rather than a call to action. Replaced with a single inline line,
   a light top rule instead of a solid fill, and no background color at
   all. The Register link deliberately has NO color override here, so it
   keeps whatever the theme's normal anchor color already is. */
.login-signup-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.925rem;
}

.login-signup-link {
  text-decoration: none;
}

.login-signup-link:hover,
.login-signup-link:focus-visible {
  text-decoration: underline;
}


/* CEGraphicPloter — canvas wrapper styling
   The wrapper MUST be position:relative with an explicit size: the
   CSS2DRenderer that draws axis labels stacks an absolutely-positioned
   div on top of the <canvas>, and Three.js reads the wrapper's
   clientWidth/clientHeight to size the camera and renderer. */

.ploter-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 3 / 2;
  border: 1px solid #ccc;
  background: #ffffff;
}

.ploter-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Optional toolbar above the plot, if your page has one */
.ploter-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   SStability — sidebar navigation
   ========================================================================== */

.ss-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.75rem;
  margin-bottom: 2px;
  background-color: var(--ce-ink);
  border: none;
  border-left: 3px solid var(--ce-slate);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

.ss-nav-btn:hover {
  background-color: #1e3254;
  border-left-color: var(--ce-orange);
  color: #fff;
}

.ss-nav-btn[aria-expanded="true"] {
  background-color: #1e3254;
  border-left-color: var(--ce-orange);
}

.ss-nav-btn::after {
  content: '▾';
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.ss-nav-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.ss-file-header {
  padding: 0.4rem 0.75rem;
  margin-bottom: 4px;
  background-color: rgba(22, 35, 58, 0.06);
  border-left: 3px solid var(--ce-orange);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ce-ink);
}

.ss-upgrade-panel {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(22, 35, 58, 0.12);
}

.ss-upgrade-coffee-btn {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  margin-bottom: 4px;
  background-color: var(--ce-orange);
  border: none;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ss-upgrade-coffee-btn:hover {
  background-color: #c9541f;
  color: #fff;
}

.ss-upgrade-contact {
  font-size: 0.78rem;
  color: #5B6672;
  padding: 0.4rem 0.75rem;
  background-color: rgba(22, 35, 58, 0.04);
  border-left: 3px solid var(--ce-slate);
}

.ss-upgrade-contact a {
  color: var(--ce-slate);
  font-weight: 600;
  text-decoration: none;
}

.ss-upgrade-contact a:hover {
  color: var(--ce-orange);
}

.ss-upgrade-contact ul {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

.ss-upgrade-contact li {
  display: block;
  padding: 0.1rem 0;
}

.ss-upgrade-contact li::before {
  content: '→ ';
  color: var(--ce-orange);
}

/* ==========================================================================
   Top navigation bar  (fixed, replaces old .navbar.bg-site)
   ========================================================================== */

.ce-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background-color: var(--ce-ink);
  border-bottom: 2px solid var(--ce-slate);
  height: 56px;
  display: flex;
  align-items: center;
}

.ce-topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1rem;
  gap: 1rem;
}

.ce-topnav__logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.ce-topnav__logo:hover { color: #fff; }

.ce-topnav__brand-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  display: none;
}

@media (min-width: 480px) {
  .ce-topnav__brand-name { display: inline; }
}

.ce-topnav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1;
  justify-content: center;
}

.ce-topnav__link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

.ce-topnav__link:hover { color: #fff; }

.ce-topnav__right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.ce-topnav__btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.5;
  white-space: nowrap;
}

.ce-topnav__btn:hover,
.ce-topnav__btn:focus-visible {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}

/* Bootstrap .dropdown-toggle caret */
.ce-topnav__btn.dropdown-toggle::after,
.ce-topnav__link.dropdown-toggle::after {
  vertical-align: 0.1em;
  margin-left: 0.25em;
}

.ce-topnav__link.dropdown-toggle:hover,
.ce-topnav__link.dropdown-toggle:focus-visible,
.ce-topnav__link.dropdown-toggle.show {
  color: #fff;
}

/* Spacer below the fixed nav */
.ce-topnav__spacer { height: 56px; }

/* Mobile offcanvas drawer */
.ce-offcanvas { max-width: 280px; }

.ce-offcanvas__link {
  display: block;
  padding: 0.55rem 0.5rem;
  color: var(--ce-ink);
  text-decoration: none;
  font-size: 0.925rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.ce-offcanvas__link:hover {
  background: var(--ce-paper);
  color: var(--ce-ink);
}

/* Bootstrap 5.0.2: offcanvas z-index (1045) sits below modal-backdrop (1050).
   If a modal is ever open simultaneously, the backdrop would cover the drawer.
   Nudge offcanvas above it to be safe. */
.offcanvas { z-index: 1055 !important; }
.offcanvas-backdrop { z-index: 1050 !important; }

/* ==========================================================================
   Footer
   ========================================================================== */

.ce-footer {
  background-color: var(--ce-ink);
  color: rgba(255,255,255,0.65);
  padding: 3rem 0 1.5rem;
  font-size: 0.875rem;
}

.ce-footer__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.ce-footer__tagline {
  color: rgba(255,255,255,0.55);
  font-size: 0.8125rem;
  line-height: 1.65;
  margin-top: 0.6rem;
  margin-bottom: 0;
}

.ce-footer h6 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

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

.ce-footer ul li {
  display: block;
  padding: 0.22rem 0;
}

.ce-footer a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}

.ce-footer a:hover { color: var(--ce-orange); }

.ce-footer__social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.ce-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ce-footer__social a:hover {
  border-color: var(--ce-orange);
  color: var(--ce-orange);
  background: rgba(232,98,44,0.08);
}

.ce-footer__divider {
  border-color: rgba(255,255,255,0.1);
  margin: 2rem 0 1.25rem;
}

.ce-footer__bottom {
  color: rgba(255,255,255,0.35);
  font-size: 0.75rem;
}

/* ==========================================================================
   Landing page — "Why CivilEngApps" feature strip
   ========================================================================== */

.ce-features {
  background: var(--ce-paper-2);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ce-line);
}

.ce-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 767px) {
  .ce-features__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ce-features__grid { grid-template-columns: 1fr; }
}

.ce-feature-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
}

.ce-feature-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: rgba(61,110,140,0.1);
  border-radius: 7px;
  color: var(--ce-slate);
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.ce-feature-item__text { min-width: 0; }

.ce-feature-item__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-ink);
  margin: 0 0 0.15rem;
}

.ce-feature-item__body {
  font-size: 0.775rem;
  color: var(--ce-text-soft);
  line-height: 1.5;
  margin: 0;
}