/* icandynw.com (root hub + careers) - layered on top of the shared retail/assets/css/style.css so
   colors, header, footer, buttons, and form basics all match the rest of the site automatically.
   This file only adds what's specific to the hub landing page and the careers application form. */

.hub-hero { background: linear-gradient(135deg,#ffb6d9,#e0709e 55%,#a978d6); text-align: center; padding: 56px 24px 46px; }
.hub-hero-badge { height: 74px; width: 74px; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; box-shadow: 0 4px 12px rgba(0,0,0,.25); border: 3px solid #fff; animation: hub-pop .6s ease; }
.hub-hero h1 { color: #fff; font-size: 32px; letter-spacing: 1px; margin: 0 0 10px; }
.hub-hero p { color: #fff0f5; font-size: 16px; max-width: 520px; margin: 0 auto; line-height: 1.6; }

@keyframes hub-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hub-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* Large animated link tiles */
.hub-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 980px; margin: 0 auto; padding: 48px 24px 60px; }
.hub-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; padding: 20px 16px;
  color: #fff; box-shadow: 0 14px 30px rgba(43,25,20,.2);
  opacity: 0; animation: hub-rise .55s ease forwards;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hub-tile:hover { transform: translateY(-6px) scale(1.045); box-shadow: 0 20px 42px rgba(43,25,20,.32); }
.hub-tile:nth-child(1) { animation-delay: .02s; }
.hub-tile:nth-child(2) { animation-delay: .09s; }
.hub-tile:nth-child(3) { animation-delay: .16s; }
.hub-tile:nth-child(4) { animation-delay: .23s; }
.hub-tile:nth-child(5) { animation-delay: .30s; }
.hub-tile:nth-child(6) { animation-delay: .37s; }
.hub-tile:nth-child(7) { animation-delay: .44s; }
.hub-tile:nth-child(8) { animation-delay: .51s; }
.hub-tile:nth-child(9) { animation-delay: .58s; }

.hub-tile-icon { font-size: 46px; line-height: 1; margin-bottom: 12px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.2)); transition: transform .3s ease; }
.hub-tile:hover .hub-tile-icon { transform: scale(1.15) rotate(-6deg); }
/* Custom per-tile picture uploaded in Admin > Site Images, shown above the title/subtitle in
   place of the emoji. Sized to a fixed share of the card's height via object-fit:cover (not a
   full-bleed background) so a picture of any size or aspect ratio - tall, wide, square - always
   leaves the title/subtitle their own space below it and can never crowd out or hide the text. */
.hub-tile-has-img { padding: 14px 14px 18px; }
.hub-tile-bg-img { width: 100%; flex: 0 0 64%; min-height: 0; object-fit: cover; border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,.22); margin-bottom: 12px; transition: transform .3s ease; }
.hub-tile:hover .hub-tile-bg-img { transform: scale(1.04); }
.hub-tile-title { font-size: 17px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.hub-tile-sub { font-size: 12.5px; opacity: .92; margin-top: 6px; line-height: 1.4; }
.hub-tile-ext { position: absolute; top: 12px; right: 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; background: rgba(255,255,255,.25); padding: 3px 8px; border-radius: 20px; }

/* Points down at the newsletter sign-up form - lives right above the form itself (not the tile
   above, which can be a full row of tiles higher up the page) so it always reads as "sign up here"
   no matter how far the Newsletter tile is from the form. Shown/hidden by JS (hover or click on the
   tile, or the "Sign Up for Our Newsletter" nav link) - see the script at the bottom of index.php. */
.hub-tile-arrow {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: -14px; transform: translateX(-50%) scale(.6);
  font-size: clamp(70px, 22vw, 220px); line-height: 1; color: #e0709e; z-index: 1;
  text-shadow: 0 6px 16px rgba(43,25,20,.35);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.hub-tile-arrow.is-active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: hub-arrow-bounce 1s ease-in-out infinite;
}
@keyframes hub-arrow-bounce {
  0%, 100% { transform: translateX(-50%) scale(1) translateY(0); }
  50% { transform: translateX(-50%) scale(1) translateY(14px); }
}

.hub-tile-1 { background: linear-gradient(160deg,#e0709e,#c9578a); }
.hub-tile-2 { background: linear-gradient(160deg,#b26f26,#8a5417); }
.hub-tile-3 { background: linear-gradient(160deg,#7bc4a0,#4a9c78); }
.hub-tile-4 { background: linear-gradient(160deg,#9b6fd1,#6f4aa8); }
.hub-tile-5 { background: linear-gradient(160deg,#5aa9e6,#3778b0); }
.hub-tile-6 { background: linear-gradient(160deg,#f0834f,#c0602e); }
.hub-tile-7 { background: linear-gradient(160deg,#2b2b2b,#464646); }
.hub-tile-8 { background: linear-gradient(160deg,#e0709e,#a978d6); }
.hub-tile-9 { background: linear-gradient(160deg,#5ac8b0,#2f8f79); }

@media (max-width: 980px) { .hub-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hub-tiles { grid-template-columns: 1fr; gap: 18px; } .hub-tile { aspect-ratio: auto; padding: 30px 20px; } }

/* Newsletter section at the bottom of the hub page */
.hub-newsletter { position: relative; max-width: 560px; margin: 0 auto 70px; padding: 0 24px; text-align: center; }
.hub-newsletter .card { padding: 34px 30px; }
.hub-newsletter h2 { margin: 0 0 8px; font-size: 22px; }
.hub-newsletter p { color: var(--ic-muted); font-size: 14.5px; margin: 0 0 20px; line-height: 1.6; }
.hub-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hub-newsletter-form input[type="email"], .hub-newsletter-form input[type="text"] { flex: 1; min-width: 180px; padding: 11px 16px; border: 1px solid var(--ic-border); border-radius: 30px; font-size: 14px; font-family: inherit; }
.hub-newsletter-form input:focus { outline: none; border-color: var(--ic-pink); }

/* ---- Location pages (Gresham / Troutdale) ---- */
.loc-hero { position: relative; height: 340px; background: linear-gradient(135deg,#ffb6d9,#e0709e 55%,#a978d6) center/cover; display: flex; align-items: flex-end; }
.loc-hero-overlay { width: 100%; padding: 34px 24px; background: linear-gradient(180deg, rgba(20,10,15,0) 0%, rgba(20,10,15,.72) 100%); color: #fff; text-align: center; }
.loc-hero-overlay h1 { margin: 0 0 6px; font-size: 34px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.loc-hero-overlay p { margin: 0; font-size: 15px; opacity: .95; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.loc-content { max-width: 760px; margin: 0 auto; padding: 44px 24px 70px; }
.loc-section { margin-bottom: 40px; }
.loc-section h2 { font-size: 21px; margin: 0 0 14px; color: var(--ic-pink-dark); }
.loc-section p { line-height: 1.75; color: var(--ic-text); margin: 0 0 14px; }
.loc-placeholder { color: var(--ic-muted); font-style: italic; }
.loc-events-list { display: flex; flex-direction: column; gap: 10px; }
.loc-event-card { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--ic-border); border-radius: 10px; }
.loc-event-date { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ic-pink-dark); white-space: nowrap; }
.loc-event-title { font-size: 14.5px; }
.loc-gallery-hint { font-size: 12.5px; color: var(--ic-muted); margin: -6px 0 12px; }
.loc-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.loc-gallery-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 12px rgba(43,25,20,.18); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.loc-gallery-img:hover, .loc-gallery-img:focus-visible { transform: scale(1.035); box-shadow: 0 8px 20px rgba(43,25,20,.3); outline: none; }
.loc-extra-gallery { margin-top: 12px; }
@media (max-width: 560px) { .loc-hero { height: 240px; } .loc-hero-overlay h1 { font-size: 26px; } .loc-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* Full-size photo viewer for the location-page galleries (main 6 + Additional Pictures) - shows
   the clicked photo at full size with its caption, if one was set in Admin > Gresham/Troutdale Page. */
.loc-lightbox { position: fixed; inset: 0; background: rgba(20,10,15,.9); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 50px 20px; }
.loc-lightbox[hidden] { display: none; }
.loc-lightbox-inner { max-width: 90vw; max-height: 85vh; text-align: center; }
.loc-lightbox-inner img { max-width: 90vw; max-height: 74vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.loc-lightbox-caption { color: #fff; margin: 16px auto 0; font-size: 14.5px; max-width: 640px; line-height: 1.6; }
.loc-lightbox-close { position: absolute; top: 16px; right: 24px; background: none; border: none; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; padding: 6px 10px; }
.loc-lightbox-close:hover { color: var(--ic-pink); }

/* ---- Careers application form ---- */
.app-wrap { max-width: 720px; margin: 0 auto; padding: 40px 24px 70px; }
.app-intro { text-align: center; margin-bottom: 32px; }
.app-intro h1 { margin: 0 0 10px; }
.app-intro p { color: var(--ic-muted); font-size: 15px; line-height: 1.7; max-width: 560px; margin: 0 auto; }
.app-section { margin-bottom: 30px; }
.app-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ic-pink-dark); border-bottom: 1px solid var(--ic-border); padding-bottom: 10px; margin: 0 0 18px; }
.app-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .app-grid-2 { grid-template-columns: 1fr; } }
.app-req { color: var(--ic-pink-dark); }
.app-check-list { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.app-check-list label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13.5px; }
.app-check-list input { width: auto; }
.app-radio-row { display: flex; gap: 20px; flex-wrap: wrap; }
.app-radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13.5px; }
.app-radio-row input { width: auto; }
.app-job-row { border: 1px solid var(--ic-border); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.app-job-row .app-grid-2 { margin-bottom: 12px; }
.app-file-hint { font-size: 12.5px; color: var(--ic-muted); margin-top: 6px; line-height: 1.6; }
.app-file-hint a { color: var(--ic-pink-dark); text-decoration: underline; }
.app-certify { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; font-weight: 400; }
.app-certify input { width: auto; margin-top: 3px; }
.app-submit { text-align: center; margin-top: 30px; }
.app-submit .btn { padding: 13px 44px; font-size: 13.5px; }
.app-error-summary { background: #fdeaea; color: #c0392b; border-radius: 8px; padding: 14px 18px; margin-bottom: 24px; font-size: 13.5px; }
.app-error-summary ul { margin: 6px 0 0; padding-left: 20px; }

.app-thanks { max-width: 560px; margin: 70px auto; padding: 0 24px; text-align: center; }
.app-thanks .hub-tile-icon-static { font-size: 52px; margin-bottom: 14px; }
.app-thanks h1 { margin: 0 0 12px; }
.app-thanks p { color: var(--ic-muted); font-size: 15px; line-height: 1.7; }