/*
Theme Name: BrickBuilder
Theme URI: https://example.com/brickbuilder
Author: ChatGPT
Author URI: https://example.com
Description: A brick-inspired WordPress theme for showcasing custom building creations and step-by-step instructions. Includes Parts List and Steps blocks, printable build pages, Build Gallery template, PDF downloads, and LEGO-style block patterns. Compatible with WordPress 6.4+.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brickbuilder
Tags: blog, portfolio, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, translation-ready, accessibility-ready
*/

/* =========
   BrickBuilder – Base Styles
   Brick look is generic; no brand logos included.
   ========= */

:root{
  --bb-bg: #0b1020;
  --bb-surface: #111a33;
  --bb-surface-2: #182652;
  --bb-text: #eaf0ff;
  --bb-muted: #b8c2e6;
  --bb-accent: #ffcc00;
  --bb-accent-2: #ff4d4d;
  --bb-border: rgba(255,255,255,.10);
  --bb-shadow: 0 14px 40px rgba(0,0,0,.35);
  --bb-radius: 18px;
  --bb-radius-small: 12px;
  --bb-max: 1100px;
  --bb-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--bb-font);
  background: radial-gradient(80% 120% at 10% 0%, #1a2a5a 0%, var(--bb-bg) 55%, #050815 100%);
  color: var(--bb-text);
  line-height: 1.65;
}

/* Subtle stud pattern background */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.06) 0 3px, transparent 4px),
    radial-gradient(circle at 36px 36px, rgba(255,255,255,.05) 0 2px, transparent 3px);
  background-size: 48px 48px;
  opacity:.35;
  pointer-events:none;
  z-index:-1;
}

a{color:var(--bb-accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; border-radius: var(--bb-radius-small)}

.bb-container{
  width:min(100% - 2rem, var(--bb-max));
  margin-inline:auto;
}

.bb-skip-link{
  position:absolute;
  top:-40px; left:0;
  background:var(--bb-accent);
  color:#111;
  padding:.75rem 1rem;
  z-index:9999;
  border-radius: 0 0 12px 0;
}
.bb-skip-link:focus{top:0}

.bb-header{
  position:sticky;
  top:0;
  backdrop-filter: blur(12px);
  background: rgba(17,26,51,.65);
  border-bottom: 1px solid var(--bb-border);
  z-index: 50;
}

.bb-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: 1rem 0;
}

.bb-brand{
  display:flex; align-items:center; gap:.85rem;
  min-width: 180px;
}

.bb-logo-badge{
  width:44px; height:44px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.35) 0 6px, rgba(255,255,255,.10) 7px, transparent 8px),
    linear-gradient(135deg, var(--bb-accent-2), var(--bb-accent));
  box-shadow: var(--bb-shadow);
  border:1px solid rgba(255,255,255,.18);
}

.bb-site-title{
  font-size: 1.1rem;
  margin:0;
  letter-spacing:.2px;
}
.bb-site-tagline{
  margin:0;
  color:var(--bb-muted);
  font-size:.86rem;
}

.bb-nav{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.bb-nav a{
  color: var(--bb-text);
  padding: .55rem .8rem;
  border-radius: 999px;
  border:1px solid transparent;
}
.bb-nav a:hover{
  text-decoration:none;
  background: rgba(255,255,255,.06);
  border-color: var(--bb-border);
}
.bb-nav .current-menu-item > a,
.bb-nav .current_page_item > a{
  background: rgba(255,204,0,.14);
  border-color: rgba(255,204,0,.35);
  color: var(--bb-accent);
}

.bb-main{ padding: 2rem 0 3rem; }

.bb-grid{
  display:grid;
  grid-template-columns: 1.6fr .8fr;
  gap: 1.5rem;
}
@media (max-width: 900px){
  .bb-grid{grid-template-columns:1fr}
}

.bb-card{
  background: rgba(17,26,51,.82);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow);
  overflow:hidden;
}

.bb-card-inner{padding: 1.4rem}

.bb-meta{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  color: var(--bb-muted);
  font-size: .9rem;
}

.bb-title{
  margin: .25rem 0 .6rem;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  letter-spacing:.2px;
}
.bb-excerpt{color: var(--bb-muted); margin:0}

.bb-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,77,77,.95), rgba(255,204,0,.95));
  color:#10131f;
  border:1px solid rgba(255,255,255,.18);
  font-weight: 650;
  box-shadow: 0 10px 26px rgba(255,204,0,.14);
}
.bb-button:hover{filter: brightness(1.05); text-decoration:none}

.bb-button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .65rem .95rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--bb-text);
  border:1px solid var(--bb-border);
}
.bb-button-secondary:hover{background: rgba(255,255,255,.10); text-decoration:none}

.bb-footer{
  border-top: 1px solid var(--bb-border);
  padding: 2rem 0;
  color: var(--bb-muted);
}

.bb-widget-title{
  margin:0 0 .6rem;
  font-size: 1.05rem;
}
.widget{margin-bottom: 1.25rem}
.widget ul{padding-left:1.15rem}
.widget a{color:var(--bb-text)}

.bb-pagination{
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:space-between;
  margin-top: 1rem;
}
.bb-pagination a{
  display:inline-block;
  padding:.55rem .85rem;
  border:1px solid var(--bb-border);
  border-radius: 999px;
  color: var(--bb-text);
  background: rgba(255,255,255,.04);
}
.bb-pagination a:hover{background: rgba(255,255,255,.08); text-decoration:none}

.bb-search{ display:flex; gap:.6rem; align-items:center; }
.bb-search input[type="search"]{
  width: 220px;
  max-width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--bb-border);
  color: var(--bb-text);
  padding:.6rem .75rem;
  border-radius: 999px;
}
.bb-search input[type="search"]::placeholder{color: rgba(234,240,255,.55)}
.bb-search button{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--bb-border);
  color: var(--bb-text);
  padding:.6rem .85rem;
  border-radius: 999px;
  cursor:pointer;
}
.bb-search button:hover{background: rgba(255,255,255,.10)}

.bb-instructions{
  border-left: 4px solid rgba(255,204,0,.65);
  padding-left: 1rem;
  margin: 1.25rem 0;
  color: var(--bb-muted);
}
.bb-instructions strong{color: var(--bb-text)}

.bb-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin: .75rem 0 1rem;
}

/* Build gallery grid */
.bb-gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 980px){ .bb-gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 620px){ .bb-gallery{grid-template-columns:1fr} }

/* Gutenberg block styles */
.wp-block-brickbuilder-parts-list,
.wp-block-brickbuilder-steps{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}

.bb-parts-title,
.bb-steps-title{
  margin: 0 0 .75rem;
  font-size: 1.15rem;
  letter-spacing:.2px;
}

.bb-parts-table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 14px;
}
.bb-parts-table th,
.bb-parts-table td{
  text-align:left;
  padding:.6rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.bb-parts-table th{
  color: var(--bb-muted);
  font-weight: 700;
  font-size: .92rem;
}

.bb-steps-ol{
  margin:0;
  padding-left: 1.35rem;
}
.bb-steps-ol > li{
  margin: .55rem 0;
  color: var(--bb-text);
}
.bb-steps-ol > li p{margin:.25rem 0}
.bb-step-note{
  color: var(--bb-muted);
  font-size: .95rem;
}

/* Print-friendly view */
@media print{
  .bb-header, .bb-footer, aside, .bb-actions, .bb-search { display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  body:before{ display:none !important; }
  .bb-card{ box-shadow:none !important; border: 1px solid #ddd !important; background:#fff !important; }
  a{ color:#000 !important; text-decoration:none !important; }
}