/**
  Theme Name: PhoneShop v8
  Theme URI: http://thephoneshop.net.au
  Version: 11.0
  Author: Michael Keiller
  Tags: Telstra, ThePhoneShop, Peace of Mind Data, June 2019
  Description:FlexPlans. This is the theme of thephoneshop.net.au created by Michael Keiller based on Bootstrap Framework v5.3
*/


body{




}

/* Sticky footer: header.php opens .site-wrap/.site-content, footer.php closes them.
   The footer sits at the bottom of the window on short pages and follows the content on long ones. */
.site-wrap{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.site-content{
	flex: 1 0 auto;
}

/* Logged-in admin bar. header.php doesn't call wp_head(), so WordPress never adds its own
   offset and the bar covers the sticky nav. body_class() supplies .admin-bar. */
body.admin-bar{
	--admin-bar-h: 32px;
	padding-top: var(--admin-bar-h);
}
body.admin-bar .site-wrap{
	min-height: calc(100vh - var(--admin-bar-h));
	min-height: calc(100dvh - var(--admin-bar-h));
}
body.admin-bar .navbar.sticky-top{
	top: var(--admin-bar-h);
}
@media (max-width: 782px){
	body.admin-bar{ --admin-bar-h: 46px; }
}
@media (max-width: 600px){
	/* the admin bar scrolls away on small screens, so the nav sticks to the very top */
	body.admin-bar .navbar.sticky-top{ top: 0; }
}

a {outline : none;}
img {border : 0;}
img {outline : none;}

/* Images inserted from the WordPress editor shrink to fit narrow screens instead of forcing sideways scrolling */
img[class*="wp-image-"]{
	max-width: 100%;
	height: auto;
}

  .metaslider .caption-wrap{
	position: relative !important;
	background: none !important;
	padding: 1px !important;
	}
	
	.metaslider .captain{
		padding: 0px !important;
		color: #ffffff;
	}
	
	
	.metaslider .caption{
		padding: 0px !important;
	}
	
	
.alignleft {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
}
.alignright {
	float:right;
	margin-left:1em;
	margin-bottom:1em;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	/* optional rounded corners for browsers that support it */
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}




/* ME MAKING MODIFICATIONS *//* ME MAKING MODIFICATIONS *//* ME MAKING MODIFICATIONS *//* ME MAKING MODIFICATIONS */
		
		
		div.domtab{
/* 			padding:0 3em; */
			width:760px;
			font-size:90%;
			
		}
		ul.domtabs{
			float:left;
			width:100%;
			margin:2em 0 0 0;
						margin-top: 0px;	
						
			list-style:none;			
		}
		ul.domtabs li{
			float:left;
/* 			padding:0 .5em 0 0; */
		}
		ul.domtabs a:link,
		ul.domtabs a:visited,
		ul.domtabs a:active,
		ul.domtabs a:hover{
			width:5em;
			padding:.2em 1em;
			display:block;
/* 			background:#666; */
			color:#000000;
/* 			height:3em; */
			font-weight:bold;
			text-decoration:none;
/* 			border: 2px solid black; */
			font-size: large;
		}
		html>body ul.domtabs a:link,
		html>body ul.domtabs a:visited,
		html>body ul.domtabs a:active,
		html>body ul.domtabs a:hover{

/* 			min-height:3em; */
		}
		ul.domtabs a:hover{
			
		}
		div.domtab div{
			clear:both;
			width:auto;
			
			color:#000000;
/* 			padding:1em 3em; */
		}
		

		
	
		
		
		ul.domtabs li.active a:link,
		ul.domtabs li.active a:visited,
		ul.domtabs li.active a:active,
		ul.domtabs li.active a:hover{
			
			color:#000000;
		}
		#domtabprintview{
			float:right;
/* 			padding-right:1em; */
			text-align:right;
		}
		#domtabprintview a:link,
		#domtabprintview a:visited,
		#domtabprintview a:active,
		#domtabprintview a:hover{
			color:#fff;
		}

		pre{
			font-size:1.2em;
/* 			padding:1em; */
		}
		div.domtab div a:link,
		div.domtab div a:visited,
		div.domtab div a:active
		{
			color:#fff;
			display:block;

			font-weight:bold;
			font-size:1.3em;
		}
		div.domtab div h2 a,
		div.domtab div h2 a:hover,
		div.domtab div h2 a:active
		{
			color:#cfc;
			display:inline;
			padding:0;
			font-weight:normal;
			font-size:1em;
		}
		
		
		.print{ display: none;}
		
        ul{list-style-type: none;}


.colordot{
	-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 10px;
border: solid 1px #000000;
width: 15px; 
height: 15px;
margin-bottom:5px;
}

.colordot.white{background-color: #E6E6E6}
.colordot.blue{background-color: #85C7FD}
.colordot.green{background-color: #B8F397}
.colordot.pink{background-color: #FD8A95}
.colordot.yellow{background-color: #FEF495}
.colordot.gold{background-color: #CFC0AD;}
.colordot.silver{background-color: #C8C8C8}
.colordot.slate{background-color: #807F84}
.colordot.black{background-color: #333333}
.colordot.purple{background-color: #421F97}
.colordot.darkred{background-color: #BC2B38}
.colordot.darkblue{background-color: #0B4E95}


/* Google Colors */
        #bluelabel{color: #33B5E5;}
		#blueL{background-color: #33B5E5;text-align: center;color: #ffffff;}
		#blueD{background-color: #0099CC;text-align: center;color: #ffffff;width: 150px;}
		
		.colors.blue.text{color: #33B5E5;}
		.colors.blue.light{background-color: #33B5E5;text-align: center;color: #ffffff;}
		.colors.blue.dark{background-color: #0099CC;text-align: center;color: #ffffff;}
		
		#purplelabel{color: #AA66CC;}
		#purpleL{background-color: #AA66CC;text-align: center;color: #ffffff;}
		#purpleD{background-color: #9933CC;text-align: center;color: #ffffff;width: 150px;}
		
		.colors.purple.text{color: #AA66CC;}
		.colors.purple.light{background-color: #AA66CC;text-align: center;color: #ffffff;}
		.colors.purple.dark{background-color: #9933CC;text-align: center;color: #ffffff;}
		
        #greenlabel{color: #99CC00;}
		#greenL{background-color: #99CC00;text-align: center;color: #ffffff;}
		#greenD{background-color: #669900;text-align: center;color: #ffffff;width: 150px;}
		
		.colors.green.text{color: #99CC00;}
		.colors.green.light{background-color: #99CC00;text-align: center;color: #ffffff;}
		.colors.green.dark{background-color: #669900;text-align: center;color: #ffffff;}
		
        #yellowlabel{color: #FFBB33;}
		#yellowL{background-color: #FFBB33;;text-align: center;color: #ffffff;}
		#yellowD{background-color: #ff8800;;text-align: center;color: #ffffff;width: 150px;}
		
		.colors.yellow.text{color: #FFBB33;}
		.colors.yellow.light{background-color: #FFBB33;;text-align: center;color: #ffffff;}
		.colors.yellow.dark{background-color: #ff8800;;text-align: center;color: #ffffff;}
		
        #redlabel{color: #FF4444;}
		#redL{background-color: #FF4444;text-align: center;color: #ffffff;}
		#redD{background-color: #CC0000;text-align: center;color: #ffffff;width: 150px;}
		
		.colors.red.text{color: #FF4444;}
		.colors.red.light{background-color: #FF4444;text-align: center;color: #ffffff;}
		.colors.red.dark{background-color: #CC0000;text-align: center;color: #ffffff;}
		
/* New Colors */
		.newcolors.blue.light{background-color: #5D9CEC;text-align: center;color: #ffffff;}
		.newcolors.blue.dark{background-color: #4A89DC;text-align: center;color: #ffffff;}

		.newcolors.green.light{background-color: #A0D468;text-align: center;color: #ffffff;}
		.newcolors.green.dark{background-color: #26A65B;text-align: center;color: #ffffff;}

		.newcolors.orange.light{background-color: #F6BB42;text-align: center;color: #ffffff;}
		.newcolors.orange.dark{background-color: #F9690E;text-align: center;color: #ffffff;}

		.newcolors.red.light{background-color: #FF4444;text-align: center;color: #ffffff;}
		.newcolors.red.dark{background-color: #CC0000;text-align: center;color: #ffffff;}
		
/* Old Colors */
		
		#darkorange60{background-color: #eb4f32;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}
		#lightorange60{background-color: #ef802e;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}

		#darkgreen80{background-color: #00b15a;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}
		#lightgreen80{background-color: #97ca62;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}

		#darkblue100{background-color: #3063b1;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}
		#lightblue100{background-color: #44cafa;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}
		
		#darkpink130{background-color: #69005f;color: #ffffff;width: 100px;height: 100px;text-align: center;color: #ffffff;font-weight:bold;}
		#lightpink130{background-color: #e30e8a;color: #ffffff;height: 100px;text-align: center;color: #ffffff;font-weight:bold; }	



/* ==========================================================================
   LOOK REFRESH (v8)
   Colours come from the logo, the navy nav bar and the teal-to-green gradient
   already used in the homepage slider and plan cards.
   ========================================================================== */
:root{
	--pps-navy: #273744;
	--pps-navy-dark: #1b2731;
	--pps-amber: #f8a008;
	--pps-teal: #1a7184;
	--pps-teal-dark: #135866;
	--pps-sky: #4da8c7;
	--pps-green: #9cc572;
	--pps-bg: #eef1f5;
	--pps-ink: #1f2a33;
	--pps-muted: #5b6b78;
	--pps-line: rgba(31, 42, 51, .10);
	--pps-radius: 14px;
	--pps-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .07);
	--pps-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .13);
	--pps-gradient: linear-gradient(90deg, #4da8c7, #68b5a9 55%, #9cc572);

	/* Bootstrap's own link colours */
	--bs-link-color: #1a7184;
	--bs-link-color-rgb: 26, 113, 132;
	--bs-link-hover-color: #135866;
	--bs-link-hover-color-rgb: 19, 88, 102;
}

html body{
	background-color: var(--pps-bg);
	color: var(--pps-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Space under the nav bar on inner pages (the homepage slider sits flush against it) */
body:not(.home) .site-content{ padding-top: 1.5rem; }

/* --- Navigation ---------------------------------------------------------- */
.navbar.sticky-top{
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	border-bottom: 3px solid transparent;
	border-image: var(--pps-gradient) 1;
}
.navbar .navbar-nav .nav-link{
	color: rgba(255, 255, 255, .82) !important;
	background-color: transparent;
	font-weight: 500;
	padding: .55rem .85rem;
	border-radius: 8px;
	transition: color .15s ease, background-color .15s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible{
	color: #fff !important;
	background-color: rgba(255, 255, 255, .09);
}
/* WordPress puts .active on the <li>, not the link, so style it from there */
.navbar .navbar-nav li.active > .nav-link,
.navbar .navbar-nav li.current-menu-item > .nav-link{
	color: #fff !important;
	box-shadow: inset 0 -3px 0 var(--pps-amber);
	border-radius: 8px 8px 0 0;
}
@media (max-width: 767.98px){
	.navbar .navbar-nav{ padding: .5rem 0 .75rem; }
	.navbar .navbar-nav li.active > .nav-link,
	.navbar .navbar-nav li.current-menu-item > .nav-link{
		box-shadow: inset 3px 0 0 var(--pps-amber);
		border-radius: 0 8px 8px 0;
	}
}

/* --- Cards --------------------------------------------------------------- */
.card{
	--bs-card-border-color: var(--pps-line);
	--bs-card-border-radius: var(--pps-radius);
	--bs-card-inner-border-radius: calc(var(--pps-radius) - 1px);
	--bs-card-cap-bg: #fff;
	box-shadow: var(--pps-shadow);
}
a.card{
	transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover{
	transform: translateY(-2px);
	box-shadow: var(--pps-shadow-hover);
}
/* Plan cards are one connected strip: one shadow for the group, not one per card */
.card-group{ border-radius: var(--pps-radius); box-shadow: var(--pps-shadow); }
.card-group{ margin-bottom: 1rem; }
.card-group > .card{ box-shadow: none; margin-bottom: 0 !important; }
.card-group > .card.border-dark{ border-color: var(--pps-line) !important; }
@media (prefers-reduced-motion: reduce){
	a.card{ transition: none; }
	a.card:hover{ transform: none; }
}

/* --- Tabs / pills (Post-Paid | Pre-Paid | Unlocked, etc.) ----------------- */
.nav-pills{ gap: .5rem; }
.nav-pills .nav-item{ padding-left: 0; padding-right: 0; }
.nav-pills .nav-link{
	background-color: #fff;
	color: var(--pps-navy) !important;
	border: 1px solid var(--pps-line);
	border-radius: 999px;
	padding: .5rem 1.15rem;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nav-pills .nav-link:hover{ border-color: var(--pps-teal); }
.nav-pills .nav-link.active{
	background-color: var(--pps-teal);
	border-color: var(--pps-teal);
	color: #fff !important;
}

/* --- Page content (ordinary WordPress pages: NBN, Repairs, ...) ------------ */
.site-content .post :is(h1, h2, h3, h4){
	color: var(--pps-navy);
	font-weight: 600;
	letter-spacing: -.01em;
}
.site-content details{ border-radius: 10px; }
/* Pages written in the WordPress editor arrive as a bare white .card-body with no padding of its own */
.site-content .post > .card-body{
	padding: 1.75rem 1.25rem;
	border-radius: var(--pps-radius);
	box-shadow: var(--pps-shadow);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer{
	background-color: var(--pps-navy);
	border-top: 3px solid transparent;
	border-image: var(--pps-gradient) 1;
	margin-top: 2rem !important;
}
.site-footer a{ color: #fff; }
.site-footer .footer-phone{ text-decoration: none; font-weight: 600; }
.site-footer .footer-phone:hover{ text-decoration: underline; }
.site-footer-bar{ background-color: var(--pps-navy-dark); color: rgba(255, 255, 255, .85); }


/* ==========================================================================
   ABOUT PAGE (page-about.php)
   ========================================================================== */
.about-page{ --about-gap: clamp(2.25rem, 5vw, 3.5rem); }
.about-page [id]{ scroll-margin-top: 5.5rem; }
.about-page > section{ margin-bottom: var(--about-gap); }

.about-hero{
	color: #fff;
	border-radius: var(--pps-radius);
	box-shadow: var(--pps-shadow);
	padding: clamp(1.75rem, 5vw, 3.25rem);
	background:
		radial-gradient(900px 340px at 100% 0%, rgba(77, 168, 199, .35), transparent 70%),
		linear-gradient(135deg, var(--pps-navy-dark), var(--pps-navy));
	position: relative;
	overflow: hidden;
}
.about-hero::after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--pps-gradient);
}
.about-eyebrow{
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .78rem;
	font-weight: 600;
	color: var(--pps-amber);
	margin-bottom: .6rem;
}
.about-hero h1{
	color: #fff;
	font-weight: 700;
	letter-spacing: -.02em;
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.1;
}
.about-hero .lead{ color: rgba(255, 255, 255, .88); max-width: 34rem; }
.about-hero-photo{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	border: 3px solid rgba(255, 255, 255, .85);
}
.about-hero .btn-light{ color: var(--pps-navy); font-weight: 600; }
.about-hero .btn-outline-light{ font-weight: 600; }

.about-heading{
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--pps-navy);
	margin-bottom: 1.1rem;
	padding-bottom: .6rem;
	position: relative;
}
.about-heading::after{
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 3rem; height: 4px;
	border-radius: 4px;
	background: var(--pps-amber);
}
.about-story p{ font-size: 1.05rem; color: #34434f; max-width: 40rem; }

.about-timeline{ list-style: none; margin: 0; padding: .25rem 0 0 0; position: relative; }
.about-timeline::before{
	content: "";
	position: absolute;
	left: .45rem; top: .6rem; bottom: .6rem;
	width: 2px;
	background: var(--pps-line);
}
.about-timeline li{ position: relative; padding: 0 0 1.15rem 1.9rem; }
.about-timeline li:last-child{ padding-bottom: 0; }
.about-timeline li::before{
	content: "";
	position: absolute;
	left: 0; top: .35rem;
	width: 1rem; height: 1rem;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--pps-teal);
}
.about-timeline strong{ display: block; color: var(--pps-navy); }
.about-timeline span{ color: var(--pps-muted); font-size: .95rem; }

.about-tile{
	display: block;
	height: 100%;
	padding: 1.25rem 1.25rem 1.1rem;
	text-decoration: none;
	color: var(--pps-ink);
	background: #fff;
	border: 1px solid var(--pps-line);
	border-top: 4px solid var(--pps-teal);
	border-radius: var(--pps-radius);
	box-shadow: var(--pps-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
.about-tile:hover{ transform: translateY(-2px); box-shadow: var(--pps-shadow-hover); color: var(--pps-ink); }
.about-tile h3{ font-size: 1.15rem; font-weight: 700; color: var(--pps-navy); margin-bottom: .35rem; }
.about-tile p{ color: var(--pps-muted); font-size: .95rem; margin-bottom: .75rem; }
.about-tile .about-more{ color: var(--pps-teal); font-weight: 600; font-size: .92rem; }
.about-tile.tone-1{ border-top-color: #68b5a9; }
.about-tile.tone-2{ border-top-color: var(--pps-amber); }

.about-person{
	text-align: center;
	height: 100%;
	padding: 1.4rem 1rem 1.2rem;
	background: #fff;
	border: 1px solid var(--pps-line);
	border-radius: var(--pps-radius);
	box-shadow: var(--pps-shadow);
}
.about-avatar{
	width: 4rem; height: 4rem;
	margin: 0 auto .85rem;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem; font-weight: 700; color: #fff;
	background: var(--pps-teal);
}
.about-avatar.tone-1{ background: var(--pps-navy); }
.about-avatar.tone-2{ background: #3b9aa8; }
.about-avatar.tone-3{ background: #c9830a; }
.about-avatar.tone-4{ background: #5a9a3d; }
.about-person h3{ font-size: 1.1rem; font-weight: 700; color: var(--pps-navy); margin-bottom: .1rem; }
.about-person .about-role{ color: var(--pps-muted); font-size: .92rem; margin-bottom: .5rem; }
.about-person a{ font-size: .88rem; word-break: break-word; }
@media (max-width: 575.98px){
	/* one card per row on phones: avatar on the left, details on the right, so emails never break mid-word */
	.about-person{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		align-items: center;
		text-align: left;
		padding: 1rem 1.1rem;
	}
	.about-person .about-avatar{ grid-row: 1 / span 3; margin: 0; }
	.about-person .about-role{ margin-bottom: .15rem; }
}

.about-visit{
	background: #fff;
	border: 1px solid var(--pps-line);
	border-radius: var(--pps-radius);
	box-shadow: var(--pps-shadow);
	padding: 1.5rem;
	height: 100%;
}
.about-visit dl{ margin: 0 0 1.1rem; }
.about-visit dt{
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--pps-muted);
	font-weight: 600;
	margin-top: .9rem;
}
.about-visit dt:first-child{ margin-top: 0; }
.about-visit dd{ margin: 0; font-size: 1.05rem; }
.about-map{
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
	border-radius: var(--pps-radius);
	box-shadow: var(--pps-shadow);
	background: #dfe5ea;
}