/*
Theme Name: Warren for Oakland
Version: 2024
Author: FWDLABS
Author URI: https://fwdlabs.com
*/

/* Reset (Meyer) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style-type: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Boilerplate */

html {
	background:#eee;
    color: #585d62;
    line-height: 1.4;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
	font-family:Helvetica, Arial, sans-serif;
}

.hidden {
    display: none !important;
}

.visuallyhidden,
.screen-reader-response {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        page-break-inside: auto;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

	h1,
	h2 {
		line-height:1;
		margin-bottom:0;
	}

    p,
    h2,
    h3,
	h4 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3,
	h4 {
        page-break-after: avoid;
    }

	.no-print,
	.post-edit-link,
	#header-navigation,
	#credit { display:none; }

}

*, *:before, *:after {
    box-sizing: border-box;
}

/* Custom */

html, body {
	height: 100%;
	width: 100%;
}

body {
	font-family: Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.625;
    color: #000;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

.container {
    max-width:1280px;
    margin:0 auto;
    z-index: 1;
    position: relative;
}

a { text-decoration:none; color:#44A0BE; }
a:hover { color:#000; }
article .container a:not(.button) { border-bottom:1px solid; }

#ft {
    text-align:center;
}

.grid {
    display:grid;
    grid-gap:1rem;
}
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 960px) {
    .grid-2,
    .grid.grid-1-mobile { grid-template-columns: repeat(1, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.menu {
    font-family:"Roboto Condensed", sans-serif;
}

.row,
.menu {
    display:flex;
    flex-direction:row;
}
    .menu { list-style-type:none; }
    #ft .menu { justify-content:center; }
    #ft .menu img { width: 32px; height: auto; }
    
    #hd .menu {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #hd #menu-secondary.menu li { font-size:1rem; }

.row .column-1.half-desktop-full-mobile {
    width:50%; min-width:300px; text-align:center; flex:0 1 auto;
}
@media screen and (max-width: 768px) {
    .row .column-1.half-desktop-full-mobile { width:100%; min-width:auto; flex: 1 1 auto; }
}

body:not(.home) .current-menu-item,
body:not(.home) .current-page-ancestor { border-bottom:1px solid #fff; }
body:not(.home) .current-menu-item:hover,
body:not(.home) .current-page-ancestor:hover { border-bottom:1px solid#44A0BE; }

.column-0 { flex:0; white-space:nowrap; }
.column-1 { flex:1; }
.column-2 { flex:2; }

.columns-two {
    columns:2;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
@media screen and (max-width: 768px) {
    .columns-two { columns:1; }
}

.gutter { padding:4rem; }
.gutter-half { padding:2rem; }
    @media screen and (max-width: 768px) {
        .gutter { padding:1.5rem; }
        .gutter-half { padding:0.75rem; }
        #hd .menu { justify-content:center; margin-top:2rem; }
    }

.last { margin-bottom:0 !important; }

ul { list-style-type:disc; }
ol { list-style-type:decimal; }

article ul,
article ol {
	margin-left:2rem;
}
article ul.no-indent { margin-left:0; }
article ul.no-bullet,
#header-background ul { list-style-type:none; }
article ul li {
    color:#000;
    font-size:1.15rem;
}

/*
article ul:not(.no-bullet) li:before {
    content: "▪";
    color:#0c405f;
    position: absolute;
    top: 0;
    left:-2rem;
    line-height: 1;
    font-size: 2rem;
}
*/
    
    @media screen and (max-width: 768px) {
        article ul li:before { font-size:1.5rem; left:-2rem; line-height:1.5; }
    }

.toggle-wrap { display:none; }

a.toggle-link {
    display:block;
    position:relative; 
    padding-right: 1rem;
}
a.toggle-link.toggle-close:after {
    content: "-";
}
a.toggle-link:after {
    content: "+";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    margin-left:2rem;
}

article img {
    max-width: 100%;
    height: auto;
}
    img.border {
        border:6px solid #fff;
        border-radius:22px;
    }
    @media screen and (max-width: 768px) {
        body.home img { max-height:320px; }
    }

#header-background {
    width: 100%;
    height: 85vh;
    max-height: 100vh;
    min-height: 800px;
    background-color:#222;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom left;
    background-image:url('https://warrenforoakland.com/wp-content/uploads/header-background.jpg');
    aspect-ratio:auto;
}
    body:not(.home) #header-background {
        min-height:auto;
        height:auto;
    }
    @media screen and (max-width: 2000px) {
        #header-background { background-size:cover; }
    }
    @media screen and (max-width: 640px) {
        body:not(.home) #header-background { }
        body.home #header-background { min-height: 800px !important; }
    }

#header-foreground {
    display:flex; height:100%; width:100%; flex-direction: column; align-items: flex-end;
}

section {
    position:relative;
    background-color:#fff;
}
    section.grey-bg {
        background-color:#EDEEF1;
    }

.menu li { margin-right:1rem; flex:0 0 auto; }
    .menu li:last-of-type { margin-right:0; }
    #hd .menu li { margin-left:1rem; margin-right:0; }
    @media screen and (max-width: 768px) {
        #hd .menu li { margin-left:0.5rem; margin-right:0.5rem; margin-bottom:0; }
    }

    #header-background .menu a {
        color:#fff;
        text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        display:inline-block;
    }
    #header-background .menu a:hover { color:#44A0BE; }
    body.page-id-19 #header-background .menu a { text-shadow: 0px 0px 5px rgba(0,0,0,0.75); }

h1, .h1,
h2, .h2,
h3, .h3 {
    font-family:"Playfair Display", sans-serif;
}

h1, .h1 {
    font-weight:700;
    font-size:5rem;
    line-height:1;
    color:#000;
    margin-bottom: 2rem;
}
    #header-background h1 { color:#fff; margin-bottom: 0; text-align:center; text-wrap:balance; }
    body.home #header-background h1 { text-align:right; margin-left: 33%; }
    @media screen and (max-width: 768px) {
        #header-background h1 { text-align:center; margin-bottom:1rem; margin-left: 0; font-size:3rem; }
        body.home #header-background h1 { text-align:center; margin-left:0; }
    }

h2, .h2 {
    font-weight:400;
    font-size:3rem;
    line-height:1;
    margin-bottom:2rem;
}

h3, .h3 {
    font-size:2rem;
    font-weight:700;
    color:#0c405f;
    line-height:1.25;
    margin-bottom:1rem;
}
    h3 span, .h3 span { font-weight:400; }
    body.page-id-19 h3,
    body.page-id-559 h3,
    body.page-id-647 h3,
    body.page-id-658 h3 { color:#44A0BE; }

@media screen and (max-width: 640px) {
    h1, .h1 { font-size:4rem; }
    h2, .h2 { font-size:2.5rem; }
    h3, .h3 { font-size:1.5rem; }
    #header-background .menu a { font-size:1rem; }
    #hd #menu-secondary.menu { margin-top:0.5rem; margin-bottom:0.5rem; }
    #header-background #menu-secondary.menu a { font-size:0.8rem; }
}

p,
small,
li,
input,
textarea,
.wpcf7-response-output {
    font-family:"Roboto Condensed", sans-serif;
}

p, li {
    font-size:1.25rem;
    margin-bottom:1rem;
    color:#000;
}

p.offset { margin-top: -10rem; }
    @media screen and (max-width: 768px) {
        p.offset { margin-top:0 }
    }

small,
.wpcf7-form-control-wrap,
.wpcf7-response-output,
.wp-caption-text {
    font-size:0.85rem !important;
    display:block;
}
    .wpcf7-form-control-wrap,
    .wpcf7-response-output {
        font-style: italic;
        font-family:"Playfair Display", sans-serif;
    }
    .wpcf7-form-control-wrap span {
        display:block;
        margin-top:0.25rem;
    }
    .wpcf7-form-control-wrap .wpcf7-list-item { display:inline-flex; }
    .wpcf7-form-control-wrap .wpcf7-list-item span { display:inline-block; font-style:normal; margin-top:0; }

strong { font-weight:700; }
em { font-style:italic; }

.alignleft { float:left; margin: 0 2rem 2rem 0; }
.alignright { float:right; margin: 0 0 2rem 2rem; }

.alignright .wp-caption-text { text-align:right; }

@media screen and (max-width: 768px) {
    article .alignleft,
    article .alignright { float:none; margin-left:0; margin-right:0; max-width:100% !important; }
}

.wp-caption img { margin-bottom:1rem;}
.wp-caption-text { width:auto !important; }

@media screen and (max-width: 768px) {
    .wp-caption { width:100% !important; }
    .wp-caption img { max-width:100% !important; }
}

.pullquote {
    display: inline-block;
    font-size: 2rem;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    font-weight: bold;
    background-color: #44A0BE;
    color:#fff;
    padding: 2rem;
    margin: 0 0 1rem;
    max-width: 50%;
}
@media screen and (max-width: 768px) {
    .pullquote { max-width: 100%; }
}

#header-background .wpcf7 span { color:#fff; margin-bottom:1rem; }

.wpcf7 label {
    color:#fff;
    text-transform: uppercase;
    font-size: 0.75rem;
    text-align: left;
    display: block;
    margin-bottom:0.5rem;
}
    .wpcf7 .wpcf7-checkbox label {
        font-size:1rem;
        text-transform:none;
    }
    .wpcf7 .wpcf7-list-item label {
        display: flex;
        align-items: center;
        margin-right:2rem;
        margin-bottom:0;
        font-family: "Roboto Condensed", sans-serif;
    }

.wpcf7 .column-1:first-of-type { margin-right:1rem; }

.wpcf7 p { margin:0; }

input,
textarea {
    padding:15px;
    font-size:16px;
    width:100%;
    border:0;
    border-radius: 0;
    margin-bottom:1rem;
}
    input[type=radio] { width:32px; height:32px; margin:0 1rem 0 0; }
    #header-background input { margin-bottom:0; }
    @media screen and (max-width: 768px) {
        input { padding:5px; }
    }

input[type=password] { background:#eee; }

.button,
input[type=submit] {
    color:#fff;
    background-color: #E08536;
    font-size:2rem;
    font-family:"Roboto Condensed", sans-serif;
    font-weight:300;
    padding:5px 30px;
    width:auto;
    border:0;
    cursor:pointer;
    margin-bottom:5px;
    display: inline-block;
    transition: background-color 0.25s;
}
    #ft .button,
    #ft input[type=submit] {
        background-color:#0C405F;
    }
    .button:hover,
    input[type=submit]:hover {
        background-color:#000 !important;
        color:#fff !important;
    }
    @media screen and (max-width: 768px) {
        .button,
        input[type=submit] { font-size:1.25rem; }
    }

input[type=checkbox] {
    width:30px;
    height:30px;
    vertical-align: middle;
    margin:0 1rem 0 0;
}

    @media screen and (max-width: 768px) {
        input[type=checkbox] { width:24px; height:24px; }
        .wpcf7 .wpcf7-checkbox label { font-size:0.75rem; }
    }

#logo-and-nav { align-items: center; width:100%; }
@media screen and (max-width: 768px) {
    #logo-and-nav { flex-direction:column; }
}
#logo-and-nav img {
    -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.5));
    filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.5));
}

#headline {
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    text-shadow: 0px 5px 5px rgba(0,0,0,0.5);
}
@media screen and (max-width: 768px) {
    #headline { justify-content:flex-end; }
}
#headline-and-subscribe {
    display:flex; flex-direction:column; justify-content:flex-end; height:100%;width:100%;
}

#why h2 { color:#44A0BE; margin-top:2rem; }
#why p { margin-right:2rem; }
#why img { z-index: 1; position: absolute; }
@media screen and (max-width: 768px) {
    #why h2 { margin-top:0; }
    #why .row { flex-direction:column; }
    #why img { position:relative; margin-bottom:1rem; max-width:100%; }
    #why .column-1 { order:1; }
    #why .column-2 { order:2; }
}

#vision {
    background-color:#44A0BE;
    padding-bottom:4rem;
    background-image:url('https://warrenforoakland.com/wp-content/uploads/tower.png'); background-size:33%;
    background-position: center right;
    background-repeat:no-repeat;
    background-attachment: fixed;
}
    @media screen and (max-width: 768px) {
        #vision { background-size:66%; }
    }
#vision h2 { color:#0c405f; }
#vision h3 { color:#fff; }

#about-image { 
    margin-top: -4rem;
    background-image:url('https://warrenforoakland.com/wp-content/uploads/warren-logan-photo-by-lenny-gonzalez.jpeg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}
@media screen and (max-width: 768px) {
    #about .row,
    body.page-id-559 article .row { flex-direction: column; }
    #about-image {
        margin-top:0;
        min-height:450px;
    }
}

#about p { color:#fff; }

.offset-bottom { margin-bottom:-2rem; }
#subscribe .offset-bottom {
    margin-bottom:-8rem;
    background-color:#0C405F;
    color:#fff;
    z-index: 2;
}
@media screen and (max-width: 768px) {
    .offset-bottom,
    #subscribe .offset-bottom { margin-bottom:0; }
}

@media screen and (max-width: 960px) {
    #subscribe { flex-direction:column; }
}

.dark-blue-background {
    background-color:#0C405F;
    color:#fff;
}
    .dark-blue-background p { color:#fff; margin-bottom:1rem; }

#district-3 {
    background-color:#0C405F;
}
#district-3 p {
    color:#fff;
}
#district-3 h2 {
    color:#44A0BE;
}

.post-password-form { text-align:center; margin:3rem 0; }
.post-password-form input[type=password] { border: 2px solid #555; max-width: 200px; }
.post-password-form input[type=submit] { display:block; margin:1rem auto; }

blockquote {
    border:1px solid #0C405F;
    border-radius:1rem;
    margin-bottom:1rem;
    padding:1rem;
    display: flex;
    align-items: center;
}
blockquote p:last-of-type { margin-bottom:0; }
blockquote cite { margin-top:1rem; display:block; }

.grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.2rem;
    margin-bottom:1rem;
}
@media(max-width:850px){
    .grid { grid-template-columns: repeat(2, 1fr); }
}

.gallery {
    z-index: 1;
    position: relative;
}

.gallery img {
    max-width: 100%;
    height: auto;
}
.gallery-item a { display:block; }


/*! Lity - v3.0.0-dev - 2020-04-26
* http://sorgalla.com/lity/
* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */

.lity-active,
.lity-active body {
  overflow: hidden;
}

.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, .9);
  outline: none !important;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.lity.lity-opened {
  opacity: 1;
}

.lity.lity-closed {
  opacity: 0;
}

.lity * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}

.lity-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.lity-loading .lity-loader {
  opacity: 1;
}

.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}

.lity-content {
  z-index: 9993;
  width: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  -o-transition: -o-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
}

.lity-loading .lity-content,
.lity-closed .lity-content {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

.lity-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
  box-shadow: 0 0 8px rgba(0, 0, 0, .6);
}

.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  z-index: 9994;
  width: 35px;
  height: 35px;

  /* Change to position: absolute to display close button inside content container */
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  border: 0;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.lity-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.lity-close:active {
  top: 1px;
}

/* Image */

.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
  /* max-width: 1500px; */
  height: auto;
}

/* iFrame */

.lity-iframe .lity-container {
  width: 100%;
  max-width: 964px;
}

.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
  box-shadow: 0 0 8px rgba(0, 0, 0, .6);
  background: #000;
}

.lity-hide {
  display: none;
}