/*==================================================
 Theme Name: JPR
==================================================*/

/*==================================================
 Table of Contents
====================================================
 Theme Colors
 Universal Box-Sizing Rule
 Base Styles
 Site Wrapper / Container
 Banner
 Top Menu
 Footer
 Sprite Image
 Site List - Home Page / Sidebar / four-column-grid
 three-column-grid
 review-card
 visit-site-box
 Sidebar - <h3> / sidebar-box / view-all-box-sidebar
 grey-box-border
 Spacing Between Sections
 Page Specific Padding Adjustments
 Post - review-section-1
 Post - review-section-2
 Post - post-publish-date
 Post - site-tags-wrapper
 Post - <h3> support-wrapper
 Post - save-link-box
 Review Header / Affiliate Disclosure
 Review Score Badge Overlay
 Deal Badge Overlay
 Deals Link Styling
 Post - External Image Link Overlay
 Page Info
 Post / Page Info - <h2> headers
 Page Info - <h3> subheaders
 Bullet Lists - Post / Page Info
 categories-grid - Home / Categories / Category
 Contact Page
 Mobile - Home Page - four-column-grid
 Mobile - Posts
 Mobile - three-column-grid
 Mobile - Page Info Pages
 Mobile - categories-grid
 Mobile - visit-site-box / view-all-box-sidebar
==================================================*/

/*--------------------------------------------------
 Theme Colors
--------------------------------------------------*/
:root {
  /* Brand Colors */
  --color-primary: #6b53e0;
  --color-primary-light: #7c65ef;
  --color-primary-dark: #5140b0;  
  --color-link: #866cff;
  --color-discount: #fdd703;

  /* Gradients */
  --gradient-primary: linear-gradient(
    to bottom,
    var(--color-primary-light) 0%,
    var(--color-primary) 50%,
    var(--color-primary-dark) 100%
  );  

  /* Neutrals */
  --color-bg-dark: #111111;
  --color-bg-light: #ffffff;

  /* Grays */
  --color-box-bg: #f2f2f2;
  --color-box-border: #d9d9d9;
  --color-text: #333333;
  --color-text-muted: #777777;
}

/*--------------------------------------------------
 Universal Box-Sizing Rule
--------------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
 Base Styles
--------------------------------------------------------------*/
html {
  margin: 0; 
  overflow-y: scroll;  
  font-size: 16px; /* root font size (1rem = 16px baseline) */
  scroll-behavior: smooth;
}

body {
  color: var(--color-bg-dark);
  background-color: var(--color-bg-dark);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  margin: 0;
}

a { 
  color: var(--color-link);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-bg-dark);
} 

ul,
ol,
ul li,
ol li {
  list-style: none; 
  margin: 0;        
  padding: 0;       
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.1rem;
}

/*--------------------------------------------------
 Site Wrapper / Container
--------------------------------------------------*/
.site-wrapper {
  background-color: var(--color-bg-dark);
  margin: 0 auto;
}

.site-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background-color: var(--color-bg-light);
}

.page-content {
  display: flex;
  margin: 0px;
}

.main {
  flex: 1;          
  padding: 0 20px 20px 20px;
}

.sidebar {
  flex: 0 0 285px; 
  padding: 20px 20px 20px 0;
}

/*--------------------------------------------------
 Banner
--------------------------------------------------*/
.site-banner {
  text-align: center;
  padding: 2px 20px 0 20px;
  background-color: var(--color-bg-dark);         
}

.site-banner .site-title {
  margin: 0;
  line-height: 1;
  font-size: 1.82rem;
  letter-spacing: 0.03em;     
}

.site-banner .site-tagline {
  color: var(--color-box-bg);
  margin: 0;
  padding-bottom: 4px;
  line-height: 1; 
  font-size: 0.75rem; 
}

.site-banner .site-banner-link {
  color: var(--color-primary); 
  display: inline-block;   
}

.site-banner .site-banner-link:hover {
  color: var(--color-link);  
}

.site-banner .site-banner-link:hover .site-tagline {
  color: var(--color-bg-light);
}

/*--------------------------------------------------
 Footer
--------------------------------------------------*/
.site-footer {
  background-color: var(--color-box-bg);
  text-align: center;
  border-top: 1px solid var(--color-box-border);
}

.site-footer p {
  margin: 0; /* removes default bottom margin */
  padding: 20px 10px; /* add padding for spacing instead */
}

/*--------------------------------------------------
 Top Menu
--------------------------------------------------*/
.primary-menu {
  background: var(--gradient-primary);
  height: 40px; /* fixed height for menu bar */
}

.primary-menu .menu {
  display: flex;           
  list-style: none;        
  margin: 0;               
  padding: 0;             
  height: 100%;             
}

.primary-menu .menu li {
  height: 100%;             
  display: flex;            
}

.primary-menu .menu a {
  display: block;           
  height: 100%;             
  line-height: 40px; /* vertically centers text */
  text-decoration: none;   
  color: var(--color-bg-light);      
  font-weight: bold;
  text-transform: uppercase;     
  text-align: center;       
  padding: 0 20px; /* horizontal spacing inside the clickable area */ 
}

.primary-menu .menu a.active,
.primary-menu .menu .current-menu-item a,
.primary-menu .menu a:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-bg-light);
}

/*--------------------------------------------------
  Sprite Image
--------------------------------------------------*/
.site-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('images/icons/sprite.png');
  background-repeat: no-repeat;
  vertical-align: middle;
  background-size: 24px auto; /* scales 32px -> 24px without changing <li> height */
}

.pro-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('images/icons/sprite.png');
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: 0 -0.5px; /* green check position */
  margin-right: 5px;
  background-size: 12px auto; 
  position: relative; 
  top: -1px; /* tweak this number up or down slightly */  
}

.con-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('images/icons/sprite.png');
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: 0 -13.25px; /* red X position */
  margin-right: 5px;
  background-size: 12px auto; 
  position: relative; 
  top: -1.5px; /* tweak this number up or down slightly */    
}

.pros-list li,
.cons-list li {
  display: flex; 
  align-items: center; /* vertically center icon with text */
}

/* icon positions (32px icon scaled to 24px, slot = 34px with 1px buffer top/bottom) */
.site-icon-pro   { background-position: 0 -0.75px; }
.site-icon-con   { background-position: 0 -26.25px; }
.site-icon-0001  { background-position: 0 -51.75px; }
.site-icon-0002  { background-position: 0 -77.25px; }
.site-icon-0003  { background-position: 0 -102.75px; }
.site-icon-0004  { background-position: 0 -128.25px; }
.site-icon-0005  { background-position: 0 -153.75px; }
.site-icon-0006  { background-position: 0 -179.25px; }
.site-icon-0007  { background-position: 0 -204.75px; }
.site-icon-0008  { background-position: 0 -230.25px; }
.site-icon-0009  { background-position: 0 -255.75px; }
.site-icon-0010  { background-position: 0 -281.25px; }
.site-icon-0011  { background-position: 0 -306.75px; }
.site-icon-0012  { background-position: 0 -332.25px; }
.site-icon-0013  { background-position: 0 -357.75px; }
.site-icon-0014  { background-position: 0 -383.25px; }
.site-icon-0015  { background-position: 0 -408.75px; }
.site-icon-0016  { background-position: 0 -434.25px; }
.site-icon-0017  { background-position: 0 -459.75px; }
.site-icon-0018  { background-position: 0 -485.25px; }
.site-icon-0019  { background-position: 0 -510.75px; }
.site-icon-0020  { background-position: 0 -536.25px; }
.site-icon-0021  { background-position: 0 -561.75px; }
.site-icon-0022  { background-position: 0 -587.25px; }
.site-icon-0023  { background-position: 0 -612.75px; }
.site-icon-0024  { background-position: 0 -638.25px; }
.site-icon-0025  { background-position: 0 -663.75px; }
.site-icon-0026  { background-position: 0 -689.25px; }
.site-icon-0027  { background-position: 0 -714.75px; }
.site-icon-0028  { background-position: 0 -740.25px; }
.site-icon-0029  { background-position: 0 -765.75px; }
.site-icon-0030  { background-position: 0 -791.25px; }
.site-icon-0031  { background-position: 0 -816.75px; }
.site-icon-0032  { background-position: 0 -842.25px; }
.site-icon-0033  { background-position: 0 -867.75px; }
.site-icon-0034  { background-position: 0 -893.25px; }
.site-icon-0035  { background-position: 0 -918.75px; }
.site-icon-0036  { background-position: 0 -944.25px; }
.site-icon-0037  { background-position: 0 -969.75px; }
.site-icon-0038  { background-position: 0 -995.25px; }
.site-icon-0039  { background-position: 0 -1020.75px; }
.site-icon-0040  { background-position: 0 -1046.25px; }
.site-icon-0041  { background-position: 0 -1071.75px; }
.site-icon-0042  { background-position: 0 -1097.25px; }
.site-icon-0043  { background-position: 0 -1122.75px; }
.site-icon-0044  { background-position: 0 -1148.25px; }
.site-icon-0045  { background-position: 0 -1173.75px; }
.site-icon-0046  { background-position: 0 -1199.25px; }
.site-icon-0047  { background-position: 0 -1224.75px; }
.site-icon-0048  { background-position: 0 -1250.25px; }
.site-icon-0049  { background-position: 0 -1275.75px; }
.site-icon-0050  { background-position: 0 -1301.25px; }
.site-icon-0051  { background-position: 0 -1326.75px; }
.site-icon-0052  { background-position: 0 -1352.25px; }
.site-icon-0053  { background-position: 0 -1377.75px; }
.site-icon-0054  { background-position: 0 -1403.25px; }
.site-icon-0055  { background-position: 0 -1428.75px; }
.site-icon-0056  { background-position: 0 -1454.25px; }
.site-icon-0057  { background-position: 0 -1479.75px; }
.site-icon-0058  { background-position: 0 -1505.25px; }
.site-icon-0059  { background-position: 0 -1530.75px; }
.site-icon-0060  { background-position: 0 -1556.25px; }
.site-icon-0061  { background-position: 0 -1581.75px; }
.site-icon-0062  { background-position: 0 -1607.25px; }
.site-icon-0063  { background-position: 0 -1632.75px; }
.site-icon-0064  { background-position: 0 -1658.25px; }
.site-icon-0065  { background-position: 0 -1683.75px; }
.site-icon-0066  { background-position: 0 -1709.25px; }
.site-icon-0067  { background-position: 0 -1734.75px; }
.site-icon-0068  { background-position: 0 -1760.25px; }
.site-icon-0069  { background-position: 0 -1785.75px; }
.site-icon-0070  { background-position: 0 -1811.25px; }
.site-icon-0071  { background-position: 0 -1836.75px; }
.site-icon-0072  { background-position: 0 -1862.25px; }
.site-icon-0073  { background-position: 0 -1887.75px; }
.site-icon-0074  { background-position: 0 -1913.25px; }
.site-icon-0075  { background-position: 0 -1938.75px; }
.site-icon-0076  { background-position: 0 -1964.25px; }
.site-icon-0077  { background-position: 0 -1989.75px; }
.site-icon-0078  { background-position: 0 -2015.25px; }

/*--------------------------------------------------
 Site List - Home Page / Sidebar / four-column-grid 
--------------------------------------------------*/
.four-column-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.column-box {
  padding: 10px 5px; 
}

.column-box ul,
.sidebar-list-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.column-box ul li,
.sidebar-list-box ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1px 0;
}

.column-box ul li .site-info,
.sidebar-list-box ul li .site-info {
  flex: 1;
  text-align: left;
  font-size: 0.8rem;
}

.column-box ul li .site-info a,
.sidebar-list-box ul li .site-info a {
  display: block;
  padding: 5px 0 5px 4px;    
  color: var(--color-bg-dark);
  font-weight: normal; 
  border-radius: 4px;  
  transition: background-color 0.2s ease, color 0.2s ease;
}

.column-box ul li .site-info a:hover,
.sidebar-list-box ul li .site-info a:hover {
  color: var(--color-bg-light);
  background-color: var(--color-bg-dark);
}

.column-box ul li .rank-number,
.sidebar-list-box ul li .rank-number {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  display: inline-block;   
  width: 1.25em;           
  text-align: right;      
}

.column-box ul li a:hover .rank-number {
  color: var(--color-bg-light);
}

.column-box ul li a.go-link,
.sidebar-list-box ul li a.go-link {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* space between text and icon */
  color: var(--color-bg-dark);
  text-decoration: none;
  padding: 0 4px;  
  border-radius: 4px;   
  border: 1px solid var(--color-box-border);
  font-weight: normal;
  transition: background-color 0.2s ease, color 0.2s ease;  
}

.column-box ul li a.go-link:hover,
.sidebar-list-box ul li a.go-link:hover {
  background-color: var(--color-bg-dark);
}

.column-box ul li a.go-link:hover .go-label,
.sidebar-list-box ul li a.go-link:hover .go-label {
  color: var(--color-bg-light);
}

.go-link .go-label {
  font-size: 0.8rem;
}

/*--------------------------------------------------
 .three-column-grid
--------------------------------------------------*/
.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  gap: 10px; /* space between cards */
  margin: 20px 0 5px 0;
}

/*--------------------------------------------------
 .review-card
--------------------------------------------------*/
.review-card {
  padding: 10px;
  background-color: var(--color-bg-light);
  display: flex;
  flex-direction: column;
}

.review-card h2.site-name {
  margin: 0 0 5px 0;
}

.review-card .site-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.review-card .site-summary {
  font-size: 0.9rem;
  color: var(--color-text);
}

.review-card-links {
  display: flex;         
  width: 100%;           
  margin-top: auto;
  padding-top: 10px;
}

.review-card-links a {
  flex: 1 1 50%;          
  text-align: center;
  padding: 5px 0;        
  font-weight: bold;
  color: var(--color-bg-light);
  background: var(--gradient-primary);
  border-radius: 4px;
  text-decoration: none;
}

.review-card-links a:hover {
  background: var(--color-bg-dark);
}

.review-card-links a:last-child {
    margin-left: 5px;
}

/*--------------------------------------------------
 visit-site-box - Home Page / Post / Category
--------------------------------------------------*/
.single-post .visit-site-box {
  margin-top: 20px;
}

.single-post .visit-site-box-lower {
  margin-top: 25px;
}

.visit-site-box a {
  display: block;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  font-weight: bold; /* match h1 bold */
  font-size: 2rem;   /* match h1 size */
  color: var(--color-bg-light);
  background: var(--gradient-primary);
  border-radius: 4px;   
}

.visit-site-box a:hover {
  background: var(--color-bg-dark);
}

/*--------------------------------------------------
 Sidebar - <h3> / sidebar-box / view-all-box-sidebar
--------------------------------------------------*/
.sidebar-box {
  padding: 0 10px 10px 10px; 
}

.sidebar-box h3 {
  text-align: center;
  margin: 10px 0;
}

.sidebar-list-box {
  margin-bottom: 10px; /* space between list and view-all-box-sidebar */
}

.view-all-box-sidebar a {
  display: block;  
  padding: 5px; 
  text-align: center; 
  text-decoration: none; 
  font-weight: bold;         
  color: var(--color-bg-light);
  background: var(--gradient-primary);
  border-radius: 4px;  
  font-size: 1.1rem;
}

.view-all-box-sidebar a:hover {
  background: var(--color-bg-dark);
}

/*--------------------------------------------------
 grey-box-border
--------------------------------------------------*/
.grey-box-border {
  border: 1px solid var(--color-box-border);
  border-radius: 4px;
}

/*--------------------------------------------------
Spacing Between Sections
--------------------------------------------------*/
.tags-wrapper-home {
  margin-top: 10px;
  padding: 0 10px;
}

.latest-reviews-paragraph-wrapper-home,
.porn-deals-wrapper-home,
.about-site-wrapper-home,
.category-list-paragraph-wrapper-home, 
.category-list-wrapper-category,
.description-bottom-wrapper-category {
  margin-top: 60px;
}

.view-all-sites-wrapper-home,
.view-all-sites-wrapper-category,
.view-all-sites-wrapper-categories {
  margin-top: 10px;
}

.back-to-top-wrapper-home {
  margin-top: 16px;
}

/*--------------------------------------------------
 Page Specific Padding Adjustments
--------------------------------------------------*/
.single-post .main {
  padding-left: 30px;
  padding-right: 30px;  
}

.about-site-wrapper-home {
  padding: 0 10px;
}

/*--------------------------------------------------
 Post - review-section-1
--------------------------------------------------*/
.review-section-1 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 20px;
}

.review-section-1 .image-section,
.review-section-1 .summary-section {
  flex: 0 0 calc(50% - 10px);
}

.review-section-1 .image-section img.main-image {
  width: 100%; 
  height: auto;
  display: block;
}

.review-section-1 .summary-section h3 {
  margin: 0 0 5px 0;
}

/*--------------------------------------------------
 Post - review-section-2
--------------------------------------------------*/
.review-section-2 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 10px;
}

.review-section-2 .box {
  flex: 1 1 calc(33.333% - 6.666px);
  background-color: var(--color-box-bg);
  padding: 20px;
  font-size: 0.9rem;  
  height: 210px;
}

.review-section-2 .box h3 {
  display: flex;
  justify-content: space-between; /* pushes .total-score to the right */
  align-items: center;   
  margin: 0 0 5px 0;
}

.review-section-2 .box.details ul li,
.review-section-2 .box.score ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-box-border);
}

.review-section-2 .box.details ul li:last-child,
.review-section-2 .box.score ul li:last-child {
  border-bottom: none;
}

.review-section-2 .box.details ul li .value,
.review-section-2 .box.score ul li .value {
  text-align: right;
}

.review-section-2 .box.categories {
  overflow-y: auto; /* vertical scrollbar if content exceeds height */ 
  padding-right: 10px; /* space so text doesn't hide under scrollbar */ 
}

/*--------------------------------------------------
 Post - post-publish-date
--------------------------------------------------*/
.post-publish-date {
  margin-top: 50px;
}

.post-publish-date .update-details {
  margin-top: 16px; 
}

/*--------------------------------------------------
 Post - site-tags-wrapper
--------------------------------------------------*/
.site-tags-wrapper {
  margin-top: 25px;
}

/*--------------------------------------------------
 Post - <h3> support-wrapper
--------------------------------------------------*/
.support-wrapper {
  margin-top: 25px;
}

/*--------------------------------------------------
 Post - save-link-box
--------------------------------------------------*/
.save-link-box {
  display: inline-block;
  margin-left: 0px;
  padding: 0.7px 4px;
  background: var(--gradient-primary);
  color: var(--color-bg-light);
  font-size: 0.8rem;
  border-radius: 4px;
  text-decoration: none;
  vertical-align: 1.5px;
}

.save-link-box:hover {
  background: var(--color-bg-dark);
  color: var(--color-bg-light);
}

/*--------------------------------------------------
 Review Header / Affiliate Disclosure
--------------------------------------------------*/
.affiliate-disclosure {
  margin-top: 20px;
  padding: 0 10px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/*--------------------------------------------------
 Review Score Badge Overlay
--------------------------------------------------*/
.image-section,
.site-image {
  position: relative;
}

.review-score-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(17, 17, 17, 0.65);
  color: var(--color-bg-light);
  border: 1px solid var(--color-bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 4px;
  line-height: 1;
}

.review-score-badge span {
  font-size: 0.5rem;
  font-weight: bold;
}

.review-score-badge strong {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1px;
}

/*--------------------------------------------------
 Deal Badge Overlay
--------------------------------------------------*/
.porn-deal-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--color-discount);
  color: var(--color-bg-dark);
  border: 2px solid var(--color-bg-dark);
  padding: 4px 5px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}

/*--------------------------------------------------
 Deals Link Styling
--------------------------------------------------*/
.deals-link {
  display: inline-block;
  background-color: var(--color-discount);
  color: var(--color-bg-dark);
  border: 1px solid var(--color-bg-dark);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: bold;
  line-height: 1.2;
}

.deals-link:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-bg-light);
}

/*--------------------------------------------------
 Post - External Image Link Overlay
--------------------------------------------------*/
.image-section > a {
  display: block;
  position: relative;
}

.external-image-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.65);
  color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.15s ease;
}

.image-section > a:hover .external-image-overlay {
  opacity: 1;
}

.review-score-badge,
.porn-deal-badge {
  z-index: 2;
}

/*--------------------------------------------------
 Page Info 
--------------------------------------------------*/
.page-info {
  display: flex;
  gap: 20px; /* space between sidebar and main content */
  padding: 10px 40px 40px 40px; /* padding around the whole content */
}

.page-info .sidebar-info {
  flex: 0 0 150px; /* fixed width for sidebar */
}

.page-info .sidebar-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-info .sidebar-info ul li {
  margin-bottom: 8px;
}

.page-info .sidebar-info ul li a {
  text-decoration: none;
  color: var(--color-link);
}

.page-info .sidebar-info ul li a:hover {
  color: var(--color-bg-dark);
}

.page-info .main {
  flex: 1; /* take remaining space */
  padding: 0; /* we already have gap in container */
}

.page-info .sidebar-info h2 {
  margin-bottom: 10px;
  margin-top: 15px;
}

/*--------------------------------------------------
 Post / Page Info - <h2> headers
--------------------------------------------------*/
.single-post .main h2,
.page-info .main h2 {
  margin-top: 1.5em;
}

/*--------------------------------------------------
 Page Info - <h3> subheaders
--------------------------------------------------*/
.page-info .sidebar-info h3 {
  margin-bottom: 9px;
}

/*--------------------------------------------------
Bullet Lists - Post / Page Info
--------------------------------------------------*/
.single-post .main .post-content-box ul,
.page-info .main ul,
.single-post .main .post-publish-date ul {  
  margin-left: 20px;             
}

.single-post .main .post-content-box ul li,
.page-info .main ul li,
.single-post .main .post-publish-date ul li {
  list-style: disc;  
}

.page-info .main ul {
  margin-bottom: 16px;
}

/*--------------------------------------------------
 categories-grid - Categories / Home / Category
--------------------------------------------------*/
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns per row */
  gap: 10px;
  margin-top: 20px;
}

.categories-grid ul li a {
  display: block;
  padding: 3px 0 3px 5px;    
  color: var(--color-primary);
  font-weight: bold; 
  border-radius: 4px;  
  font-size: 1.25rem;
  transition: none;
}

.categories-grid ul li a:hover { 
  color: var(--color-bg-light);
  background-color: var(--color-bg-dark);
}

.categories-column-box {
  padding: 10px 10px;   
}

.categories-grid .porn-deals a {
  display: inline-block;
  background-color: var(--color-discount);
  color: var(--color-bg-dark);
  border: 1px solid var(--color-bg-dark);
  border-radius: 4px;
  padding: 1px 5px;
}

.categories-grid .porn-deals a:hover {
  display: block;
  color: var(--color-bg-light);
  background-color: var(--color-bg-dark);
}

/*--------------------------------------------------
 Contact Page
--------------------------------------------------*/
.email-image {
  width: auto;
  height: 23.5px;
  display: inline-block;
}

/*--------------------------------------------------
 Mobile -  Home Page - four-column-grid
--------------------------------------------------*/
@media (max-width: 1099px) {
  .front-page .four-column-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns per row */
  }

  .front-page .column-box ul li {
    border-bottom: 1px dotted var(--color-box-border);
  }  

  .front-page .column-box ul li:last-child {
    border-bottom: none;
  }   
}

@media (max-width: 600px) {
  .front-page .four-column-grid {
    grid-template-columns: 1fr; /* 1 column per row */
  }
}

/*--------------------------------------------------
 Mobile - Posts
--------------------------------------------------*/
@media (max-width: 1099px) {
  .page-content.single-post { 
    flex-direction: column; 
  }

  .single-post .main,
  .single-post .sidebar {
    flex: 1 1 100%; 
  }

  .single-post .sidebar {
    padding-left: 20px;
  }

  .single-post .main,
  .single-post .sidebar-box {
    padding: 0 20px 20px 20px;
  }

  .single-post .sidebar-box ul li {
    border-bottom: 1px dotted var(--color-box-border);
  }  

  .single-post .sidebar-box ul li:first-child {
    border-top: 1px dotted var(--color-box-border);
  }    
}

@media (max-width: 767px) {
  .single-post .review-section-2 .box,
  .single-post .review-section-1 .image-section,
  .single-post .review-section-1 .summary-section {
    flex: 1 1 100%;
  }
}

/*--------------------------------------------------
 Mobile - three-column-grid
--------------------------------------------------*/
@media (max-width: 1099px) {
  .three-column-grid {
    grid-template-columns: 1fr 1fr;
  }    
}

@media (max-width: 600px) {
  .three-column-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------
 Mobile - Page Info
--------------------------------------------------*/
@media (max-width: 767px) {
  .page-info {
    flex-direction: column;
  }

  .page-info .sidebar-info {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-info .main {
    flex: 1 1 auto;
    width: 100%;
  }
}

/*--------------------------------------------------
 Mobile - categories-grid
--------------------------------------------------*/
@media (max-width: 1099px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 600px) {
  .categories-grid {
    grid-template-columns: 1fr;
  } 
}

/*--------------------------------------------------
 Mobile - visit-site-box / view-all-box-sidebar
--------------------------------------------------*/
@media (max-width: 1099px) {
  .view-all-box-sidebar a {
    font-size: 2rem;
    text-transform: none; /* remove all caps */
  }
}

@media (max-width: 500px) {
  .view-all-sites-wrapper-home .visit-site-box a,
  .view-all-box-sidebar a {
    font-size: 1.25rem; 
  } 
}