/*==================================================
 Theme Name: TGS
==================================================*/

/*==================================================
 Table of Contents
====================================================
 Universal Box-Sizing Rule
 Base Styles
 Site Wrapper & Container
 Banner
 Top Menu
 Footer
 Sprite Image
 Home Page & Sidebar Lists
 Sidebar <h3> & view-all-box
 Latest Reviews
 Post
 Post - review-section-1
 Post - review-section-2
 Page Info
 Post & Page Info <h2> Headers
 Bullet Lists (Post / Page Info)
 Categories Page
 Contact Page
 Mobile - Home Page
 Mobile - Posts
 Mobile - Latest Reviews
 Mobile - Page Info Pages
 Mobile - Categories Page
==================================================*/

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

/*--------------------------------------------------------------
 Base Styles
--------------------------------------------------------------*/
html {
  margin: 0; 
  overflow-y: scroll;  
}

body {
  color: #111111; /* off-black */
  background-color: #111111;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  margin: 0;
}

a { 
  color: #866cff; /* light purple */ 
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s ease, color 0.2s ease;  
}

a:hover {
  color: #111111;
  font-weight: bold; 
} 

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

h1 {
  margin: 10px 0 10px 0;
}

/*--------------------------------------------------
 Site Wrapper & Container
--------------------------------------------------*/
.site-wrapper {
  /*background-color: #f8f8f8; /* off-white */
  background-color: #111111;
  margin: 0 auto;
}

.site-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
}

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

.main {
  flex: 1;          
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}

.sidebar {
  flex: 0 0 275px; /* adjust this number manually so that all site names fit on one line */
  padding: 20px 20px 20px 0;
  box-sizing: border-box;
}

/*--------------------------------------------------
 Banner
--------------------------------------------------*/
.site-banner {
  text-align: center;
  padding: 2px 20px 0 20px;
  background-color: #111111;           
}

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

.site-banner .site-tagline {
  color: #f2f2f2;
  margin: 0;
  padding-bottom: 4px;
  line-height: 1; 
  font-size: 0.75rem; 
}

.site-banner .site-banner-link {
  color: #6b53e0; /* dark purlple */ 
  display: inline-block;   
}

.site-banner .site-banner-link:hover {
  color: #866cff; /* light purlple */  
  display: inline-block;   
}

.site-banner .site-banner-link:hover .site-tagline {
  color: #ffffff;
}

/*--------------------------------------------------
 Footer
--------------------------------------------------*/
.site-footer {
  background-color: #f2f2f2; /* light grey */
  text-align: center;
  border-top: 1px solid #d9d9d9; /* darker grey */ 
}

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

/*--------------------------------------------------
 Top Menu
--------------------------------------------------*/
.primary-menu {
  background-color: #6b53e0; /* dark purple */  
  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: #ffffff;       
  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: #111111; /* off-black */
  color: #ffffff; 
}

/*--------------------------------------------------
  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 */
}

/* 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; }

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

.column-box {
  padding: 10px 5px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;   
}

.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.9em;
}

.column-box ul li .site-info a,
.sidebar-list-box ul li .site-info a {
  display: block;
  padding: 3px 0 3px 4px;    
  color: #111111;
  font-weight: normal; 
  border-radius: 4px;  
}

.column-box ul li .site-info a:hover,
.sidebar-list-box ul li .site-info a:hover {
  color: #ffffff;
  background-color: #111111;
}

.column-box ul li .rank-number,
.sidebar-list-box ul li .rank-number {
  font-size: 0.75em;
  color: #777777; 
  display: inline-block;   
  width: 1.25em;           
  text-align: right;      
}

.column-box ul li a:hover .rank-number {
  color: #ffffff;
}

.column-box ul li a.go-link,
.sidebar-list-box ul li a.go-link {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* spacing between text and icon */
  color: #111111; /* off-black */  
  text-decoration: none;
  padding: 0 4px;  
  border-radius: 4px;   
  border: 1px solid #d9d9d9; /* darker grey */ 
  font-weight: normal;  
}

.column-box ul li a.go-link:hover,
.sidebar-list-box ul li a.go-link:hover {
  background-color: #111111;  
}

.column-box ul li a.go-link:hover .go-label,
.sidebar-list-box ul li a.go-link:hover .go-label {
  color: #ffffff;
}

.go-link .go-label {
  font-size: 0.9em;
}

/*--------------------------------------------------
 Sidebar <h3> & view-all-box
--------------------------------------------------*/
.sidebar-box {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0 5px 10px 5px; 
}

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

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

.sidebar-box .view-all-box a {
  display: block;  
  padding: 5px; 
  text-align: center; 
  text-decoration: none; 
  font-weight: bold;         
  color: #ffffff;
  background-color: #6b53e0; /* dark purple */ 
  border-radius: 4px;  
  font-size: 0.9em;  
  text-transform: uppercase;
}

.sidebar-box .view-all-box a:hover {
  background-color: #111111;
}

/*--------------------------------------------------
 Latest Reviews
--------------------------------------------------*/
.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 {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}

.review-card h3.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.9em;
  color: #333333;
}

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

.review-card-links a {
  flex: 1 1 50%;          
  text-align: center;
  padding: 5px 0;        
  font-weight: bold;
  font-size: 0.9em;
  color: #ffffff;
  background-color: #6b53e0; /* dark purple */
  border-radius: 4px;
  text-decoration: none;
}

.review-card-links a:hover {
  background-color: #111111;  
}

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

/*--------------------------------------------------
 Post
--------------------------------------------------*/
.single-post .main {
  padding-left: 30px;
  padding-right: 30px;  
}

.single-post .visit-site-box a {
  display: block;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;         /* match h1 boldness */
  font-size: 2em;            /* match default h1 size */
  color: #ffffff;
  background-color: #6b53e0; /* dark purple */ 
  border-radius: 4px;    
}

.single-post .visit-site-box a:hover {
  background-color: #111111;
}

/*--------------------------------------------------
 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);
  box-sizing: border-box;
}

.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);
  box-sizing: border-box;
  background-color: #f2f2f2; /* light grey */
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;   
}

.review-section-2 .box h3 {
  margin: 0 0 5px 0;
}

.review-section-2 .box.details ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #d9d9d9;
}

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

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

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

/*--------------------------------------------------
 Page Info 
--------------------------------------------------*/
.page-info {
  display: flex;
  gap: 20px; /* space between sidebar and main content */
  padding: 10px 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: #866cff; /* light hover */
}

.page-info .sidebar-info ul li a:hover {
  color: #111111; /* off-black */  
}

.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;
}

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

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

/*--------------------------------------------------
 Categories Page
--------------------------------------------------*/
.page-categories {
  margin: 15px;
}

.page-categories .categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.page-categories .categories-grid ul li a {
  display: block;
  padding: 3px 0 3px 5px;    
  color: #6b53e0;
  font-weight: bold; 
  border-radius: 4px;  
  font-size: 1em;
}

.page-categories .categories-grid ul li a:hover { 
  color: #ffffff;
  background-color: #111111;
}

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

/*--------------------------------------------------
 Mobile - Home Page
--------------------------------------------------*/
@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 #d9d9d9;
  }  

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

@media (max-width: 564px) {
  .front-page .four-column-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------
 Mobile - Posts
--------------------------------------------------*/
@media (max-width: 999px) {
  .review-section-2 .box {
    flex: 1 1 calc(50% - 5px);
  }
}

@media (max-width: 767px) {
  .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 .review-section-1 .image-section,
  .single-post .review-section-1 .summary-section {
    flex: 1 1 100%; 
  } 

  .single-post .review-section-2 .box {
    flex: 1 1 100%;
  }

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

  .single-post .visit-site-box a {
    padding: 4px 0;
    font-size: 2em;               
  }  

  .single-post .sidebar-box .view-all-box a {
    font-size: 2em;
    padding: 4px 0;
    text-transform: none;
  }

  .single-post .sidebar-box ul li {
    border-bottom: 1px dotted #d9d9d9;
  }  

  .single-post .sidebar-box ul li:first-child {
    border-top: 1px dotted #d9d9d9;
  }    
}

/*--------------------------------------------------
 Mobile - Latest Reviews
--------------------------------------------------*/
@media (max-width: 999px) {
  .latest-reviews {
    display: block;
  }

  .latest-reviews .main {
    width: 100%;
  }

  .latest-reviews .sidebar {
    width: 100%;
    padding-left: 20px;
  }

  .latest-reviews .three-column-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .latest-reviews .sidebar-box ul li {
    border-bottom: 1px dotted #d9d9d9;
  } 

  .latest-reviews .sidebar-box ul li:first-child {
    border-top: 1px dotted #d9d9d9;
  }    

  .latest-reviews .sidebar-box .view-all-box a {
    font-size: 2em;
    padding: 4px 0;
    text-transform: none;
  }    
}

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

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

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

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

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

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

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

@media (max-width: 564px) {
  .page-categories {
    flex-direction: column; 
  }

  .page-categories .main {
    width: 100%;
    order: 1;
  }

  .page-categories .sidebar {
    width: 100%;
    order: 2; 
  }

  .page-categories .sidebar {
    padding-right: 0;
  }

  .page-categories .sidebar-box ul li {
    border-bottom: 1px dotted #d9d9d9;
  } 

  .page-categories .sidebar-box ul li:first-child {
    border-top: 1px dotted #d9d9d9;
  }    

  .page-categories .sidebar-box .view-all-box a {
    font-size: 2em;
    padding: 4px 0;
    text-transform: none;
  }      
}