/*
 * Rakish Light — custom theme styles
 * Moved out of the Customizer "Additional CSS" into the theme (2026).
 * Loaded by the enqueue snippet added to the theme's functions.php.
 */

#site-content .hentry header {
	padding-top: 15px;
	padding-bottom: 10px;
	background-color: transparent;
}

.hentry .entry-header .entry-header-inner{
	position:relative;
	bottom:-20px;
}

.entry-header h1 {
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	padding-bottom: 20px;
}

	#site-content .hentry .post-inner{
		padding-top:0px;
	}

/* Paragraph */
.entry-header .intro-text p{
	color: #ffffff;
	}

/* Site Description */
.header-titles-wrapper .header-titles .site-description{
	color:#ffffff;
}

/*TOP Heading */
.header-titles .faux-heading a{
	color:#ffffff;
}

#site-header .header-inner .header-navigation-wrapper .primary-menu-wrapper .primary-menu .menu-item a{
	color:#ffffff;
}


/* Comment Reply Title */
#reply-title{
	text-align:left;
}

/* Commentform */
#commentform{
	position:relative;
	top:10px;
	left:-200px;
	right:-70px;
	}

@media (min-width:700px){

/* Remove Navigation */
	#site-content .hentry nav{
	visibility:hidden;

}


#reply-title{
		font-size:24px;
	background: none;
	}

		#submit{
		font-size:12px;
			background: none;
			color: #ffffff;
	}

	#site-footer .footer-copyright,#site-footer .powered-by-wordpress a,#site-footer .section-inner{
	color:#bdc3c7;
}

	/* Comment */
#comment{
	background-color:rgba(255,255,255,0.20);
	border: none;

}

	/* Comment Reply Title */
	#reply-title{
		font-size:20px;
	}

/* Remove meta data */
.entry-meta .byline, .entry-meta .cat-links { display: none; }

.entry-meta .posted-on { display: none; }

	#comments .comments-header h2{
	text-align:left;
	font-size: 24px;
}

/* Post Category at Top */
.entry-categories a{
visibility:hidden;
}
/* Post Meta & date*/
	.entry-header .post-meta-single ul{
		visibility:hidden;
	}

	/* Svg */
.desktop-nav-toggle .toggle-icon .svg-icon{
	color:#ffffff;
}

/* Svg */
.desktop-search-toggle .svg-icon{
	color:#ffffff;

}

	#site-footer{
	background-color:transparent;
	display:inline-block;
	transform:translatex(0px) translatey(0px) !important;

}

} /* end @media (min-width:700px) */


/* ============================================================
   Typography — match the live site (Georgia serif, site-wide)
   Overrides Twenty Twenty's default Inter (sans-serif).
   ============================================================ */
:root {
	--global--font-primary: Georgia, Times, "Times New Roman", serif;
	--global--font-secondary: Georgia, Times, "Times New Roman", serif;
}

body,
button,
input,
select,
optgroup,
textarea,
.faux-heading,
h1, h2, h3, h4, h5, h6,
.entry-title,
.heading-size-1, .heading-size-2, .heading-size-3,
.heading-size-4, .heading-size-5, .heading-size-6 {
	font-family: Georgia, Times, "Times New Roman", serif;
}


/* ============================================================
   Page / post titles (Projects, Education, About, PROJECT N…)
   Left-align the header and make the title a bit smaller.
   Tweak the font-size below to taste.
   ============================================================ */
.entry-header,
.entry-header.has-text-align-center {
	text-align: left;
}
.entry-header .entry-title {
	font-size: 26px;   /* was 32px */
}


/* ============================================================
   Splash statement (front page): the big H2 is a fixed 70px,
   which overflows on phones. Make it fluid so it scales down
   on small screens and stays 70px on desktop.
   min 28px  ·  preferred 7vw  ·  max 70px
   ============================================================ */
@media (max-width: 1000px) {
	body.home .fonts-plugin-block {
		font-size: clamp(30px, 8vw, 70px) !important;
		line-height: 1.15 !important;
		overflow-wrap: break-word;   /* wrap at spaces; only break a word if truly necessary */
		word-break: normal;
		hyphens: none;
	}
}


/* ============================================================
   Mobile header (< 1000px): sticky, translucent black bar with
   white type — matches the desktop sticky header. Fixes the
   white-on-white "Rakish Light" home link + Search/Menu toggles.
   ============================================================ */
@media (max-width: 1000px) {
	#site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.29) !important;   /* translucent black, like desktop */
	}
	#site-header .header-inner {
		background-color: transparent !important;
	}
	body.admin-bar #site-header { top: 46px; }   /* clear the mobile admin bar when logged in */

	#site-header .site-title,
	#site-header .site-title a,
	#site-header .site-description,
	#site-header .toggle,
	#site-header .toggle .toggle-text {
		color: #ffffff !important;
	}
	#site-header .toggle .toggle-icon .svg-icon,
	#site-header .header-titles-wrapper .svg-icon {
		color: #ffffff !important;
		fill: currentColor;
	}
}


/* ============================================================
   Splash / cover pages use Twenty Twenty's "overlay header"
   (position:absolute, so it scrolls away). Pin it like the rest
   with a translucent black bar. Applies at all widths.
   ============================================================ */
.overlay-header #site-header {
	position: fixed !important;
	background-color: rgba(0, 0, 0, 0.29) !important;
}


/* ============================================================
   Splash "scroll down" arrow:
   - yellow, matching the splash text (#ffff00)
   - raised above the bottom edge (was hanging at bottom:-78px,
     so it got cut off) — now visible on load at any screen height
   ============================================================ */
.to-the-content-wrapper {
	/* Pin to the viewport (not the tall cover) so the arrow is always visible on
	   load at any screen height. */
	position: fixed !important;
	top: auto !important;
	bottom: 40px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	z-index: 101;
}
.to-the-content,
.to-the-content .svg-icon {
	color: #ffff00 !important;
}
/* The arrow's <polygon> has a hardcoded fill="#FFF" attribute in the SVG
   markup; a CSS fill on the shape itself overrides that presentation attribute. */
.to-the-content .svg-icon,
.to-the-content .svg-icon polygon,
.to-the-content .svg-icon path {
	fill: #ffff00 !important;
}