/*
Theme Name: Gridsby Child
Theme URI: www.jeg.co
Template: gridsby
Author: Jeg Dudley
Author URI: www.jeg.co
Description: ---
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-menu,featured-images,full-width-template,rtl-language-support,theme-options,translation-ready,front-page-post-form,post-formats
Version: 1.3.0.1702737166
Updated: 2023-12-16 14:32:46

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------- */

/* ---- 250103 Suggested by Claude - to shrink the white margin and padding around the 'lightbox' pop up images... -------- */
/* ---- 250103 ... that are shown when you click on images in the Gallery page. -------- */

/* Custom ThickBox Styles */

/* Increase image size by reducing margins */
#TB_window {
    padding: 0 !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    background: none !important;
}

/* Make the white border smaller */
#TB_Image {
    border: 5px solid white !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 90vh !important; /* Reduced from 95vh */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Hide caption and close window elements */
#TB_caption,
#TB_closeWindow {
    display: none !important;
}

/* Ensure overlay covers full viewport */
#TB_overlay {
    width: 100vw !important;
    height: 100vh !important;
}

/* Improve image positioning */
#TB_ImageOff {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Remove loading background */
.thickbox-loading {
    background: none !important;
}

/* Ensure proper centering */
@media screen and (orientation: landscape) {
    #TB_window {
        width: 95vw !important;
    }
}

@media screen and (orientation: portrait) {
    #TB_window {
        width: 95vw !important;
        height: 90vh !important; /* Fixed height for portrait */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #TB_ImageOff {
        height: 90vh !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* --------------------------------------------------------------------------------- */

/* ---- 250102 Created by Claude - this sets up the elements on the index "Select Software Dev or CompDesign" menu page. -------- */

.box-container {
    display: flex;
    justify-content: center;
    margin: 0px;
}

.project-box {
    flex: 1;
    max-width: 600px;
    height: 150px;
    border: 1px solid #bfc19e;
	border-width: 1px 0px 1px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    margin: 10px 30px 10px 30px;	
	font-family: "Open Sans", Tofu;
    font-size: 16px;
	font-weight:300;
}

.project-box:link {
	color: #cccccc;
}

.project-box:visited {
	color: #cccccc;
}

.project-box:link:hover {
	background-color: #bfc19e;
	color: #fff;
}

.project-box:visited:hover {
	background-color: #bfc19e;
	color: #fff;
}

/* --------------------------------------------------------------------------------- */


/* ---- 250102 Adding thin border around images on the Software Dev page. -------- */

.wp-block-gallery .wp-block-image img {
    border: 1px solid #DDDDDD;   
}

/* --------------------------------------------------------------------------------- */

/* ---- 250101 Removing the Right padding on the primary Content 'frame', in order to make the Full-Width content box horizontally centre aligned. -------- */

.col-1-1 {
	width: 100%;
	padding-right: 0px;
}

	.mobile-col-1-1 {
		width: 100%;
		padding-right: 0px;
	}


/* --------------------------------------------------------------------------------- */

/* ---- 250101 Adding 'chip' effect around the tags on the Software Dev page. ---------------------- */

.chips-container {
    display: flex;
    align-items: center;
    justify-content: center;  /* This centers the chips horizontally */
    flex-wrap: wrap;         /* This allows chips to wrap to next line if needed */
    width: 100%;  
}

.chips {
  font-size: 14px;
  font-weight: normal;
  border-radius: 5px;
  background-color: #d7d9c3; /* ... FADE VERSION = #d7d9c3 ... TITLE COLOUR = #bfc19 ... */
  padding: 2px 7px 2px 7px;
  margin: 2px;

  display: inline-block;
  color: #FFFFFF;
}


/* ---- 250101 SUGGESTED BY CLAUDE ---------------------- */
/* ---- 250101 TO ALIGN THE MENU TEXT AND SYMBOL. ------- */
/* ---- 250101 AND FORMAT THE MENU TEXT. ---------------- */

.contact-button {
    display: flex;
    align-items: center;
}

.toggle-menu {
    margin-right: 5px;  /* Adds space between the menu icon and text */
    display: flex;
    align-items: center;
}

.menu-title-jeg-alpha {
    display: inline-block;
    line-height: 1;  /* Ensures vertical centering */
	text-transform: lowercase;
	font-family: "Open Sans", Tofu;
	font-feature-settings: normal;
    font-size: 16px;
	font-weight:300;
    color: #cccccc;
	text-transform: none;
	background-color: #FFFFFF;
    border-color: #FFFFFF;
	padding:0px;
}

/* --------------------------------------------------------------------------------- */

/* 250101 Forces the new NarrowWidth Page Template to be centrally-aligned. */
.col-7-12 {
	width: 58.33%; 
	margin: auto;
	float: none;
    padding-right: 0px;
}

/* 250112 NOTE: This layout doesn't seem to be used, but I'll keep it, just in case. */
.mobile-col-7-12 {
	width: 58.33%;
	margin: auto;	
	float: none;
    padding-right: 0px;
}

/* --------------------------------------------------------------------------------- */

/* 250112 new, wider layout - just for mobile viewing. */
@media screen and (max-width: 480px) {
.col-7-12 {  
	width: 84%; 
	margin: auto;	
	float: none;
    padding-right: 0px;
}
}

/* --------------------------------------------------------------------------------- */


/* 250101 Suggested by Claude - changing the hover colour for the navigation menu items*/
.cbp-spmenu .menu-item a:hover {
    color: #bfc19e !important;  /* Makes text into the gold colour on hover */
}

/* 231230 Hiding the 2nd line of the pop-up lightbox window */
#TB_secondLine{
	visibility: hidden;
}

#TB_caption{
	visibility: hidden;
}

/* 231230 Hide the 'close window' icon in the lightbox window */
.tb-close-icon {
	visibility: hidden;
}

/* 231220 Adjusting WP Tiles Caption text style */
.wp-tiles-byline-title {
	height: 10%;
	line-height: 0.5;
}

.wp-tiles-byline-b {
    max-height: 100%;
	width:100%;
	height: 60%;
	overflow-wrap: break-word;
	position: absolute;
	vertical-align: baseline;
    left: 0;
    right: 0;
	bottom: 0;
}

.wp-tiles-byline-content {
	line-height: 1.2;
	
	position: absolute;
	bottom: 0;
	left: 0;
}

/* 231221 Padding around the Caption.  */
/* 231221 Has to be a separate container, as the "Padding" for ".wp-tiles-byline-content" is pre-defined inside the WP Tiles .CSS file. */
.wp-tiles-byline-content-padding {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

element.style {
	height: 10%;
}



/* 201226 Adjusting padding around Gallery images !!ON MOBILE ONLY!! */
@media screen and (max-width: 480px) {
	.gallery-image { 
		width: 96%;
		margin: 0 2% 2x;
	}
}

	
/* 201223 Adjust padding around Gallery images */
.wp-block-image {
	margin: 2px;
}
.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
	margin: 2px;
}

.wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item {
	width: calc(100% / 1 - 4px);
	margin-right:2px;
}

.wp-block-gallery.columns-2 .blocks-gallery-image, .wp-block-gallery.columns-2 .blocks-gallery-item {
	width: calc(100% / 2 - 4px);
	margin-right:2px;
}

.wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
	width: calc(100% / 3 - 4px);
		margin-right:2px;
}

.wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item {
	width: calc(100% / 4 - 4px);
		margin-right:2px;
}


/* 201221 Changing Style of gallery caption text */
@media only screen and (min-width: 482px) {
figcaption a {
    font-size: 100%;
	font-weight: normal;
}
}

@media only screen and (max-width: 481px) {
figcaption a {
	font-size: 90%;
	font-weight: normal;
}
}

/* 201221 Removing black gradient shadow on gallery images captions */
.wp-block-gallery .blocks-gallery-item figcaption {
   background: none;
}


/* --------------------------------------------------------------------------------- */


/* 200101 Centre Align Videos on Proj Pages */
.wp-block-embed__wrapper {
	text-align:center;
    }

/* 200101 Remove end-of-Post huge buttons to navigate to other pages */
.post-navigation{
    display: none;
}

/* 200101 Remove Meta Information - Category, Name, Date, etc. */
.entry-meta {
    display: none;
}

/* 200101 Remove Meta Information - Category, Name, Date, etc. */
.cat-links {
    display: none;
}

/* 200102 Remove Meta Information - Tags */
.tags-links {
    display: none;
}

/* CHANGE PRIMARY TITLE COLOR FOR PAGES? IN-DEPTH TEXT ARTICLES - INITIALLY APPLIED TO 'MOBILE ORCHARD' PAGE */
h5 {
 /*color: #0C469C;*/
/*  color: #A7B1CD;*/
	font-size: 26px;
	color:#A3ACDB;
	font-weight: 100;
}



/* BACKGROUND COLOR BEHIND TEXT LABELs inside PROJECT and PROCESSS TILES */
.background {
font-size: 14px;
line-height:5px;	
background-color: rgba(255, 255, 255, 0.80);
padding: 0px 2px 0px 2px;
color:#000000;
}

.background_small {
	font-size: 11px;
	line-height:5px;	
	background-color: rgba(255, 255, 255, 0.80);
	padding: 0px 2px 0px 2px;
	color:#000000;
	white-space: pre-line;
}


/* TEXT SIZE for LABELS inside PROJECT and PROCESSS TILES */
@media (max-width: 1000px) 
{
.background{
	font-size: 11px;
	line-height:11px;
	padding-bottom:0px;
    }
	
.background_small{
	font-size: 10px;
	line-height:10px;
	padding-bottom:0px;
	white-space: pre-line;
    }
}


/* TRIED ON .background ELEMENT */
/* padding: 25px 50px 75px 100px; */
/* background-color: #FFFFFF; */

/* NAVIGATION -- CHANGE BACKGROUND COLOUR OF MENU ICON */
.contact-button
{
     background-color: #FFFFFF;
     border-color: #FFFFFF;
}


/* NAVIGATION -- CHANGE BACKGROUND COLOUR OF MENU ICON */
.toggle-menu, .menu-left, .push-body, .jPushMenuBtn
{ 
     background-color: #FFFFFF;
       border-color: #FFFFFF;
}

/* NAVIGATION -- MAKE MENU ICON VISIBLE */
/* 200101 Changed HEIGHT to 24px, to make MENU only 3 Lines */
.fa-bars
{
  background-color: rgb(191,193,158);
  height: 24px;
}

/* PROFILE PAGE -- CV TABLE */
.cvtitle
{
	font-size: 13px;
	color: #777777;
}

/* PROFILE PAGE -- CV TABLE */
.cvyear {
     font-size: 13px;
     color: #CCCCCC;
}
/* PROFILE PAGE -- CV TABLE */
.cvloc
{
     font-size: 10px;
     color: #BBBBBB;
}

/* PROFILE PAGE -- CV TABLE */
.cvbody
{
     font-size: 11px;
}

/* PROFILE PAGE -- LINKS */
a.inside
{
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  color: rgb(255, 102, 0);
  text-decoration-color: rgb(255, 102, 0);
}

/* PROFILE PAGE -- LINKS */
a.inside:hover
{
  color: rgb(0, 0,0);
  text-decoration-color: rgb(0, 0,0);
}


/* PROJECT LIST PAGE -- LINKS */
a.insideB
{
  font-size: 13px;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  color: rgb(255, 102, 0);
  text-decoration-color: rgb(255, 102, 0);
}

/* PROJECT LIST PAGE -- LINKS */
a.insideB:hover
{
       font-size: 13px;
  color: rgb(0, 0,0);
  text-decoration-color: rgb(0, 0,0);
}




/* PROJECT PAGE -- TABLE ENTRIES */
/* jti = jTITLE and jbs = jBUILD_STATUS */
.jti
{
	font-size: 13px;
	font-weight:bold;
	color: #777777;
}

.jbs
{
    /* color: rgb(255, 102, 0); */   /* REPLACING ORANGE TEXT WITH BLUE, BECAUSE PROJECTS ARE NOW LINKED, SO ORANGE */ 
   color:#A3ACDB;
  font-weight:bold;
}




/* FORMATTING TITLE BLOCKS */
spacer
{
    padding-top: 80px;
}

.entry-title span.title
{
  color: #cccccc;
  font-size: 26px;
  font-weight: 100;
  padding: 0 20px 0 20px;
}



header {
    text-align: center;
}

h4.spacer {
    padding-top: 80px;
}

h1.entry-title {
    padding-top: 50px;
    padding-bottom: 50px; 
}

/* make the site title - i.e. my name - a bit smaller */
h1.site-title a{
    font-size: 34px;
}

/* 'Software Developer & Computational Designer' tag below site title - i.e. my name */
h2.site-description {
	font-family: "Open Sans", Tofu;
	font-feature-settings: normal;
	font-kerning: auto;
	font-optical-sizing: auto;
    font-size: 16px;
	font-weight:300;
    color: #cccccc;
	text-transform: none;
}

/* Footer text - change the Capitalisation */
footer.site-footer {
    text-transform: none;
}

/* HIDE THE TEXT 'MENU' IN THE MENU BUTTON - AND DEFINE OFFSET AROUND THE MENU ICON */
button.push-body {
  font-size: 0px;
  padding: 7px 7px 7px 7px;
}

/* CHANGE SIZE OF THE MENU ICON - AND KEEP IT VISILBE */
i.fa {
  font-size: 30px;
  visibility: visible;
}


/* FORMATTING FOR PROJECTS TABLE SHAPE */

.jboxes {
	    table-layout: fixed;
  font-size: 12px;
  display:table;
  width: 100%;
  text-align: center;
}

.jboxrow {
   padding: 0px 0px 0px 0px;
   display: table-row;
   width: 100%;
}

.jbox {
        display: table-cell;
        padding: 0px 0px 25px 0px;
}

@media (max-width: 1000px) 
{
    .jbox {
        display: block;
        width: 100%;
        padding: 0px 0px 25px 0px;
    }
}

  /* USED TO NARROW THE PAGE WIDTH FOR ALL PROJ PAGES< AND "PROFILE" AND "CONTACT" */
  /* 231221 -- post-10 = Profile page */
  /* 231221 -- post-2 = Contact page */
@media (min-width: 1000px) 
{
	.post-10,
	.post-2,
	.category-projects {
        width: 780px;
margin: auto;
    }
}

/* RE-USABLE BLOCK DIVIDER */
.divider{
	margin-bottom:50px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	width: 60%;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #DDDDDD;
    }