/* ==========================================================================
   PageRankCafe brand stylesheet (docs/design/style-guide.html)
   Loaded last in <head> by templates/element/head_brand.php, after
   bootstrap, gibbs.css and toast.css, and overrides them. The Inter and
   JetBrains Mono fonts are linked there too. Rollback = stop loading it.
   Brand colour #337ab7 is the blue in the PAGERANK CAFE logo.
   ========================================================================== */

:root {
  /* ---- Brand palette (see style-guide.html); generated from palette.py ---- */
  /* Cafe Blue: primary */
  --prc-blue-50: #eef5fb; --prc-blue-100: #d7e7f5; --prc-blue-200: #b6d2ec; --prc-blue-300: #88b5de; --prc-blue-400: #5c97cc; --prc-blue-500: #337ab7; --prc-blue-600: #2b6aa3; --prc-blue-700: #245f96; --prc-blue-800: #1d4f80; --prc-blue-900: #143757;
  /* Ink Violet: secondary */
  --prc-violet-50: #f4f1fd; --prc-violet-100: #e9e2fb; --prc-violet-200: #d5c8f6; --prc-violet-300: #b9a3ee; --prc-violet-400: #9d7fe2; --prc-violet-500: #8360d2; --prc-violet-600: #6c48bb; --prc-violet-700: #5a3a9c; --prc-violet-800: #47307a; --prc-violet-900: #33235a;
  /* Crema Gold: accent */
  --prc-gold-50: #fff9eb; --prc-gold-100: #feefc6; --prc-gold-200: #fcdf94; --prc-gold-300: #f8c85a; --prc-gold-400: #f0af2e; --prc-gold-500: #d9920f; --prc-gold-600: #b4740a; --prc-gold-700: #8f5b0e; --prc-gold-800: #704710; --prc-gold-900: #553710;
  /* Sky: accent */
  --prc-sky-50: #ecf9fd; --prc-sky-100: #d3f0fa; --prc-sky-200: #addff3; --prc-sky-300: #77c8e9; --prc-sky-400: #3fadd9; --prc-sky-500: #1b91c0; --prc-sky-600: #16759e; --prc-sky-700: #175f80; --prc-sky-800: #184e68; --prc-sky-900: #153d51;
  /* Slate Gray: neutral */
  --prc-gray-50: #f4f6f9; --prc-gray-100: #eceff4; --prc-gray-200: #e0e5ec; --prc-gray-300: #cdd5e0; --prc-gray-400: #9aa5b4; --prc-gray-500: #5f6b7a; --prc-gray-600: #4a5564; --prc-gray-700: #364150; --prc-gray-800: #1b2533; --prc-gray-900: #0f1a2a;
  /* Status (decision 4): no red or green. Success is Cafe Blue, warnings and
     errors are Crema Gold; every status message also carries its icon and text. */
  --prc-success: var(--prc-blue-800); --prc-success-bg: var(--prc-blue-50); --prc-success-line: var(--prc-blue-200);
  --prc-warning: #7a4d00; --prc-warning-bg: #fdf3d8; --prc-warning-line: #f2d48f;
  --prc-danger: #7a4d00; --prc-danger-bg: #fdf3d8; --prc-danger-line: #f2d48f; --prc-danger-hover: var(--prc-gold-900);

  /* ---- Roles (aliases onto the palette) ---- */
  --prc-blue: var(--prc-blue-500);        /* primary: logo blue, buttons (white text 4.6:1) */
  --prc-blue-hover: var(--prc-blue-600);
  --prc-link: var(--prc-blue-700);        /* link text, 6.7:1 on white */
  --prc-link-strong: var(--prc-blue-800);
  --prc-title-accent: var(--prc-blue-500); /* press-release and YouTube titles (#337ab7, as in prod) */
  --prc-ink: var(--prc-gray-800);         /* headings and body text */
  --prc-ink-2: var(--prc-gray-700);
  --prc-muted: var(--prc-gray-500);       /* meta text, 5.4:1 on white */
  --prc-line: var(--prc-gray-200);
  --prc-line-strong: var(--prc-gray-300);
  --prc-page: var(--prc-gray-50);
  --prc-card: #ffffff;
  --prc-row-hover: var(--prc-blue-50);
  --prc-chip: var(--prc-gray-100);
  --prc-footer: var(--prc-gray-900);
  --prc-radius: 14px;
  --prc-radius-sm: 8px;
  --prc-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
  --prc-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .10);
  --prc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base type and page ---------------------------------------------- */
body {
  font-family: var(--prc-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--prc-ink);
  background: var(--prc-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
#content { background: transparent; color: var(--prc-ink); }
h1, h2, h3, h4 { font-family: var(--prc-font); color: var(--prc-ink); letter-spacing: -0.01em; }
h1 { background: transparent; font-weight: 800; letter-spacing: -0.025em; }
a { color: var(--prc-link); transition: color .15s ease, background-color .15s ease, box-shadow .15s ease; }
a:hover, a:focus { color: var(--prc-link-strong); }
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 3px solid rgba(51, 122, 183, .45);
  outline-offset: 2px;
  border-radius: 4px;
}
.text-primary { color: var(--prc-title-accent); }
/* press-release titles keep the prod colour, matching the YouTube title */
.panel .table a[href*="/pressRelease/blog/"] { color: var(--prc-title-accent); }

/* ---- Navbar ------------------------------------------------------------ */
.navbar-wrapper .navbar-default {
  background: rgba(255, 255, 255, .92);
  background-image: none;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--prc-line);
  border-top: 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}
@media (min-width: 992px) {
  .navbar-wrapper .navbar-default { border-radius: 0 0 var(--prc-radius) var(--prc-radius); }
}
.navbar-default .navbar-brand {
  color: #333;                  /* the logo's charcoal */
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  text-shadow: none;
}
.navbar-default .navbar-brand { display: inline-flex; align-items: center; gap: 8px; }
.navbar-default .navbar-brand .brand-mark { width: 28px; height: 28px; flex: none; }
/* two-colour wordmark, as in style-guide.html */
.navbar-default .navbar-brand .word { font-weight: 800; letter-spacing: -.02em; color: #333; }
.navbar-default .navbar-brand .word span { color: var(--prc-blue-500); }
.navbar-default .navbar-brand:hover { color: #333; }
.navbar-default .navbar-nav > li > a {
  color: var(--prc-ink-2);
  font-weight: 500;
  text-shadow: none;
  border-radius: 999px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--prc-link-strong); background: var(--prc-blue-50); }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: var(--prc-link-strong);
  background: var(--prc-blue-50);
  background-image: none;
  box-shadow: none;
}
.navbar-nav .caret { margin-left: 4px; opacity: .6; }
@media (min-width: 768px) {
  .navbar-wrapper .navbar-default .navbar-nav > li > a { padding-top: 8px; padding-bottom: 8px; margin: 7px 0; }
}
/* "Add Link Now": the navbar call to action */
.navbar-default .navbar-nav > li.nav-cta > a {
  color: #fff;
  background: var(--prc-blue);
  padding-left: 16px; padding-right: 16px;
  box-shadow: 0 4px 12px rgba(51, 122, 183, .28);
}
.navbar-default .navbar-nav > li.nav-cta > a strong { font-weight: 600; }
.navbar-default .navbar-nav > li.nav-cta > a:hover,
.navbar-default .navbar-nav > li.nav-cta > a:focus { color: #fff; background: var(--prc-blue-hover); }
/* the error layout (default.php) also loads cake.generic.css, whose "#header a { color:#fff }" would hide the menu */
#header .navbar-default .navbar-nav > li:not(.nav-cta) > a, #header .dropdown-menu > li > a { color: var(--prc-ink-2); }
#header .navbar-default .navbar-nav > li:not(.nav-cta) > a:hover, #header .dropdown-menu > li > a:hover { color: var(--prc-link-strong); }
@media (max-width: 767px) {
  .navbar-default .navbar-nav > li.nav-cta > a { display: inline-block; margin: 6px 0 10px 15px; }
}
.dropdown-menu {
  border: 1px solid var(--prc-line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--prc-shadow-lg);
}
.dropdown-menu > li { margin: 0; }
.dropdown-menu > li > a { border-radius: 8px; padding: 7px 12px; color: var(--prc-ink-2); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: var(--prc-blue-50); background-image: none; color: var(--prc-link-strong); }
.navbar-default .navbar-toggle { border-color: var(--prc-line-strong); border-radius: 10px; }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--prc-ink-2); border-radius: 2px; }
.navbar-default .navbar-collapse { border-color: var(--prc-line); }

/* ---- Hero carousel (desktop only, as today) ---------------------------- */
.carousel .item {
  background-color: transparent;
}
/* the 1x1 placeholder GIF behind the hero caption is white: hide it on the gradient */
.carousel-inner > .item > img[src^="data:"] { visibility: hidden; }
/* the image slides start below the floating navbar, so their top edge is not hidden behind it */
.carousel-inner > .item > img:not([src^="data:"]) { padding-top: 56px; box-sizing: border-box; margin: 0 auto; }
/* Hero B "Brand gradient": the whole band is the Cafe Blue -> Ink Violet gradient of
   the hero images (docs/design/brand/hero/), whose panels fade into it at the edges. */
.carousel-inner {
  border-bottom: 1px solid var(--prc-line) !important;   /* inline style today: 1px gray */
  background: linear-gradient(135deg, var(--prc-blue-900) 0%, var(--prc-blue-700) 42%, var(--prc-violet-700) 78%, var(--prc-violet-600) 100%);
}
.carousel-caption { text-shadow: none; color: #fff; }
.carousel-caption h1 {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.carousel-caption p { color: var(--prc-blue-50); }
/* the H1 slide's CTA: a white button, since Cafe Blue would vanish into the band */
.carousel-caption .btn-primary,
.carousel-caption .btn-primary:focus { background: #fff; border-color: #fff; color: var(--prc-blue-800); box-shadow: 0 8px 20px rgba(15, 26, 42, .28); }
.carousel-caption .btn-primary:hover,
.carousel-caption .btn-primary:active { background: var(--prc-blue-50); border-color: var(--prc-blue-50); color: var(--prc-blue-900); }
/* the stats slide: three frosted glass cards with white text */
#infobox .panel {
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 24px rgba(15, 26, 42, .18);
}
#infobox .panel > .panel-heading { background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 -1px rgba(255, 255, 255, .2); color: #fff; }
#infobox .panel-title { color: #fff; }
#infobox .panel-body,
#infobox .panel-body a { color: #fff; }
#infobox .panel-body a:hover { color: var(--prc-gold-100); }
/* 992-1199px: the cards are ~180px wide, so tighten the titles to keep
   "Available Posts: N" and "Referral Program" on one line */
@media (min-width: 992px) and (max-width: 1199px) {
  #infobox .panel > .panel-heading,
  #infobox .panel-body { padding-left: 10px; padding-right: 10px; }
  #infobox .panel-title { font-size: 12px; letter-spacing: .04em; }
}
.carousel-control,
.carousel-control.left,
.carousel-control.right { background-image: none; text-shadow: none; opacity: 1; }
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  width: 44px; height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--prc-line);
  box-shadow: var(--prc-shadow);
  font-size: 0;                 /* draw the chevron in CSS, no icon font needed */
  transition: transform .15s ease, box-shadow .15s ease;
}
.carousel-control .glyphicon-chevron-left { margin-left: -22px; }
.carousel-control .glyphicon-chevron-right { margin-right: -22px; }
.carousel-control .glyphicon-chevron-left::before,
.carousel-control .glyphicon-chevron-right::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px;
  border: solid var(--prc-ink-2);
  border-width: 0 0 2px 2px;
}
.carousel-control .glyphicon-chevron-left::before { transform: translate(-30%, -50%) rotate(45deg); }
.carousel-control .glyphicon-chevron-right::before { transform: translate(-70%, -50%) rotate(-135deg); }
.carousel-control:hover .glyphicon { box-shadow: var(--prc-shadow-lg); transform: scale(1.05); }
.carousel-indicators li {
  width: 8px; height: 8px; margin: 0 3px;
  border: 0;
  background: rgba(255, 255, 255, .6);
  border-radius: 999px;
  transition: width .2s ease;
}
.carousel-indicators .active { width: 22px; height: 8px; margin: 0 3px; background: #fff; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border-radius: 10px; font-weight: 600; text-shadow: none; box-shadow: none; }
.btn-lg { padding: 11px 26px; font-size: 17px; border-radius: 12px; }
.btn-primary,
.btn-primary:focus {
  background: var(--prc-blue);
  background-image: none;
  border-color: var(--prc-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(51, 122, 183, .30);
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--prc-blue-hover);
  background-image: none;
  border-color: var(--prc-blue-hover);
  box-shadow: 0 8px 20px rgba(51, 122, 183, .36);
}

/* ---- Panels (sidebar widgets) -------------------------------------------- */
/* Widget headers: a 200-level palette tint with the title in the 900 shade of the
   same scale (all pairs 7.8:1 or better). Palette colours only, no red or green.
   The card outline is a box-shadow ring rather than a border, so the tint runs
   right to the rounded edge (overflow:hidden clips it). */
.panel {
  --w: var(--prc-blue-200); --wt: var(--prc-blue-900);
  border: 0;
  border-radius: var(--prc-radius);
  box-shadow: 0 0 0 1px var(--prc-line), var(--prc-shadow);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--prc-card);
}
/* A panel inside a form (the link, post-point and YouTube post forms) gets
   gibbs.css `form div { padding: .5em }`, which insets the header with a white
   gap, and its `margin-bottom: 1em` on the header div; they keep the sidebar
   widgets' flush header. */
form .panel { padding: 0; }
form .panel > .panel-heading { margin-bottom: 0; }
.panel > .panel-heading {
  padding: 12px 16px;
  border: 0 !important;
  border-radius: 0;
  background: var(--w) !important;
  background-image: none !important;
  color: var(--wt);
}
.panel-title {
  color: var(--wt);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* widget colours: matched by content, since the panels have no widget classes */
.panel-primary                                        { --w: var(--prc-blue-200); --wt: var(--prc-blue-900); } /* Sticky Links, Press Releases, YouTube Video: primary */
.panel-default                                        { --w: var(--prc-violet-200); --wt: var(--prc-violet-900); } /* Most Active Followers: secondary */
.panel-info                                           { --w: var(--prc-sky-200); --wt: var(--prc-sky-900); } /* Featured Article: accent sky */
.panel-default:has(> .table.small)                    { --w: var(--prc-gold-200); --wt: var(--prc-gold-900); } /* Site Rank: accent gold */
.panel-primary.panel-youtube { border: 0; }
.panel-primary.panel-youtube .embed-responsive { background: var(--prc-gray-900); }

/* "advertise ... here" slots: a small, quiet text link (no box) */
p.panel-body.small[align="center"] { margin: 0; padding: 4px 12px 8px; }
p.panel-body.small[align="center"] > a,
#content div.small[align="center"] > a {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--prc-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
p.panel-body.small[align="center"] > a:hover,
#content div.small[align="center"] > a:hover {
  color: var(--prc-link-strong);
  text-decoration-style: solid;
}
#content div.small[align="center"] { margin: 2px 0 2px; line-height: 1.4; }

/* ---- Tables and list rows ------------------------------------------------ */
.table { margin-bottom: 0; }
.table > tbody > tr > td { border-top: 1px solid var(--prc-line); padding: 10px 8px; }
.panel > .table > tbody > tr:first-child > td { border-top: 0; }
.panel > .table > tbody > tr > td:first-child { padding-left: 16px; }
.panel > .table > tbody > tr > td:last-child { padding-right: 16px; }
/* meta row belongs to the title row above it: no divider between them */
.table > tbody > tr.small > td { border-top: 0; padding-top: 0; color: var(--prc-muted); }
.table > tbody > tr.small small { font-size: 12px; }
.table > tbody > tr.small strong { color: var(--prc-ink-2); font-weight: 600; }
/* Sticky Links meta: a table row as on develop/prod. The "day" and "visits" cells never wrap;
   only the "added ... ago by" cell wraps; the plan badge has its own right-aligned cell. From
   992 to 1199 the col-md-3 sidebar is about 216px, too narrow for the empty cell under the icon,
   so it is hidden there (hidden-md) and the row starts at the icon's left edge. A username with
   no break point may break inside the word rather than push the row out of the panel. */
.panel > .table > tbody > tr > td:first-child[width="1"] { padding-left: 12px; }
.panel .table > tbody > tr.sticky-meta > td { padding: 0 4px 10px; line-height: 1.5; vertical-align: top; }
.panel .table > tbody > tr.sticky-meta > td:first-child { padding-left: 12px; }
.panel .table > tbody > tr.sticky-meta > td:last-child { padding-right: 12px; }
.table > tbody > tr.sticky-meta small { font-size: 11px; }
tr.sticky-meta > td.plan-cell > img { vertical-align: -3px; }
tr.sticky-meta a { overflow-wrap: anywhere; }
/* Impressions on a meta line: an eye icon (1em, currentColor) and the number, never split. */
.meta-impressions { white-space: nowrap; }
.meta-impressions > .icon-eye { vertical-align: -0.15em; }
@media (min-width: 992px) and (max-width: 1199px) {
  .panel .table > tbody > tr.sticky-meta > td.hidden-md + td { padding-left: 12px; }
}
td.plan-cell { text-align: right; }
.table > tbody > tr > td a strong,
.table > tbody > tr > td a b { font-weight: 600; }
/* hover highlights the title row and its meta row together */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover + tr.small > td,
.table > tbody > tr:has(+ tr.small:hover) > td { background: var(--prc-row-hover); }
/* avatars and link icons: round with a soft tint behind transparent icons */
.table td[width="1%"] > img,
.table td[width="1"] > img,
.table td[width="1%"] > a > img {
  border-radius: 50%;
  background: var(--prc-blue-50);
  padding: 3px;
  box-shadow: 0 0 0 1px var(--prc-line);
}
.table td[width="1%"] > img[src*="profile-pics"],
.table td[width="1%"] > a > img[src*="profile-pics"] { padding: 0; }
.table td[width="1%"] > a:hover > img { box-shadow: 0 0 0 2px var(--prc-blue); }

/* Main link list (centre column) becomes a card */
#content .col-md-6 .table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--prc-card);
  border: 1px solid var(--prc-line);
  border-radius: var(--prc-radius);
  box-shadow: var(--prc-shadow);
  overflow: hidden;
}
/* ...except a table inside a centre panel (the post forms): the panel is the card */
#content .col-md-6 .panel > .table {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#content .col-md-6 .table > tbody > tr:first-child > td { border-top: 0; }
#content .col-md-6 .table > tbody > tr > td:first-child { padding-left: 14px; }
#content .col-md-6 .table > tbody > tr > td:last-child { padding-right: 14px; }
#content .col-md-6 .table > tbody > tr:not(.small) > td { padding-top: 12px; padding-bottom: 6px; }
#content .col-md-6 .table > tbody > tr.small > td { padding-bottom: 12px; }
#content .col-md-6 .table > tbody > tr:not(.small) a { font-size: 15px; font-weight: 500; color: var(--prc-link); }
#content .col-md-6 .table > tbody > tr:not(.small) a b { font-weight: 700; }
#content .col-md-6 .table > tbody > tr:not(.small) a:hover { color: var(--prc-link-strong); text-decoration: underline; text-underline-offset: 3px; }
/* phones: keep the card inside the column (long usernames, wider type) */
@media (max-width: 767px) {
  #content .col-md-6 .table > tbody > tr > td { padding-left: 4px; padding-right: 4px; }
  #content .col-md-6 .table > tbody > tr > td:first-child { padding-left: 10px; }
  #content .col-md-6 .table > tbody > tr > td:last-child { padding-right: 10px; }
  #content .col-md-6 .table > tbody > tr:not(.small) a { font-size: 14px; }
  #content .col-md-6 .table a { overflow-wrap: anywhere; }
  #content .col-md-6 .table a[href*="report_link"] { overflow-wrap: normal; white-space: nowrap; }
}
/* "Report": quiet until hovered */
.table a[href*="report_link"] { color: var(--prc-muted); }
.table a[href*="report_link"]:hover { color: var(--prc-danger); }
/* domain shown as a chip */
@media (min-width: 992px) {
  #content .col-md-6 td.small > div.hidden-xs {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--prc-chip);
    color: var(--prc-muted);
    font-size: 11.5px;
  }
}
/* Press Releases intro: quieter, upright */
.panel .table tr.small i { font-style: normal; }
.panel .table tr.small i a { color: var(--prc-muted); }
.panel .table tr.small i a:hover { color: var(--prc-link-strong); }

/* Site Rank: group rows (a bold row starts each group), tabular numbers */
.panel > .table.small > tbody > tr > td { border-top: 0; padding-top: 5px; padding-bottom: 5px; color: var(--prc-muted); }
.panel > .table.small > tbody > tr:has(strong) > td { border-top: 1px solid var(--prc-line); padding-top: 10px; color: var(--prc-ink); }
.panel > .table.small > tbody > tr:first-child > td { border-top: 0; }
.panel > .table.small td strong { font-weight: 600; }
.panel > .table.small td[align="right"] small {
  font-size: 13px;
  font-weight: 600;
  color: var(--prc-ink);
  font-variant-numeric: tabular-nums;
}

/* Featured Article */
.panel-info .panel-body h4 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.panel-info .panel-body h4 a { color: var(--prc-ink); }
.panel-info .panel-body h4 a:hover { color: var(--prc-link-strong); }
.panel-info .panel-body p { color: var(--prc-muted); }
.panel-info > a > img { transition: opacity .2s ease; }
.panel-info > a:hover > img { opacity: .92; }

/* Banners */
#content div[align="center"] > a > img { border-radius: var(--prc-radius-sm); }

/* ---- Paging ------------------------------------------------------------- */
#content .col-md-6 > div > p { color: var(--prc-muted); font-size: 13px; margin-top: 16px; }
.paging { background: transparent; color: var(--prc-muted); }
.paging > span,
.paging .prev {
  border: 1px solid var(--prc-line);
  border-radius: 10px;
  margin: 0 6px 6px 0;
  background: var(--prc-card);
  overflow: hidden;
}
.paging > span:hover { background: var(--prc-blue-50); border-color: var(--prc-blue-100); }
.paging .current,
.paging .disabled,
.paging a { padding: 6px 12px; min-width: 36px; text-align: center; font-weight: 500; }
.paging a { color: var(--prc-ink-2); }
.paging .current { background: var(--prc-blue); color: #fff; }
.paging > span.current { border-color: var(--prc-blue); }
.paging .disabled { color: var(--prc-gray-400); }
.paging .disabled:hover { background: var(--prc-card); }

/* ---- Link viewer bar (layout/viewlink.php) -------------------------------
   cake.generic.css paints "#header a" white for its dark #003d4c body; the
   refresh body is gray-50, so the bar gets the footer band to keep its links readable. */
#header.viewer-bar { background: var(--prc-footer); color: var(--prc-gray-300); }   /* 11.8:1 */
#header.viewer-bar a { color: var(--prc-gray-200); }                                   /* 13.8:1 */
#header.viewer-bar a:hover, #header.viewer-bar a:focus { color: #fff; }
#header.viewer-bar a:focus-visible { outline-color: var(--prc-blue-300); }

/* ---- Footer -------------------------------------------------------------- */
#footer {
  background: var(--prc-footer);
  color: var(--prc-gray-300);
  padding: 28px 20px 32px;
  font-size: 13px;
  line-height: 2;
}
#footer a { color: var(--prc-gray-200); text-decoration: none; margin: 0 4px; }
#footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#footer tr:last-child td { color: var(--prc-gray-400); }   /* 6.9:1 on the footer */
/* Option A "dark brand" footer (templates/element/footer.php): reversed lockup left, links right,
   hairline, copyright. Phone: lockup, links as a 2-column grid of 44px tap rows, copyright. */
#footer:has(> .ft-a) { padding: 0; line-height: 1.5; }
.ft-a { background: var(--prc-footer); color: var(--prc-gray-300); font-size: 13.5px; text-align: left; }
.ft-a__inner { max-width: 1170px; margin: 0 auto; padding: 36px 24px 28px; }
.ft-a__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--prc-gray-800); }
#footer .ft-a__brand { display: inline-flex; line-height: 0; border-radius: 6px; margin: 0; }
.ft-a__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.ft-a__nav li { margin: 0; padding: 0; }
#footer .ft-a__nav a, .ft-a__nav span { display: inline-block; padding: 6px 0; margin: 0; font-weight: 500; }
#footer .ft-a__nav a { color: var(--prc-gray-200); text-decoration: none; }          /* 13.8:1 */
#footer .ft-a__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--prc-blue-300); }
#footer .ft-a__nav a:focus-visible, #footer .ft-a__brand:focus-visible { outline: 2px solid var(--prc-blue-300); outline-offset: 3px; border-radius: 4px; }
.ft-a__nav span { color: var(--prc-gray-400); }                                     /* 7.0:1, not a link */
.ft-a__legal { margin: 18px 0 0; color: var(--prc-gray-400); font-size: 12.5px; }
@media (max-width: 640px) {
  .ft-a__inner { padding: 32px 16px 24px; }
  .ft-a__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ft-a__nav { width: 100%; }
  .ft-a__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  #footer .ft-a__nav a, .ft-a__nav span { display: block; padding: 11px 0; min-height: 44px; }
}

/* ---- Phone heading (shown below 992px, as today) ------------------------- */
.hidden-md.hidden-lg h1 { color: var(--prc-ink); font-weight: 800; letter-spacing: -0.025em; }

/* ==========================================================================
   Site-wide: headings, forms, notices, account pages. Overrides the legacy
   gibbs.css / cake.generic.css colours (green legends and submit buttons, red
   gradients, teal and olive headings) with the style-guide palette. No red or
   green anywhere (decision 4): success is blue, warnings, errors and the
   destructive button (btn-danger) are Crema Gold, and each status message
   carries an icon as well as its text.
   ========================================================================== */
h1, h2 { background: transparent; }
h2 { font-family: var(--prc-font); color: var(--prc-ink); font-weight: 700; font-size: 26px; }
h3 { font-family: var(--prc-font); color: var(--prc-ink-2); font-weight: 700; }
h4 { color: var(--prc-ink-2); font-weight: 600; }
h1 small, h2 small, h3 small { color: var(--prc-muted); }

code { color: var(--prc-violet-700); background: var(--prc-violet-50); border-radius: 4px; }
pre { color: var(--prc-ink); background: var(--prc-gray-50); border-color: var(--prc-line); border-radius: var(--prc-radius-sm); }

/* ---- Forms -------------------------------------------------------------- */
fieldset legend {
  color: var(--prc-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--prc-line);
  padding-bottom: 8px;
}
fieldset fieldset legend { color: var(--prc-ink-2); font-weight: 600; }
label { color: var(--prc-ink-2); font-weight: 600; }
input, textarea, select { font-family: var(--prc-font); color: var(--prc-ink); }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=search], input[type=tel], textarea, select, .form-control {
  border: 1px solid var(--prc-line-strong);
  border-radius: var(--prc-radius-sm);
  background-color: #fff;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--prc-blue-400);
  box-shadow: 0 0 0 3px rgba(51, 122, 183, .18);
  outline: 0;
}
/* every submit button, legacy (gibbs grey or green gradient) or Bootstrap, is a primary button */
input[type=submit], form .submit input[type=submit] {
  background: var(--prc-blue);
  background-image: none;
  border: 1px solid var(--prc-blue);
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  padding: 8px 20px;
  cursor: pointer;
}
input[type=submit]:hover, form .submit input[type=submit]:hover,
input[type=submit]:focus, form .submit input[type=submit]:focus {
  background: var(--prc-blue-hover);
  border-color: var(--prc-blue-hover);
  color: #fff;
}
input[type=submit].btn-danger, form .submit input[type=submit].btn-danger { background: var(--prc-danger); border-color: var(--prc-danger); }
input[type=submit].btn-danger:hover, form .submit input[type=submit].btn-danger:hover { background: #912018; border-color: #912018; }
/* legacy grey "actions" links */
.actions ul li a, .actions a {
  background: #fff;
  background-image: none;
  border: 1px solid var(--prc-line-strong);
  border-radius: var(--prc-radius-sm);
  color: var(--prc-ink-2);
  text-shadow: none;
  box-shadow: none;
}
.actions ul li a:hover, .actions a:hover { background: var(--prc-blue-50); border-color: var(--prc-blue-200); color: var(--prc-link-strong); }

/* ---- Buttons: success and danger ------------------------------------------- */
.btn-success, .btn-success:focus {
  background: var(--prc-blue); background-image: none; border-color: var(--prc-blue); color: #fff;
}
.btn-success:hover, .btn-success:active { background: var(--prc-blue-hover); border-color: var(--prc-blue-hover); color: #fff; }
.btn-danger, .btn-danger:focus {
  background: var(--prc-danger); background-image: none; border-color: var(--prc-danger); color: #fff;
}
.btn-danger:hover, .btn-danger:active { background: var(--prc-danger-hover); border-color: var(--prc-danger-hover); color: #fff; }
.btn-default { background: #fff; background-image: none; border-color: var(--prc-line-strong); color: var(--prc-ink-2); }
.btn-default:hover, .btn-default:focus { background: var(--prc-blue-50); border-color: var(--prc-blue-200); color: var(--prc-link-strong); }
.label-success { background-color: var(--prc-blue); }
.label-danger { background-color: var(--prc-danger); }
.label-warning { background-color: var(--prc-gold-600); }
.badge { background-color: var(--prc-blue); }

/* ---- Alerts and notices (the only place success/danger tokens appear) ---- */
.alert { border-radius: var(--prc-radius-sm); background-image: none; box-shadow: none; text-shadow: none; }
.alert-success { background: var(--prc-success-bg); border-color: var(--prc-success-line); color: var(--prc-success); }
.alert-danger  { background: var(--prc-danger-bg);  border-color: var(--prc-danger-line);  color: var(--prc-danger); }
.alert-warning { background: var(--prc-warning-bg); border-color: var(--prc-warning-line); color: var(--prc-warning); }
.alert-info    { background: var(--prc-blue-50);    border-color: var(--prc-blue-200);     color: var(--prc-blue-900); }
.message, .success, p.error, .error-message, .notice, .cake-error {
  background: var(--prc-warning-bg);
  background-image: none;
  border: 1px solid var(--prc-warning-line);
  border-radius: var(--prc-radius-sm);
  color: var(--prc-warning);
  text-shadow: none;
  box-shadow: none;
  font-family: var(--prc-font);
}
.success { background: var(--prc-success-bg); border-color: var(--prc-success-line); color: var(--prc-success); }
p.error, .error-message, .cake-error { background: var(--prc-danger-bg); border-color: var(--prc-danger-line); color: var(--prc-danger); }
p.error { font-size: 15px; padding: 12px 16px; }
p.error strong { font-weight: 700; }
form .error-message { background: transparent; border: 0; padding: 4px 0 0; font-size: 13px; font-weight: 600; }
form .error { background: transparent; color: var(--prc-danger); }
form .error input, form .error textarea, form .error select { border-color: var(--prc-danger); }
/* toast flash messages (toast.css) */
.toast { font-family: var(--prc-font); font-weight: 600; border-radius: var(--prc-radius-sm); box-shadow: var(--prc-shadow-lg); }
.toast-success { background: var(--prc-success-bg); border-color: var(--prc-success); color: var(--prc-success); }
.toast-error   { background: var(--prc-danger-bg);  border-color: var(--prc-danger);  color: var(--prc-danger); }
.toast-info    { background: var(--prc-blue-50);    border-color: var(--prc-blue);    color: var(--prc-blue-900); }

/* status icons: a filled circle in the message colour, a tick for success and
   "!" for warnings and errors, so a state never relies on colour alone */
.alert-success::before, .alert-danger::before, .alert-warning::before,
.toast-success .toast-text::before, .toast-error .toast-text::before,
div.success::before, p.error::before, .cake-error::before {
  content: "!"; display: inline-block; width: 18px; height: 18px; margin-right: 8px;
  border-radius: 50%; background: currentColor; text-align: center;
  font: 700 12px/18px var(--prc-font); vertical-align: 1px;
  -webkit-text-fill-color: #fff;
}
.alert-success::before, .toast-success .toast-text::before, div.success::before { content: "\2713"; }

/* ---- Bootstrap contextual panels and list groups ------------------------- */
.panel-success { --w: var(--prc-blue-200);   --wt: var(--prc-blue-900); }   /* account menu, API key */
.panel-danger  { --w: var(--prc-gold-200);   --wt: var(--prc-gold-900); }   /* posting rules, banner formats */
.panel-warning { --w: var(--prc-gold-200);   --wt: var(--prc-gold-900); }
.list-group-item { border-color: var(--prc-line); }
.panel > .list-group .list-group-item { border-left: 0; border-right: 0; }
.list-group-item > a { color: var(--prc-link); }
.nav-tabs { border-bottom-color: var(--prc-line); }
.nav-tabs > li > a { color: var(--prc-ink-2); border-radius: 10px 10px 0 0; }
.nav-tabs > li > a:hover { background: var(--prc-blue-50); border-color: transparent; color: var(--prc-link-strong); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--prc-blue-800); border-color: var(--prc-line) var(--prc-line) transparent; font-weight: 600;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--prc-blue); }

/* ---- Legacy widgets in gibbs.css ----------------------------------------- */
div.infoboxheader { background-color: var(--prc-blue); }
.coin-badge { background-color: var(--prc-gold-200); color: var(--prc-gold-900); }
.coin-badge:hover { background-color: var(--prc-gold-300); }
.payment-option { border-color: var(--prc-line-strong); border-radius: var(--prc-radius-sm); }
.payment-option:hover { border-color: var(--prc-blue-300); background: var(--prc-blue-50); }
.payment-option.selected { border-color: var(--prc-blue); background: var(--prc-blue-50); }
.payment-option-name { color: var(--prc-ink); }
.payment-option-radio::after { background: var(--prc-blue); }
.payment-option.selected .payment-option-radio { border-color: var(--prc-blue); }

/* ---- Blog list cards: give the article rows room inside the card -------- */
/* templates/element/press_release_index.php: a Bootstrap .row inside each cell
   has -15px margins that pushed the text to the card edge */
#content .col-md-6 .table td > .row { margin: 0; padding: 6px 6px 2px; }
#content .col-md-6 .table td > .row h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
#content .col-md-6 .table td > .row h2 a { font-size: inherit; font-weight: 700; color: var(--prc-ink); }
#content .col-md-6 .table td > .row h2 a:hover { color: var(--prc-link-strong); }
#content .col-md-6 .table td > .row p { color: var(--prc-ink-2); font-size: 14px; }
#content .col-md-6 .table td > .row p:last-child a { font-size: 14px; font-weight: 600; }

/* ---- Membership plan cards (templates/Users/membership_info.php) -------- */
.users .card { border-radius: var(--prc-radius); overflow: hidden; margin-bottom: 24px; }
.users .card h4 { color: var(--prc-ink); font-weight: 800; font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---- Contrast fixes found in the logged-in walk-through ------------------- */
.text-muted { color: var(--prc-muted); }                          /* bootstrap #777 was 4.1:1 on grey-50 */
font[color="#bdbdbd"] { color: var(--prc-muted); }                /* "(regular price ...)" on the post price lists, was 1.9:1 */
code, pre, kbd, samp { font-family: "JetBrains Mono", ui-monospace, monospace; }
.help-block { color: var(--prc-muted); }                          /* bootstrap #737373 was 4.4:1 on grey-50 */
/* the price lists print "(regular price ...)" in white when there is no discount,
   to hide it; on a highlighted row it showed through, so take it out instead */
font[color="#FFFFFF"] { display: none; }

/* ---- Post Link: running view credit total (templates/LinkPosts/add.php) -- */
.link-post-total {
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--prc-blue-50); border: 1px solid var(--prc-blue-200); border-radius: var(--prc-radius-sm);
  color: var(--prc-ink-2); font-size: 15px;
}
.link-post-total-value { color: var(--prc-blue-800); font-size: 18px; font-weight: 800; }
.link-post-total[hidden] { display: none; }
/* legacy `form div` padding (.5em) inset the Submit button; flush it with the total and the panels */
.linkPosts.form form div.submit { padding-left: 0; padding-right: 0; }