/* ==========================================================================
   TORREY PINES LAW GROUP - HOME PAGE STYLES
   This file is loaded ONLY by the home page, on the line after css/styles.css.
   Nothing in css/styles.css is edited. Rules here simply come later, so they win.

   Colours used in this file
     #0E2748  navy (header, dark bands)
     #091B33  dark navy (menu bar, footer)
     #1A3D6B  lighter navy (hover on navy)
     #1F56B3  link blue (the logo blue, darkened so it reads on white)
     #B85C14  sandstone (small labels on white)
     #F2A04A  light sandstone (small labels on navy)
     #172231  body text
     #566376  grey text
     #D5DAE2  thin rules
     #F3F5F9  pale band background

   Sections of this file
     1. Font            5. Bands and headings      9. People
     2. Page frame      6. Buttons and links      10. Technologies
     3. Header + menu   7. Three news columns     11. Numbers
     4. Footer          8. Practice tiles         12. Contact band
    13. Headline on the photograph    14. Featured box    15. Square logo
     then the phone and tablet rules.
   ========================================================================== */

/* 1. FONT --------------------------------------------------------------------
   The site already loads Montserrat Regular. Headings on the home page use
   the SemiBold weight, so one more font file is added to the /fonts folder. */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
	font-display: swap;
}

/* 2. PAGE FRAME --------------------------------------------------------------
   The old page sits in a 1360px box on a blue background. The home page now
   runs the full width of the window, and each band centres its own content. */
body {
	background-color: #FFF;
	margin: 0;
	color: #172231;
}
#layout {
	max-width: none;
	box-shadow: none;
	border-radius: 0;
}
#main-content {
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* 3. HEADER AND MENU ---------------------------------------------------------
   Same HTML as today (#logo, then the Pop Menu Magic menu). Only the colours
   and widths change. max(24px, calc(50% - 600px)) means: line the contents up
   with a 1200px column in the middle, but never closer than 24px to the edge. */
#logo {
	max-width: none;
	padding: 18px 24px;
	padding-left: max(24px, calc(50% - 600px));
	padding-right: max(24px, calc(50% - 600px));
	background-color: #0E2748;
	background-image: none;
	box-shadow: none;
}
#logo .header-phone {
	color: #FFF;
}
#logo .out_link {
	background-color: #FFF;
	color: #0E2748;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 3px;
}
#logo .out_link:hover {
	background-color: #F2A04A;
	color: #091B33;
}
#masthead {
	background-color: #091B33;
}
#layout #masthead .p7PM3-12.horiz {
	padding: 0 6px;
	padding-left: max(6px, calc(50% - 618px));
	padding-right: max(6px, calc(50% - 618px));
}
.p7PM3-12 {
	font-size: 15px;
}
.p7PM3-12 ul li a {
	color: #FFF;
	padding: 14px 18px;
}
.p7PM3-12 a.trig_open,
.p7PM3-12 ul li a.pm3-link:hover,
.p7PM3-12 ul li a:hover {
	color: #F2A04A;
	background-image: none;
}
.p7PM3-12 a.trig_closed,
.p7PM3-12 ul ul a.trig_closed {
	background-image: none;
}
/* drop-down panels */
.p7PM3-12 ul ul,
.p7PM3-12.transparent ul ul {
	background: #0E2748;
}
.p7PM3-12 ul ul li a {
	color: #E3E9F2;
	font-size: 14px;
	padding: 10px 18px;
}
.p7PM3-12 ul ul li a:hover,
.p7PM3-12 ul ul li a.trig_open,
.p7PM3-12 ul ul li a.pm3-link:hover {
	background-color: #1A3D6B;
	color: #FFF;
}
#banner {
	position: relative;
	border: 0;
	background-color: #091B33;
}

/* 4. FOOTER ------------------------------------------------------------------
   Same HTML as today. Dark navy instead of grey, and no capital letters. */
.footer {
	padding: 40px 24px;
	padding-left: max(24px, calc(50% - 600px));
	padding-right: max(24px, calc(50% - 600px));
	border: 0;
	border-radius: 0;
	background-color: #091B33 !important;
	background-image: none !important;
	color: #B9C3D3;
	font-size: 13px;
}
.footer a {
	color: #FFF;
}
.footer a:hover, .footer a:focus {
	color: #F2A04A;
}
.footer .copyright {
	padding: 6px 0;
	font-size: 13px;
	text-transform: none;
	line-height: 1.7;
}
.footer .copyright img {
	margin-right: 12px;
	vertical-align: middle;
}
/* the first footer line (award logos and copyright) is a little smaller so it fits on one line */
.footer .copyright:first-of-type {
	font-size: 12px;
}

/* 5. BANDS AND HEADINGS ------------------------------------------------------
   Every section of the page is a "band" that runs edge to edge, with an
   "inner" box that keeps the content 1200px wide and centred:
       <div class="home-band"> <div class="home-inner"> ... </div> </div>
   Add the word pale or navy after home-band to change the background. */
.home-band {
	padding: 64px 24px;
	background-color: #FFF;
}
.home-band.pale {
	background-color: #F3F5F9;
}
.home-band.navy {
	background-color: #0E2748;
	color: #FFF;
}
.home-inner {
	max-width: 1200px;
	margin: 0 auto;
}
.home-band h2, .home-band h3, .home-band p, .home-band ul, .home-band dl, .home-band dd {
	margin: 0;
	padding: 0;
}
.home-band ul {
	list-style: none;
}
.home-band h2 {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: #0E2748;
}
.home-band.navy h2 {
	color: #FFF;
}
.home-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #B85C14;
}
.navy .home-label, #banner .home-label {
	color: #F2A04A;
}

/* 6. BUTTONS AND LINKS ------------------------------------------------------- */
.home-button {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 13px 22px;
	border: 2px solid #FFF;
	border-radius: 3px;
	background-color: #FFF;
	color: #0E2748;
	font-size: 15px;
	font-weight: 600;
}
.home-button.outline {
	background-color: transparent;
	color: #FFF;
}
.home-button:hover, .home-button.outline:hover {
	background-color: #F2A04A;
	border-color: #F2A04A;
	color: #091B33;
	text-decoration: none;
}
.home-button.dark {
	border-color: #0E2748;
	background-color: #0E2748;
	color: #FFF;
}
.home-button.dark.outline {
	background-color: transparent;
	color: #0E2748;
}
.home-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	color: #1F56B3;
}
.navy .home-more {
	color: #F2A04A;
}
.home-more::after, .home-tiles a::after, .home-tech a::after {
	content: "\2192";	/* right arrow */
	margin-left: 8px;
}

/* 7. THREE NEWS COLUMNS: Recognition, Client Outcomes, Insights -------------- */
.home-news {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
}
.home-news h2 {
	padding-bottom: 14px;
	border-bottom: 2px solid #0E2748;
	font-size: 22px;
}
.home-news li {
	padding: 16px 0;
	border-bottom: 1px solid #D5DAE2;
}
.home-news li span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #B85C14;
}
.home-news li a {
	color: #0E2748;
	line-height: 1.4;
}
.home-news li a:hover {
	color: #1F56B3;
}

/* 8. PRACTICE TILES ---------------------------------------------------------- */
ul.home-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin-top: 24px;
	border-top: 1px solid #D5DAE2;
	border-left: 1px solid #D5DAE2;
}
.home-tiles a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	height: 100%;
	min-height: 140px;
	padding: 22px;
	border-right: 1px solid #D5DAE2;
	border-bottom: 1px solid #D5DAE2;
	background-color: #FFF;
	color: #0E2748;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}
.home-tiles a::after {
	margin: 14px 0 0 0;
	color: #B85C14;
	font-size: 20px;
}
.home-tiles a:hover {
	background-color: #0E2748;
	color: #FFF;
	text-decoration: none;
}
/* tiles on a navy band */
.navy .home-tiles, .navy .home-tiles a {
	border-color: #3A5275;
}
.navy .home-tiles a {
	background-color: transparent;
	color: #FFF;
}
.navy .home-tiles a::after {
	color: #F2A04A;
}
.navy .home-tiles a:hover {
	background-color: #1A3D6B;
}

/* 9. PEOPLE: text on the left, six portraits on the right -------------------- */
.home-people {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.home-people h2 {
	font-size: 30px;
}
.home-people p {
	margin-top: 16px;
	color: #566376;
}
.home-faces {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
}
.home-faces img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;		/* crops each portrait to the same shape */
	object-position: 50% 15%;
}

/* 10. TECHNOLOGIES ----------------------------------------------------------- */
.home-tech {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 48px;
}
.home-tech p {
	margin-top: 10px;
	color: #566376;
	font-size: 15px;
}
.home-tech ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 32px;
	border-top: 1px solid #B7C0CE;
}
.home-tech li a {
	display: flex;
	justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid #D5DAE2;
	color: #0E2748;
	font-size: 15px;
}
.home-tech li a:hover {
	color: #1F56B3;
}

/* 11. NUMBERS (Firm at a Glance) --------------------------------------------- */
.home-numbers {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 32px;
}
.home-numbers dt {
	font-size: 46px;
	font-weight: 600;
	line-height: 1.1;
	color: #0E2748;
}
.home-numbers dd {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 2px solid #B85C14;
	font-size: 15px;
	line-height: 1.45;
	color: #566376;
}
.navy .home-numbers dt {
	color: #FFF;
}
.navy .home-numbers dd {
	border-top-color: #F2A04A;
	color: #C9D2E0;
}

/* 12. CONTACT BAND ----------------------------------------------------------- */
.home-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.home-contact h2 {
	font-size: 30px;
}
.home-contact p {
	margin-top: 8px;
	color: #C9D2E0;
}
.home-contact p a {
	color: inherit;
	text-decoration: underline;
}
.home-contact .home-button {
	margin-bottom: 0;
}

/* 13. HEADLINE ON THE PHOTOGRAPH ----------------------------------------------
   The rotating photograph (Image Rotator Magic, unchanged) is made taller, and
   the headline block is laid on top of it with a dark fade behind the text. */
#banner .p7IRMimage {
	width: 100%;
	height: 540px !important;
	object-fit: cover;		/* fills the space and crops the edges instead of squashing */
}
.home-hero {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	padding: 0 24px;
	background-image: linear-gradient(90deg, rgba(9,27,51,.92) 0%, rgba(9,27,51,.62) 45%, rgba(9,27,51,.25) 100%);
	color: #FFF;
}
.home-hero .home-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	width: 100%;
}
.home-hero h1 {
	max-width: 690px;
	margin: 0;
	font-size: 50px;
	font-weight: 600;
	line-height: 1.08;
}
/* the small line above the headline is part of the H1, so the H1 keeps its key words */
.home-hero h1 .home-label {
	display: block;
	margin-bottom: 16px;
	line-height: 1.5;
}
.home-hero .home-lede {
	max-width: 560px;
	margin: 20px 0 28px 0;
	font-size: 18px;
	line-height: 1.55;
	color: #E3E9F2;
}

/* 14. FEATURED BOX ------------------------------------------------------------
   Three stories, one visible at a time.
   scripts/home.js moves the word "on" from one story to the next. */
.home-featured {
	flex: none;
	box-sizing: border-box;
	width: 380px;
	padding: 28px;
	border-top: 5px solid #F2A04A;
	background-color: rgba(9,27,51,.9);
}
.home-story {
	display: none;
	min-height: 215px;
}
.home-story.on {
	display: block;
}
.home-story h2 {
	margin: 10px 0 0 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}
.home-story p {
	margin: 0;
}
.home-story h2 + p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: #C9D2E0;
}
.home-story .home-more {
	color: #F2A04A;
}
.home-story-buttons {
	margin-top: 14px;
}
.home-story-buttons button {
	width: 34px;
	height: 24px;
	margin-right: 6px;
	padding: 0;
	border: 0;
	border-bottom: 4px solid #5A6E8C;
	background: none;
	cursor: pointer;
}
.home-story-buttons button.on {
	border-bottom-color: #FFF;
}

/* 15. SQUARE LOGO -------------------------------------------------------------
   The white square logo (art/Torrey-Pines-Law-Group-white.png) replaces the
   one-line logo in the header. It is pinned to the top left and the menu
   starts to its right. Here, on a desktop, the header and
   the menu bar are see-through and lie on top of the photograph, so the logo
   floats on the photograph itself. On tablets and phones the header is solid. */
#logo {
	z-index: 40;			/* keeps the square in front of the photograph */
	min-height: 40px;
}
#logo .logo-square {
	position: absolute;
	left: max(24px, calc(50% - 600px));
	margin: 0;
}
#logo .logo-square img {
	display: block;
	filter: none;
}
#logo .logo-square {
	top: 20px;
}
#logo .logo-square img {
	width: 150px;
	height: 150px;
}
#layout #masthead .p7PM3-12.horiz {
	padding-left: max(182px, calc(50% - 600px + 158px));
}
@media only screen and (min-width: 901px) {
	#logo {
		box-sizing: border-box;
		height: 76px;
		background-color: transparent;
	}
	#layout {
		position: relative;
		margin-top: -76px;		/* pulls the photograph up behind the header */
	}
	#masthead {
		position: absolute;
		top: 76px;
		right: 0;
		left: 0;
		z-index: 30;
		background-color: transparent;
	}
	#banner .p7IRMimage {
		height: 680px !important;
	}
	/* a second dark fade, from the top, so the logo and the menu can be read */
	.home-hero {
		padding-top: 170px;
		background-image: linear-gradient(180deg, rgba(9,27,51,.9) 0px, rgba(9,27,51,.55) 130px, rgba(9,27,51,0) 300px), linear-gradient(90deg, rgba(9,27,51,.92) 0%, rgba(9,27,51,.62) 45%, rgba(9,27,51,.25) 100%);
	}
}
/* Between 900px and 1200px the square and the menu are a little smaller,
   so the menu stays on one line. */
@media only screen and (max-width: 1200px) {
	#logo .logo-square img {
		width: 124px;
		height: 124px;
	}
	#layout #masthead .p7PM3-12.horiz {
		padding-left: 156px;
	}
	.p7PM3-12 {
		font-size: 14px;
	}
	.p7PM3-12 ul li a {
		padding-left: 8px;
		padding-right: 8px;
	}
}
/* Between 900px and 980px the menu is one step smaller again, for the same reason. */
@media only screen and (max-width: 980px) {
	.p7PM3-12 {
		font-size: 13px;
	}
	.p7PM3-12 ul li a {
		padding-left: 6px;
		padding-right: 6px;
	}
}
/* On small phones the square, the telephone number and the button are smaller,
   so all three fit across the top. */
@media only screen and (max-width: 420px) {
	#logo a.logo-square img {
		width: 68px;
		height: 68px;
	}
	#logo .header-cta {
		gap: 6px 12px;
	}
	#logo .header-cta .header-phone {
		font-size: 15px;
	}
	#logo .header-cta .out_link {
		font-size: 13px;
		padding: 8px 10px;
	}
}

/* PHONE AND TABLET -----------------------------------------------------------
   900px and 700px are the same break points css/styles.css already uses. */
@media only screen and (max-width: 900px) {
	.home-band {
		padding: 44px 20px;
	}
	.home-news, .home-people, .home-tech {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	ul.home-tiles, .home-numbers, .home-tech ul {
		grid-template-columns: 1fr 1fr;
	}
	.home-tiles a {
		min-height: 110px;
		padding: 16px;
		font-size: 15px;
	}
	.home-people h2, .home-contact h2 {
		font-size: 24px;
	}
	.home-numbers dt {
		font-size: 36px;
	}
	/* On tablets and phones the square stays at the top left, a little smaller,
	   with the telephone number and the button at the right. */
	#logo {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 20px;
		text-align: left;
	}
	#logo .logo-square {
		position: static;
		flex: none;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}
	#logo .logo-square img {
		width: 84px;
		height: 84px;
		box-shadow: none;
	}
	#logo .header-cta {
		justify-content: flex-end;
		margin: 0 0 0 auto;
	}
	#layout #masthead .p7PM3-12.horiz {
		padding-left: 6px;
	}
}
@media only screen and (max-width: 700px) {
	.p7PM3-12.responsive .pmm3-toolbar {
		background-color: #091B33;
		padding: 4px 16px;
	}
	.p7PM3-12.responsive .pmm3-toolbar a {
		color: #FFF;
	}
	.p7PM3-12.responsive ul li a {
		padding: 13px 20px;
		border-top: 1px solid #24395A !important;
	}
	.p7PM3-12.responsive a:hover {
		background-color: #1A3D6B;
	}
	.home-faces img {
		height: 130px;
	}
	.home-tech ul {
		column-gap: 16px;
	}
	.home-tech li a {
		font-size: 14px;
		overflow-wrap: normal;
	}
	.home-tech li a::after {
		display: none;		/* no room for the arrows on a phone */
	}
}

/* Headline and Featured box on smaller screens. */
@media only screen and (max-width: 1000px) {
	.home-hero h1 {
		font-size: 38px;
	}
	.home-featured {
		width: 320px;
	}
}
/* On phones the text and the Featured box move below the photograph. */
@media only screen and (max-width: 800px) {
	#banner .p7IRMimage {
		height: 200px !important;
	}
	.home-hero {
		position: static;
		padding: 32px 20px;
		background-image: none;
	}
	.home-hero .home-inner {
		display: block;
	}
	.home-hero h1 {
		font-size: 32px;
	}
	.home-hero .home-lede {
		font-size: 16px;
	}
	.home-featured {
		width: auto;
		margin-top: 24px;
		background-color: #0E2748;
	}
	.home-story {
		min-height: 0;
	}
}