/* ===== TA1 Computer Shop site CSS: the shop's own look. Loaded after layout.css on every page. ===== */

/* tagline: sits under the site title in the header (layout.css); hidden on phones */
@media (max-width:600px){.site-header .ta1-tagline{display:none}}

/* dark footer: charcoal columns, black base line (layout lives in layout.css) */
.site-middle-footer-wrap{background:#2f2f2f;color:#d6d6d6}
.site-footer a{color:#fff;text-decoration:none;border-radius:4px}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:2px;text-decoration:underline;text-underline-offset:3px}
.site-footer .footer-heading{color:#fff;border-bottom:1px solid rgba(255,255,255,.16)}
.site-footer .footer-name{color:#fff}
.site-footer .footer-icon{color:#bdbdbd}
.site-footer [aria-current=page]{text-decoration:underline;text-underline-offset:3px}
.site-bottom-footer-wrap{background:#111;color:#bdbdbd}

/* ===== softer ui ===== */

/* gentler headings */
h1,h2,h3,h4{font-weight:600}

/* rounded buttons */
.wp-block-button__link{border-radius:8px}

/* rounded images in content (full-bleed hero images stay square) */
.entry-content .wp-block-image img{border-radius:12px}
.wp-block-media-text:not(.alignfull) .wp-block-media-text__media img{border-radius:12px}

/* rounded highlight boxes with a whisper of shadow */
.entry-content .wp-block-group.has-background{border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}

/* a touch more breathing room in text */
.entry-content p{line-height:1.7}

/* ===== home route cards: the three ways in (grid in layout.css) ===== */
.ta1-routes .wp-block-column{background:#f7fafc;border-radius:12px;padding:22px 24px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.ta1-route-label{color:#4a5568}
/* "Nearby:" links to the town pages in the "Worth the trip" card */
.ta1-towns{font-size:15px;color:#4a5568;margin:0 0 12px}
.ta1-towns a{color:inherit}

/* ===== home hero (media-text block with className "ta1-hero") ===== */
.ta1-hero .ta1-eyebrow{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 10px;color:#d6d6d6}
@media (min-width:782px){.ta1-hero .ta1-eyebrow{font-size:14px}}
.ta1-hero :focus-visible{outline-color:#fff}
@media (max-width:599px){
  /* phones: eyebrow, headline, intro, photo, buttons. The content cell dissolves (display:contents) so its
     children join the media-text grid and the photo can sit between the intro and the buttons; the cell's
     28px 20px padding is re-created on the children. Desktop (600px+) is untouched. */
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__content{display:contents}
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__content>*{grid-column:1;padding-left:20px;padding-right:20px}
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__content>.ta1-eyebrow{grid-row:1;padding-top:28px}
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__content>h1{grid-row:2}
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__content>p:not(.ta1-eyebrow){grid-row:3;margin-bottom:0}
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__media{grid-column:1;grid-row:4;margin:18px 0}
  .ta1-hero.is-stacked-on-mobile>.wp-block-media-text__content>.wp-block-buttons{grid-row:5;padding-bottom:28px;margin-bottom:0}
  .ta1-hero .wp-block-button{flex:1 1 100%}
  .ta1-hero .wp-block-button__link{display:block;width:100%}
}
/* ===== floating WhatsApp button (templates/base.html, every page): a green circle on phones, a pill with the word from 782px ===== */
.ta1-wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:center;gap:8px;width:56px;height:56px;border-radius:999px;background:#25d366;color:#0b141a;box-shadow:0 2px 8px rgba(0,0,0,.25);text-decoration:none;font-weight:600;line-height:1}
.ta1-wa-float-icon{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ta1-wa-float-text{display:none}
@media (hover:hover){.ta1-wa-float:hover{filter:brightness(.92);color:#0b141a}}
.ta1-wa-float:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #2b6cb0}
@media (min-width:782px){
  .ta1-wa-float{width:auto;padding:0 20px 0 16px}
  .ta1-wa-float-text{display:inline}
}
/* phones: room under the copyright line so it can scroll clear of the floating button */
@media (max-width:781px){.site-bottom-footer-wrap{padding-bottom:72px}}

/* phones: no extra spacer gaps between home sections (the flow margin is enough) */
@media (max-width:599px){.page-home .wp-block-spacer{display:none}}

/* ===== sell your mac quote form (templates/sell-your-mac-form.html) ===== */
.ta1-form{display:grid;gap:16px;position:relative}
.ta1-form label{display:block;font-weight:600}
.ta1-form input[type=text],.ta1-form input[type=email],.ta1-form input[type=tel],.ta1-form select,.ta1-form textarea{width:100%;padding:10px 12px;border:1px solid #cbd5e0;border-radius:8px;font:inherit;font-weight:400;background:#fff}
.ta1-form input[type=file]{font-weight:400}
.ta1-form .ta1-choice{display:block;margin:4px 0;font-weight:400}
.ta1-form fieldset{border:1px solid #cbd5e0;border-radius:8px;padding:12px 16px;margin:0}
.ta1-form legend{font-weight:600;padding:0 6px}
.ta1-form .ta1-submit{background:#2f2f2f;color:#fff;border:0;border-radius:8px;padding:12px 24px;font:inherit;font-weight:600;cursor:pointer}
.ta1-two-col{display:grid;gap:16px}
@media (min-width:700px){.ta1-two-col{grid-template-columns:1fr 1fr}}

/* form details added for the static build (was handled by Contact Form 7 markup) */
.ta1-form label input,.ta1-form label select,.ta1-form label textarea{margin-top:6px}
.ta1-form .ta1-choice{display:flex;align-items:flex-start;gap:10px;padding:2px 0}
.ta1-form .ta1-choice input{margin:5px 0 0;width:18px;height:18px;flex:none;accent-color:#2f2f2f}
.ta1-form .ta1-submit:hover{background:#111}
.ta1-form .ta1-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ta1-form-note{background:#f7fafc;border-radius:12px;padding:16px 18px}
.ta1-form-note p{margin-bottom:12px}
.ta1-form-placeholder{background:#fdf3df;color:#4a3a12;border-left:5px solid #c99a2e;border-radius:12px;padding:16px 18px}

/* "New" pill on a header menu item (site.json nav item "badge"); header only, never the footer */
.ta1-badge{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:#2f2f2f;color:#fff;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:1.3;vertical-align:middle}
.site-nav a.has-badge{justify-content:flex-start}

/* ===== repair pages (mac, laptop/pc, chromebook): every section is a panel, so the eye can separate the modules ===== */
.page-mac-repairs .entry-content>.wp-block-group,.page-laptop-pc-repairs .entry-content>.wp-block-group,.page-chromebook-repairs .entry-content>.wp-block-group{margin-top:28px;margin-bottom:28px}
.page-mac-repairs .entry-content>h2,.page-laptop-pc-repairs .entry-content>h2,.page-chromebook-repairs .entry-content>h2{margin-top:40px}
@media (min-width:782px){.page-mac-repairs .wp-block-group h2,.page-laptop-pc-repairs .wp-block-group h2,.page-chromebook-repairs .wp-block-group h2{font-size:1.5em}}
.page-mac-repairs .wp-block-list li,.page-laptop-pc-repairs .wp-block-list li,.page-chromebook-repairs .wp-block-list li{margin-bottom:6px}

/* white step cards inside a light panel (columns block with className "ta1-steps") */
.wp-block-columns.ta1-steps .wp-block-column{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ta1-steps h3{margin-top:0;font-size:1.05em}

/* a row of light panels (columns block with className "ta1-panels"), same look as the home route cards */
.wp-block-columns.ta1-panels .wp-block-column{background:#f7fafc;border-radius:12px;padding:22px 24px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.ta1-panels h3{margin-top:0}

/* ===== showcase cards (columns block with className "ta1-cards ta1-cards-3 ta1-showcase"): a square photo flush to the top of a light panel, text below ===== */
.ta1-showcase .wp-block-column{background:#f7fafc;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column}
.ta1-showcase .wp-block-image{margin:0}
.ta1-showcase .wp-block-image img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:0}
.ta1-showcase h3{margin:16px 20px 8px;font-size:1.1em}
.ta1-showcase p{margin:0 20px 12px}
.ta1-showcase .wp-block-column>p:last-child{margin-bottom:20px}

/* ===== mac parts (parts_pages.py): chips, stock badges, gallery, variant rows ===== */
.ta1-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ta1-chips-label{font-weight:600;color:#4a5568}
.ta1-chip{display:inline-block;padding:4px 12px;border-radius:999px;background:#f7fafc;border:1px solid #cbd5e0;color:#2f2f2f;text-decoration:none;font-weight:600;font-size:.95em}
.ta1-chip:hover{background:#2f2f2f;color:#fff}
.ta1-chip-plain,.ta1-chip-plain:hover{background:#f7fafc;color:#2f2f2f;cursor:default}
.ta1-stock{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;vertical-align:middle}
.ta1-stock-in{background:#e3f4e8;color:#1f6b3a}
.ta1-stock-out{background:#ececec;color:#555}
.ta1-showcase .wp-block-buttons{margin:auto 20px 20px;padding-top:4px}
.ta1-part-family{color:#4a5568}
.ta1-breadcrumb{font-size:.95em;color:#4a5568;margin-bottom:12px}
.ta1-breadcrumb a{color:inherit}
.ta1-part-meta{display:flex;flex-wrap:wrap;gap:8px}
.ta1-gallery{display:grid;gap:16px;margin-bottom:24px}
@media (min-width:600px){.ta1-gallery{grid-template-columns:1fr 1fr}}
.ta1-gallery .wp-block-image{margin:0}
.ta1-variants{display:grid;gap:12px;margin-bottom:24px}
.ta1-variant{background:#f7fafc;border-radius:12px;padding:16px 20px;box-shadow:0 1px 4px rgba(0,0,0,.05);display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
@media (min-width:782px){.ta1-variant{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr)}}
.ta1-variant-label{font-weight:600;font-size:1.1em}
.ta1-variant-price{font-weight:600;font-size:1.15em}
.ta1-variant-note{font-weight:400;font-size:.95em;color:#4a5568}
.ta1-variant-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ta1-variant-email{font-weight:600}
.page-mac-parts .entry-content>.wp-block-group,.page-mac-part .entry-content>.wp-block-group,.page-mac-parts-tag .entry-content>.wp-block-group{margin-top:28px;margin-bottom:28px}
.ta1-showcase h3 a{text-decoration:none}
.ta1-showcase h3 a:hover{text-decoration:underline}