/* The public LOLCats pages: home.php (the gallery), picture.php and the sign-in page
   (site_lib.php). They sit in greenrobot.com's page (responsive/header.php) and borrow the
   Apps pages' look (apps/apps.css): white .section boxes and charcoal (#303030) buttons. */

.lc-page {
  text-align: left;
}

.lc-page .section {
  margin-bottom: 20px;
}

.lc-logo {
  margin: 8px 0 10px;
}

.lc-logo img {
  width: 68.1%;
}

.lc-page h1 {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: #2c3e50;
}

.lc-page h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
}

.lc-page p {
  font-size: 16px;
}

.lc-small {
  color: #555;
  font-size: 14px !important;
}

.lc-message {
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff4d6;
  color: #4a3b00;
}

/* ---- Buttons, as on the Apps pages ---- */

.lc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

.lc-page .lc-button,
.lc-page .lc-button:visited {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 2px solid #303030;
  border-radius: 6px;
  background: #303030;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.lc-page .lc-button:hover,
.lc-page .lc-button:focus {
  border-color: #000;
  background: #000;
  color: #fff;
}

.lc-page .lc-quiet,
.lc-page .lc-quiet:visited {
  background: #fff;
  color: #303030;
}

.lc-page .lc-quiet:hover,
.lc-page .lc-quiet:focus {
  background: #303030;
  color: #fff;
}

/* Facebook's own blue, as its sign-in guidelines ask. */
.lc-page .lc-facebook,
.lc-page .lc-facebook:visited {
  border-color: #1877f2;
  background: #1877f2;
}

.lc-page .lc-facebook:hover,
.lc-page .lc-facebook:focus {
  border-color: #0b5fcc;
  background: #0b5fcc;
}

.lc-page a:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* ---- The gallery ---- */

.lc-hero {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.lc-hero-icon {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 22%;
}

.lc-pitch {
  margin: 0;
  font-size: 18px !important;
}

/* G / PG / PG-13 */
.lc-ratings ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-ratings a,
.lc-ratings a:visited {
  display: block;
  padding: 8px 14px;
  border: 2px solid #ccc;
  border-radius: 999px;
  background: #fff;
  color: #303030;
  font-size: 15px;
  text-decoration: none;
}

.lc-ratings a:hover,
.lc-ratings a:focus {
  border-color: #303030;
  color: #000;
}

.lc-ratings a.is-current {
  border-color: #303030;
  background: #303030;
  color: #fff;
}

.lc-rating-note {
  margin: 8px 0 16px;
  color: #555;
}

/* Whole pictures in columns: the caption is part of the picture, often at the very top or
   bottom, so nothing is cropped. */
.lc-grid {
  columns: 4 200px;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-grid li {
  break-inside: avoid;
  margin-bottom: 16px;
}

.lc-grid a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .lc-grid a:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
  }
}

.lc-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.lc-more {
  margin: 20px 0;
  text-align: center;
}

.lc-members {
  margin: 0 0 20px;
  text-align: center;
}

/* ---- One picture ---- */

.lc-picture figure {
  margin: 0;
  text-align: center;
}

.lc-picture figure img {
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 8px;
}

.lc-picture figcaption {
  margin-top: 10px;
  font-size: 18px;
}

.lc-rated {
  margin: 8px 0 0;
  color: #555;
  text-align: center;
}

.lc-picture .lc-actions {
  justify-content: center;
}

.lc-gate {
  padding: 20px;
  border-radius: 8px;
  background: #f8f8f8;
  text-align: center;
}

.lc-signin {
  max-width: 560px;
}

/* ---- Members ---- */

.lc-page button.lc-button {
  font-family: inherit;
  cursor: pointer;
}

.lc-member-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #303030;
  color: #fff;
}

.lc-member-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-member-bar a,
.lc-member-bar a:visited {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.lc-member-bar a:hover,
.lc-member-bar a:focus,
.lc-member-bar a[aria-current="page"] {
  background: #fff;
  color: #303030;
}

.lc-badge {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f5b700;
  color: #303030;
  font-size: 13px;
  text-align: center;
}

.lc-points {
  margin: 0 0 0 auto !important;
}

.lc-signout {
  margin: 0;
}

.lc-signout button {
  padding: 6px 10px;
  border: 1px solid #888;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.lc-signout button:hover,
.lc-signout button:focus {
  border-color: #fff;
}

.lc-flash {
  padding: 10px 14px;
  border-radius: 6px;
  background: #e3f5e1;
  color: #1d4d18;
  font-weight: 700;
}

.lc-page-title {
  margin: 0 0 12px !important;
}

/* Newest / Top voted / Most favorited, and a member's tabs */
.lc-orders ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 2px solid #ddd;
  list-style: none;
}

.lc-orders a,
.lc-orders a:visited {
  display: block;
  margin-bottom: -2px;
  padding: 8px 14px;
  border-bottom: 3px solid transparent;
  color: #303030;
  font-weight: 700;
  text-decoration: none;
}

.lc-orders a:hover,
.lc-orders a:focus {
  border-bottom-color: #999;
}

.lc-orders a[aria-current="page"] {
  border-bottom-color: #303030;
}

.lc-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
}

.lc-controls form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.lc-voted {
  margin: 0;
  font-weight: 700;
}

.lc-question {
  flex-basis: 100%;
  margin: 0;
  font-weight: 700;
  text-align: center;
}

.lc-report {
  margin: 20px auto 0;
  max-width: 420px;
  text-align: left;
}

.lc-report summary {
  color: #555;
  cursor: pointer;
  text-align: center;
}

.lc-report fieldset {
  margin: 12px 0;
  padding: 0;
  border: 0;
}

.lc-report legend {
  margin-bottom: 6px;
  border: 0;
  font-size: 16px;
  font-weight: 700;
}

.lc-report label {
  display: block;
  font-weight: normal;
}

.lc-approve figure {
  margin: 16px 0 0;
  text-align: center;
}

.lc-approve figure img {
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  border-radius: 8px;
}

.lc-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.lc-pager a {
  font-weight: 700;
}

.lc-tile {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lc-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.lc-group {
  margin: 24px 0 12px !important;
}

.lc-group span {
  color: #777;
  font-weight: normal;
}

.lc-remove {
  margin: 6px 0 0;
  text-align: center;
}

.lc-remove button {
  padding: 2px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #555;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* The 728 by 90 banner, only where it fits (members_lib.php's lc_ad_banner()). */
.lc-ad {
  margin: 24px 0 0;
  text-align: center;
}

@media (max-width: 767px) {
  .lc-ad {
    display: none;
  }
}

@media (max-width: 600px) {
  .lc-hero {
    flex-direction: column;
    gap: 12px;
  }

  .lc-hero-icon {
    width: 72px;
    height: 72px;
  }

  .lc-page h1 {
    font-size: 28px;
  }

  .lc-grid {
    columns: 2;
    column-gap: 10px;
  }

  .lc-grid li {
    margin-bottom: 10px;
  }

  .lc-member-bar {
    padding: 8px;
  }

  .lc-member-bar a,
  .lc-member-bar a:visited {
    padding: 6px 7px;
    font-size: 15px;
  }
}