/*
 * Terrell Builders — Catch Kathmandu 3.3 visual parity
 * ====================================================
 *
 * The site's design was built against Catch Kathmandu 3.3. The parent theme is
 * now 4.4.3. This sheet restores the handful of places where 4.4.3 renders
 * differently, so the upgrade is invisible to visitors.
 *
 * It is enqueued last (see functions.php), after the parent's style.css,
 * blocks.css, lightblack.css and responsive.css.
 *
 * Every rule below is traceable to a specific difference between the two
 * stylesheets — nothing here is stylistic preference. Sections:
 *
 *   1. Menus            — 4.x rebuilt the menu markup and changed its metrics
 *   2. Buttons          — padding shorthand changed
 *   3. Body-copy links  — 4.3 added underlines to content links
 *   4. Slider           — caption box widened
 *   5. Responsive       — 4.3.8 changed responsive font sizes; two
 *                         device-specific blocks were dropped entirely
 *
 * NOT restored: the mobile menu. 3.3 collapsed the nav into a styled <select>
 * (tinyNav + selectBox); 4.2.1 removed that in favour of a toggle button and
 * slide-down panel. Bringing the old one back would mean re-shipping the
 * unmaintained JS this upgrade exists to remove. Below 768px the menu is the
 * parent's, in the same palette.
 */


/* ==========================================================================
   1. Menus
   --------------------------------------------------------------------------
   3.3 markup:  #header-right .widget ul.menu  /  #secondary-menu ul.menu
   4.4 markup:  #header-right .main-navigation /  #secondary-menu-wrapper
                                                    .secondary-navigation

   Metric changes in 4.4: item line-height 4.5rem -> 2 (with padding rebalanced),
   sub-menu width 168px -> 200px and padding 10px/19px -> 8px, primary sub-menus
   flipped from left- to right-aligned, and the primary menu's top-level link
   colour (#333 in 3.3) fell through to the global link colour.

   Scoped to >=768px: at 767px and below the parent switches to its toggle menu,
   which these metrics must not touch. 3.3 did the equivalent by hiding the menu
   outright below 768px.
   ========================================================================== */

@media screen and (min-width: 768px) {

	/* Top-level items — 3.3 metrics */
	#header-right .main-navigation li > a,
	#secondary-menu-wrapper .secondary-navigation li > a {
		line-height: 45px;
		line-height: 4.5rem;
		white-space: nowrap;
	}

	#header-right .main-navigation li > a {
		color: #333;
		padding: 0 20px;
	}

	#secondary-menu-wrapper .secondary-navigation li > a {
		color: #fff;
		padding: 5px 25px;
	}

	/* Re-assert the parent's hover/current colours, which the #333 rule above
	   would otherwise outrank on specificity. Colours are unchanged from 3.3. */
	#header-right .main-navigation li:hover > a,
	#header-right .main-navigation li:focus > a,
	#header-right .main-navigation a:focus,
	#header-right .main-navigation .current_page_item > a,
	#header-right .main-navigation .current-page-ancestor > a,
	#header-right .main-navigation .current-menu-item > a,
	#header-right .main-navigation .current-menu-ancestor > a {
		background-color: #21759b;
		color: #fff;
	}

	/* Sub-menus — 3.3 sizing. (The site's menus are currently flat, so these
	   only take effect if a sub-menu is added later.) */
	#header-right .main-navigation ul ul a,
	#secondary-menu-wrapper .secondary-navigation ul ul a {
		color: #fff;
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: 400;
		height: auto;
		line-height: 23px;
		line-height: 2.3rem;
		padding: 10px 19px;
		white-space: normal;
		width: 168px;
	}

	/* 3.3 opened primary sub-menus left-aligned to their parent item;
	   4.4 right-aligns them. */
	#header-right .main-navigation ul li:hover > ul,
	#header-right .main-navigation ul li.focus > ul {
		left: 0;
		right: auto;
	}

	#header-right .main-navigation ul ul li:hover > ul,
	#header-right .main-navigation ul ul li.focus > ul {
		left: 100%;
		right: auto;
	}
}

/* 3.3 floated the header menu right (`.header-sidebar .menu { float: right }`);
   4.x dropped that rule — it is commented out in the parent's responsive.css.
   Invisible while #header-right shrink-wraps, but from 1024px down the parent
   gives it full width and the menu falls to the left. 3.3 replaced the float
   with `float: none; text-align: center` at 960px, which the parent does its own
   way (`#primary-menu { text-align: center }`), so this stops at 961px. */
@media screen and (min-width: 961px) {
	#header-right .main-navigation ul.menu {
		float: right;
	}
}

/* 3.3 tightened both menus from 1152px down. */
@media screen and (min-width: 768px) and (max-width: 1152px) {

	#header-right .main-navigation li > a,
	#secondary-menu-wrapper .secondary-navigation li > a {
		line-height: 40px;
		line-height: 4rem;
		padding: 0 10px;
	}

	#header-right .main-navigation ul ul,
	#secondary-menu-wrapper .secondary-navigation ul ul {
		width: 188px;
	}

	#header-right .main-navigation ul ul a,
	#secondary-menu-wrapper .secondary-navigation ul ul a {
		padding: 5px 10px;
		width: 188px;
	}
}


/* ==========================================================================
   2. Buttons
   4.4.2 changed the padding shorthand from `12px 20px 10px` to `12px 20px`,
   shifting button labels 1px down and making buttons 2px taller.
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type="submit"],
li.bypostauthor cite span {
	padding: 12px 20px 10px;
}


/* ==========================================================================
   3. Body-copy links
   4.3 ("Bug Fixed: Added underline on the anchor tag") underlined links inside
   post content, excerpts, text widgets and comments. 3.3 showed them plain,
   underlining on hover/focus only — which the parent still does, so that
   behaviour is untouched here.
   ========================================================================== */

.entry-content a:not(.more-link):not(.button):not(.wp-block-button__link),
.entry-summary a:not(.more-link):not(.button):not(.wp-block-button__link),
.ew-about a:not(.more-link):not(.button),
.widget_text a:not(.more-link):not(.button),
.comment-content a {
	text-decoration: none;
}


/* ==========================================================================
   4. Slider caption
   4.x widened the caption box from 350px to 450px (and from 40% to 60% below
   960px). The site's slider currently has no slides configured, so this only
   matters if slides are added.
   ========================================================================== */

#main-slider .entry-container {
	width: 350px;
}

@media screen and (max-width: 960px) {
	#main-slider .entry-container {
		width: 40%;
	}
}


/* ==========================================================================
   5. Responsive
   4.3.8 ("Updated: Responsive font sizes") re-tuned type at every breakpoint,
   and the 4.x responsive.css dropped 3.3's #site-title sizing along with two
   device-specific blocks (iPad portrait, small phones in landscape). Restored
   verbatim below.
   ========================================================================== */

@media screen and (max-width: 1344px) {
	#site-title {
		font-size: 32px;
	}
}

@media screen and (max-width: 1280px) {
	#site-title {
		font-size: 28px;
		font-size: 2.8rem;
	}
}

@media screen and (max-width: 1152px) {
	#homepage-message p {
		font-size: 14px;
		font-size: 1.4rem;
	}
}

/* 4.x added a 1.8rem featured-post title at <=1152px; 3.3 kept the base 2rem
   until its 960px block (restored further down). */
@media screen and (min-width: 961px) and (max-width: 1152px) {
	#featured-post .entry-title {
		font-size: 20px;
		font-size: 2rem;
	}
}

@media screen and (max-width: 1024px) {
	body,
	button,
	input,
	select,
	textarea {
		font-size: 14px;
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 960px) {
	body,
	button,
	input,
	select,
	textarea,
	#homepage-message p {
		font-size: 13px;
		font-size: 1.3rem;
	}

	.entry-header .entry-title,
	#homepage-message h2,
	#homepage-message .right-section a,
	#featured-post #feature-heading {
		font-size: 20px;
		font-size: 2rem;
	}

	#featured-post .entry-title {
		font-size: 18px;
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 767px) {
	#site-title {
		font-size: 30px;
		font-size: 3rem;
	}

	#site-description {
		font-size: 13px;
		font-size: 1.3rem;
		line-height: 1.4;
	}

	.entry-header .entry-title {
		font-size: 15px;
		font-size: 1.5rem;
	}

	#homepage-message,
	.comments-title,
	#reply-title {
		font-size: 15px;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 640px) {
	/* Re-asserted after the 767px block above: both stylesheets size the title
	   at 2.4rem here, but restoring 3.3's 767px rule in a later sheet would
	   otherwise outrank the parent's 640px rule. */
	#site-title {
		font-size: 24px;
		font-size: 2.4rem;
	}

	.entry-header .entry-title,
	#homepage-message h2,
	#homepage-message .right-section a,
	#featured-post #feature-heading {
		font-size: 16px;
		font-size: 1.6rem;
	}
}

/* Dropped wholesale by 4.x: iPad-class tablets in portrait. */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {

	.site {
		margin: 5px auto;
		width: 760px;
	}

	#site-logo,
	#hgroup-wrap #hgroup,
	#header-right .widget {
		width: 700px;
	}

	#homepage-message .left-section {
		width: 520px;
	}

	#featured-post.layout-four .post,
	#featured-post.layout-three .post {
		width: 335px;
	}

	#secondary {
		width: 730px;
	}

	#secondary .widget {
		width: 311px;
	}
}

/* Dropped wholesale by 4.x: small phones in landscape. */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: landscape) {

	.site {
		width: 520px;
	}

	#homepage-message .left-section {
		width: 330px;
	}

	#featured-post.layout-four .post,
	#featured-post.layout-three .post {
		width: 230px;
	}

	#secondary {
		width: 500px;
	}

	#secondary .widget {
		width: 206px;
	}
}