/* ============================================================================
   OLC SHARED BRAND CSS  --  /site/olc-brand.css
   Single source for the brand chrome + component styling. Loaded by /site
   pages (via header.php) AND by the WooCommerce cart/checkout (via the
   olc-store-branding mu-plugin). Edit here -> updates everywhere.
   NOTE: no body{} layout rule here on purpose -- that stays page-side so it
   never disturbs the WooCommerce/Astra body on cart/checkout.
   ============================================================================ */
:root{ --olc-tan:#bc9c62; --olc-brown:#857455; --olc-dark:#453e2c; }

/* chrome font -- matches the site body font even where body isn't restyled (cart) */
.olc-banner, .olc-nav, footer.olc-footer{
  font-family:'Trebuchet MS','Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif;
}

.olc-banner{ background-color:var(--olc-brown); padding:16px 0 12px; }
.olc-banner .olc-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:0 16px; }
.olc-banner .olc-brand{ text-decoration:none; }
.olc-banner h1{ margin:0; color:#fff; font-weight:700; font-family:'Times New Roman',Times,serif; font-size:clamp(1.7rem,5vw,2.5rem); }
.olc-banner small{ display:block; color:#e9e2d3; text-align:center; padding-top:2px; font-family:'Times New Roman',Times,serif; }
/* CLICK-TO-CALL -- prominent for our phone-first, older contractor audience */
.olc-phone{ display:inline-block; color:#fff !important; font-weight:700; text-decoration:none;
            font-size:.875rem; padding:5px 12px; border:1px solid rgba(255,255,255,.55); border-radius:6px; white-space:nowrap; }
.olc-phone:hover{ background:#337ab7; border-color:#fff; }

/* brand nav -- plain CSS, NO Bootstrap dependency (works with or without BS loaded) */
.olc-nav{ background-color:var(--olc-tan); }
.olc-nav .olc-nav-inner{ display:flex; align-items:center; flex-wrap:wrap; }
.olc-nav a{ color:#fff; text-decoration:none; padding:10px 14px; display:inline-block; }
.olc-nav a:hover, .olc-nav a:focus{ background-color:#337ab7; color:#fff; }
.olc-nav a.active{ background-color:var(--olc-brown); color:#fff; }
.olc-nav .olc-nav-toggle{ display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:1.4rem; line-height:1; padding:8px 14px; cursor:pointer; }
.olc-nav .olc-nav-menu{ display:flex; align-items:center; flex-wrap:wrap; flex:1 1 auto; }
.olc-nav .olc-nav-cart{ margin-left:auto; }
@media (max-width:782px){
  .olc-nav .olc-nav-toggle{ display:inline-block; }
  .olc-nav .olc-nav-menu{ display:none; width:100%; flex-direction:column; align-items:stretch; }
  .olc-nav .olc-nav-menu.open{ display:flex; }
  .olc-nav .olc-nav-cart{ margin-left:0; }
}

.section-title{ color:var(--olc-brown); font-weight:700; }

/* shared picker-button styling (bare buttons, no card box) */
.board-btn-img{ max-width:334px; width:100%; height:auto; margin:10px auto; display:block; border-radius:6px; }
.board-link{ display:inline-block; }
.board-link .board-btn-img{ transition:transform .15s ease; }
.board-link:hover .board-btn-img{ transform:translateY(-3px); }

/* ===== contractor-page brand styling (matches the legacy sample pages) ===== */
.pkg-heading{ font-family:Arial,Helvetica,sans-serif; color:#669999; font-weight:700; font-size:1.1rem; }
.pkg-label{ color:#669999; font-weight:700; }
.pkg-price{ color:#8e1900; font-weight:700; font-size:12pt; }
.pkg-body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#333; line-height:20px; }
.pkg-body ul{ margin-bottom:.25rem; }
.pkg-hi{ color:#8e1900; font-weight:700; }
.btn-enroll{ font-family:Arial,Helvetica,sans-serif; font-size:13px; padding:4px 12px; background:#e7e7e7; border:2px outset #cfcfcf; border-radius:3px; color:#111; text-decoration:none; display:inline-block; cursor:pointer; }
.btn-enroll:hover{ background:#dcdcdc; color:#111; }
.btn-enroll:active{ border-style:inset; }
.req-box{ background:#e5e5e5; padding:14px 16px; border-radius:5px; }
.req-head{ font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-size:16pt; color:#4d4d4d; font-weight:normal; margin:0 0 10px; }
.req-table{ border-collapse:collapse; width:100%; font-family:Arial,Helvetica,sans-serif; font-size:13px; color:#333; }
.req-table th, .req-table td{ border:0; padding:7px 10px; vertical-align:top; text-align:left; }
.req-table th{ font-weight:700; width:30%; }
.req-table tr:nth-child(odd){ background:#e5e5e5; }

footer.olc-footer{ background-color:var(--olc-dark); color:#cfc8b9; padding:14px 8px; margin-top:auto; text-align:center; }
footer.olc-footer a{ color:#cfc8b9; text-decoration:none; } footer.olc-footer a:hover{ color:#fff; }