/* Patent Flow -- public landing + login pages.
   Palette matches patflow/base.html so the logged-out pages and the app read as
   one product: #2c3e50 dark, #5f7080 active, #ecf0f1 light, #bdc3c7 muted,
   #f8f8f8 section ground, #dcdfe1/#ddd borders, #337ab7 primary. */

/* ---------------------------------------------------------------- layout */
html, body { height: 100%; margin: 0; }

body.pf-public {
    display: flex;
    flex-direction: column;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
}

.pf-public #main-content-wrapper {
    flex: 1 0 auto;
    padding-top: 50px; /* fixed-top navbar */
}

/* ---------------------------------------------------------------- navbar */
.navbar-custom {
    background-color: #2c3e50;
    border-color: #2c3e50;
    min-height: 50px;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav > li > a { color: #ecf0f1; }
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus { color: #ffffff; background-color: #5f7080; }
.navbar-custom .navbar-brand:hover { color: #ffffff; }
.navbar-custom .navbar-toggle { border-color: #5f7080; }
.navbar-custom .navbar-toggle .icon-bar { background-color: #ecf0f1; }
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus { background-color: #5f7080; }
.navbar-custom .navbar-collapse { border-color: #5f7080; }

/* The CTA is a button, so it must not inherit .navbar-nav > li > a's 15px padding
   or transparent hover -- that would blow it up to the full navbar height. */
.navbar-custom .navbar-nav > li > a.pf-nav-cta,
.navbar-custom .navbar-nav > li > a.pf-nav-cta:hover,
.navbar-custom .navbar-nav > li > a.pf-nav-cta:focus {
    padding: 6px 14px;
    margin-left: 8px;
    color: #ffffff;
    background-color: #337ab7;
    border-color: #2e6da4;
    border-radius: 4px;
}
.navbar-custom .navbar-nav > li > a.pf-nav-cta:hover,
.navbar-custom .navbar-nav > li > a.pf-nav-cta:focus { background-color: #286090; }

/* ------------------------------------------------------------------ hero */
.pf-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2c3e50 0%, #1c2b38 100%);
    color: #ecf0f1;
    padding: 70px 0 60px;
}
.pf-hero-net {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.35;
}
.pf-hero-links path { stroke-opacity: 0.35; }
.pf-hero-nodes circle { fill-opacity: 0.8; }

.pf-hero-inner { position: relative; }

.pf-hero-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px;
    max-width: 820px;
}
.pf-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: #bdc3c7;
    max-width: 720px;
    margin-bottom: 28px;
}
.pf-hero-cta { margin-bottom: 12px; }
.pf-hero-cta .btn { margin: 0 10px 10px 0; }

.pf-btn-ghost,
.pf-btn-ghost:focus {
    background: transparent;
    border-color: #7f8c8d;
    color: #ecf0f1;
}
.pf-btn-ghost:hover { background: rgba(236, 240, 241, 0.12); border-color: #ecf0f1; color: #ffffff; }

.pf-hero-note { font-size: 13px; color: #bdc3c7; margin: 0; }
.pf-hero-note a { color: #5dade2; }

/* -------------------------------------------------------------- sections */
.pf-section { padding: 60px 0; }
.pf-section-light { background-color: #f8f8f8; border-top: 1px solid #dcdfe1; border-bottom: 1px solid #dcdfe1; }
.pf-section-dark { background-color: #2c3e50; color: #ecf0f1; }
.pf-section-dark .pf-section-title { color: #ffffff; }
.pf-section-dark .pf-section-lead { color: #bdc3c7; }
.pf-section-dark .pf-hero-note { margin-top: 14px; }

.pf-section-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 14px;
    color: #2c3e50;
}
.pf-section-lead {
    font-size: 16px;
    line-height: 1.65;
    color: #5f7080;
    max-width: 800px;
    margin-bottom: 34px;
}
.pf-section-dark .pf-section-lead { margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------------- video */
.pf-video-frame {
    border: 1px solid #dcdfe1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(44, 62, 80, 0.12);
    background: #000;
}
/* Plyr accent, so the player matches the rest of the page. */
.plyr { --plyr-color-main: #337ab7; }

/* ----------------------------------------------------------------- stats */
/* Bootstrap 3 columns are floats, so tiles of differing height snag on each
   other and height:100% has nothing to resolve against. Flex the row instead:
   the tiles then stretch to a common height per row. */
.pf-stats {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* The gap lives on the column so the tile itself can fill the stretched height
   without its own margin pushing past the bottom. */
.pf-stats > [class*="col-"] {
    display: flex;
    padding-bottom: 22px;
}

.pf-stat {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dcdfe1;
    border-top: 3px solid #337ab7;
    border-radius: 3px;
    padding: 22px 18px;
    text-align: center;
}

.pf-stat-num {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: #2c3e50;
}
.pf-plus { color: #337ab7; }
.pf-stat-label {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-top: 6px;
}
.pf-stat-sub { font-size: 12.5px; color: #7f8c8d; margin-top: 3px; }

.pf-stats-note { font-size: 13px; color: #7f8c8d; margin: 0; }

/* -------------------------------------------------------------- features */
.pf-feature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 34px 0;
    border-bottom: 1px solid #dcdfe1;
}
.pf-feature:last-child { border-bottom: 0; }
.pf-feature-flip { flex-direction: row-reverse; }

.pf-feature-copy h3 {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px;
}
.pf-feature-copy p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #5f7080;
    margin: 0;
}

/* Placeholder platform mock-ups. Swap for real screenshots by replacing the
   .pf-mock panel with <img class="img-responsive pf-shot" src="..."> */
.pf-mock {
    box-shadow: 0 2px 10px rgba(44, 62, 80, 0.10);
    margin-bottom: 0;
    background: #ffffff;
}
.pf-mock .panel-heading {
    font-size: 12.5px;
    font-weight: 600;
    color: #5f7080;
    background: #f8f8f8;
    padding: 8px 14px;
}
.pf-shot { border: 1px solid #dcdfe1; border-radius: 4px; box-shadow: 0 2px 10px rgba(44, 62, 80, 0.10); }

/* mock: applicant -> origin firm -> NP firm chain */
.pf-mock-chain { text-align: center; }
.pf-chip {
    display: block;
    border: 1px solid #dcdfe1;
    border-left: 4px solid #337ab7;
    border-radius: 3px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 14px;
    color: #2c3e50;
    text-align: left;
    background: #ffffff;
}
.pf-chip small { display: block; font-weight: 400; color: #7f8c8d; }
.pf-chip-origin { border-left-color: #f0ad4e; }
.pf-chip-np { border-left-color: #5cb85c; }
.pf-chain-arrow { color: #bdc3c7; padding: 5px 0; }

/* mock: ranked volume bars */
.pf-bar-row { display: flex; align-items: center; margin-bottom: 10px; }
.pf-bar-row:last-child { margin-bottom: 0; }
.pf-bar-name { width: 70px; flex: none; font-size: 12.5px; color: #5f7080; }
.pf-bar { flex: 1 1 auto; height: 12px; background: #ecf0f1; border-radius: 2px; }
.pf-bar > i { display: block; height: 100%; background: #337ab7; border-radius: 2px; }

/* mock: results table */
.pf-mock-table-wrap { overflow-x: auto; }
.pf-mock-table { font-size: 12.5px; margin-bottom: 0; white-space: nowrap; }
.pf-mock-table > thead > tr > th { color: #5f7080; border-bottom-width: 1px; }
.pf-cell-link { color: #337ab7; text-decoration: underline; }

/* mock: raw vs cleaned names */
.pf-mock-clean { text-align: center; }
.pf-raw-chip {
    display: inline-block;
    background: #f8f8f8;
    border: 1px dashed #bdc3c7;
    border-radius: 2px;
    color: #7f8c8d;
    font-size: 12.5px;
    padding: 3px 8px;
    margin: 0 4px 6px 0;
}
.pf-clean-out {
    display: inline-block;
    background: #dff0d8;
    border: 1px solid #5cb85c;
    border-radius: 3px;
    color: #2c3e50;
    font-weight: 600;
    padding: 8px 16px;
}

/* ------------------------------------------------------------------- FAQ */
.pf-faq .panel { box-shadow: none; }
.pf-faq .panel-heading { background: #ffffff; padding: 0; }
.pf-faq .panel-title > a {
    display: block;
    padding: 14px 18px;
    font-size: 15.5px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
}
.pf-faq .panel-title > a:hover { color: #337ab7; }
.pf-faq .panel-title > a:after {
    content: "\2212"; /* minus */
    float: right;
    color: #bdc3c7;
    font-weight: 400;
}
.pf-faq .panel-title > a.collapsed:after { content: "\002b"; /* plus */ }
.pf-faq .panel-body { color: #5f7080; line-height: 1.7; border-top-color: #dcdfe1; }

/* ----------------------------------------------------------------- login */
.pf-login-wrap {
    background: #f8f8f8;
    min-height: calc(100vh - 50px - 45px); /* viewport less navbar and footer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 15px;
}
.pf-login-card {
    width: 100%;
    max-width: 390px;
    background: #ffffff;
    border: 1px solid #dcdfe1;
    border-top: 3px solid #337ab7;
    border-radius: 3px;
    padding: 30px 28px 24px;
    box-shadow: 0 2px 14px rgba(44, 62, 80, 0.10);
}
.pf-login-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin: 0 0 4px; text-align: center; }
.pf-login-sub { color: #7f8c8d; text-align: center; margin-bottom: 24px; }
.pf-login-card label { color: #5f7080; font-size: 13px; }
.pf-login-card .btn-primary { margin-top: 6px; }
.pf-login-help { font-size: 12.5px; color: #7f8c8d; text-align: center; margin: 14px 0 0; }

.pf-password-field { position: relative; }
.pf-password-field .form-control { padding-right: 62px; }
.pf-password-toggle {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #337ab7;
    font-size: 12.5px;
}
.pf-password-toggle:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- footer */
.footer-custom {
    flex-shrink: 0;
    background-color: #ecf0f1;
    border-top: 1px solid #dcdfe1;
    padding: 12px 0;
}
.footer-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px)  { .footer-container { width: 750px; } }
@media (min-width: 992px)  { .footer-container { width: 970px; } }
@media (min-width: 1200px) { .footer-container { width: 1170px; } }
.footer-custom .text-muted { margin: 0; font-size: 13px; color: #2c3e50; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 991px) {
    .pf-hero-title { font-size: 32px; }
    .pf-feature-visual { margin-top: 26px; }
}
@media (max-width: 767px) {
    .pf-hero { padding: 45px 0 40px; }
    .pf-hero-title { font-size: 26px; }
    .pf-hero-sub { font-size: 15.5px; }
    .pf-section { padding: 40px 0; }
    .pf-section-title { font-size: 23px; }
    .pf-hero-cta .btn { display: block; width: 100%; margin-right: 0; }
    /* Stacked columns must keep copy above the mock, flip or not. */
    .pf-feature, .pf-feature-flip { display: block; }
    .navbar-custom .navbar-nav > li > a.pf-nav-cta { display: inline-block; margin: 6px 15px; }
    .footer-custom .text-muted .pull-right { float: none !important; display: block; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-bar > i { transition: none !important; }
}