/*
THEME NAME: Anglican v1
VERSION: 1
AUTHOR: anglican
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

@import url('css/global.css');


/* Fixes for stylesheets, in lieu of directly editing */



@font-face {
   font-family: "groscanon-light";
   src: url("fonts/groscanon-light.eot");
   src: url("fonts/groscanon-light.woff") format("woff");
   font-style: normal;
}

@font-face {
   font-family: "groscanon-medium";
   src: url("fonts/groscanon-medium.eot");
   src: url("fonts/groscanon-medium.woff") format("woff");
   font-style: normal;
}


nav.main-nav {
	width:894px;
}

nav.main-nav a {
	padding: 0;
	margin: 0 7px;
}


/* ------------------------------------------------------------------ *
 * Responsive header / navigation fixes                                *
 * The original theme used fixed pixel widths (header 940px, nav 894px) *
 * and a fixed 22px row height on .main-nav. When a row of links wraps  *
 * to a second line it overlapped the row below ("piling up"), and on   *
 * any viewport narrower than 940px the centered, fixed-width content    *
 * was clipped off the left edge. The rules below make the header fluid  *
 * and let the nav rows grow and wrap dynamically.                      *
 * ------------------------------------------------------------------ */

/* Make the outer containers fluid: a dynamic 75% of the viewport, centered,
   wider than the old fixed 940px so the nav links have more room and wrap
   less. A max-width keeps it sane on very large monitors; a min-width keeps
   it usable on small ones. */
header,
.page-wrap,
footer {
	width: 75% !important;
	max-width: 1500px !important;
	min-width: 320px;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* The decorative top/bottom frame images were never archived; their
   fixed 940px pseudo-elements forced horizontal overflow. Neutralize. */
header:before,
header:after,
.page-wrap:before,
.page-wrap:after {
	width: 100% !important;
}

/* Core fix: each nav row is now a centered flex container that wraps,
   with automatic height so wrapped lines never overlap the next row. */
nav.main-nav {
	width: 100% !important;
	max-width: none;         /* fill the wider central container */
	height: auto;            /* was a fixed 22px -> caused overlap */
	min-height: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	column-gap: 6px;
	row-gap: 6px;
	padding: 4px 8px;
	margin: 10px auto 0;
}

/* Let individual link labels sit on their own line if very long,
   rather than forcing the row wider than the viewport. */
nav.main-nav a,
nav.main-nav span {
	margin: 0;
	padding: 0 8px;
	display: inline-block;
	text-align: center;
	max-width: 100%;
	min-width: 0;            /* allow flex items to shrink so long labels wrap
	                            instead of overflowing (min-width:auto gotcha) */
	white-space: normal;
	overflow-wrap: break-word;
}

/* Keep fixed-width content blocks from forcing the page wider than a phone
   screen. When the page overflows horizontally, the centered header (and so
   the nav) gets pushed to the left and clipped on the right. Capping these
   at 100% keeps everything within the viewport so the nav stays centered. */
.welcome,
.page-intro-blockquote,
#mc_embed_signup form {
	max-width: 100%;
}

@media (max-width: 768px) {
	/* Use almost the full width on small screens (the 75% / 320px min-width
	   left too little room and squeezed the nav). */
	header,
	.page-wrap,
	footer {
		width: 94% !important;
		min-width: 0 !important;
	}
	/* These have hard pixel widths in the theme; let them shrink to fit. */
	.welcome { width: auto !important; }
	#mc_embed_signup form { width: 100% !important; }
	/* Long unbreakable URLs (e.g. the SubscribeStar link) would otherwise
	   widen the page; allow them to wrap. */
	.welcome a,
	.module a { overflow-wrap: anywhere; word-break: break-word; }
	/* Belt-and-suspenders: never allow sideways scrolling on mobile. */
	html, body { overflow-x: hidden; }
}


.dropcap+p:first-letter, .dropcap+.section:first-letter, .dropcap-inline+.section:first-letter {
	line-height: 1;
	margin-top: 0px;
}

.dropcap-3rows+p:first-letter, .dropcap-3rows+.section:first-letter {
	line-height: 1;
	margin-top: -8px;
	margin-bottom: -14px;
	font-size: 4.5em;
}

.dropcap-a+p, .dropcap-a+.section {
	text-indent: -16px;
}

.dropcap-e+p, .dropcap-e+.section {
	text-indent: -10px;
}

.dropcap-f+p, .dropcap-f+.section {
	text-indent: -12px;
}

.dropcap-i+p, .dropcap-i+.section {
	text-indent: -14px;	
}

.dropcap-m+p, .dropcap-m+.section {
	text-indent: -8px;
}

.dropcap-o+p, .dropcap-o+.section {
	text-indent: -10px;
}

.dropcap-w+p, .dropcap-w+.section {
	text-indent: -8px;
}


.dropcap-a+p:first-letter, .dropcap-a+.section:first-letter {
	margin-left: 18px; /* to undo text-indent */
	margin-right: 10px;
}

.dropcap-e+p:first-letter, .dropcap-e+.section:first-letter {
	margin-left: 10px; /* to undo text-indent */
	margin-right: 10px;
}

.dropcap-f+p:first-letter, .dropcap-f+.section:first-letter {
	margin-left: 12px; /* to undo text-indent */
    margin-right: 13px;	
}

.dropcap-i+p:first-letter, .dropcap-i+.section:first-letter {
	margin-left: 14px; /* to undo text-indent */
	margin-right: 13px;
}

.dropcap-m+p:first-letter, .dropcap-m+.section:first-letter {
	margin-left: 8px; /* to undo text-indent */
	margin-right: 8px;
}

.dropcap-o+p:first-letter, .dropcap-o+.section:first-letter {
	margin-left: 10px; /* to undo text-indent */
	margin-right: 8px;
}

.dropcap-w+p:first-letter, .dropcap-w+.section:first-letter {
	margin-left: 8px; /* to undo text-indent */
	margin-right: 8px;
}

/* fixes for dropcaps; got misaligned with the new font */
.dropcap-3rows+p:first-letter, .dropcap-3rows+.section:first-letter {
	padding: 7px 0 0 7px;
	font-size: 4.3em;
}


/* ================================================================== *
 * Book / works page layout (text + table of contents)                 *
 * Originally the text column hugged the left edge and the TOC the      *
 * right edge of the wide container (asymmetric); on narrow screens     *
 * the fixed-width article overflowed and the TOC overlapped the text.  *
 * These rules center the two as a pair on wide screens and stack the   *
 * TOC above the text on small screens. Applies to every .page-book     *
 * page (all doctrine + works pages).                                   *
 * ================================================================== */

/* Center the text + TOC as a pair instead of pinning them to the
   opposite edges of the wide container. */
.page-book {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	column-gap: 50px;
}
/* Title spans the full row. */
.page-book > .grid-4-4 {
	width: 100%;
	float: none;
	padding-left: 0;
	padding-right: 0;
}
/* Columns shrink to their content and sit next to each other, centered. */
.page-book > .grid-3-4,
.page-book > .grid-1-4 {
	float: none;
	width: auto;
	padding: 0;
}
/* Reserve a right-hand gutter on the text column for the marginal
   notes that appear on other book pages (.note floats into it). */
.page-book > .grid-3-4 {
	padding-right: 100px;
}
/* The article no longer floats, so use flow-root to contain its own
   floated paragraphs / figures / notes. */
.page-book-text,
.page-book-comments {
	float: none;
	display: flow-root;
	width: 500px;
	max-width: 100%;
	margin: 20px 0 0 0;
}
.page-aside { display: flow-root; }
.page-book-toc {
	width: 250px;
	max-width: 100%;
}

/* Narrow layout: as soon as the text + TOC can no longer sit side by side
   (~1300px here, since the container is 75% of the viewport), switch to a
   stacked layout with the TOC on top. This breakpoint must be high enough
   that flex never wraps the TOC to the BOTTOM of the page (below the long
   text column) in an in-between range. Also disables the JS sticky
   positioning so the TOC can never overlap the text. */
@media (max-width: 1300px) {
	.page-book {
		flex-direction: column;
		align-items: center;
		column-gap: 0;
	}
	.page-book > .grid-1-4 { order: 1; }   /* TOC first ... */
	.page-book > .grid-3-4 { order: 2; }   /* ... text below it */

	/* Text column fills the available width (up to the body's max width)
	   so the article inside can shrink on narrow screens. */
	.page-book > .grid-3-4 {
		width: 100%;
		max-width: 600px;
		padding-right: 0;
		box-sizing: border-box;
	}
	/* Keep the article's max width at its current 500px, but let it
	   reduce dynamically below that on small screens (was a fixed 500px,
	   which overflowed the viewport). */
	.page-book-text,
	.page-book-comments {
		width: 100%;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	/* The intro pull-quotes have hard pixel widths and an absolutely
	   positioned closing quote mark (left:440px) that would overflow the
	   narrowed text; make them fluid and drop the decorative marks. */
	.page-book-text .page-intro-blockquote {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		box-sizing: border-box;
	}
	.page-book-text .page-intro-blockquote span[style] {
		width: auto !important;
		max-width: 100%;
	}
	.page-book-text .page-intro-blockquote:before,
	.page-book-text .page-intro-blockquote cite:after {
		content: none;
	}
	/* Works-page title blocks have assorted fixed inner widths (300–550px);
	   cap them to the viewport and let the title text wrap. */
	.page-book .page-book-title,
	.page-book .page-book-title div[style] {
		max-width: 100% !important;
		overflow-wrap: break-word;
	}
	.page-book .page-book-title div[style] {
		width: auto !important;
	}
	/* Marginal notes float into a negative right-hand gutter on desktop, which
	   pokes off the right edge once the layout is stacked. Pull them (and the
	   floated marginal note-images) back into the normal flow. */
	.page-book-text .note,
	.page-book-text .inset,
	.page-book-text .note-inline,
	.page-book-text .inset-spacer {
		float: none !important;
		position: static !important;
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
	}

	/* Safety net: keep assorted fixed-width / wide content within the column
	   when the layout is narrow. */
	/* Long unbreakable words (lots of Latin/Greek in these texts) and tight
	   quotes would otherwise poke past the edge; let them break. */
	.page-book-text,
	.page-book-comments {
		overflow-wrap: break-word;
		word-break: break-word;
	}
	.page-book-text img,
	.page-book-comments img {
		max-width: 100% !important;
		height: auto;
	}
	.page-book hr { max-width: 100% !important; }
	.page-book-civil-war-banner {
		width: auto !important;
		max-width: 100% !important;
	}
	/* These headings/subheadings have hard pixel widths (470–520px) and left
	   margins in the theme. */
	.page-book .doctrinespage-subheading-2rows,
	.page-book .canons-groupheading-2rows,
	.page-book .canons-groupheading,
	.page-book .aor-subheading,
	.page-book .doctrinespage-subheading {
		width: auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow-wrap: break-word;
	}
	/* Heraldic / wide genealogy blocks (e.g. Matthew Parker's escutcheons). */
	.page-book-text [class*="escutcheon"] {
		width: auto !important;
		max-width: 100% !important;
	}
	/* Uppercase, letter-spaced inline headings can be wide; let them wrap. */
	.page-book-text .mark,
	.page-book-text .strong {
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.page-book .page-book-toc,
	.page-book .page-book-toc.stuck {
		position: static !important;
		top: auto !important;
		width: 250px;
		max-width: 100%;
		min-height: 0;          /* was 500px -> huge empty gap below TOC */
		margin: 0 auto 20px;
	}
	/* The sticky plugin wraps the TOC; keep the wrapper in normal flow
	   and let it collapse to the TOC's real height. */
	.page-book .sticky-wrapper {
		position: static !important;
		height: auto !important;
		min-height: 0 !important;
	}
	.page-book > .grid-1-4 { min-height: 0; }
}

/* Phone-only presentation (true mobile widths). Kept separate from the
   stacking breakpoint above so that figures and full-size titles still show
   on tablets / narrow laptops. */
@media (max-width: 768px) {
	/* Hide figures (scanned page images / marginal note images) on phones. */
	.page-book figure {
		display: none !important;
	}
	/* Big uppercase, letter-spaced headings (e.g. the catechism title at
	   3.4em) overflow on phones; shrink and allow wrapping. */
	.page-book h2.strong.mark {
		font-size: 2em !important;
		line-height: 1.2em !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow-wrap: break-word;
		word-break: break-word;
	}
	/* The works-page title blocks use large em-based inline font sizes and
	   wide letter-spacing; scale the whole block down and tighten spacing so
	   long single-word titles fit. */
	.page-book .page-book-title {
		font-size: 80%;
	}
	.page-book .page-book-title div[style] {
		letter-spacing: 1px !important;
	}
}