/*
Theme Name:   Perfekt (Parent)
Theme URI:    http://prism.net
Description:  A simple business blog parent-theme based on the Responsee-CSS framework.
Author:       Nik Peran
Author URI:   http://hyperlinkstudio.com.au
Version:      1.0
Compatible:   Prism 1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, responsive, 2-menus, templates
Text Domain:  prism
Date Created: January 2020
*/

/*
CONTENTS
========
1. Design Notes & Reset Styles
	- Overview
	- Reset Styles

2. Structural Elements

3. Typography
	- Font families, margins & paddings, line-heights
	- Lists

4. Links & Colors

5. Navigation
	- Mobile menu
	- Main menu

6. Images

7. Forms
	- Comments

8. Utility Helpers
	- Alignment modifiers

9. Content Components
	- Post excerpts
	- Equal Columns

10. Media Queries

11. WordPress Bug Fixes & Workarounds
	- Fix Thickbox icon

12. Notifications & Error Messages
	- SM Forms reponses

*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display&display=swap');

/*
    1. DESIGN NOTES & RESET
    =======================
*/

/*
	2. STRUCTURAL ELEMENTS
	======================
*/
footer { font-size: 0.8rem; }
.phone h3 i { color: #aaa; position: relative; top: 0.2em; } /* icon */
.phone h3 a { white-space: nowrap; font-family:"Open Sans", Arial, sans-serif; }


/*
	3. TYPOGRAPHY
	=============
*/

hr {
	border-top: 1px solid #ccc;
	border-bottom: none;
	margin: 1.5em 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
}
h1 { font-size:2.5rem; }

/* First item in column - keep same to match sidebar */
#primary-top + *, #secondary-top + * {
	margin-top: 0;
}

/* All paragraphs */
.content .primary p { line-height: 1.5; margin: 1.0rem 0; }
.content .secondary p { line-height: 1.35; margin: 1.0rem 0; }

small, .small {
	font-size: 85%;
}
.big {
	font-size: 115%;
}
.content .greyscale { color: #999; } /* de-emphasize text */

/* Stop long links busting out of side - apply this to container. Browser support is mixed
    hence the several rules. Taken from:
    https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
.overflow-wrap {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}


/*
    4. LINKS & COLORS
    =================
    Default link styles inherited from Responsee.css framework.
*/
/* Boxy links */
a.boxy,
.boxy a {
	display: inline-block;
	font-size: 0.85em;
	padding: .3em .5em;
	border: 1px solid #9BB800;
	margin: 1px 0; /* if wrapping stops borders from touching */
	transition: all 200ms linear; /* Soften hover bgcolor change */
}
	a.boxy:hover,
	.boxy a:hover {
		text-decoration: none;
		background-color: #B6C900;
		color: inherit;
	}

.greyscale a { color: #777; } /* de-emphasize links */
.greyscale a:hover { color: #555; }


/*
	5. NAVIGATION
	=============
	Main nav styles inherited from Responsee.css framework.
*/



/*
	6. IMAGES
	=========
	All images are fluid in Responsee.css but for smaller
	images override this in content areas.
*/
.content img {
	width: 100%;
	height: auto;
}
	/* WordPress image sizes */
	.content img.size-large,
	.content img.size-full {
		max-width: 100%;
	}
	/* Never responsive ... */
	.content img.size-thumbnail,
	.content img.size-medium,
	.content img.avatar { /* in comments */
		width: auto;
	}
	/* WordPress image alignments */
	/* Aligned images wrapped in links */
	/* Captioned images */
	.content img.alignleft,
	.content a img.alignleft,
	.wp-caption.alignleft {
		float: left;
		margin: 1em 1.5em 1em 0;
	}
	.content img.alignright,
	.content a img.alignright,
	.wp-caption.alignright {
		float: right;
		margin: 1em 0 1em 1.5em;
	}
	.content img.aligncenter,
	.content a img.aligncenter,
	.wp-caption.aligncenter {
		/* This make links wrap the image, not take up whole block */
		display: inline-block;
		margin: 1em auto 1em 50%;
		transform: translateX(-50%);
	}
	/* Stop medium size images busting out of caption */
	.content .wp-caption img.size-medium {
		width: 100%;
	}

/* Image captions */
.wp-caption {
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #ccc;
	padding: 5px;
	display: inline-block; /* These 2 lines override inline width to make caption responsive */
	max-width: 100%;
}
.wp-caption-text {
	text-align: center;
	font-size: 85%;
	margin: .2em 0;
	color: #555;
	line-height: 1.3;
}

/* Images in comments are small. No need for responsive. */
#comments-area .avatar {
	width: auto;
	height: auto;
	float: left;
	padding: 0 10px 2px 0;
}
/* Emulate the caption border but just for image */
img.border {
	border: 1px solid #ccc;
	padding: 5px;
}



/*
	7. FORMS
	========
	Form styles inherit from Responsee.css framework.
*/



/*
	8. UTILITY HELPERS
	==================
*/

/* Vertically align anything to middle. SRC=http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
.middle {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: perspective(1px) translateY(-50%);
}


/* for toggle visibility via Javascript ... */
.hidden {
	display: none !important;
}



/*
	9. CONTENT COMPONENTS
	=====================
*/
/* Archive list (buttons) Colors match responsee.css link styles */
.content .primary ul.archive-list {
	list-style-type: none;
	font-size: 0.85em;
	margin: 1.4em 0;
	text-align: center;
	padding: 0;
}
	.archive-list li {
		display: inline-block;
	}
		.archive-list li a {
			display: block;
			padding: 8px 15px;
			background-color: #ECF0F1;
			color: inherit;
			text-transform: uppercase;
			transition: background-color 200ms linear; /* Soften hover bgcolor change */
		}
			.archive-list li a:hover {
				text-decoration: none;
				background-color: #B6C900;
			}
	/* Active button/link : li class="current-month|current-cat|etc"*/
	.archive-list li[class*="current"] a {
		background-color: #9BB800;
		color: #fff;
	}
		.archive-list li[class*="current"] a:hover {
			cursor: default;
		}


/* Pagination links */
.posts-pagination {
	font-size: 0.85em;
	margin: 1.4em 0;
	text-align: center;
}
	.posts-pagination a  {
		display: inline-block;
		padding: 8px 15px;
		background-color: #ECF0F1;
		color: inherit;
		transition: background-color 200ms linear; /* Soften hover bgcolor change */
	}
		.posts-pagination a:hover {
			text-decoration: none;
			background-color: #B6C900;
		}
	.posts-pagination span.current {
		background-color: #9BB800;
		color: #fff;
		display: inline-block;
		padding: 8px 15px;
	}


/*
	10. MAIN MEDIA QUERIES
	======================
*/



/*
	11. WORDPRESS BUG FIXES & WORKAROUNDS

	These may need to be removed in future versions of WP.
*/

	/* Thickbox close icon. Currently shows the word 'Close' behind the 'X' button */
	.tb-close-icon {
		background-color: #F2F2F2; /* Bg color hides the word */
	}



/*
	12. NOTIFICATIONS & ERROR MESSAGES
*/

/* Form error notification message - from Admin_Notice class */
.notice {
	border: 1px solid transparent;
	padding: 0 .3rem;
	margin: .5rem;
}
.notice p { margin: .5rem; }
.notice-error {	color: red; border-color: currentColor;	}
.notice-warning {	color: orange; border-color: currentColor;	}
.notice-info {	color: blue; border-color: currentColor;	}
.notice-success {	color: green; border-color: currentColor;	}


/* Form Error Messages - Classes written to form via JS in includes/post-validate.php */
/* span.form-error-message { color: #990000; padding: 10px; }  for light backgrounds */
span.form-error-message { color: red; padding: 3px 0 0 5px; font-size: 15px; display: block; } /* for dark backgrounds */
span.form-error-message b { color: deeppink; /* emphasize parts of a message */ }
.radiogroup, .checkgroup {
	display: inline-block; /* wrapper around field options */
	padding-top: 5px;
	padding-right: 5px;
	border: 1px solid transparent; /* stop jarring when error styles disappear */
}

/* Usually on a form field but can be div, p tag also */
.form-error { background-color:#ffdddd !important; border: 1px solid #df9d9d; }
/* Same for lookup fields - placed in nested spans after the field itself */
.form-error + span.select2 { background-color:#ffdddd !important; }
.form-error + span.select2 * { background-color: transparent !important; border-color: #df9d9d !important; }
#view .form-error-message a { /* Links inside error messages (using ` instead of ") */
	color: #C00; text-decoration: underline; }
#view .form-error-message a:hover {
	color: #000; text-decoration: none; }

p.form-error,
div.form-error, /* checkbox/radio group */
span.form-error, /* individual checkboxes */
select.form-error,
textarea.form-error,
input[type='text'].form-error,
input[type='password'].form-error
{
	border: 1px solid #DB9999 !important;
	color: #900 !important;
	box-shadow: none !important;
}

/* AJAX Responses */
.ajax-error { color: #cc0000; }
.ajax-success { color: #00a300; }