/*
 * Pride Built Homes: site-wide styles.
 * Loaded on every page via <link rel="stylesheet" href="/site.css">.
 */

/* Header phone: hidden at the top of the page, slides in once scrolled (site.js). */

.pbh-nav-phone{
display:inline-flex;
align-items:center;
gap:.55rem;
max-width:0;
margin-left:0;
padding:0;
overflow:hidden;
white-space:nowrap;
opacity:0;
visibility:hidden;
transform:translateX(12px);
border-radius:999px;
border:0 solid #c49b61;
background:#c49b61;
color:#1c0b0b!important;
font-weight:700;
font-size:1rem;
letter-spacing:.03em;
/* Even-height digits: the site font draws old-style (bobbing) numerals by default. */
font-variant-numeric:lining-nums tabular-nums;
font-feature-settings:"lnum" 1, "tnum" 1;
line-height:1;
text-decoration:none;
box-shadow:0 6px 18px rgba(0,0,0,.25);
transition:
max-width .45s ease,
margin .45s ease,
padding .45s ease,
opacity .3s ease,
transform .45s ease,
background-color .25s ease,
border-color .25s ease,
visibility 0s linear .45s;
}

.pbh-nav-phone i{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
flex-shrink:0;
border-radius:50%;
background:#1c0b0b;
color:#c49b61;
font-size:.8rem;
transition:background-color .25s ease, color .25s ease;
}

/* Barlow (already loaded on every page) has clearer digits than the nav font. */
.pbh-nav-phone span{
font-family:"Barlow",system-ui,sans-serif;
font-weight:700;
font-size:1.08rem;
letter-spacing:.04em;
}

.pbh-show-phone .pbh-nav-phone{
max-width:240px;
border-width:1px;
margin-left:1.1rem;
padding:.4rem 1rem .4rem .4rem;
opacity:1;
visibility:visible;
transform:none;
transition-delay:0s;
}

.pbh-nav-phone:hover,
.pbh-nav-phone:focus-visible{
background:#fff;
border-color:#fff;
}

.pbh-nav-phone:focus-visible{
outline:2px solid #fff;
outline-offset:3px;
}

/* Laptop widths: not enough room for the number, so show a round call button. */
@media(min-width:992px) and (max-width:1199.98px){

.pbh-nav-phone{
gap:0;
font-size:0;
}

.pbh-show-phone .pbh-nav-phone{
max-width:44px;
margin-left:.6rem;
padding:0;
}

.pbh-nav-phone i{
width:38px;
height:38px;
font-size:.95rem;
background:transparent;
color:#1c0b0b;
}

}

/* Mobile: round call button beside the menu toggler. */
@media(max-width:991px){

.pbh-nav-phone{
order:1;
gap:0;
font-size:0;
}

.pbh-show-phone .pbh-nav-phone{
max-width:44px;
margin-left:auto;
margin-right:.5rem;
padding:0;
}

.pbh-nav-phone i{
width:40px;
height:40px;
font-size:1rem;
background:transparent;
color:#1c0b0b;
}

.custom-navbar .navbar-toggler{
order:2;
}

.custom-navbar .navbar-collapse{
order:3;
}

}

/* Phones: keep logo, call button and menu toggler on one line. */
@media(max-width:430px){

.custom-navbar .navbar-brand{
font-size:1rem;
gap:.5rem;
}

.custom-navbar .navbar-brand img{
height:32px;
}

}

@media(max-width:359.98px){

.custom-navbar .navbar-brand{
font-size:.88rem;
margin-right:.5rem;
}

.custom-navbar .navbar-toggler{
padding:.25rem .5rem;
}

}

@media(prefers-reduced-motion:reduce){

.pbh-nav-phone{
transition:opacity .2s ease, visibility 0s linear .2s;
transform:none;
}

}