/* ============================================================
   SiteTypes — custom bridge styles.
   Restyles the live classification form (site-types__*), header
   dropdown, mobile menu, generic pages, WPForms and pagination
   in the new design language. Load AFTER theme.css.
   ============================================================ */

/* ---------- global: never allow the page itself to scroll sideways ---------- */
html,body{max-width:100%;overflow-x:clip}
img,table,figure{max-width:100%}

/* ---------- header: Use Cases dropdown ---------- */
.nav-drop{position:relative}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:6px}
.nav-drop-menu{
  position:absolute;top:calc(100% + 10px);left:-14px;min-width:280px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:60;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;color:var(--ink-2);font-weight:500}
.nav-drop-menu a:hover{background:var(--blue-soft);color:var(--blue)}

/* ---------- mobile menu ---------- */
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 20px 16px}
.mobile-menu a{display:block;padding:12px 6px;font-size:15px;font-weight:500;color:var(--ink-2);border-bottom:1px solid #f2f4f9}
.mobile-menu a:last-child{border-bottom:0}
.st-header.nav-open .mobile-menu{display:block}
@media(max-width:920px){
  .nav-right .btn{display:none}
}

/* ---------- compact hero (pages / archives) ---------- */
.hero--compact{padding:56px 0 8px;text-align:center}
.hero--compact h1{font-size:42px;margin-top:14px}
@media(max-width:920px){.hero--compact h1{font-size:32px}}
@media(max-width:520px){.hero--compact h1{font-size:27px}}

/* ============================================================
   LIVE CLASSIFICATION FORM (shortcode [site_types_request_form])
   Markup comes from Twig — IDs/classes must stay; styling only.
   ============================================================ */
.site-types__targets-wrapper{max-width:1180px;margin:36px auto 0}

/* textarea card */
.site-types__targets-box{
  max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.site-types__textarea{
  width:100%;border:0;resize:vertical;min-height:230px;padding:22px 24px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;color:var(--ink);
  outline:none;display:block;background:#fff;box-sizing:border-box;
}
.site-types__textarea::placeholder{color:var(--gray-2)}
.site-types__targets-footer{
  display:flex;justify-content:space-between;align-items:center;padding:13px 20px;
  border-top:1px solid var(--line);background:#fafbfd;font-size:13px;color:var(--gray);
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.site-types__bulk-classification-note{text-align:center;color:var(--gray);font-size:14px;margin:18px auto 0;max-width:760px}

/* analyze button */
a.site-types__bulk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:0;cursor:pointer;
  font-weight:600;font-size:16px;padding:16px 40px;border-radius:40px;
  transition:.18s;line-height:1;margin:22px auto 0;text-decoration:none;
}
a.site-types__bulk-btn:hover{background:var(--blue-dark)}
.site-types__targets-wrapper > a.site-types__bulk-btn,
.site-types__targets-wrapper > #classifyBtn{display:block;width:max-content}
a.site-types__bulk-btn--second{background:#b6a8f2}
a.site-types__bulk-btn--second:hover{background:#a594ec}
.site-types__bulk-btn--disabled{opacity:.55;pointer-events:none}
.site-types__bulk-btn--hidden{display:none!important}
.site-types__bulk-btn--loading{opacity:.75;pointer-events:none}

/* results title */
.site-types__result-form-results-title{
  font-size:32px;font-weight:800;letter-spacing:-.02em;text-align:center;margin:64px 0 28px;color:var(--ink);
}
.site-types__result-form-results-title--hidden{display:none}

/* hero titles rendered by shortcode (unused on front page but kept safe) */
.site-types__result-form-title{font-size:52px;line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:20px auto 0;max-width:760px;text-align:center}
.site-types__result-form-title mark{background:none;color:var(--blue)}
.site-types__result-form-subtitle{font-size:18px;font-weight:400;color:var(--gray);max-width:560px;margin:18px auto 0;text-align:center}

/* results table
   The form sits in the 1180px hero column, but the results table needs more
   room. Break the results box out to a wider, centered band so the full table
   is visible without horizontal scroll on a laptop. On narrow screens the
   table scrolls INSIDE its own box (contained), never the page. */
.site-types__results-box{
  margin-top:8px;
  position:relative;
  width:min(1400px, 96vw);
  margin-left:50%;
  transform:translateX(-50%);
}
.site-types__request-results{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
.site-types__request-results--table{
  width:100%;border-collapse:collapse;font-size:14px;min-width:980px;display:table;
}
/* let the long page-title column wrap so the table fits the wider band without scroll.
   NOTE 1: the general cell rule sets white-space:nowrap with higher specificity, so this
   selector must match it (table + td + cell + wrap) to win.
   NOTE 2: in auto table layout `max-width` on a cell is ignored — use `width` as the
   preferred column width so the browser actually wraps the long title text. */
.site-types__request-results--table td.site-types__request-results--table-cell.wrap{
  white-space:normal;width:280px;min-width:220px;overflow-wrap:anywhere;
}
.site-types__request-results--table th.site-types__request-results--table-cell{
  text-align:left;font-size:12px;font-weight:700;color:var(--ink);
  padding:14px 16px;border-bottom:1px solid var(--line);background:#fff;white-space:nowrap;
}
.site-types__request-results--table td.site-types__request-results--table-cell{
  padding:15px 16px;color:var(--ink-2);white-space:nowrap;border-bottom:1px solid #f2f4f9;text-align:left;
}
.site-types__request-results--table tbody tr{background:#fafbff}
.site-types__request-results--table tbody tr:hover{background:#f3f5ff}
.site-types__request-results--table td.site-types__request-results--table-cell:first-child{
  font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--blue);font-weight:600;
}
.site-types__request-results--table-cell-misclassification a{color:var(--blue);text-decoration:underline;font-size:13px}

/* row status accents */
.site-types__request-results--error-status td:first-child{color:#e0483d}
.site-types__request-results--not-applicable-status td{color:var(--gray-2)}

/* figcaption note */
.site-types__request-results--figcaption{
  padding:12px 20px;font-size:13px;color:var(--gray-2);border-top:1px solid var(--line);background:#fafbfd;
}
.site-types__request-results--figcaption em{font-style:italic}

/* messages */
.site-types__message{max-width:760px;margin:18px auto 0;padding:14px 18px;border-radius:12px;font-size:14px;text-align:center}
.site-types__message--info{background:var(--blue-soft);color:var(--blue)}
.site-types__message--error{background:#fdecea;color:#c0392b}

/* loader */
.site-types__animated-loader{display:flex;justify-content:flex-start;align-items:center;min-height:22px}
.site-types__loader{
  width:18px;height:18px;border:2px solid var(--blue-soft);border-top-color:var(--blue);
  border-radius:50%;animation:st-spin .7s linear infinite;
}
@keyframes st-spin{to{transform:rotate(360deg)}}

/* bulk action buttons row */
.site-types__bulk-classification-buttons{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.site-types__bulk-classification-buttons a.site-types__bulk-btn{margin:0}

/* modal */
.site-types__modal-fog{
  position:fixed;inset:0;background:rgba(14,20,38,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.site-types__modal-fog--hidden{display:none}
.site-types__modal{
  position:relative;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);
  max-width:480px;width:100%;padding:30px 30px 26px;text-align:left;
}
.site-types__modal-close{
  position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;line-height:1;
  color:var(--gray-2);cursor:pointer;
}
.site-types__modal-close:hover{color:var(--ink)}
.site-types__modal-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.site-types__modal-description{font-size:14px;color:var(--gray);margin:0 0 18px}
.site-types__modal-select-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray);margin:14px 0 6px}
.site-types__modal-input,
.site-types__modal-select{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;
}
.site-types__modal-input:focus,
.site-types__modal-select:focus{border-color:var(--blue)}
.site-types__modal-submit{
  margin-top:20px;width:100%;background:var(--blue);color:#fff;border:0;border-radius:10px;
  padding:13px 22px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:.18s;
}
.site-types__modal-submit:hover{background:var(--blue-dark)}

/* ============================================================
   GENERIC PAGES (submit-list, contact, terms, privacy, use cases)
   ============================================================ */
.page-block{padding:34px 0 90px}
.page-body{
  max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:44px 48px;
}
.page-body > *:first-child{margin-top:0}
.page-body p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 20px}
.page-body h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:36px 0 14px}
.page-body h3{font-size:20px;font-weight:700;margin:28px 0 10px}
.page-body ul,.page-body ol{margin:0 0 20px;padding-left:22px;color:var(--ink-2);font-size:16px;line-height:1.7}
.page-body li{margin-bottom:8px}
.page-body a:not(.btn){color:var(--blue);font-weight:600;text-decoration:underline}
.page-body img{max-width:100%;height:auto;border-radius:12px}
.page-body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px}
.page-body th{text-align:left;font-size:12px;font-weight:700;color:var(--gray-2);text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line)}
.page-body td{padding:9px 12px;border-bottom:1px solid #f2f4f9;color:var(--ink-2)}
@media(max-width:640px){.page-body{padding:28px 20px}}

/* WPForms bridge */
.page-body .wpforms-container input[type=text],
.page-body .wpforms-container input[type=email],
.page-body .wpforms-container input[type=tel],
.page-body .wpforms-container textarea,
.page-body .wpforms-container select{
  border:1px solid var(--line)!important;border-radius:10px!important;padding:12px 14px!important;
  font-family:inherit!important;font-size:15px!important;color:var(--ink)!important;background:#fff!important;
  box-shadow:none!important;max-width:100%!important;
}
.page-body .wpforms-container input:focus,
.page-body .wpforms-container textarea:focus{border-color:var(--blue)!important;outline:none!important}
.page-body .wpforms-container .wpforms-field{margin-bottom:18px!important}
.page-body .wpforms-container .wpforms-field-label{display:block!important;font-weight:600!important;font-size:14px!important;color:var(--ink)!important;margin-bottom:8px!important}
.page-body .wpforms-container input[type=text],
.page-body .wpforms-container input[type=email],
.page-body .wpforms-container textarea{width:100%!important;box-sizing:border-box!important}
.page-body .wpforms-container .wpforms-field-sublabel{font-size:12px!important;color:var(--gray-2)!important}
.page-body .wpforms-container button[type=submit]{
  background:var(--blue)!important;color:#fff!important;border:0!important;border-radius:40px!important;
  padding:15px 38px!important;font-family:inherit!important;font-weight:600!important;font-size:15px!important;
  cursor:pointer!important;transition:.18s!important;
}
.page-body .wpforms-container button[type=submit]:hover{background:var(--blue-dark)!important}

/* ============================================================
   BLOG ARCHIVE
   ============================================================ */
.block--list{padding:44px 0 90px}
.rel-grid--archive{max-width:1000px}
.rel-grid--archive .rel-thumb{height:150px;overflow:hidden}
.st-pagination{margin-top:44px;text-align:center}
.st-pagination .nav-links{display:flex;justify-content:center;gap:8px}
.st-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.st-pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.st-pagination .page-numbers:hover:not(.current){border-color:#cfd5e6}

/* blog post body: WP core blocks fine-tuning */
.body figure{margin:0 0 24px}
.body img{max-width:100%;height:auto;border-radius:12px}
.body .wp-block-table table{width:100%;border-collapse:collapse;font-size:14px}
.body .wp-block-table th{background:#fafbfd;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.body .wp-block-table td{padding:9px 12px;border-bottom:1px solid #f2f4f9}
.body ol{margin:0 0 24px;padding-left:24px;font-size:18px;line-height:1.6;color:var(--ink-2)}
.body ol li{margin-bottom:12px}

/* screen-reader helper (WP standard) */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal!important}


/* ---------- mobile menu: Use Cases accordion ---------- */
.mobile-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;padding:12px 6px;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink-2);border-bottom:1px solid #f2f4f9;text-align:left}
.mobile-group-toggle svg{transition:transform .2s ease;flex:0 0 auto}
.mobile-menu.group-open .mobile-group-toggle svg{transform:rotate(180deg)}
.mobile-group-items{display:none}
.mobile-menu.group-open .mobile-group-items{display:block}
.mobile-group-items a{padding-left:18px}


/* ---------- footer: mobile spacing ---------- */
@media(max-width:920px){
  .foot-grid{gap:24px;padding:40px 28px 28px}
  .foot-brand p{max-width:none}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr;gap:14px;padding:32px 18px 22px}
  .foot-brand{margin-bottom:8px}
  .foot-col h5{margin:12px 0 10px}
  .foot-col a{margin-bottom:8px}
  .socials{margin-top:12px}
  .foot-bottom{flex-direction:column;gap:10px;text-align:center;padding:16px 0}
  .foot-bottom span{display:block}
  .foot-bottom a{margin:0 10px}
}


/* ---------- author avatar: real photo (gravatar) ---------- */
.avatar--img{overflow:hidden;padding:0;display:inline-flex}
.avatar--img img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}