/*!
 * OffSEO brand palette override — v1.0 (27 Oct 2026)
 * Load AFTER css/styles2.css:
 *   <link href="css/styles2.css" rel="stylesheet">
 *   <link href="css/offseo-brand.css" rel="stylesheet">
 * Every text/background pair below meets WCAG 2.2 AA (4.5:1).
 */

/* 1. Design tokens ------------------------------------------------------- */
:root{
  --brand-500:#0B6FA8;   /* Signal blue   — nav, links, primary  (5.45:1 w/ white) */
  --brand-700:#0A5A8A;   /* Deep blue     — hero, hover          (7.39:1 w/ white) */
  --brand-100:#E0F0FA;   /* Pale blue     — tints, focus halo                      */
  --action:#1E7F3A;      /* Action green  — CTA, "good" scores   (5.06:1 w/ white) */
  --action-700:#166030;
  --warn:#F59E0B;        /* Amber         — warnings, DARK text only (6.83:1)     */
  --warn-ink:#1F2937;
  --danger:#B42318;      /* Alert red     — errors, "poor" scores (6.57:1)        */
  --ink:#0F172A;         /* Headings / body (17.85:1 on white)                     */
  --muted:#475569;       /* Captions, placeholders (7.58:1 on white)               */
  --surface:#F1F5F9;     /* Cards, footer, stripes                                 */
  --line:#E2E8F0;        /* Borders, empty ring track                              */
}

/* 2. Base text & links ---------------------------------------------------- */
body{color:var(--ink)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--ink)}
a{color:var(--brand-500)}
a:hover,a:focus{color:var(--brand-700)}
.text-muted{color:var(--muted)}
.text-primary{color:var(--brand-500)}
.text-success{color:var(--action)}
.text-danger{color:var(--danger)}
.bg-primary{background-color:var(--brand-500);color:#fff}
code{color:var(--brand-700);background-color:var(--brand-100)}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--warn);outline-offset:2px;box-shadow:none}

/* 3. Navbar (solid colour — the old gradient failed contrast) -------------- */
.navbar,.navbar-default{
  background-color:var(--brand-500)!important;background-image:none!important;
  border-color:var(--brand-700);border-bottom:1px solid var(--brand-700)}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus{color:#fff}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.open>a{background-color:var(--brand-700)!important;color:#fff}
.navbar-default .navbar-toggle{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:var(--brand-700)}
.navbar-default .navbar-toggle .icon-bar{background-color:#fff}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:var(--brand-700)}

/* 4. Hero band ---------------------------------------------------------- */
.headerCheck{background-color:var(--brand-700);color:#fff}
.headerCheck a{color:#fff;text-decoration:underline}

/* 5. Forms --------------------------------------------------------------- */
.form-control{color:var(--ink);border-color:#94A3B8}
.form-control:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.form-control::placeholder{color:var(--muted);opacity:1}
.form-control::-webkit-input-placeholder{color:var(--muted)}
.form-control::-moz-placeholder{color:var(--muted);opacity:1}
.form-control:-ms-input-placeholder{color:var(--muted)}

/* 6. Buttons ------------------------------------------------------------- */
.btn-success{color:#fff;background-color:var(--action);border-color:var(--action-700)}
.btn-success:hover,.btn-success:focus,.btn-success.focus,
.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{
  color:#fff;background-color:var(--action-700);border-color:var(--action-700)}
.btn-primary{color:#fff;background-color:var(--brand-500);border-color:var(--brand-700)}
.btn-primary:hover,.btn-primary:focus,.btn-primary.focus,
.btn-primary:active,.btn-primary.active{color:#fff;background-color:var(--brand-700);border-color:var(--brand-700)}
.btn-info{color:#fff;background-color:var(--brand-700);border-color:var(--brand-700)}
.btn-info:hover,.btn-info:focus,.btn-info:active{color:#fff;background-color:#084A72;border-color:#084A72}
.btn-warning{color:var(--warn-ink);background-color:var(--warn);border-color:#D97706}
.btn-warning:hover,.btn-warning:focus{color:var(--warn-ink);background-color:#D97706}
.btn-danger{color:#fff;background-color:var(--danger);border-color:#912018}
.btn-danger:hover,.btn-danger:focus{color:#fff;background-color:#912018}

/* 7. Panels (report page) ------------------------------------------------ */
.panel-primary,.panel-success,.panel-warning,.panel-red,.panel-info,.panel-danger{border-color:var(--line)}
.panel-primary>.panel-heading{background-color:var(--brand-500)!important;border-color:var(--brand-500);color:#fff}
.panel-success>.panel-heading{background-color:var(--action)!important;border-color:var(--action);color:#fff}
.panel-red>.panel-heading,
.panel-danger>.panel-heading{background-color:var(--danger)!important;border-color:var(--danger);color:#fff}
.panel-warning>.panel-heading{background-color:var(--warn)!important;border-color:var(--warn)}
.panel-warning>.panel-heading,.panel-warning .panel-title{color:var(--warn-ink)!important}
.panel-info>.panel-heading{background-color:var(--brand-100);border-color:var(--brand-100);color:var(--brand-700)}
.panel-info .panel-title{color:var(--brand-700)!important}

/* 8. Tables & section headers ------------------------------------------- */
.rowb{background:var(--brand-500)!important;color:#fff!important}
.rowt:nth-child(odd){background:var(--surface)}
.cell,.cell:first-child,.rowt:last-child .cell{border-color:var(--line)}
.h2table{background:var(--brand-500);color:#fff}
.table-striped>tbody>tr:nth-of-type(odd){background-color:var(--surface)}

/* 9. Status elements ---------------------------------------------------- */
#aliveornot{background-color:var(--ink);color:#fff}
.red{background-color:var(--danger)}
.green{background-color:var(--action)}
.yellow{background-color:var(--warn)}
.safe{background:var(--action)}
.unsafe{background:var(--danger)}

/* 10. Score rings (circles.js SVG) --------------------------------------
   CSS beats SVG presentation attributes, so these override the JS colours.
   Default = brand blue; offseo-scores.js adds .score-good/.score-fair/.score-poor. */
.circles-maxValueStroke{stroke:var(--line)!important}
.circles-valueStroke{stroke:var(--brand-500)!important}
.circles-text{color:var(--ink)}
.score-good  .circles-valueStroke{stroke:var(--action)!important}
.score-fair  .circles-valueStroke{stroke:var(--warn)!important}
.score-poor  .circles-valueStroke{stroke:var(--danger)!important}
.score-label{display:block;text-align:center;font-size:14px;font-weight:700;margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.score-good .score-label{color:var(--action)}
.score-fair .score-label{color:#92400E}   /* amber-800 for AA text on white (7.1:1) */
.score-poor .score-label{color:var(--danger)}

/* 11. Footer ------------------------------------------------------------ */
.footer{background-color:var(--surface);border-top:1px solid var(--line)}
.footer .text-muted{color:var(--muted)}
footer a{color:var(--ink)}
footer a:hover,footer a:focus{color:var(--brand-500)}

/* 12. Standalone tool pages ---------------------------------------------
   Several tools ship an inline <style> with `button{background:#4CAF50}`
   (2.77:1). Unclassed buttons get the action colour; higher specificity
   than the inline `button` rule, so load order doesn't matter. */
button:not([class]),
input[type="submit"]:not([class]){background-color:var(--action);border-color:var(--action-700);color:#fff}
button:not([class]):hover,button:not([class]):focus,
input[type="submit"]:not([class]):hover{background-color:var(--action-700);color:#fff}
button:not([class]):disabled{background-color:#94A3B8;color:var(--ink)}

/* 13. Page-specific tool overrides --------------------------------------
   These pages define their own button colours (Flat UI / Google palettes)
   inline. !important is used only here, to beat same-specificity inline rules.
   Long-term fix: delete those inline colour rules and use the tokens. */

/* Text Transformation tool */
.tab button.active,.button-group button.active{background-color:var(--brand-500)!important;color:#fff!important}
#transformations .button-group button{background-color:var(--brand-500)!important;color:#fff!important}
#transformations .button-group button:hover{background-color:var(--brand-700)!important}
#charCount,#wordCount,#lineCount,#readingTime{color:var(--muted)!important}
.copy-btn{background-color:var(--action)!important;color:#fff!important}
.copy-btn:hover{background-color:var(--action-700)!important}
.clear-btn{background-color:var(--danger)!important;color:#fff!important}
.clear-btn:hover{background-color:#912018!important}

/* AI Text Cleaner */
#cleanBtn{background-color:var(--brand-500)!important;color:#fff!important}
#cleanBtn:hover{background-color:var(--brand-700)!important}
#copyInputBtn,#copyOutputBtn,#copyVisualBtn{background-color:var(--action)!important;color:#fff!important}
#copyInputBtn:hover,#copyOutputBtn:hover,#copyVisualBtn:hover{background-color:var(--action-700)!important}
#clearInputBtn{background-color:var(--danger)!important;color:#fff!important}
button[data-example]{background-color:var(--warn)!important;color:var(--warn-ink)!important}
button[data-example]:hover{background-color:#D97706!important}
footer.footer{opacity:1!important;color:var(--ink)!important;text-align:left}

/* World SERP Checker */
#generateBtn,#openBtn{background-color:var(--brand-500)!important;color:#fff!important}
#generateBtn:hover,#openBtn:hover{background-color:var(--brand-700)!important}
#testBtn,#copyBtn{background-color:var(--action)!important;color:#fff!important}
#testBtn:hover,#copyBtn:hover{background-color:var(--action-700)!important}
#clearBtn{background-color:var(--danger)!important;color:#fff!important}
.selectClear{color:var(--danger)!important}