/*!
Theme Name: hartfield-financial
Theme URI: http://underscores.me/
Author: CJP
Author URI: http://parsonshosting.com
Description: A custom theme for Harfield Financial Services
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hartfield-financial
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

hartfield-financial is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}


/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}


/**
New CSS
 */

/* Header contact area (right of logo) */
.header-contact {
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
}
#header-contact-container a {
    color: #fff;
    text-decoration: none;
    font-size: 42px;
}
#header-contact-container a:hover {
    color: #fff;
    text-decoration: none;
}


a {
    text-decoration: none;
}
p, li {
    font-size: 14px;
}

.w50-percent {
    width: 50%;
}

.brand-logo img {
    width: 100%;
    height: auto;
}

/* Containers for WordPress menus in header */
#primary-nav .menu,
#sub-nav .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Primary navigation row: horizontal up to 6 items, centered if fewer */
#primary-nav.primary-row {
    width: 795px;
    background: #828cb4;
}
#primary-nav.primary-row .menu {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 21px;
    padding: 8px 10px;
    flex-wrap: nowrap;
}
#primary-nav.primary-row .menu > li {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 1 auto;
}
#primary-nav.primary-row .menu > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    min-width: 100px;
    max-width: 140px;
    height: 50px;
    background-color: #F67923;
    color: #f5f5f5;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}
#primary-nav.primary-row .menu > li > a:hover { background-color: #F67923; color: #fff; }

/* On small screens, allow wrapping */
@media (max-width: 820px) {
    #primary-nav.primary-row .menu { flex-wrap: wrap; }
}
/* Sub navigation strip (tile buttons) */
#sub-nav .menu {
    display: flex; /* lay out tiles left-to-right inside the table cell */
    align-items: stretch;
}
#sub-nav .menu > li { margin: 0; padding: 0; }
#sub-nav .menu > li > a {
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
}

/* Exact pixel sizes for tiles to match legacy */
#sub-nav .nav-retirement-planning > a { width:145px; height:138px; /*background-image:url('graphics/slices/retirement_planning.png');*/
    background-color: #F67923;
}
#sub-nav .nav-retirement-planning > a:hover {
    /*background-image:url('graphics/slices/retirement_planning_f2.png');*/
    background-color: #F67923;
}

#sub-nav .nav-529-plans > a { width:139px; height:138px; background-image:url('graphics/slices/529_plans.png'); }
#sub-nav .nav-529-plans > a:hover { background-image:url('graphics/slices/529_plans_f2.png'); }

#sub-nav .nav-corporate-benefits > a { width:139px; height:138px; background-image:url('graphics/slices/corporate_benefits.png'); }
#sub-nav .nav-corporate-benefits > a:hover { background-image:url('graphics/slices/corporate_benefits_f2.png'); }

#sub-nav .nav-insurance > a { width:139px; height:138px; background-image:url('graphics/slices/Insurance.png'); }
#sub-nav .nav-insurance > a:hover { background-image:url('graphics/slices/Insurance_f2.png'); }

#sub-nav .nav-1031-exchange > a { width:147px; height:138px; background-image:url('graphics/slices/1031_exchange_v2.png'); }
#sub-nav .nav-1031-exchange > a:hover { background-image:url('graphics/slices/1031_exchange_f2.png'); }

/* Optional utility if you want visually-hidden text for SRs instead of text-indent */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


body {
    /*background-color: #462700;*/
    background-color: #f5f5f5;
    padding: 0;
    margin: 0;
}
a[href $='.pdf'] {
    padding-left: 22px;
    background: transparent url(graphics/pdf.gif) no-repeat left;
}
a[href $='.zip'] {
    padding-left: 22px;
    background: transparent url(graphics/zip.gif) no-repeat left;
}

#container {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    /*background-image: url(graphics/slices/background_main.png);*/
    background-image: url(graphics/slices/background_main_new.png);
    background-repeat: repeat-y;
}
#header {
    height: 85px;
    width: 795px;
    background-image: url(graphics/slices/r3_c2.png);
    background-repeat: repeat-y;
}
#sub_nav {
    height: 138px;
    width: 795px;
}
#main {
    padding: 20px;
    width: 90%;
    margin: 0px;
}
#main h1 {
    margin-left: 23px;
}
.page-id-2 #main {
    width: 92% !important;
}
.page-id-2 .Accordion {
    width: 380px;
}
#main_home {
    width: 95%;
    margin: 0px;
    /*background-image: url(graphics/slices/background_home.png);*/
    background-image: url(graphics/slices/Tom-Headshot-circle-2025.png);
    height: 591px;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}
#main_home::after {
    content: "Thomas Hartfield \A 805.522.5815";
    white-space: pre;
    display: table;
    clear: both;
    width: 205px;
    text-align: center;
    padding-top: 28px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    bottom: 85px;
    right: -557px;
}
#services {
    width: 233px;
    float: left;
    margin-top: 10px;
}
.text_form {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    text-align: left;
}
#content {
    width: 491px;
    float: left;
    margin-left: 30px;
    margin-top: 10px;
}
#content_pages {
   /* float: left;
    margin-left: 31px;
    margin-top: 0px;
    margin-right: 75px;
    width: 710px;*/
}
h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #000;
    text-transform: capitalize;
    font-size: 16px;
}
h3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 22px;
    color: #000;
    line-height: 30px;
}
h4 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-top: 3px;
    margin-right: 0px;
    margin-bottom: 3px;
    margin-left: 0px;
    text-transform: capitalize;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
h5 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    color: #000;
}
.text_welcome {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
    line-height: 20px;
}
#footer {
    height: 30px;
    width: 795px;
    clear: both;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    padding-top: 3px;
    text-align: center;
}
  .AccordionPanelContent ul {
      list-style-type: circle;
      margin: 5px;
      padding-top: 5px;
      padding-right: 5px;
      padding-bottom: 5px;
      padding-left: 15px;
  }
.AccordionPanelContent p {
    padding: 1em;
}
#footer p a {
    color: #fa7828;
    text-decoration: underline;
}
#footer p a:hover {
    color: #fa7828;
    text-decoration: none;
}
.AccordionPanelContent ul li {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.AccordionPanelContent ul {
    list-style-type: circle;
    padding-left: 20px;
}
#leads_form {
    width: 230px;
    float: left;
    margin-left: 30px;
    margin-top: 15px;
}
#leads_form .gform-theme--foundation .gform_fields  {
    display: initial;
}
#leads_form input[type="text"],
#leads_form input[type="tel"],
#leads_form input[type="email"] {
    height: 26px;
}
#leads_form .gfield_label.gform-field-label,
#leads_form .gform-field-label.gform-field-label--type-sub {
    margin-bottom: 1px;
}
.label {
    margin-bottom: 13px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
}
#why_list {
    background-color: #E7D8C0;
    float: left;
    width: 275px;
    margin-left: 31px;
    border: 1px solid #B7AA98;
}
.why_list-points {
    margin: 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    line-height: 18px;
    border: 1px solid #ccc;
    padding-left: 13px;
    padding-right: 13px;
}
.why_list-points:hover {
    margin: 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    line-height: 18px;
    background-color: #FFF;
    border: 1px solid #ccc;
    padding-left: 13px;
    padding-right: 13px;
}
.text_quote {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    color: #4E2600;
    line-height: 30px;
    text-align: left;
    padding-left: 30px;
    padding-right: 15px;
}
#quote {
    background-color: #E5D7C0;
    width: 175px;
    float: left;
    margin-right: 15px;
    margin-bottom: 25px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    line-height: 30px;
    color: #4E2600;
    margin-top: 40px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 13px;
    margin-left: 0px;
    border: 1px solid #B7AC9A;
    text-align: center;
    font-style: italic;
}
.text_main {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #000;
}
.photo_border {
    border: 1px solid #4E2600;
    margin-bottom: 13px;
}
#quote_box {
    margin-right: 11px;
    margin-left: 11px;
}
#quote_right {
    background-color: #E5D7C0;
    width: 175px;
    float: right;
    margin-right: 15px;
    margin-bottom: 25px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    line-height: 30px;
    color: #4E2600;
    margin-top: 0px;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 13px;
    margin-left: 10px;
    border: 1px solid #B7AC9A;
    text-align: center;
    font-style: italic;
}
a:link , a:visited{
    color: #646e96;
}
.info_column {
    margin: 5px;
    padding: 10px;
    float: left;
    width: 125px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #D3C5B0;
}
a:hover {
    color: #000;
    text-decoration: none;
}
.info_column_FAQ {
    margin: 5px;
    padding: 10px;
    float: left;
    width: 360px;
}
.privacy_policy {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
#leads_form1 {
    float: left;
    width: 222px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: italic;
    text-align: left;
}

.footer-creds {
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 90%;
    margin: 0 auto 0 0.6rem;
}

/* Subnav container: you can keep your existing #sub_nav wrappers */
#sub_nav {
    background: #402709;
    padding: 0 0 1.618em 0;
}
#sub-nav.sub-nav, #sub_nav .sub-nav { max-width: 795px; margin: 0 auto; padding: 8px 0; }
#sub-nav .sub-menu, #sub_nav .sub-menu { list-style:none; margin:0; padding:0; display:flex; justify-content: center; flex-wrap:wrap; gap:8px; }
#sub-nav .sub-menu > li, #sub_nav .sub-menu > li { flex: 0 0 auto; }

/* Exact tile size */
.subnav-card-link { display:block; width:147px; }
.subnav-card { position:relative; display:block; width:147px; height:157px; background:#2d2d2d; overflow:hidden; }
.subnav-card__image { position:absolute; inset:0; background-image:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; }
.subnav-card__overlay { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; padding:8px 10px; }
.subnav-card__label { display:flex; align-items:center; font-weight:600; line-height:1.2; font-size:14px; height: 33px; }

/* Optional hover state for clarity */
.subnav-card-link:hover .subnav-card__overlay {
    /*background:rgba(0,0,0,0.6);*/
}

/* Responsive: allow wrapping, and optionally scale tiles on very small screens */
/*@media (max-width: 420px) {
    .subnav-card-link, .subnav-card { width:45vw; height:48vw; }
}*/


/* Container */
/*#sub_nav { background:#402709; }*/
#sub_nav { background:#828cb4; }
.sub-nav { max-width:795px; margin:0 auto; padding:8px 0; }

/* Grid: exactly 6 columns on desktop, then step down on breakpoints */
.sub-nav .sub-menu {
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
}

#menu-sub-navigation span {
    text-align: center;
    justify-content: center;
}

.text_main.learn-more-cta h4 {
    line-height: 1.5;
}

/* If you’re using the image-tile markup from earlier, these classes exist. */
.subnav-card-link { display:block; width:100%; }
.subnav-card { position:relative; display:block; width:100%; aspect-ratio:147/157; background:#2d2d2d; overflow:hidden; }
.subnav-card__image { position:absolute; inset:0; background-image:var(--bg); background-size:cover; background-position:center; }
.subnav-card__overlay {
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    /*background:rgba(255,255,255,1.0);*/
    background-color: #F67923;
    color:#f5f5f5;
    padding:8px 10px;
    font-weight:600;
}

/* Mailchimp Newsletter Footer Styles */
.footer-newsletter {
    background-color: #bec8dc;
    padding: 40px 20px;
    text-align: center;
    border-top: 15px solid #828cb4;
    border-left: 15px solid #828cb4;
    border-right: 15px solid #828cb4;
    border-bottom: 15px solid #828cb4;
    margin: 0 0 0 -1.72rem;
    width: 725px;
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
}

.footer-newsletter h3 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #333;
    line-height: .6;
}

.footer-newsletter p {
    margin: 0 0 10px;
    color: #666;
}

#mc_embed_signup form {
    padding: 0;
}

#mc_embed_signup .mc-field-group {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    margin-right: 10px;
}

#mc_embed_signup input.email {
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

#mc_embed_signup .button {
    background-color: #F67923;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

#mc_embed_signup .button:hover {
    background-color: #F67923;
}

#mc_embed_signup .response {
    padding: 10px;
    margin: 10px 0;
}

#primary,
#secondary {
    width: 45rem;
    margin: 0 auto;
}
#block-2 .wp-block-search__button-outside.wp-block-search__text-button.wp-block-search {
    width: 60%;
}

.error404 #main {
    width: 80%;
    margin: 0 auto;
}
.error-404 .page-header h1.page-title {
    margin: 0 !important;
}

#gform_submit_button_1.gform_button.button {
    background-color: #F67923;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.newsletter-content p {
    color: #000;
}

.archive #primary {
    width: 42rem;
    margin: 0 7em 0 auto;
}

/* Media Queries */

@media (max-width: 768px) {
    .footer-newsletter {
        padding: 30px 15px;
    }

    #mc_embed_signup .mc-field-group {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .footer-newsletter {
        width: 735px;
    }

}

/* Breakpoints: reduce columns for smaller screens */
@media (max-width: 1000px) { .sub-nav .sub-menu { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 840px)  { .sub-nav .sub-menu { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px)  { .sub-nav .sub-menu { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .sub-nav .sub-menu { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px)  { .sub-nav .sub-menu { grid-template-columns: 1fr; } }