/*
Theme Name: OHPI_Version3
Theme URI: https://ohpi.org.au/
Author: Online Hate Prevention Institute
Author URI: https://ohpi.org.au/
Description: OHPI website theme version 3, a child of FSE_Spiritual.
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 5.7
Version: 0.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: fse-spiritual
Text Domain: ohpi_version3
Tags: blog, education, news, one-column, right-sidebar, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, sticky-post, threaded-comments
*/

/* ---
    OHPI customizations to theme layout
--- */

/* 
 * Reduce vertical whitespace on post lists
 */
 
/* Remove block gap from block and decendants */
.ohpi-post-list > * + * {
  --wp--style--block-gap: 0;
  margin-top: 0px;
  margin-block-start: 0px;
  gap: 0px;
  margin-bottom: 0.5em;
}

/* Bring post header and date lines in close */
.ohpi-close-line {
	margin-top: 0px !important;
	margin-block-start: 0px !important;
	margin-bottom: 0.5em !important;
}

/* 
 * Tighten the spacing right up on the landing page archive lists.
 * Remove block gap from block and decendants
 */
.ohpi-archive-post-list > * + * {
  --wp--style--block-gap: 0;
  margin-top: 0px;
  margin-block-start: 0px;
  gap: 0px;
}

/* Override Gutenberg generated block spacing for this one case */
.ohpi-archive-post-list .wp-block-columns {
  margin-bottom: 0px;
  padding-left: 0.4em;
  padding-top: 0.4em;
}

/* Alternate bg shading on archive lists */
.ohpi-archive-post-list .wp-block-post:nth-child(even)
{
	background-color: var(--wp--preset--color--custom-off-white) !important;
}

/* When a background color is applied to headers in the editor, the theme adds a margin with no bg color */
.ohpi-header-spacing h1,h2,h3,h4,h5,h6 {
	margin-bottom: 0;
}

/* Hide blocks from display when not currently wanted */
.ohpi-display-none {
	display: none;
}

/*
 * Fixing button annoyances when screen width changes on different devices
 */
 
 /* Empty class for when the screen width isn't matched */
.ohpi-block-button {
	 
}

/* Make the text be fully vertical when the button compresses, not the wierd sometimes one sometimes two letters on each line thing */
@media screen and (max-width: 1150px) and (min-width: 600px), (max-width: 520px) {
	.ohpi-block-button {
		writing-mode: vertical-lr;
		text-orientation: upright;
	}	 
}
 

/*
 Catalog icons for landing pages post lists
*/

/* Move all catalog list text out of the way */
.ohpi-cat-icons a {
	display: block;
	text-align: left;
	text-indent: -9999px;
	width: 0px;
	height: 0px;
}

/* Replace catalog names with icons */
.ohpi-cat-icons :is( a[title*="news" i] ) {
	display: block;
	text-align: left;
	text-indent: -9999px;
	background: url(./assets/images/Media-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
}

.ohpi-cat-icons :is( a[title*="briefings" i] ) {
	display: block;
	text-align: left;
	text-indent: -9999px;
	background: url(./assets/images/Briefings-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
}
.ohpi-cat-icons :is( a[title*="reports" i] ) {
	display: block;
	text-align: left;
	text-indent: -9999px;
	background: url(./assets/images/Reports-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
}

/* URL is now rewritten in JS, and a title is added, this method of adding icons is not currently used
.ohpi-cat-icons :is( a[href$="news/" i] ) {
	display: block;
	text-align: left;
	text-indent: -9999px;
	background: url(./assets/images/Media-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
}

.ohpi-cat-icons :is( a[href*="briefings" i] ) {
	display: block;
	text-align: left;
	text-indent: -9999px;
	background: url(./assets/images/Briefings-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
}

.ohpi-cat-icons :is( a[href*="reports" i] ) {
	display: block;
	text-align: left;
	text-indent: -9999px;
	background: url(./assets/images/Reports-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
}
*/


/* 
 * Tabs Responsive styling
 */
.responsive-tabs__list__item {
	height: 32px;
	line-height: 32px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

/* Needs a blank icon block for the text only tab so the alignment matches across all tabs */
.fa-all {
	display: inline-block;
	background: none;
	width: 0px;
	height: 32px;
	vertical-align: middle;
}

/* Add icons for each tab that filters query loops */
.fa-briefings {
	display: inline-block;
	background: url(./assets/images/Briefings-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.fa-reports {
	display: inline-block;
	background: url(./assets/images/Reports-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.fa-media {
	display: inline-block;
	background: url(./assets/images/Media-c64.png) center / contain no-repeat;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}