/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/
/* Identifies old buttons */
.logged-in .wp-block-buttons .wp-block-button__link {
	background-color: rebeccapurple;
}

.wp-block-buttons .wp-block-button {
	margin-bottom: 1.5em;
}

.button-less-padding {
	padding: 1em 1.5em;
}

.button-column {
	text-align: center;
}

/* border-left for blockquote */
blockquote.wp-block-quote {
	border-left: .25em solid #000;
	padding-left: 1em;
}

/* card buttons on homepage */
.homepage-cards .wsu-card {
	background-color: #ca1237;
}

/* buttons on phones */
@media only screen and (max-width: 550px) {
	.wsu-cta--width-inline + .wsu-cta--width-inline {
		margin-left: 0;
		display: block;
	}
}

/* link icon after linked headers */
h1 a::after,
h2 a::after,
h3 a::after,
h4 a::after,
h5 a::after,
h6 a::after {
	content: '\F126';
	font-family: wsu-icons;
	font-size: .875rem;
	color: #ca1237;
	margin-left: .6875rem;
	display: inline-block;
	text-decoration: none;
}

/* footer menu */
.wsu-footer-site__widgets .widget_text.wsu-widget h2 {
	font-size: .75rem;
	text-transform: uppercase;
	font-weight: 600;
}

/* box with border and gray background header */
.box-border {
	margin: 1rem 3rem;
	border: 1px solid #464e54;
	padding-left: 0;
	padding-right: 0;
}

.box-border h4 {
	padding-left: 1em;
	background-color: #eff0f1;
}

.box-border p {
	padding: 1em;
	margin-bottom: 0;
}

/* add border to screenshots with class screenshot-border on page */
.screenshot-border img {
	margin: 20px 20px 20px 0;
	padding: 20px;
	border: solid 1px #e5e5e5;
}

/* checklist */
fieldset.checkboxgroup.current-student-checklist {
	border: none;
}

.current-student-checklist label {
	font-size: 1rem;
	font-weight: 400;
}

/* hide menu, except home page on https://online.wsu.edu/currentstudent/mywsu-financial-aid-info/ */
.page-id-5119 #wsu-site-menu > li:not(:first-child) {
	display: none;
}

/* don't show author on posts */
address.wsu-meta-byline {
	display: none;
}

/* Screen-reader only utility */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================================================
   Instagram Embed (matches ASWSUG-style "card" feel)
   Notes:
   - You cannot increase the number of posts shown via CSS.
   - This only controls the wrapper + spacing + responsiveness.
   ========================================================= */
/* The outer container you control (your div id="ig-feed") */
#ig-feed {
	width: 100%;
	max-width: 720px;
/* wider than before */
	margin: 0 auto;
/* center in its column */
}

/* The card wrapper around the Instagram embed */
#ig-feed .ig-embed-wrapper {
	width: 100%;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important;
/* make shadow actually show */
}

/* Instagram embed sizing sanity */
#ig-feed .instagram-media {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

/*
Optional: trying to hide Instagram's injected header area.
Instagram changes markup often, so this may be inconsistent.
If it ever breaks the embed, delete this block.
*/
#ig-feed .instagram-media header,
#ig-feed .instagram-media > div > div:first-child {
	display: none !important;
}

/* Keep images tidy if they render as  inside the embed */
#ig-feed .instagram-media img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* Responsive tweaks */
@media (max-width: 900px) {
	#ig-feed {
		max-width: 100%;
	}
}

@media (max-width: 740px) {
	#ig-feed .ig-embed-wrapper {
		padding: 12px;
	/* keep *some* shadow so it still looks like a card */
		box-shadow: 0 8px 20px rgba(0,0,0,0.10) !important;
	}
}

/* --- Instagram shadow not showing? Usually a parent is clipping it. --- */
#ig-feed,
#ig-feed .ig-embed-wrapper,
#ig-feed .instagram-media,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
	overflow: visible !important;
}

/* Make sure the card can actually cast a shadow */
#ig-feed .ig-embed-wrapper {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #e9e9e9;
	box-shadow: 0 12px 30px rgba(0,0,0,0.14) !important;
}