/* Fred - Make the Twenty Seventeen front-page header a wide banner, using the image's natural aspect ratio. 2026-09-20.
   Fred: use this header image: Xinhaidude-Taiwan-2009-HuaLien-City-CiSingTan-Bay-Stonehead-FRD-8387-Scaled-Cropped-Very-Wide.jpg
*/

.twentyseventeen-front-page.has-header-image .custom-header,
.home.blog.has-header-image .custom-header {
    height: auto !important;
    display: block;
}

.twentyseventeen-front-page.has-header-image .custom-header-media,
.home.blog.has-header-image .custom-header-media {
    position: relative;
    height: auto !important;
    overflow: hidden;
}

.twentyseventeen-front-page.has-header-image .custom-header-media img,
.home.blog.has-header-image .custom-header-media img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    object-fit: contain;
    transform: none;
    left: auto;
    top: auto;
}

/* Fred - Increase text column width w.r.t. to sidebar, and give thw whole port a wider default. 2026-09-20. */

@media screen and (min-width: 48em) {
    .site-content > .wrap {
        max-width: 1200px;
    }
    .has-sidebar:not(.error404) #primary {
        width: 76%;
    }
    .has-sidebar #secondary {
        width: 20%;
    }
}

/* Fred - Undo the desktop layout from 768px through 899px. Basically disable disdebar below 900 width. 2026-09-20. */
/* Fred - I think this makes Chrome Inspector debugging a bit broken. Switch back/forth between desktop/mobile to correct */
@media screen and (min-width: 48em) and (max-width: 899px) {
    .has-sidebar:not(.error404) #primary {
        float: none;
        width: 100%;
    }
    .has-sidebar #secondary {
        float: none;
        width: 100%;
        padding-top: 3em;
    }
}

/* I have made the blog text column wider. Instruct WP to fill images to the width */
/* Fred - this does not affect images inside multi-column blocks. 2026-09-20. */
@media screen and (min-width: 48em) {
    .single-post .entry-content img {
        width: 100%;
        height: auto;
    }
}

/* Fred: add table borders. 2026-09-20. Twenty Seventeen has the same issue as Twenty Ten */
#content table {
	border: 0 solid #e7e7e7;
	text-align: center;
	width: 100%;
	margin: 0;
}

#content tr th,#content thead th {
	border: 1px solid #e7e7e7;
	color: #555555;
	font-size: 14px;
	font-weight: bold;
	padding: 4px;
}

#content tr td {
	border: 1px solid #e7e7e7;
	font-size: 14px;
	padding: 4px;
}

/* 2022-07-02: WP changes introduced margin-block-* keys that Wordpress does not allow me to override and save in custom css. Use regular keys instead */
/* Fred - WP blocks have annoying bottom margins that I do not need. 2026-09-20. Twenty Seventeen has the same issue as Twenty Ten */
#content .wp-block-image {
	display: block;
	margin-top: 0;
	margin-bottom: .5em;
	margin-left: 0;
	margin-right: 0;
}

#content .wp-block-table {
	display: block;
	margin-top: 0;
	margin-bottom: .5em;
	margin-left: 0;
	margin-right: 0;
}

/* Fred - WP blocks have annoying bottom margins that I do not need. 2026-09-20. Twenty Seventeen has the same issue as Twenty Ten */
#content .wp-block-columns {
	margin-bottom: .5em;
}

#content .wp-block-image figcaption {
	margin-bottom: .5em;
	padding-bottom: .5em;
}

#content .wp-block-image figure {
	margin-bottom: .5em;
}

/* Can't believe I lived with 1.0 line height for so long */
/* Fred - 2026-09-20. Twenty Seventeen has the same issue as Twenty Ten */
/* Fred - also increase font size */
.entry-content p {
    font-size: 1.125rem;
	line-height: 1.8;
}

/* Fred 2026-09-20: Twenty Seventeen theme's hyperlink color choices are limited. I need to override them */
.entry-content a {
    color: #044f85;
}

.entry-content a:visited {
    color: #640484;
}

/* Fred 2026-09-20: I don't want it to show XINHAID DUDE over header image. Make it normal case. */
.site-branding-text .site-title {
    text-transform: none;
}

/* Fred 2026-09-20: Crop post feature image to 200 pixels height when window small. Otherwise maintain a 4.7 aspect ratio */
.single-featured-image-header {
    aspect-ratio: 4.7 / 1;
    overflow: hidden;
}
.single-featured-image-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fred 2026-09-20: Desktop defaults to 88px padding, and mobile 45px. Too much. */
.site-content {
    padding-top: 30px;
}

/* Fred 2026-09-20: Reduce padding-top of wp-block-heading from its current 1.5em to 0.5em */
.wp-block-heading {
    padding-top: 0.5em;
}

/* Fred 2026-09-20: H3 heading looks like normal text on phone */
@media screen and (max-width: 999px) {
    .entry-content h3 {
        font-weight: 600;
        line-height: 1.4;
    }
}