/*
Theme Name: UFO Pizza
Theme URI: https://ufopizza.ca
Description: Child theme of Twenty Twenty-Five for ufopizza.ca — the marketing site in front of the SimplyDine ordering app at /order. Core blocks only; an SEO plugin may own titles, meta and sitemaps.
Author: SimplyDine
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ufopizza
*/

/* Everything a viewer can restyle lives in theme.json; this file only carries
   the component classes the page content references. */

.ufo-eyebrow {
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--small);
}

/* night sky: the navy sections carry a faint starfield (pure CSS, generated
   once by the build note in wp/README.md — no image request). The background
   colour comes from the block. */
.ufo-stars {
  background-image:
    radial-gradient(2px 2px at 402px 64px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 874px 93px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 204px 478px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 268px 427px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 103px 262px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 108px 370px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 626px 270px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 214px 32px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 634px 345px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 209px 283px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 817px 543px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 531px 582px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 750px 237px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 851px 52px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 594px 335px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 807px 572px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 823px 298px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 365px 112px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 492px 286px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 455px 448px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 860px 297px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 751px 583px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 686px 521px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 661px 93px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 677px 256px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 862px 253px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 513px 110px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 178px 251px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 192px 86px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 248px 387px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 849px 478px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 408px 549px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 856px 141px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 399px 211px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 535px 523px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 68px 565px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 187px 391px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 303px 276px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 894px 101px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 62px 11px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 436px 569px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 781px 321px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 424px 407px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 378px 562px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 500px 555px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 444px 315px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 9px 405px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 96px 389px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 395px 229px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 310px 416px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 585px 20px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 756px 535px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 592px 308px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 296px 130px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 94px 248px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 206px 218px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 888px 480px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 705px 499px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 513px 142px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 743px 261px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 619px 519px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 697px 117px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 576px 336px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 668px 586px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 298px 121px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 740px 464px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 681px 498px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 483px 462px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 890px 13px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 827px 111px, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(2px 2px at 305px 134px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 679px 380px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 397px 440px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 529px 216px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 323px 325px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 394px 59px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 654px 331px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 267px 264px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 688px 167px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 537px 336px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 399px 134px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 511px 135px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 49px 136px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 11px 236px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 225px 47px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 26px 422px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 565px 299px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 316px 176px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 694px 486px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 180px 78px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 314px 234px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 693px 232px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 250px 40px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 198px 65px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 637px 78px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 552px 310px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 48px 345px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 615px 422px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 388px 122px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 181px 377px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 602px 464px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 475px 181px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 61px 84px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 378px 129px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 290px 274px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 294px 132px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 338px 226px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 21px 49px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(2px 2px at 350px 274px, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 482px 435px, rgba(255,255,255,0.45) 50%, transparent 100%);
  background-size: 900px 600px, 700px 500px;
  background-repeat: repeat;
}

/* category / feature cards — a white tile with the photo bleeding to the edges */
.ufo-card {
  background: var(--wp--preset--color--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 22, 51, 0.10);
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ufo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 22, 51, 0.16);
}
.ufo-card .wp-block-image img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.ufo-card > :not(.wp-block-image) {
  margin-left: var(--wp--preset--spacing--40);
  margin-right: var(--wp--preset--spacing--40);
}
.ufo-card > .wp-block-image + * {
  margin-top: var(--wp--preset--spacing--40);
}
.ufo-card > :last-child {
  margin-bottom: var(--wp--preset--spacing--40);
}
.ufo-card-link {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--small);
}

/* loyalty tiers: a big number on a translucent card, on the navy band */
.ufo-tier {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 174, 239, 0.35);
  border-radius: 16px;
  height: 100%;
}
.ufo-tier h3 {
  font-size: var(--wp--preset--font-size--xx-large);
  color: var(--wp--preset--color--saucer);
}

/* gallery: uniform 4:3 crops in a grid */
.ufo-gallery .wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.ufo-gallery .wp-block-image { margin: 0; }

/* header brand: the saucer (from assets/img/logo-full.png) + a straight
   U.F.O. PIZZA wordmark in Righteous with the logo's red/white/navy strokes because the legacy wide
   logo.png carries a baked-in white background. The block pins an inline
   width, so width:auto needs the !important to keep the aspect ratio. */
.ufo-brand img { display: block; height: 68px; width: auto !important; max-width: none; }
@media (max-width: 781px) {
  .ufo-brand img { height: 44px; }
  .ufo-order-cta .wp-block-button__link { padding: 12px 18px; }
  header > .wp-block-group.alignfull { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 480px) {
  .ufo-brand img { height: 36px; }
  .ufo-order-cta .wp-block-button__link { padding: 11px 14px; font-size: 0.8rem; letter-spacing: 0.04em; }
  header .wp-block-group.alignfull > .wp-block-group { gap: 10px; }
}
@media (max-width: 400px) {
  .ufo-brand img { height: 30px; }
  header .wp-block-group.alignfull { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 340px) {
  .ufo-brand img { height: 26px; }
  .ufo-order-cta .wp-block-button__link { padding: 10px 10px; }
}

/* header: the button never wraps; the phone numbers only show where there is
   room for them (the button is the tap target everywhere else) */
.ufo-order-cta .wp-block-button__link { white-space: nowrap; }
.ufo-phone { white-space: nowrap; }
@media (max-width: 1439px) {
  .ufo-phone { display: none; }
}
@media (max-width: 781px) {
  .ufo-card .wp-block-image img { height: 160px; }
}

/* hours grid */
.ufo-hours {
  border-top: 2px solid var(--wp--preset--color--saucer);
  padding-top: var(--wp--preset--spacing--30);
}
.ufo-hours td { padding: 4px 24px 4px 0; border: 0; }
.ufo-hours td:first-child { font-weight: 700; }

/* map embed */
.ufo-map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: 12px; }

/* nav links: uppercase, spaced, never wrapping mid-label */
.ufo-nav .wp-block-navigation-item__content {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.ufo-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--flame-yellow);
}

/* location cards on the home page + contact page */
.ufo-store {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  height: 100%;
}