/* Portal Labs — custom additions layered on top of the recolored Singular
   SAAS template (main.css). Kept separate so the template can be
   recompiled from theme-src without clobbering these rules. */

/* Full brand palette. The template itself only has one accent variable
   ($red-light, remapped to Portal Blue), so every button/box/heading came
   out the same shade of blue. These overrides pull in the rest of the
   palette — Navy, Coral, Sky, Mist, Slate — so the page reads as a
   coordinated brand system instead of one color repeated everywhere. */
:root {
  --pl-navy: #0F2A47;
  --pl-blue: #316FB7;
  --pl-sky: #5FA0E0;
  --pl-mist: #EAF2FB;
  --pl-ink: #1B2430;
  --pl-slate: #5C6B7A;
  --pl-coral: #FF6B4A;
  --pl-coral-dark: #E5502F;
}

/* Muted/secondary copy: swap the template's flat gray for brand Slate. */
.feature-tile p,
.product-box p,
.legal-page p,
.legal-page li,
.singular-our-team .team-mate span {
  color: var(--pl-slate) !important;
}

/* Section eyebrow badges ("About Us", "Our flagship product", etc.) —
   was a plain black-bordered pill; give it a soft Mist fill with a Blue
   label so it reads as an accent instead of a plain outline. */
.singular-section-title span {
  background: var(--pl-mist);
  border-color: var(--pl-mist);
  color: var(--pl-blue);
}

/* DPD feature cards: Navy instead of Blue so they read as premium dark
   panels rather than duplicating the button color right above them.
   (Excludes the paired .bordered-box card, which is deliberately an
   outlined light card with dark text for contrast against the filled
   card.) */
.singular-box-info:not(.bordered-box) {
  background: var(--pl-navy) !important;
}

.bordered-box.singular-box-info {
  border-color: var(--pl-navy);
}

/* Feature tile icons: Mist circle behind a Sky icon — adds depth without
   adding more flat blue blocks. */
.feature-tile i {
  width: 78px;
  height: 78px;
  line-height: 78px;
  border-radius: 50%;
  background: var(--pl-mist);
  font-size: 30px !important;
  color: var(--pl-blue) !important;
}

/* Final call-to-action band: Coral instead of Blue, so the page's single
   highest-emphasis moment stands apart from every other blue button/box
   above it. */
.red-box-info {
  background-color: var(--pl-coral) !important;
  background-image: none !important;
}

.btn-white:hover,
.btn-white:focus {
  background: #fff;
  color: var(--pl-coral-dark);
}

/* Section spacing rhythm
   The template's original padding values were tuned for sections we don't
   use (an absolutely-positioned video card before/after brands-reach, a
   staggered 3-column card grid). Without those neighbors the numbers left
   huge, inconsistent gaps between our sections, so we normalize them here
   to one consistent rhythm. */
.singular-banner.home-banner {
  padding: 160px 0 90px;
}

.singular-brands-reach {
  padding: 100px 0;
}

.explore-new-brands3 {
  padding: 100px 0;
}

/* Kill the staggered-grid offset the template applies to the last column's
   box-info (meant for a 3-up masonry layout); we use a plain 2-up row. */
.explore-new-brands3 .row [class*="col-"]:last-child .singular-box-info {
  margin-top: 0;
}

/* Make the "Sell Downloads" / "Easy To Use" cards match height instead of
   each sizing to its own (differing) amount of copy. Scoped away from
   .feature-list-row (the icon-tile row below) which doesn't need this. */
.explore-new-brands3 .row:not(.feature-list-row) {
  display: flex;
  flex-wrap: wrap;
}

.explore-new-brands3 .row:not(.feature-list-row) > [class*="col-"] {
  display: flex;
}

.explore-new-brands3 .singular-box-info {
  width: 100%;
}

/* Below 992px the two cards stack (col-md-12) but Bootstrap's column
   gutter only adds horizontal padding, not vertical, so they touch with
   no gap. Give the first card room to breathe from the one below it. */
@media (max-width: 991px) {
  .explore-new-brands3 .row > [class*="col-"]:first-child {
    margin-bottom: 30px;
  }
}

.singular-simple-pricing {
  padding: 100px 0;
}

.singular-our-team {
  padding: 100px 0;
}

.singular-join-maillist {
  padding: 60px 0 100px;
}

/* Reliable paragraph spacing.
   The template's `.singular-section-title p { padding-bottom: 25px }` rule
   gets zeroed out below a 575px viewport width, so use margin instead,
   which isn't touched by that breakpoint. */
.singular-section-title p {
  margin-bottom: 20px;
}

.singular-section-title p:last-of-type {
  margin-bottom: 0;
}

/* Nav */
.brand-logo {
  height: 60px;
  width: auto;
  display: block;
}

/* Once the toggler below is position:absolute (pinned to <header>), it's
   removed from the flex flow, so the nav column's only in-flow content
   when collapsed is the (display:none) collapse div — it naturally
   shrinks to ~0 width next to the logo instead of wrapping. No column
   width hacking needed.

   <nav> itself is position:relative in the template (used as an anchor
   for dropdowns we don't use), which would make the opened collapse
   panel size itself relative to that same shrunken column. Make <nav>
   static here so the panel below anchors to <header> instead, which
   spans the full header width. */
header nav.navbar {
  position: static;
}

.navbar-collapse.show {
  position: absolute;
  top: 100%;
  right: 20px;
  left: 20px;
  width: auto;
  margin-top: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 42, 71, 0.15);
  z-index: 15;
}

@media (max-width: 575px) {
  .brand-logo {
    height: 42px;
  }
}

/* The template originally pinned this button with position:absolute
   relative to <header> (which is position:relative), so it always sits
   at the header's top-right corner regardless of grid/flex quirks —
   independent of column widths. We keep that approach, just re-tuned for
   the new icon and bigger logo. */
.navbar-toggler {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  padding: 6px 10px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px;
  background: none;
  z-index: 20;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dark navy header, light text, matching the theme-preview look. */
header {
  background: var(--pl-navy);
}

.navbar .navbar-nav li a.nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar .navbar-nav li a.nav-link:hover,
.navbar .navbar-nav li a.nav-link:focus,
.navbar .navbar-nav li.current-menu-item a.nav-link {
  color: #fff;
}

/* The opened mobile menu is still a white dropdown card (for
   readability against its own shadow/border), so its links need to go
   back to dark text rather than inherit the light header color above. */
@media (max-width: 767px) {
  .navbar-collapse.show .navbar-nav li a.nav-link {
    color: var(--pl-ink);
  }

  .navbar-collapse.show .navbar-nav li a.nav-link:hover,
  .navbar-collapse.show .navbar-nav li a.nav-link:focus {
    color: var(--pl-blue);
  }
}

.nav-cta.btn {
  min-width: 0;
  font-size: 16px;
  padding: 10px 22px;
  margin-left: 16px;
}

/* DPD feature tiles (4-up grid under the two hero feature boxes) */
.feature-list-row {
  margin-top: 60px;
}

.flagship-cta {
  margin-top: 15px;
}

.singular-section-title a.flagship-cta,
.singular-section-title a.flagship-cta:hover,
.singular-section-title a.flagship-cta:focus {
  color: #fff;
}

.feature-tile {
  text-align: center;
  padding: 20px 10px 40px;
}

.feature-tile i {
  font-size: 40px;
  color: #316FB7;
  margin-bottom: 20px;
  display: inline-block;
}

.feature-tile h4 {
  font-size: 20px;
  font-weight: 600;
  color: #16324F;
  margin: 0 0 10px;
}

.feature-tile p {
  font-size: 15px;
  line-height: 24px;
  color: #7B7B7B;
}

/* Products section */
.product-box {
  text-align: center;
  padding: 60px 30px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 30px;
}

.product-box .product-logo {
  max-height: 45px;
  width: auto;
  margin-bottom: 25px;
}

.product-box p {
  font-size: 16px;
  line-height: 26px;
  color: #7B7B7B;
  margin-bottom: 25px;
}

.product-box.coming-soon {
  opacity: 0.65;
}

.product-box .btn.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

/* CTA band (recolored red-box-info) */
.cta-box p {
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 0;
}

.cta-action {
  text-align: right;
}

.btn-white {
  border: 2px solid #fff;
  color: #fff;
  background: none;
}

@media (max-width: 991px) {
  .cta-action {
    text-align: left;
    margin-top: 25px;
  }
}

/* Simple legal/content page */
.legal-page {
  padding: 80px 0 100px;
}

.legal-page .container {
  max-width: 860px;
}

.legal-page h1 {
  font-size: 42px;
  font-weight: 700;
  color: #16324F;
  margin-bottom: 30px;
}

.legal-page h3 {
  font-size: 20px;
  font-weight: 600;
  color: #16324F;
  margin: 35px 0 12px;
}

.legal-page p,
.legal-page li {
  font-size: 16px;
  line-height: 26px;
  color: #4a4a4a;
}

.legal-page a {
  color: #316FB7;
}

.legal-page ul {
  padding-left: 22px;
}

/* Footer accordion.
   The template's mobile footer hides each column's <ul> behind a
   click-to-expand h6 (rotating +/- chevron), which relies on JS to add a
   `.block-menu` class that we never wired up (no accordion elsewhere on
   the site). Rather than build that interaction for two short lists,
   just always show the links and drop the chevron affordance so it
   doesn't look like a broken toggle. */
@media screen and (max-width: 767px) {
  footer .footer-menu ul {
    display: block !important;
  }

  footer .footer-menu h6 {
    cursor: default;
  }

  footer .footer-menu h6:before,
  footer .footer-menu h6:after {
    display: none;
  }
}

/* Dark navy footer to match the header, light text on navy. */
footer {
  background: var(--pl-navy);
}

footer .footer-menu h6 {
  color: #fff;
}

footer .footer-menu ul li a {
  color: rgba(255, 255, 255, 0.75);
}

footer .footer-menu ul li a:hover,
footer .footer-menu ul li a:focus {
  color: #fff;
}

.singular-copyright {
  color: rgba(255, 255, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.15);
}